107 lines
3.6 KiB
HTML
107 lines
3.6 KiB
HTML
|
---
|
||
|
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>
|