convert about.md to html page
updated layout ready for inserting a cover image. removed now unneeded divwrap shortcode. added baseurl shortcode.
This commit is contained in:
parent
2e73a45c60
commit
95717ddda7
|
|
@ -1,6 +1,63 @@
|
||||||
.page.about {
|
.page.about {
|
||||||
|
&.header-expanded .wrapper {
|
||||||
|
.navigation {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
background-color: #707070;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
z-index: 5;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 9.6rem;
|
||||||
|
height: calc(100vh - 1.6em);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.3em;
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
margin-bottom: 8.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-hint {
|
||||||
|
position: absolute;
|
||||||
|
right: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateX(50%);
|
||||||
|
font-size: 1em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-scroll {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-svg {
|
||||||
|
height: 3em;
|
||||||
|
width: 3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
.content {
|
.content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
@ -8,25 +65,16 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column > p,
|
p {
|
||||||
.column > ul,
|
|
||||||
article > p,
|
|
||||||
article > ul {
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column > p,
|
|
||||||
article > p {
|
|
||||||
margin: 3rem;
|
margin: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li p {
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2.2rem;
|
font-size: 1.4em;
|
||||||
line-height: 2.6rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
|
@ -59,4 +107,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
---
|
||||||
|
title: "About Me"
|
||||||
|
date: 2020-01-31T12:54:00Z
|
||||||
|
---
|
||||||
|
<div id="js-intro" class="intro">
|
||||||
|
<p>
|
||||||
|
I am a UK based, freelance, front-end <strong>Web Developer</strong>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I work with small businesses to <strong>Build</strong> and <strong>Grow</strong> their online presence.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="more-hint">
|
||||||
|
<svg class="more-svg" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><p>I create <strong><a href="{{< baseurl >}}tags/bespoke">Bespoke Websites</a></strong> using the latest technologies.</p></li>
|
||||||
|
<li><p>I work with a number of <strong><a href="{{< baseurl >}}tags/cms">Content Management Systems</a></strong>, including <strong><a href="{{< baseurl >}}tags/wordpress">WordPress</a></strong>.</p></li>
|
||||||
|
<li><p>I develop custom <strong>Themes</strong> and <strong>Plugins</strong>.</p></li>
|
||||||
|
<li><p>I advise and develop <strong><a href="{{< baseurl >}}tags/ecommerce">eCommerce Solutions</a></strong> for your online business.</p></li>
|
||||||
|
<li><p>I customise <strong><a href="{{< baseurl >}}tags/woocommerce">WooCommerce</a></strong> to fit specific business needs.</p></li>
|
||||||
|
<li><p>I integrate <strong>Social Media</strong> accounts with websites.</p></li>
|
||||||
|
<li><p>I <strong>Manage</strong> websites, taking care of <strong>Backups</strong>, <strong>Updates</strong> and other essential tasks.</p></li>
|
||||||
|
<li><p>I turn old, tired websites into <strong><a href="{{< baseurl >}}posts/leopold">Fresh and Modern</a></strong> sites.</p></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>All Of My Work Is</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><p>Fully optimised for on-site <strong>SEO</strong>.</p></li>
|
||||||
|
<li><p>Built with <strong>Security</strong> in mind.</p></li>
|
||||||
|
<li><p><strong>Mobile Friendly</strong> and responsive.</p></li>
|
||||||
|
<li><p>Built for <strong>Performance</strong> and <strong>Speed</strong>.</p></li>
|
||||||
|
<li><p><strong>Accessible</strong> and standards compliant.</p></li>
|
||||||
|
<li><p>Built with <strong>Semantic</strong>, <strong>Clean</strong>, <strong>Maintainable</strong> code.</p></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>I Enjoy Working With</h2>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<h3>Core Web Technologies</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><p>HTML</p></li>
|
||||||
|
<li><p>CSS</p></li>
|
||||||
|
<li><p>JavaScript</p></li>
|
||||||
|
<li><p>PHP</p></li>
|
||||||
|
<li><p>SVG</p></li>
|
||||||
|
<li><p>WebGL</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h3>Content Management Systems</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><p><a href="{{< baseurl >}}tags/october-cms/">OctoberCMS</a></p></li>
|
||||||
|
<li><p><a href="{{< baseurl >}}tags/wordpress">WordPress</a></p></li>
|
||||||
|
<li><p>Hugo</p></li>
|
||||||
|
<li><p>Gatsby</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h3>Modern Frameworks and Libraries</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><p><a href="{{< baseurl >}}tags/vue">Vue.js</a></p></li>
|
||||||
|
<li><p>React.js</p></li>
|
||||||
|
<li><p>Anime.js</p></li>
|
||||||
|
<li><p>GSAP</p></li>
|
||||||
|
<li><p>Tailwind</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h3>Legacy and Other Web Technologies</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><p>jQuery</p></li>
|
||||||
|
<li><p>Bootstrap</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var introEl = document.getElementById('js-intro');
|
||||||
|
var headerEl = document.querySelector('section > article > header');
|
||||||
|
|
||||||
|
if (introEl && headerEl) {
|
||||||
|
var navEl = document.querySelector('main > nav');
|
||||||
|
if (navEl) {
|
||||||
|
var navHeight = navEl.offsetHeight;
|
||||||
|
navEl.style.marginBottom = -1 * navHeight + "px";
|
||||||
|
headerEl.style.paddingTop = navHeight / 2 + "px";
|
||||||
|
headerEl.style.paddingBottom = navHeight / 2 + "px";
|
||||||
|
headerEl.appendChild(introEl);
|
||||||
|
document.body.classList.add('header-expanded');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
---
|
|
||||||
title: "About Me"
|
|
||||||
date: 2020-01-31T12:54:00Z
|
|
||||||
---
|
|
||||||
|
|
||||||
I am a UK based, freelance, front-end **Web Developer**.
|
|
||||||
|
|
||||||
* I work with small businesses to **Build** and **Grow** their online presence.
|
|
||||||
* I create **[Bespoke Websites](/tags/bespoke)** using the latest technologies.
|
|
||||||
* I work with a number of **[Content Management Systems](/tags/cms)**, including **[WordPress](/tags/wordpress)**.
|
|
||||||
* I develop custom **Themes** and **Plugins**.
|
|
||||||
* I advise and develop **[eCommerce Solutions](/tags/ecommerce)** for your online business.
|
|
||||||
* I customise **[WooCommerce](/tags/woocommerce)** to fit specific business needs.
|
|
||||||
* I integrate **Social Media** accounts with websites.
|
|
||||||
* I **Manage** websites, taking care of **Backups**, **Updates** and other essential tasks.
|
|
||||||
* I turn old, tired websites into **[Fresh and Modern](/posts/leopold)** sites.
|
|
||||||
|
|
||||||
## All Of My Work Is
|
|
||||||
|
|
||||||
* Fully optimised for on-site **SEO**.
|
|
||||||
* Built with **Security** in mind.
|
|
||||||
* **Mobile Friendly** and responsive.
|
|
||||||
* Built for **Performance** and **Speed**.
|
|
||||||
* **Accessible** and standards compliant.
|
|
||||||
* Built with **Semantic**, **Clean**, **Maintainable** code.
|
|
||||||
|
|
||||||
## I Enjoy Working With
|
|
||||||
|
|
||||||
{{% divwrap row %}}
|
|
||||||
{{% divwrap "column" %}}
|
|
||||||
### Core Web Technologies
|
|
||||||
|
|
||||||
* HTML
|
|
||||||
* CSS
|
|
||||||
* JavaScript
|
|
||||||
* PHP
|
|
||||||
* SVG
|
|
||||||
* WebGL
|
|
||||||
{{% /divwrap %}}
|
|
||||||
|
|
||||||
{{% divwrap "column" %}}
|
|
||||||
### Content Management Systems
|
|
||||||
|
|
||||||
* [OctoberCMS](/tags/october-cms/)
|
|
||||||
* [WordPress](/tags/wordpress)
|
|
||||||
* Hugo
|
|
||||||
* Gatsby
|
|
||||||
{{% /divwrap %}}
|
|
||||||
|
|
||||||
{{% divwrap "column" %}}
|
|
||||||
### Modern Frameworks and Libraries
|
|
||||||
|
|
||||||
* [Vue.js](/tags/vue)
|
|
||||||
* React.js
|
|
||||||
* Anime.js
|
|
||||||
* GSAP
|
|
||||||
* Tailwind
|
|
||||||
{{% /divwrap %}}
|
|
||||||
|
|
||||||
{{% /divwrap %}}
|
|
||||||
|
|
||||||
{{% divwrap "column" %}}
|
|
||||||
### Legacy and Other Web Technologies
|
|
||||||
|
|
||||||
* jQuery
|
|
||||||
* Bootstrap
|
|
||||||
{{% /divwrap %}}
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
{{ .Page.Site.BaseURL }}
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<div class="{{ .Get 0 }}" >
|
|
||||||
{{ .Inner }}
|
|
||||||
</div>
|
|
||||||
Reference in New Issue