setup for dokku
This commit is contained in:
parent
3eb1ef5156
commit
daae9aea40
159
blog/404.html
159
blog/404.html
|
|
@ -1,159 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="404 Page not found"/>
|
||||
<meta name="twitter:description" content=""/>
|
||||
|
||||
<meta property="og:title" content="404 Page not found" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/404.html" />
|
||||
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/404.html">
|
||||
|
||||
<title>RayElliottDev</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/404.html">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="404 colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container centered">
|
||||
<div class="error">
|
||||
<h1>404</h1>
|
||||
<h2>Page Not Found</h2>
|
||||
<p>Sorry, this page does not exist.<br />You can head back to <a href="https://rayelliott.dev/blog/">homepage</a>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,231 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="About Me"/>
|
||||
<meta name="twitter:description" content="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 using the latest technologies.
|
||||
I turn old, tired websites into Fresh and Modern sites.
|
||||
I work with a number of Content Management Systems, including WordPress.
|
||||
I develop custom Themes and Plugins.
|
||||
I advise and develop eCommerce Solutions for your online business."/>
|
||||
|
||||
<meta property="og:title" content="About Me" />
|
||||
<meta property="og:description" content="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 using the latest technologies.
|
||||
I turn old, tired websites into Fresh and Modern sites.
|
||||
I work with a number of Content Management Systems, including WordPress.
|
||||
I develop custom Themes and Plugins.
|
||||
I advise and develop eCommerce Solutions for your online business." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/about/" />
|
||||
<meta property="article:published_time" content="2020-01-31T12:54:00+00:00" />
|
||||
<meta property="article:modified_time" content="2020-01-31T12:54:00+00:00" />
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/about/">
|
||||
|
||||
<title>
|
||||
About Me · RayElliottDev
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/about/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="page about colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container page">
|
||||
<article>
|
||||
<header>
|
||||
<h1>About Me</h1>
|
||||
</header>
|
||||
|
||||
<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="https://rayelliott.dev/blog/
|
||||
tags/bespoke">Bespoke Websites</a></strong> using the latest technologies.</p></li>
|
||||
<li><p>I turn old, tired websites into <strong><a href="https://rayelliott.dev/blog/
|
||||
posts/leopold">Fresh and Modern</a></strong> sites.</p></li>
|
||||
<li><p>I work with a number of <strong><a href="https://rayelliott.dev/blog/
|
||||
tags/cms">Content Management Systems</a></strong>, including <strong><a href="https://rayelliott.dev/blog/
|
||||
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="https://rayelliott.dev/blog/
|
||||
tags/ecommerce">eCommerce Solutions</a></strong> for your online business.</p></li>
|
||||
<li><p>I customise <strong><a href="https://rayelliott.dev/blog/
|
||||
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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Categories"/>
|
||||
<meta name="twitter:description" content=""/>
|
||||
|
||||
<meta property="og:title" content="Categories" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/categories/" />
|
||||
<meta property="og:updated_time" content="2020-02-08T12:27:18+00:00" />
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/categories/">
|
||||
|
||||
<title>Categories · RayElliottDev</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/categories/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" href="https://rayelliott.dev/blog/categories/index.xml" title="RayElliottDev" />
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="taxonomyterm colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container list">
|
||||
<h1 class="title">Categories</h1><ul>
|
||||
|
||||
<li>
|
||||
<span class="date">February 8, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on RayElliottDev</title>
|
||||
<link>https://rayelliott.dev/blog/categories/</link>
|
||||
<description>Recent content in Categories on RayElliottDev</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Sat, 08 Feb 2020 12:27:18 +0000</lastBuildDate>
|
||||
|
||||
<atom:link href="https://rayelliott.dev/blog/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Portfolio</title>
|
||||
<link>https://rayelliott.dev/blog/categories/portfolio/</link>
|
||||
<pubDate>Sat, 08 Feb 2020 12:27:18 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/categories/portfolio/</guid>
|
||||
<description></description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<!DOCTYPE html><html><head><title>https://rayelliott.dev/blog/categories/</title><link rel="canonical" href="https://rayelliott.dev/blog/categories/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://rayelliott.dev/blog/categories/" /></head></html>
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Portfolio"/>
|
||||
<meta name="twitter:description" content=""/>
|
||||
|
||||
<meta property="og:title" content="Portfolio" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/categories/portfolio/" />
|
||||
<meta property="og:updated_time" content="2020-02-08T12:27:18+00:00" />
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/categories/portfolio/">
|
||||
|
||||
<title>Category: Portfolio · RayElliottDev</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/categories/portfolio/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" href="https://rayelliott.dev/blog/categories/portfolio/index.xml" title="RayElliottDev" />
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="taxonomy colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container list">
|
||||
<h1 class="title">Portfolio</h1><div class="list-meta">
|
||||
<span class="meta-tag"><span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
|
||||
</svg>
|
||||
</span>Portfolio</span>
|
||||
</div><ul>
|
||||
|
||||
<li>
|
||||
<span class="date">February 8, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="date">February 1, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="date">January 20, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="date">December 29, 2019</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Portfolio on RayElliottDev</title>
|
||||
<link>https://rayelliott.dev/blog/categories/portfolio/</link>
|
||||
<description>Recent content in Portfolio on RayElliottDev</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Sat, 08 Feb 2020 12:27:18 +0000</lastBuildDate>
|
||||
|
||||
<atom:link href="https://rayelliott.dev/blog/categories/portfolio/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Flow Model Management</title>
|
||||
<link>https://rayelliott.dev/blog/posts/flowmm/</link>
|
||||
<pubDate>Sat, 08 Feb 2020 12:27:18 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/flowmm/</guid>
|
||||
<description>Flow Model Management is a fictitious modelling agency. They were created solely for the purpose of giving me a reason to create their website.
|
||||
However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
|
||||
And so, my discussions with the stakeholders began.
|
||||
It quickly became apparent that the primary purpose of the proposed website would be to provide an attractive and stylish platform that would encourage visiting candidates to apply to join.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Marc Leopold Photography</title>
|
||||
<link>https://rayelliott.dev/blog/posts/leopold/</link>
|
||||
<pubDate>Sat, 01 Feb 2020 18:54:46 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/leopold/</guid>
|
||||
<description>Marc Leopold is an apocryphal photographer and visual artist based in Chicago, USA. He recently decided his previous (and rather imaginary) website, whose purpose was to showcase his work, was beginning to look dated.
|
||||
He decided that it was time for a modern, up to date portfolio site.
|
||||
Being a photographer&rsquo;s portfolio site, the requirements are fairly basic. Aside from the portfolio items, we just need some brief background information and an outline of the services provided along with a contact form.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Charles Stantham Legal Services</title>
|
||||
<link>https://rayelliott.dev/blog/posts/stanthams/</link>
|
||||
<pubDate>Mon, 20 Jan 2020 18:55:00 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/stanthams/</guid>
|
||||
<description>Charles Stantham are a firm of made-up solicitors who decided they wanted me to make up a website for their firm.
|
||||
The site is a fairly basic brochure site with no particularly special requirements.
|
||||
And so, for this relatively simple site I decided that a ready made customisable theme would be used.
|
||||
The Theme The theme I chose, that would be a starting point for the site, was OceanWP.
|
||||
There were a number of reasons why using OceanWP is appropriate for a project such as this:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Giana Boutique</title>
|
||||
<link>https://rayelliott.dev/blog/posts/giana/</link>
|
||||
<pubDate>Sun, 29 Dec 2019 18:55:07 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/giana/</guid>
|
||||
<description>Now, this site, is one of the earliest I ever worked upon. It was my first time using WooCommerce and the second time using WordPress to build a site.
|
||||
It is the site of Giana Boutique, a fictitious, online ecommerce store.
|
||||
This was done quite some time ago. Very early on in my career as a web developer.
|
||||
For an ecommerce site, there was nothing special required. I used the WordPress plugin WooCommerce along with a pre-existing theme with a few modifications.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<!DOCTYPE html><html><head><title>https://rayelliott.dev/blog/categories/portfolio/</title><link rel="canonical" href="https://rayelliott.dev/blog/categories/portfolio/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://rayelliott.dev/blog/categories/portfolio/" /></head></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.page.about.header-expanded .wrapper .navigation{z-index:10}.page.about.header-expanded .wrapper::before{content:"";z-index:-1;display:block;position:absolute;width:100%;height:100%;top:0;left:0}.page.about.header-expanded .wrapper 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){.page.about.header-expanded .wrapper header{margin-bottom:8.4rem}}.page.about.header-expanded .wrapper .intro p{font-size:2.2rem;margin:.5rem 0}.page.about.header-expanded .wrapper h1{font-size:3.2rem;margin:.75rem}.page.about.header-expanded .wrapper .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}.page.about.header-expanded .wrapper .more-scroll{font-size:2em}.page.about.header-expanded .wrapper .more-svg{height:3em;width:3em}.page.about .content{text-align:center;font-size:1.3em}.page.about ul{padding-left:0;list-style:none}.page.about p{margin:3rem}.page.about li p{margin:2rem 0}.page.about h2{font-size:1.4em}.page.about h3{font-size:1.1em}.navigation .navigation-title{text-transform:none}.about .avatar img{width:14rem;border:3px solid #044958;padding:2px;transform:rotate(-2deg);-ms-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg)}body.colorscheme-dark .about .avatar img{border:2px solid #002e34;padding:0}@media(prefers-color-scheme:dark){.about .avatar img{border:2px solid #002e34;padding:0}}.content figure.svg>img{height:100%}.content figure.medium>img{max-width:30em;width:100%}.content figure>figcaption p{margin:2rem 0;text-align:inherit;font-style:inherit;font-size:inherit}.content figure>img{height:auto;width:auto}.content figure.icon-inline{display:flex;flex-direction:column}@media(max-width:500px){.content figure.icon-inline.sm-order-rev>figcaption{order:1;margin-top:-2rem}.content figure.icon-inline.sm-order-rev>img{order:2}.content figure.icon-inline>img{height:3.2em}}@media(min-width:500px){.content figure.icon-inline{flex-direction:row;align-items:center}.content figure.icon-inline>figcaption p{margin:0 0 0 2rem}.content figure.icon-inline.icon-right>figcaption p{order:1;margin:0 2rem 0 0}.content figure.icon-inline>img{height:4em;margin:0}.content figure.icon-inline.large>img{height:6em}.content figure.icon-inline.icon-right>img{order:2}}.content figure.icon-inline.flowmm-model-thumb>img{height:auto;width:100%;max-width:250px}@media(min-width:500px){.content figure.icon-inline.flowmm-model-thumb>img{height:12em;width:auto}}.oceanwp-icon>img{background-color:#e1f2fa;border-radius:6px}.content figure.logo{margin:3.2rem 0;height:2.4em}.content figure.logo>img{height:100%}.content figure.logo.large{height:7em}@media(min-width:500px){.content figure.logo.large{height:8em}}body.colorscheme-dark .logo.woocommerce{height:calc(2.4em + 32px)}body.colorscheme-dark .logo.woocommerce>img{background-color:#fafafa;border:solid 16px #fafafa;border-bottom-width:10px;border-radius:6px;margin-bottom:4rem}@media(prefers-color-scheme:dark){.logo.woocommerce{height:calc(2.4em + 32px)}.logo.woocommerce>img{background-color:#fafafa;border:solid 16px #fafafa;border-bottom-width:10px;border-radius:6px;margin-bottom:4rem}}.wp-icon>img{opacity:.7}@media(max-width:500px){.wp-icon>img{display:none}}@media(prefers-color-scheme:dark){.wp-icon>figcaption>p{margin-left:0}.wp-icon>img{display:none}}body.colorscheme-dark .wp-icon>figcaption>p{margin-left:0}body.colorscheme-dark .wp-icon>img{display:none}.cheat-october-list{display:none}.cheat-october-list+ul{margin-top:0;margin-bottom:0;padding-left:0}.cheat-october-list+ul>li{list-style:none}.cheat-october-list+ul>li>p:first-child{position:relative;margin-top:0;padding-left:40px}.cheat-october-list+ul>li>p:not(:first-child){padding-left:40px}.cheat-october-list+ul>li>p:first-child::before{content:"";position:absolute;display:block;top:.2em;bottom:.2em;left:0;right:0;background-size:contain;background-repeat:no-repeat;background-image:url(../images/logos/october-icon.png)}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 B |
Binary file not shown.
|
Before Width: | Height: | Size: 559 B |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
|
|
@ -1,7 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 298">
|
||||
<g fill-rule="nonzero" fill="none">
|
||||
<path d="M227.92099 82.07407l-13.6889 23.7037-46.8148-81.08641L23.7037 273.58025h97.3037c0 13.0912 10.61252 23.7037 23.70371 23.7037H23.70371c-8.46771 0-16.29145-4.52017-20.5246-11.85382-4.23315-7.33366-4.23272-16.36849.00114-23.70174L146.89383 12.83951c4.23415-7.33433 12.0596-11.85252 20.5284-11.85252 8.46878 0 16.29423 4.51819 20.52839 11.85252l39.97037 69.23456z" fill="#00C58E"/>
|
||||
<path d="M331.6642 261.7284l-90.05432-155.95062-13.6889-23.7037-13.68888 23.7037-90.04445 155.95061c-4.23385 7.33325-4.23428 16.36808-.00113 23.70174 4.23314 7.33365 12.05689 11.85382 20.5246 11.85382h166.4c8.46946 0 16.29644-4.51525 20.532-11.84955 4.23555-7.3343 4.23606-16.37123.00132-23.706h.01976zM144.7111 273.58024L227.921 129.48148l83.19012 144.09877h-166.4z" fill="#2F495E"/>
|
||||
<path d="M396.04938 285.4321c-4.23344 7.33254-12.05656 11.85185-20.52345 11.85185H311.1111c13.0912 0 23.7037-10.6125 23.7037-23.7037h40.66173L260.09877 73.74815l-18.4889 32.02963-13.68888-23.7037L239.5753 61.8963c4.23416-7.33433 12.0596-11.85252 20.5284-11.85252 8.46879 0 16.29423 4.51819 20.52839 11.85252l115.41728 199.8321c4.23426 7.33395 4.23426 16.36975 0 23.7037z" fill="#108775"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="556" height="98" viewBox="0 0 556 98"><g fill="none" fill-rule="evenodd"><path fill="#2E495E" d="M74.4 3.7c1 1.1 1.7 2.6 1.6 4.2v81.5c0 1.7-.6 3.4-1.8 4.7a6.2 6.2 0 0 1-4.6 1.9c-1 0-2-.2-3-.5a5 5 0 0 1-2.1-1.4L11.7 25.4V90a5.7 5.7 0 0 1-6 5.9c-1.5 0-3-.6-4-1.7A5.8 5.8 0 0 1 0 90.1V8.4C0 6.7.7 5 2 3.8A6 6 0 0 1 6.3 2c1 0 2.1.2 3 .6 1 .3 1.8 1 2.4 1.7l52.5 68.9V7.9a5.7 5.7 0 0 1 6-5.9c1.5 0 3 .5 4 1.7zM183.1 3.9c1.1 1.3 1.8 3 1.7 4.6v51.6c.1 6.6-1.5 13.2-4.7 19-3 5.6-7.5 10.2-13 13.3-5.6 3.3-12 5-18.6 4.9-6.5 0-13-1.6-18.8-4.8a34 34 0 0 1-13-13.2 38.6 38.6 0 0 1-4.7-19.1V8.6c0-1.7.6-3.4 2-4.6a6.7 6.7 0 0 1 9.3 0c1.2 1.2 1.9 2.8 1.9 4.6V60c-.1 4.4 1 8.7 3.2 12.6a23.2 23.2 0 0 0 20.1 11.7 24 24 0 0 0 24.1-24.3V8.6c0-1.7.5-3.4 1.6-4.7 1.2-1.3 2.8-2 4.5-1.9 1.7 0 3.3.7 4.4 1.9zM287 85.7a6.3 6.3 0 0 1 1.1 3.8c.1 1.7-.6 3.4-1.9 4.6a6.4 6.4 0 0 1-4.3 1.7c-2.1.1-4.1-1-5.3-2.7l-26-34.8L225 93.1a6.2 6.2 0 0 1-5.2 2.8c-1.6 0-3-.6-4.1-1.7-1-1-1.7-2.4-1.7-3.8 0-1.6.6-3.2 1.6-4.4l27.6-37.5-27.7-37.2a6.2 6.2 0 0 1 .5-8.4 6.3 6.3 0 0 1 7.4-1.2 6 6 0 0 1 2.4 2l25.8 34.6L277 4c1.1-1.7 3-2.8 5.1-3 1.6 0 3.2.8 4.3 2 1.1 1 1.8 2.5 1.9 4 0 1.5-.5 2.8-1.4 4l-28 37.2 28 37.5zM383.5 3.7c1.2 1.1 2 2.8 1.9 4.5 0 1.7-.7 3.3-2 4.4-1.2 1.1-2.9 1.7-4.6 1.6H355v75.4c0 1.7-.6 3.3-1.9 4.5a7.4 7.4 0 0 1-9.8 0 6.2 6.2 0 0 1-2-4.5V14.2h-23.8c-1.7 0-3.3-.5-4.6-1.7A5.9 5.9 0 0 1 311 8c0-1.6.6-3.2 1.8-4.3 1.3-1.2 3-1.8 4.6-1.7h61.4c1.7 0 3.4.5 4.7 1.7z"/><path fill="#00C48D" d="M412.7 93.6c-4.3-2.4-8-6-10.5-10.3-.7-1-1.1-2.3-1.2-3.6 0-1.7.7-3.3 2-4.4 1.1-1.2 2.6-1.8 4.2-2 2.4.3 4.6 1.5 6 3.4 3 5 8.4 8 14.1 7.8A17.2 17.2 0 0 0 445 67.3V8.5a6 6 0 0 1 2-4.6c1.3-1.2 3-1.9 4.7-1.9 1.8 0 3.5.6 4.8 1.8a6.3 6.3 0 0 1 1.8 4.6v59a29 29 0 0 1-15 26 31.2 31.2 0 0 1-30.5.2zM505.2 94c-5.3-2-10.2-5-14.4-9a7.2 7.2 0 0 1-2.8-5.4 6 6 0 0 1 2-4.4 6 6 0 0 1 4.3-1.9c1.5 0 2.8.5 3.9 1.5 3.2 3 7 5.5 11 7.3 4.2 1.6 8.6 2.4 13 2.4 5 .1 10-1.2 14.3-4 3.5-2 5.8-5.7 5.8-9.8.1-4.3-2.1-8.4-5.8-10.8a52 52 0 0 0-17.4-6.3c-9.2-2-16.3-5-21.3-9.3-5-4.3-7.4-10.3-7.4-17.9-.1-5 1.3-9.9 4.2-14 2.9-4 6.8-7.2 11.4-9.2a45.5 45.5 0 0 1 32.4-.5 33 33 0 0 1 12 7.1c1.8 1.4 3 3.5 3 5.7a6 6 0 0 1-1.8 4.3 5.7 5.7 0 0 1-4.4 2c-1 0-2.2-.4-3-1.1a32.1 32.1 0 0 0-21.4-8.2c-5-.3-10 1-14.3 3.6a11.9 11.9 0 0 0 0 19.8 50 50 0 0 0 15.8 6c5.9 1.1 11.6 3 17.1 5.3 4.2 1.9 7.8 4.8 10.3 8.6 2.6 4.4 3.8 9.3 3.6 14.4.1 5-1.4 9.8-4.3 13.8-3 4.2-7.2 7.4-12 9.4a49.8 49.8 0 0 1-33.9.6z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.32 170.02">
|
||||
<path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z"/>
|
||||
<path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 261 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
232
blog/index.html
232
blog/index.html
|
|
@ -1,232 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="RayElliottDev"/>
|
||||
<meta name="twitter:description" content=""/>
|
||||
|
||||
<meta property="og:title" content="RayElliottDev" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/" />
|
||||
<meta property="og:updated_time" content="2020-01-31T12:54:00+00:00" />
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/">
|
||||
|
||||
<title>RayElliottDev</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" href="https://rayelliott.dev/blog/index.xml" title="RayElliottDev" />
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="home colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container centered">
|
||||
<div class="about">
|
||||
|
||||
<div class="avatar"><img src="https://rayelliott.dev/blog/images/profile--bg-darker.jpg" alt="avatar"></div>
|
||||
|
||||
<h1>Ray Elliott</h1>
|
||||
<h2>Hello World!</h2>
|
||||
|
||||
<ul class="social-links">
|
||||
|
||||
|
||||
<li>
|
||||
<a class="social-link-icon social-link-icon--svg" href="https://git.rayelliott.dev" aria-label="Gitea" >
|
||||
|
||||
<svg viewBox="0 30 135 90">
|
||||
<g transform="translate(0 -154)">
|
||||
<path d="m27.71 195.15c-9.5466-0.0272-22.339 6.798-21.632 23.904 1.1055 26.729 25.457 29.208 35.192 29.423 1.068 5.0136 12.522 22.306 21.002 23.217h37.153c22.278-1.6678 38.961-75.757 26.593-76.038-46.782 2.4769-49.995 2.1384-88.6 0-2.4951-0.0266-5.9723-0.49474-9.7079-0.5054zm2.4913 9.4589c1.3514 13.693 3.5558 21.704 8.0182 33.943-11.383-1.5047-21.07-5.2244-22.852-19.11-0.95096-7.4112 2.3904-15.168 14.833-14.834z" fill="#609926" stroke="#428f29"/>
|
||||
</g>
|
||||
<g fill="#fff">
|
||||
<rect transform="rotate(25.915)" x="87.509" y="18.292" width="34.762" height="34.762" ry="5.4826"/>
|
||||
<path d="m79.805 57.359 3.2411 1.61v-23.713h-3.2627z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<circle transform="rotate(-19.796)" cx="49.065" cy="90.078" r="3.4745" fill="#609926"/>
|
||||
<circle transform="rotate(-19.796)" cx="36.81" cy="102.1" r="3.4745" fill="#609926"/>
|
||||
<circle transform="rotate(-19.796)" cx="46.484" cy="111.44" r="3.4745" fill="#609926"/>
|
||||
<rect transform="rotate(26.024)" x="97.333" y="18.062" width="2.6727" height="27.261" fill="#609926"/>
|
||||
<path d="m76.558 68.116c12.976 6.3954 13.013 4.1019 4.8909 20.907" fill="none" stroke="#609926" stroke-width="2.68"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a class="social-link-icon social-link-icon--svg" href="https://www.linkedin.com/in/rayelliottdev" aria-label="LinkedIn" >
|
||||
|
||||
|
||||
<svg viewbox="0 0 291 80" >
|
||||
<g transform="translate(-200.55198,-393.96227)">
|
||||
<g
|
||||
transform="matrix(1.018827,0,0,-1.018827,170.5996,498.03288)"
|
||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" >
|
||||
<path
|
||||
d="m 239.3298,95.036 c 0,2.96 2.4604,5.361 5.4956,5.361 l 63.376,0 c 3.0351,0 5.4956,-2.401 5.4956,-5.361 l 0,-64.117 c 0,-2.961 -2.4605,-5.361 -5.4956,-5.361 l -63.376,0 c -3.0352,0 -5.4956,2.4 -5.4956,5.361 l 0,64.117 z"
|
||||
style="fill:#006699;fill-opacity:1;fill-rule:nonzero;stroke:none" />
|
||||
<g style="fill:currentColor;fill-opacity:1;fill-rule:evenodd;stroke:none">
|
||||
<path d="m 31.1516,37.709 31.0356,0 0,10.189 -19.8042,0 0,38.874 -11.2314,0 0,-49.063 z" />
|
||||
<path
|
||||
d="m 77.9001,37.709 0,33.793 -11.2324,0 0,-33.793 11.2324,0 z m -5.6162,38.407 c 3.917,0 6.355,2.595 6.355,5.84 -0.073,3.315 -2.438,5.837 -6.2803,5.837 -3.8428,0 -6.355,-2.522 -6.355,-5.837 0,-3.245 2.4375,-5.84 6.207,-5.84 l 0.073,0 z" />
|
||||
<path
|
||||
d="m 83.1154,37.709 11.2325,0 0,18.872 c 0,1.01 0.073,2.019 0.3701,2.741 0.8115,2.017 2.6596,4.107 5.7627,4.107 4.0649,0 5.6909,-3.1 5.6909,-7.64 l 0,-18.08 11.2314,0 0,19.377 c 0,10.38 -5.542,15.21 -12.9321,15.21 -6.0591,0 -8.7197,-3.387 -10.1978,-5.694 l 0.075,0 0,4.9 -11.2325,0 c 0.1475,-3.171 0,-33.793 0,-33.793 z" />
|
||||
<path
|
||||
d="m 133.2487,86.772 -11.2329,0 0,-49.063 11.2329,0 0,10.956 2.8072,3.534 8.7939,-14.49 13.8179,0 -14.7783,20.977 12.9316,14.272 -13.5225,0 c 0,0 -9.2368,-12.769 -10.0498,-14.283 l 0,28.097 z" />
|
||||
<path
|
||||
d="m 188.7062,51.805 c 0.1475,0.868 0.3697,2.533 0.3697,4.415 0,8.736 -4.4346,17.604 -16.1094,17.604 -12.4888,0 -18.2524,-9.877 -18.2524,-18.835 0,-11.08 7.02,-18 19.2866,-18 4.8774,0 9.3843,0.72 13.0796,2.234 l -1.4785,7.418 c -3.0293,-1.005 -6.1329,-1.507 -9.9751,-1.507 -5.2466,0 -9.8277,2.153 -10.1978,6.743 l 23.2773,-0.07 z m -23.3505,7.599 c 0.2954,2.884 2.2168,7.138 7.02,7.138 5.0976,0 6.2807,-4.543 6.2807,-7.138 l -13.3007,0 z" />
|
||||
<path
|
||||
d="m 216.801,86.772 0,-16.984 -0.1475,0 c -1.626,2.377 -5.0259,3.963 -9.5322,3.963 -8.6465,0 -16.2573,-6.92 -16.1841,-18.741 0,-10.958 6.8726,-18.094 15.4443,-18.094 4.6553,0 9.0889,2.019 11.3057,5.912 l 0.2222,0 0.4433,-5.119 9.9766,0 c -0.148,2.379 -0.2969,6.488 -0.2969,10.524 l 0,38.539 -11.2314,0 z m 0,-33.421 c 0,-0.864 -0.074,-1.73 -0.2222,-2.45 -0.6641,-3.1 -3.3252,-5.262 -6.5757,-5.262 -4.6557,0 -7.6855,3.748 -7.6855,9.659 0,5.55 2.5869,10.019 7.7588,10.019 3.4726,0 5.9116,-2.378 6.5771,-5.333 0.1475,-0.65 0.1475,-1.371 0.1475,-2.019 l 0,-4.614 z" />
|
||||
</g>
|
||||
<path
|
||||
d="m 261.8728,37.749 0,33.794 -11.2325,0 0,-33.794 11.2325,0 z m -5.6163,38.408 c 3.917,0 6.355,2.595 6.355,5.838 -0.073,3.316 -2.438,5.839 -6.2807,5.839 -3.8423,0 -6.3545,-2.523 -6.3545,-5.839 0,-3.243 2.4375,-5.838 6.207,-5.838 l 0.073,0 z" />
|
||||
<path
|
||||
d="m 268.0881,37.749 11.2324,0 0,18.872 c 0,1.01 0.073,2.019 0.3696,2.741 0.812,2.018 2.6602,4.108 5.7632,4.108 4.0645,0 5.6904,-3.099 5.6904,-7.642 l 0,-18.079 11.2315,0 0,19.377 c 0,10.38 -5.5415,15.21 -12.9316,15.21 -6.0596,0 -8.7198,-3.387 -10.1978,-5.694 l 0.075,0 0,4.901 -11.2324,0 c 0.1474,-3.171 0,-33.794 0,-33.794 z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>RayElliottDev</title>
|
||||
<link>https://rayelliott.dev/blog/</link>
|
||||
<description>Recent content on RayElliottDev</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Fri, 31 Jan 2020 12:54:00 +0000</lastBuildDate>
|
||||
|
||||
<atom:link href="https://rayelliott.dev/blog/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Flow Model Management</title>
|
||||
<link>https://rayelliott.dev/blog/posts/flowmm/</link>
|
||||
<pubDate>Sat, 08 Feb 2020 12:27:18 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/flowmm/</guid>
|
||||
<description>Flow Model Management is a fictitious modelling agency. They were created solely for the purpose of giving me a reason to create their website.
|
||||
However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
|
||||
And so, my discussions with the stakeholders began.
|
||||
It quickly became apparent that the primary purpose of the proposed website would be to provide an attractive and stylish platform that would encourage visiting candidates to apply to join.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Marc Leopold Photography</title>
|
||||
<link>https://rayelliott.dev/blog/posts/leopold/</link>
|
||||
<pubDate>Sat, 01 Feb 2020 18:54:46 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/leopold/</guid>
|
||||
<description>Marc Leopold is an apocryphal photographer and visual artist based in Chicago, USA. He recently decided his previous (and rather imaginary) website, whose purpose was to showcase his work, was beginning to look dated.
|
||||
He decided that it was time for a modern, up to date portfolio site.
|
||||
Being a photographer&rsquo;s portfolio site, the requirements are fairly basic. Aside from the portfolio items, we just need some brief background information and an outline of the services provided along with a contact form.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>About Me</title>
|
||||
<link>https://rayelliott.dev/blog/about/</link>
|
||||
<pubDate>Fri, 31 Jan 2020 12:54:00 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/about/</guid>
|
||||
<description>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 using the latest technologies.
|
||||
I turn old, tired websites into Fresh and Modern sites.
|
||||
I work with a number of Content Management Systems, including WordPress.
|
||||
I develop custom Themes and Plugins.
|
||||
I advise and develop eCommerce Solutions for your online business.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Charles Stantham Legal Services</title>
|
||||
<link>https://rayelliott.dev/blog/posts/stanthams/</link>
|
||||
<pubDate>Mon, 20 Jan 2020 18:55:00 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/stanthams/</guid>
|
||||
<description>Charles Stantham are a firm of made-up solicitors who decided they wanted me to make up a website for their firm.
|
||||
The site is a fairly basic brochure site with no particularly special requirements.
|
||||
And so, for this relatively simple site I decided that a ready made customisable theme would be used.
|
||||
The Theme The theme I chose, that would be a starting point for the site, was OceanWP.
|
||||
There were a number of reasons why using OceanWP is appropriate for a project such as this:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Giana Boutique</title>
|
||||
<link>https://rayelliott.dev/blog/posts/giana/</link>
|
||||
<pubDate>Sun, 29 Dec 2019 18:55:07 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/giana/</guid>
|
||||
<description>Now, this site, is one of the earliest I ever worked upon. It was my first time using WooCommerce and the second time using WordPress to build a site.
|
||||
It is the site of Giana Boutique, a fictitious, online ecommerce store.
|
||||
This was done quite some time ago. Very early on in my career as a web developer.
|
||||
For an ecommerce site, there was nothing special required. I used the WordPress plugin WooCommerce along with a pre-existing theme with a few modifications.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
// TODO move this file into assets and use hugo pipes and babel
|
||||
|
||||
(function(){
|
||||
var STATES = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
|
||||
var LABELS = ["On", "Off", "Auto"]; // display text of dark mode setting - corresponds with STATES array
|
||||
|
||||
var CS_BTN_CLASS = 'cs-mode-button';
|
||||
var CS_BTN_CONTAINER_CLASS = 'cs-mode-container';
|
||||
var CS_BTN_TEXT_CLASS = 'cs-mode-button-state';
|
||||
var CS_MODE_COOKIE_NAME = "cs_mode"; // name of cookie that stores dark mode setting
|
||||
|
||||
var MODE_BTN_TEXT_ELEMENT = document.getElementById(CS_BTN_TEXT_CLASS);
|
||||
|
||||
var activeState = -1; // the active index of the STATES array
|
||||
var cookieMode; // dark mode setting value retrieved from cookie
|
||||
|
||||
// toggles the color scheme between the states specified in the array STATES
|
||||
function toggleColorscheme() {
|
||||
for(var i = 0; i < STATES.length; i++) {
|
||||
if (document.body.classList.contains(STATES[i])) {
|
||||
document.body.classList.remove(STATES[activeState]);
|
||||
activeState = activeState < STATES.length - 1 ? activeState + 1 : 0;
|
||||
document.body.classList.add(STATES[activeState]);
|
||||
MODE_BTN_TEXT_ELEMENT.innerText = LABELS[activeState];
|
||||
document.cookie = CS_MODE_COOKIE_NAME + "=" + STATES[activeState] + "; path=/;max-age=315360000";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// returns the value fo the cookie named name
|
||||
// or null if not present.
|
||||
function getCookie(name) {
|
||||
var cookieList = document.cookie.split(";")
|
||||
var value = null;
|
||||
|
||||
for (var i = 0; i < cookieList.length; i++) {
|
||||
if (cookieList[i].indexOf(CS_MODE_COOKIE_NAME + "=") > -1) {
|
||||
value = cookieList[i].substring(cookieList[i].indexOf('=') + 1);
|
||||
}
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
cookieMode = getCookie(CS_MODE_COOKIE_NAME);
|
||||
|
||||
if (cookieMode !== null) {
|
||||
for(var i = 0; i < STATES.length; i++) {
|
||||
document.body.classList.remove(STATES[i]);
|
||||
}
|
||||
document.body.classList.add(cookieMode);
|
||||
// cannot set activeState directly in here, in case cookie is not present
|
||||
// (in which case, document.body will already have the class which was
|
||||
// specified in /layouts/_default/baseof.html, which we will use later).
|
||||
}
|
||||
// now we can use document.body.classlist to set activeState.
|
||||
for(var i = 0; i < STATES.length; i++) {
|
||||
if (document.body.classList.contains(STATES[i])) {
|
||||
activeState = i;
|
||||
}
|
||||
}
|
||||
MODE_BTN_TEXT_ELEMENT.innerText = LABELS[activeState];
|
||||
|
||||
// if activeState is valid, add button's event listener,
|
||||
// otherwise hide the toggle button.
|
||||
if (activeState > -1) {
|
||||
document.getElementById(CS_BTN_CLASS).addEventListener('click', function() {
|
||||
toggleColorscheme();
|
||||
})
|
||||
} else {
|
||||
document.getElementById(CS_BTN_CONTAINER_CLASS).style.display = "none";
|
||||
}
|
||||
})();
|
||||
|
||||
|
|
@ -1,367 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Flow Model Management"/>
|
||||
<meta name="twitter:description" content="Developing a portfolio website using Nuxt.js."/>
|
||||
|
||||
<meta property="og:title" content="Flow Model Management" />
|
||||
<meta property="og:description" content="Developing a portfolio website using Nuxt.js." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/posts/flowmm/" />
|
||||
<meta property="article:published_time" content="2020-02-08T12:27:18+00:00" />
|
||||
<meta property="article:modified_time" content="2020-02-08T12:27:18+00:00" />
|
||||
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/posts/flowmm/">
|
||||
|
||||
<title>
|
||||
Flow Model Management · RayElliottDev
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/posts/flowmm/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="page flowmm colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container post">
|
||||
<article>
|
||||
<header>
|
||||
<div class="post-title">
|
||||
<h1 class="title">Flow Model Management</h1>
|
||||
</div>
|
||||
<div class="post-meta">
|
||||
<div class="meta-tag posted-on">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
<time datetime='2020-02-08T12:27:18Z'>
|
||||
February 8, 2020
|
||||
</time>
|
||||
</div>
|
||||
<div class="meta-tag reading-time">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
5-minute read
|
||||
</div>
|
||||
<div class="taxonomy">
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/categories/portfolio/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Portfolio
|
||||
</a>
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/vue/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Vue
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/nuxt/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Nuxt
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/cms/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
CMS
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/bespoke/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Bespoke
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
|
||||
<img class="featured-image" src='https://rayelliott.dev/blog/images/flowmm/flowmm-home.jpg' alt="Featured image"/>
|
||||
|
||||
<p><strong>Flow Model Management</strong> is a fictitious modelling agency.
|
||||
They were created solely for the purpose of giving me a reason to create their <a href="https://flowmm.rayelliott.dev">website</a>.</p>
|
||||
<p>However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.</p>
|
||||
<p>And so, my discussions with the stakeholders began.</p>
|
||||
<p>It quickly became apparent that the primary purpose of the proposed website would be to provide an attractive and stylish platform that would encourage visiting candidates to apply to join.
|
||||
Essential to this, would be to provide a simple process for users to submit an application.</p>
|
||||
<h2 id="the-front-end">The Front End</h2>
|
||||
<figure class="icon-inline sm-order-rev svg">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/nuxtjs-icon.svg"
|
||||
alt="The Nuxt icon."/> <figcaption>
|
||||
<p>For this project I wanted to build a <strong>Single Page Application</strong> using <a href="https://nuxtjs.org/">Nuxt.js</a>, which is an open source framework based on Vue.js.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>One advantage of an SPA is speed.
|
||||
SPAs are fast.
|
||||
Instead of reloading an entire page, when maybe only one small component of the page needs updating, a browser may request only the much smaller data needed to update that component.</p>
|
||||
<p>So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced.</p>
|
||||
<p>This also has the benefit of an improved user experience.
|
||||
Navigation and updates to the state of the site appear to be almost instant, similar to a native application, rather than more lengthy page reloads typically associated with websites.</p>
|
||||
<figure class="icon-inline icon-right svg">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/vue.svg"
|
||||
alt="The Vue logo."/> <figcaption>
|
||||
<p><strong><a href="https://vuejs.org/">Vue.js</a></strong> is a modern JavaScript framework for creating web interfaces. It makes use of the virtual DOM, is small and fast, and is an ideal foundation for an SPA.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>However, Vue along with other SPA frameworks do have some disadvantages.</p>
|
||||
<p>A major disadvantage is regarding <strong>Search Engine Optimisation</strong>.
|
||||
SPAs can require a relatively long initial page load, and aren’t as efficiently crawled by search engine crawlers due to the heavy use of JavaScript.</p>
|
||||
<p>This means sites requiring SEO, need to take steps to mitigate these issues.
|
||||
One solution is to render the HTML on the server, rather than letting the browser do it.
|
||||
The HTML can be quickly displayed by the client browser, reducing the initial page load, with updates to the site being handled by Ajax calls, as with a conventional SPA.</p>
|
||||
<p>This may be taken even further, if desired, so that <em>all</em> pages are rendered on the server. In effect, creating a static site.
|
||||
This will then bring all the benefits of a fast, easily indexable static site.</p>
|
||||
<p>These, <strong>Server Side Rendered</strong> applications can require a lot of setting up.
|
||||
There are also a number of pitfalls and considerations that need to be kept in mind:</p>
|
||||
<ul>
|
||||
<li>there are no requests for new pages and so the browser history needs to be managed,</li>
|
||||
<li>there are many threats of security vulnerabilities and exploits,</li>
|
||||
<li>although browser standards have improved over time, there are still a number of differences in behaviour between the many devices and browsers in use.</li>
|
||||
</ul>
|
||||
<figure class="nuxt logo svg">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/nuxtjs-logo.svg"
|
||||
alt="The Nuxt logo."/>
|
||||
</figure>
|
||||
|
||||
<p>This is where a framework such as <strong>Nuxt.js</strong> comes in.
|
||||
A lot of the tedious scaffolding is taken care of and being a fully tested, mature framework, we can be confident that many common, and not so common, issues have already been solved and tested for.</p>
|
||||
<p>A further benefit to using Nuxt.js, is the client application can be easily extended.
|
||||
For example, it may be decided in future that the features commonly found in <strong>Progressive Web Applications</strong> are desired, in which case these can be more easily added due to already being supported by Nuxt.</p>
|
||||
<p>So, above, are the reasons I would use to justify using Nuxt.js to build an SPA for this project.
|
||||
However, a very large factor, to be entirely honest, was that I had been gaining experience in using Vue.js and wanted an opportunity to use Nuxt.js to create an SPA with server side rendering.</p>
|
||||
<p>With SPAs being an important component of the modern web I wanted this project to further my experience and understanding of the technology and techniques involved.</p>
|
||||
<h2 id="the-design">The Design</h2>
|
||||
<p><img src="https://rayelliott.dev/blog/images/flowmm/flowmm-model.jpg" alt="A black and white cropped shot of a stylish male model."></p>
|
||||
<p>The design brief from the non-existent owners of Flow Model Management was quite
|
||||
simple. A visually appealing, elegant site, with some background information and an easy
|
||||
to use method for applicants to sign up with.</p>
|
||||
<p>A monochromatic colour scheme was chosen. I felt that a primarily black and
|
||||
white colour scheme that uses the brand colour of orange as an accent would give a classy and
|
||||
elegant feel to the site.</p>
|
||||
<p><strong>Montserrat</strong> and <strong>Lato</strong> were the fonts chosen for the headings and body text respectively.
|
||||
These are both clean, easily readable fonts.</p>
|
||||
<p>Montserrat was chosen for its classy and elegant qualities.
|
||||
It is formal, but not too formal, reminding me of the classy, stylish fashions of the early 20th century, and yet still appearing modern.</p>
|
||||
<p>Lato, which goes well with Montserrat, is also modern and elegant, much like Montserrat, and keeps with the formal but not overly so, feel of the site.</p>
|
||||
<figure class="icon-inline icon-right flowmm-model-thumb">
|
||||
<img src="https://rayelliott.dev/blog/images/flowmm/flowmm-model-1.jpg"
|
||||
alt="A black and white shot of a stylish male model."/> <figcaption>
|
||||
<p>As the site is for a modelling agency, I decided that making the models a prominent feature would be an ideal way to make the site visually appealing. By bringing the models to centre stage and focusing attention on stylish images of the models, this focuses the aesthetic of the site towards an elegant, stylish look.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="the-deployment">The Deployment</h2>
|
||||
<p>The project is hosted on a <strong>Virtual Private Server</strong>, using <a href="http://dokku.viewdocs.io/dokku/">Dokku</a>.</p>
|
||||
<p><strong>Dokku</strong> is a <a href="https://www.docker.com/">Docker</a> based, open source, Platform as a Service in which Heroku compatible applications can be deployed to and hosted upon.</p>
|
||||
<figure class="logo">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/docker-horizontal-monochromatic.png"
|
||||
alt="The Docker logo."/>
|
||||
</figure>
|
||||
|
||||
<p>Using Docker during development has many advantages.
|
||||
When using Docker, the application is encapsulated within a consistent environment.
|
||||
This brings many advantages.
|
||||
One such advantage being the development environment can exactly match the deployed environment, ensuring there will be no compatibility issues after deployment.</p>
|
||||
<figure class="git logo">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/git-orange.png"
|
||||
alt="The Git logo."/>
|
||||
</figure>
|
||||
|
||||
<p>Combining Docker with Dokku also allows for simple deployment, which can be done with just a <a href="https://git-scm.com/">Git</a> push.</p>
|
||||
<p> </p>
|
||||
<p><img src="https://rayelliott.dev/blog/images/flowmm/flowmm-home-footer.jpg" alt="A screenshot of the website of Flow Model Management"></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
|
||||
<section class="see-also">
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>More of my Portfolio Articles</h3>
|
||||
<nav>
|
||||
<ul class="see-also-list">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,308 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Giana Boutique"/>
|
||||
<meta name="twitter:description" content="Developing an ecommerce website using WordPress and WooCommerce."/>
|
||||
|
||||
<meta property="og:title" content="Giana Boutique" />
|
||||
<meta property="og:description" content="Developing an ecommerce website using WordPress and WooCommerce." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/posts/giana/" />
|
||||
<meta property="article:published_time" content="2019-12-29T18:55:07+00:00" />
|
||||
<meta property="article:modified_time" content="2019-12-29T18:55:07+00:00" />
|
||||
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/posts/giana/">
|
||||
|
||||
<title>
|
||||
Giana Boutique · RayElliottDev
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/posts/giana/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="page giana colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container post">
|
||||
<article>
|
||||
<header>
|
||||
<div class="post-title">
|
||||
<h1 class="title">Giana Boutique</h1>
|
||||
</div>
|
||||
<div class="post-meta">
|
||||
<div class="meta-tag posted-on">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
<time datetime='2019-12-29T18:55:07Z'>
|
||||
December 29, 2019
|
||||
</time>
|
||||
</div>
|
||||
<div class="meta-tag reading-time">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
3-minute read
|
||||
</div>
|
||||
<div class="taxonomy">
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/categories/portfolio/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Portfolio
|
||||
</a>
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/wordpress/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
WordPress
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/woocommerce/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
WooCommerce
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/cms/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
CMS
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/ecommerce/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
eCommerce
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
|
||||
<img class="featured-image" src='https://rayelliott.dev/blog/images/giana/large-1.jpg' alt="Featured image"/>
|
||||
|
||||
<p>Now, this site, is one of the earliest I ever worked upon.
|
||||
It was my first time using <strong>WooCommerce</strong> and the second time using <strong>WordPress</strong> to build a site.</p>
|
||||
<p>It is the site of <a href="https://giana.rayelliott.dev/">Giana Boutique</a>, a fictitious, online ecommerce store.</p>
|
||||
<p>This was done quite some time ago. Very early on in my career as a web developer.</p>
|
||||
<p>For an ecommerce site, there was nothing special required. I used the WordPress plugin WooCommerce along with a pre-existing theme with a few modifications.</p>
|
||||
<figure class="logo woocommerce">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/woocommerce-logo.png"
|
||||
alt="The WooCommerce logo."/>
|
||||
</figure>
|
||||
|
||||
<p>The main customisations were bits of CSS to tidy some things up – so a child theme was created.
|
||||
The parent theme is called <strong>Exchange</strong> and was obtained from <a href="https://modernthemes.net/">ModernThemes</a>.</p>
|
||||
<p>Now, why did I use the Exchange theme?</p>
|
||||
<p>Well, I’m an honest guy and so I’ll confess – it was free and, at the time, I thought it looked okay!</p>
|
||||
<p>Looking back now, not exactly the best of reasons.
|
||||
But, it was free and I felt it was a reasonable looking theme that I could use to get experience with setting up a WordPress site using WooCommerce.</p>
|
||||
<p>So, would I use it again?</p>
|
||||
<p>Now that I have a lot more experience develping for WordPress, I wouldn’t.</p>
|
||||
<ul>
|
||||
<li>I felt it was difficult to customise, although this may have been at least partly due to my inexperience.</li>
|
||||
<li>It doesn’t really offer anything over Storefront, the WooCommerce theme from Automattic – the core developers of WooCommerce itself.<br>
|
||||
The advantage of using a theme from the actual WooCommerce developers, is that we know it will be written to the same high standard without any compatibility issues and should always be up to date with the latest version of WooCommerce.<br>
|
||||
This theme does look a little different, but nothing substantial. Certainly nothing that couldn’t be achieved with some customisation of Storefront.</li>
|
||||
<li>It doesn’t do much to set it above all the other similar looking WooCommerce sites around. It looks clean and fresh, but nothing particularly stands out.</li>
|
||||
</ul>
|
||||
<p>So, I feel it is perfectly fine for someone wishing to set up a WooCommerce site with an acceptable theme quickly with little effort.
|
||||
But, not so good for developers, who will most likely want to customise and, in my opinion, would be better off starting with an alternative such as Storefront.</p>
|
||||
<p>So, If I was to redo the site, I would almost certainly base it on the Storefront theme and include a lot more custom elements.</p>
|
||||
<p>I feel a problem with WooCommerce is a lot of the sites are similar, with little to differentiate them.
|
||||
This gives the perfect opportunity to make a site stand out a little more, and make it more engaging, by adding more interesting features.</p>
|
||||
<p>Of course, it is important such features do not detract from the overall user experience.
|
||||
We do not want flashy, distracting elements that will take attention away from the important elements.
|
||||
This is why I feel classy and subtle is always the way to go for ecommerce sites.</p>
|
||||
<p> </p>
|
||||
<p><img src="https://rayelliott.dev/blog/images/giana/large-5.jpg" alt="Screenshot of the Giana Boutique website"></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
|
||||
<section class="see-also">
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>More of my Portfolio Articles</h3>
|
||||
<nav>
|
||||
<ul class="see-also-list">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Posts"/>
|
||||
<meta name="twitter:description" content=""/>
|
||||
|
||||
<meta property="og:title" content="Posts" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/posts/" />
|
||||
<meta property="og:updated_time" content="2020-02-08T12:27:18+00:00" />
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/posts/">
|
||||
|
||||
<title>
|
||||
Posts · RayElliottDev
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/posts/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" href="https://rayelliott.dev/blog/posts/index.xml" title="RayElliottDev" />
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="section colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container list">
|
||||
<h1 class="title">Posts</h1>
|
||||
|
||||
<ul><li>
|
||||
<span class="date">February 8, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="date">February 1, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="date">January 20, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="date">December 29, 2019</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Posts on RayElliottDev</title>
|
||||
<link>https://rayelliott.dev/blog/posts/</link>
|
||||
<description>Recent content in Posts on RayElliottDev</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Sat, 08 Feb 2020 12:27:18 +0000</lastBuildDate>
|
||||
|
||||
<atom:link href="https://rayelliott.dev/blog/posts/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Flow Model Management</title>
|
||||
<link>https://rayelliott.dev/blog/posts/flowmm/</link>
|
||||
<pubDate>Sat, 08 Feb 2020 12:27:18 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/flowmm/</guid>
|
||||
<description>Flow Model Management is a fictitious modelling agency. They were created solely for the purpose of giving me a reason to create their website.
|
||||
However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
|
||||
And so, my discussions with the stakeholders began.
|
||||
It quickly became apparent that the primary purpose of the proposed website would be to provide an attractive and stylish platform that would encourage visiting candidates to apply to join.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Marc Leopold Photography</title>
|
||||
<link>https://rayelliott.dev/blog/posts/leopold/</link>
|
||||
<pubDate>Sat, 01 Feb 2020 18:54:46 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/leopold/</guid>
|
||||
<description>Marc Leopold is an apocryphal photographer and visual artist based in Chicago, USA. He recently decided his previous (and rather imaginary) website, whose purpose was to showcase his work, was beginning to look dated.
|
||||
He decided that it was time for a modern, up to date portfolio site.
|
||||
Being a photographer&rsquo;s portfolio site, the requirements are fairly basic. Aside from the portfolio items, we just need some brief background information and an outline of the services provided along with a contact form.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Charles Stantham Legal Services</title>
|
||||
<link>https://rayelliott.dev/blog/posts/stanthams/</link>
|
||||
<pubDate>Mon, 20 Jan 2020 18:55:00 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/stanthams/</guid>
|
||||
<description>Charles Stantham are a firm of made-up solicitors who decided they wanted me to make up a website for their firm.
|
||||
The site is a fairly basic brochure site with no particularly special requirements.
|
||||
And so, for this relatively simple site I decided that a ready made customisable theme would be used.
|
||||
The Theme The theme I chose, that would be a starting point for the site, was OceanWP.
|
||||
There were a number of reasons why using OceanWP is appropriate for a project such as this:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Giana Boutique</title>
|
||||
<link>https://rayelliott.dev/blog/posts/giana/</link>
|
||||
<pubDate>Sun, 29 Dec 2019 18:55:07 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/giana/</guid>
|
||||
<description>Now, this site, is one of the earliest I ever worked upon. It was my first time using WooCommerce and the second time using WordPress to build a site.
|
||||
It is the site of Giana Boutique, a fictitious, online ecommerce store.
|
||||
This was done quite some time ago. Very early on in my career as a web developer.
|
||||
For an ecommerce site, there was nothing special required. I used the WordPress plugin WooCommerce along with a pre-existing theme with a few modifications.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -1,386 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Marc Leopold Photography"/>
|
||||
<meta name="twitter:description" content="Developing a portfolio website using October CMS and Vue.js."/>
|
||||
|
||||
<meta property="og:title" content="Marc Leopold Photography" />
|
||||
<meta property="og:description" content="Developing a portfolio website using October CMS and Vue.js." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/posts/leopold/" />
|
||||
<meta property="article:published_time" content="2020-02-01T18:54:46+00:00" />
|
||||
<meta property="article:modified_time" content="2020-02-01T18:54:46+00:00" />
|
||||
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/posts/leopold/">
|
||||
|
||||
<title>
|
||||
Marc Leopold Photography · RayElliottDev
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/posts/leopold/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="page leopold colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container post">
|
||||
<article>
|
||||
<header>
|
||||
<div class="post-title">
|
||||
<h1 class="title">Marc Leopold Photography</h1>
|
||||
</div>
|
||||
<div class="post-meta">
|
||||
<div class="meta-tag posted-on">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
<time datetime='2020-02-01T18:54:46Z'>
|
||||
February 1, 2020
|
||||
</time>
|
||||
</div>
|
||||
<div class="meta-tag reading-time">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
5-minute read
|
||||
</div>
|
||||
<div class="taxonomy">
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/categories/portfolio/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Portfolio
|
||||
</a>
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/october-cms/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
October CMS
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/vue/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Vue
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/cms/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
CMS
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/bespoke/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Bespoke
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
|
||||
<img class="featured-image" src='https://rayelliott.dev/blog/images/leopold/large-1.jpg' alt="Featured image"/>
|
||||
|
||||
<p><strong>Marc Leopold</strong> is an apocryphal photographer and visual artist based in Chicago, USA.
|
||||
He recently decided his previous (and rather imaginary) website, whose purpose was to showcase his work, was beginning to look dated.</p>
|
||||
<p>He decided that it was time for a modern, up to date <a href="https://leopold.rayelliott.dev">portfolio site</a>.</p>
|
||||
<p>Being a photographer’s portfolio site, the requirements are fairly basic.
|
||||
Aside from the portfolio items, we just need some brief background information and an outline of the services provided along with a contact form.</p>
|
||||
<h2 id="the-front-end">The Front End</h2>
|
||||
<figure class="icon-inline icon-right sm-order-rev svg">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/vue.svg"
|
||||
alt="The Vue logo."/> <figcaption>
|
||||
<p>For the front end of this project, I went with <a href="https:/etcvuejs.org">Vue.js</a> — a fast, modern JavaScript framework used to create web interfaces.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>The site’s content will mainly consist of examples of Marc’s portfolio Photography.
|
||||
These are organised into a number of galleries.
|
||||
The main task of a visitor will be browsing and viewing these images.</p>
|
||||
<p>I feel that using a <strong>Single Page Application</strong> will give a nice user experience whilst browsing and viewing the images.</p>
|
||||
<p>The images will be dynamically loaded when required.
|
||||
There will be no need for full page reloads.
|
||||
We only need to update the required on-screen images.
|
||||
Instead, we can dynamically update page components to create a fast, responsive site.</p>
|
||||
<h2 id="the-back-end">The Back End</h2>
|
||||
<figure class="icon-inline sm-order-rev">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/october-icon.png"
|
||||
alt="The October Content Management System's icon."/> <figcaption>
|
||||
<p>For the backend I decided to use <a href="https://octobercms.com/">October</a>, a Content Management System, based on the <a href="https://laravel.com/">Laravel</a> framework, which is a popular, open source, PHP based framework.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>The major requirements of a backend for this type of project is to store and organise images.</p>
|
||||
<p>It would be possible to create a fully bespoke image based CMS to handle these requirements.
|
||||
However, this would involve a considerable amount of work and a lot of considerations, such as security best practices, browser compatibility, testing of code, etc.</p>
|
||||
<p>Fortunately, there are already a number of actively developed libraries and frameworks available that have already solved these issues:</p>
|
||||
<ul>
|
||||
<li>they have the advantage of being tried and tested with real world use by many users,</li>
|
||||
<li>using one of these shortens development time considerably,</li>
|
||||
<li>we are able to build upon and extend functionality rather than reimplementing these features from scratch.</li>
|
||||
</ul>
|
||||
<p>So for a relatively basic CMS, in which there are no particularly special requirements, it makes perfect sense to make use of a pre-existing platform.
|
||||
In this case, I chose <strong>October</strong> for a number for reasons.</p>
|
||||
<figure class="cheat-october-list">
|
||||
<img src=""
|
||||
alt="TODO - do properly with shortcode"/>
|
||||
</figure>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><strong>Performant</strong></p>
|
||||
<p>October isn’t bloated with unneeded functionality.</p>
|
||||
<p>It instead provides a base in which features and functionality may be added if required.
|
||||
This makes it faster than some alternatives, such as WordPress for example, which can suffer from having a large amount of features included as a base.<br>
|
||||
It also has useful default features such as minification of CSS and JavaScript. The templating engine, Twig, generates static HTML, giving the speed benefits of a static site, without database lookups.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Developer Oriented</strong></p>
|
||||
<p>October is targeted towards developers.</p>
|
||||
<p>High quality documentation and a clean and modern codebase makes it easy to extend and add functionality.<br>
|
||||
Plugins are entirely separate - they have their own database and namespaces preventing conflicts between them.<br>
|
||||
The templating system and text file based website structure allows for separation of data and presentation and gives easy version control management.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Community</strong></p>
|
||||
<p>There is a large developer community.</p>
|
||||
<p>This means a large number of plugins and themes provided by the community.<br>
|
||||
Not as many as WordPress but many of the WordPress plugins can be considered to be poor quality, particularly among the free ones.
|
||||
It can also be difficult to extend WordPress plugins.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Secure</strong></p>
|
||||
<p>Relatively secure when compared to alternatives like WordPress.</p>
|
||||
<p>There is a single point of entry into the application, with only one file that can ever be accessed, <code>index.php</code>, reducing the potential attack area.<br>
|
||||
There is also more rigorous approval process for plugins and themes, that with some alternative platforms.
|
||||
Each one must undergo a strict verification progress.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Customisation</strong></p>
|
||||
<p>It is simple and straight forward to customise the administrative interface.</p>
|
||||
<p>This is very useful for a site that will involve a lot of users with the ability to manage their accounts and decreases development time substantially.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>So, these reasons are why, in this case, I consider a platform like October to be better for building a backend CMS than, for example, WordPress.
|
||||
It is easier to customise and add the required functionality without the inherent bloat of some alternatives.</p>
|
||||
<p>Having said that, it may sound like WordPress just isn’t very good.
|
||||
Not when compared to something like October.
|
||||
This, however, I don’t feel to be true.</p>
|
||||
<figure class="icon-inline sm-order-rev wp-icon">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/wp-logo.png"
|
||||
alt="The WordPress icon."/> <figcaption>
|
||||
<p>WordPress is very good at what it actually is – a platform that allows users, who may have limited technical ability, to publish a website. For this it is very successful, after all it powers <a href="https://wordpress.org/news/2019/03/one-third-of-the-web/">over 30%</a> of the world’s websites.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>However, it is also a victim of its own success.</p>
|
||||
<p>It is a very high profile target with a lot of effort expended in finding exploits and vulnerabilities.
|
||||
Combined with its start as a blogging platform, with CMS features bolted on over time, this can make leaner, more focused alternatives more appealing to developers.</p>
|
||||
<h2 id="the-design">The Design</h2>
|
||||
<p>As the primary purpose of the site was to display a portfolio of images, then naturally the focus should be on those images.</p>
|
||||
<p>I felt that having striking, interesting images on the home page would create interest.
|
||||
Interest that would engage visitors and encourage exploration of the site further.</p>
|
||||
<p>The site has a colour scheme that is intentionally, lacking colour and fairly dark.
|
||||
This is to draw the attention of visitors to the full colour photographs that are intended to be the focus of attention.</p>
|
||||
<p><img src="https://rayelliott.dev/blog/images/leopold/medium-2.jpg" alt="A screenshot of the website of Marc Leopold Photography as seen on a mobile device."></p>
|
||||
<h2 id="the-deployment">The Deployment</h2>
|
||||
<p>The website is hosted on a Virtual Private Server using <a href="https://www.docker.com/">Docker</a>.</p>
|
||||
<p>The main advantage of using Docker containers in this case, is in how it simplifies development and deployment.</p>
|
||||
<p>Using containers ensures the development environment is identical to the deployment environment.</p>
|
||||
<p>The Dockerised services we require, are simple to set up and having these services isolated in containers, we eliminate any issues caused by conflicting services or other aspects of the environment.</p>
|
||||
<p>Deployment is also simplified in that the containers can be easily pushed to production servers.</p>
|
||||
<figure class="logo large">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/docker-vertical-monochromatic.png"
|
||||
alt="The Docker logo."/>
|
||||
</figure>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
|
||||
<section class="see-also">
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>More of my Portfolio Articles</h3>
|
||||
<nav>
|
||||
<ul class="see-also-list">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<!DOCTYPE html><html><head><title>https://rayelliott.dev/blog/posts/</title><link rel="canonical" href="https://rayelliott.dev/blog/posts/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://rayelliott.dev/blog/posts/" /></head></html>
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Charles Stantham Legal Services"/>
|
||||
<meta name="twitter:description" content="Developing a website using WordPress, OceanWP and Elementor."/>
|
||||
|
||||
<meta property="og:title" content="Charles Stantham Legal Services" />
|
||||
<meta property="og:description" content="Developing a website using WordPress, OceanWP and Elementor." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/posts/stanthams/" />
|
||||
<meta property="article:published_time" content="2020-01-20T18:55:00+00:00" />
|
||||
<meta property="article:modified_time" content="2020-01-20T18:55:00+00:00" />
|
||||
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/posts/stanthams/">
|
||||
|
||||
<title>
|
||||
Charles Stantham Legal Services · RayElliottDev
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/posts/stanthams/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="page stanthams colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container post">
|
||||
<article>
|
||||
<header>
|
||||
<div class="post-title">
|
||||
<h1 class="title">Charles Stantham Legal Services</h1>
|
||||
</div>
|
||||
<div class="post-meta">
|
||||
<div class="meta-tag posted-on">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
<time datetime='2020-01-20T18:55:00Z'>
|
||||
January 20, 2020
|
||||
</time>
|
||||
</div>
|
||||
<div class="meta-tag reading-time">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
5-minute read
|
||||
</div>
|
||||
<div class="taxonomy">
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/categories/portfolio/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Portfolio
|
||||
</a>
|
||||
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/wordpress/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
WordPress
|
||||
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/elementor/">
|
||||
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Elementor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
|
||||
<img class="featured-image" src='https://rayelliott.dev/blog/images/stanthams/large-1.jpg' alt="Featured image"/>
|
||||
|
||||
<p><strong>Charles Stantham</strong> are a firm of made-up solicitors who decided they wanted me to make up a <a href="https://stanthams.rayelliott.dev/">website</a> for their firm.</p>
|
||||
<p>The site is a fairly basic brochure site with no particularly special requirements.</p>
|
||||
<p>And so, for this relatively simple site I decided that a ready made customisable theme would be used.</p>
|
||||
<h2 id="the-theme">The Theme</h2>
|
||||
<p>The theme I chose, that would be a starting point for the site, was <a href="https://oceanwp.org/">OceanWP</a>.</p>
|
||||
<figure class="icon-inline oceanwp-icon">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/oceanwp-blue-icon.png"
|
||||
alt="The OceanWP icon."/> <figcaption>
|
||||
<p>There were a number of reasons why using OceanWP is appropriate for a project such as this:</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<ul>
|
||||
<li><strong>Quick</strong>. Using such solutions can cut development time considerably – especially important for low budget sites.<br>
|
||||
Instead of building a site completely from scratch, a general, existing theme can be highly customised.</li>
|
||||
<li><strong>Flexible</strong>. Although not as flexible as a bespoke theme, OceanWP is highly customisable.<br>
|
||||
For features that can’t be created or modified within the theme a child theme can be created and these features added on that way.</li>
|
||||
<li><strong>Extensible</strong>. Many features are provided as extensions to the base theme.<br>
|
||||
It is also not difficult to add custom functionality if needed.</li>
|
||||
<li><strong>Lightweight</strong>. There are a lot of popular page builders available for WordPress.<br>
|
||||
Not all of them are, relatively speaking, as lightweight or well coded.</li>
|
||||
</ul>
|
||||
<p>There are, however, <strong>disadvantages</strong>.</p>
|
||||
<p>One of those being bloat.
|
||||
Pre-built themes are typically designed to provide for very broad and general use cases.</p>
|
||||
<p>A lot of this functionality will never be used by any one theme and so will only serve to, at best, clutter the interface.
|
||||
At worst, they slow the site and increase the likelihood of vulnerabilities.</p>
|
||||
<p>Purpose built themes and design elements will always be leaner and more efficient.
|
||||
We can also be sure they contain clean, well written code (if coded correctly of course).</p>
|
||||
<p>In some cases, performance issues may not be so apparent for small sites with few users.
|
||||
However, these become much more of an issue once the number of visitors is scaled up for bigger sites.</p>
|
||||
<p>So, when working with WordPress, developing a theme from scratch will be faster, more efficient, and result in
|
||||
a leaner theme.</p>
|
||||
<p>However, this is not always possible given time and cost restraints so compromises may need to be made.
|
||||
In these cases a ‘site builder’ may be the best option.</p>
|
||||
<p>As there were some minor customisations required that were not possible through the theme’s interface, a child theme was created.</p>
|
||||
<figure class="medium">
|
||||
<img src="https://rayelliott.dev/blog/images/stanthams/large-5.jpg"
|
||||
alt="A screenshot of the website of the Charles Stantham law firm."/>
|
||||
</figure>
|
||||
|
||||
<h2 id="the-plugins">The Plugins</h2>
|
||||
<p>The main plugin used was <a href="https://elementor.com/">Elementor</a>.</p>
|
||||
<figure class="icon-inline">
|
||||
<img src="https://rayelliott.dev/blog/images/logos/elementor-icon.png"
|
||||
alt="The Elementor logo."/> <figcaption>
|
||||
<p>Elementor is a ‘<strong>Page Builder</strong>’ that provides component based building blocks that can be added to a WordPress site and customised.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>This has the advantage of speeding up development time considerably but brings disadvantages similar to those discussed above for using OceanWP.</p>
|
||||
<p>Again, for this particular project, I felt the advantages outweighed the disadvantages.</p>
|
||||
<p>Apart from Elementor, a limited number of other plugins were also used:</p>
|
||||
<ul>
|
||||
<li><a href="https://wordpress.org/plugins/contact-form-7/">Contact Form 7</a>.<br>
|
||||
For a basic contact submission form, this is perfectly suitable.
|
||||
For more complicated requirements I would use Gravity Forms due to its better developer oriented features.</li>
|
||||
<li><a href="https://wordpress.org/plugins/addon-elements-for-elementor-page-builder/">Elementor Addon Elements</a>.<br>
|
||||
This was required to add Google Maps integration.
|
||||
It would have been better to add this feature as a leaner, custom plugin, but for a site with a low budget, this is an acceptable compromise.</li>
|
||||
<li><a href="https://wordpress.org/plugins/gdpr-cookie-compliance/">GDPR Cookie Compliance</a>.<br>
|
||||
Very important for any site since the GDPR regulations came into force.
|
||||
A custom plugin could have been used, but for this very specific functionality, the benefits of an actively developed, tried and tested solution, outweigh the benefit of developing a plugin from scratch.</li>
|
||||
<li><a href="https://wordpress.org/plugins/better-wp-security/">iThemes Security</a>.<br>
|
||||
Security is a big issue with any WordPress site.
|
||||
I find this plugin provides good security (in addition to any server side security measures used).</li>
|
||||
<li><a href="https://wordpress.org/plugins/updraftplus/">UpdraftPlus - Backup/Restore</a>.<br>
|
||||
Regular, offsite backups are another essential component to any website.
|
||||
UpdraftPlus handles these very well.</li>
|
||||
<li><a href="https://wordpress.org/plugins/wp-fastest-cache/">WP Fastest Cache</a>.<br>
|
||||
It is always better to use server side caching such as Nginx FastCGI cashing or Varnish.
|
||||
However, in cases where this isn’t practical, this plugin is a competent solution.</li>
|
||||
<li><a href="https://wordpress.org/plugins/wp-mail-smtp/">WP Mail SMTP</a>.<br>
|
||||
It can sometimes be a little tricky getting mail working when using WordPress within Docker containers.
|
||||
This plugin provides a simple solution.</li>
|
||||
</ul>
|
||||
<p>For an actual production site where Search Engine Optimisation is important I would also use a plugin to cover this.
|
||||
I find <a href="https://wordpress.org/plugins/autodescription/">The SEO Framework</a> to be the least bloated, competent plugin to achieve this.</p>
|
||||
<p>With WordPress, it is essential to test the speed of the site before and after adding any plugins, especially for ones not used before.</p>
|
||||
<p>It is also very useful to look over the source code of any plugin.
|
||||
Seeing how well written this is, can be a good indicator of the likely performance of a plugin and we can see how seriously security considerations are taken.</p>
|
||||
<p>Also essential, for any WordPress site, is to limit the number of plugins used.
|
||||
An unnecessary amount of plugins will almost certainly slow a site down and increases the risk of introducing vulnerabilities.</p>
|
||||
<h2 id="the-summary">The Summary</h2>
|
||||
<p>So, in summary, there’s not much to be said about the actual content of the website.
|
||||
It’s a fairly basic, low budget, brochure site.
|
||||
The kind of site, that many small businesses will be looking for to give their business a presence on the web.</p>
|
||||
<p>More interesting are the justifications I covered regarding the development choices made.</p>
|
||||
<p>The primary purpose of the site is to provide information about the business. It is important that this is presented in an easy navigable fashion and the information is given in a clean, uncluttered, easy to digest manner.
|
||||
All of which I feel is achieved in the design choices of the theming and layout.</p>
|
||||
<figure class="medium">
|
||||
<img src="https://rayelliott.dev/blog/images/stanthams/stanthams-team.jpg"
|
||||
alt="A cropped screenshot of the website of the Charles Stantham law firm."/>
|
||||
</figure>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
|
||||
<section class="see-also">
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>More of my Portfolio Articles</h3>
|
||||
<nav>
|
||||
<ul class="see-also-list">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Series"/>
|
||||
<meta name="twitter:description" content=""/>
|
||||
|
||||
<meta property="og:title" content="Series" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/series/" />
|
||||
<meta property="og:updated_time" content="2020-02-08T12:27:18+00:00" />
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/series/">
|
||||
|
||||
<title>Series · RayElliottDev</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/series/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" href="https://rayelliott.dev/blog/series/index.xml" title="RayElliottDev" />
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="taxonomyterm colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container list">
|
||||
<h1 class="title">Series</h1><ul>
|
||||
|
||||
<li>
|
||||
<span class="date">February 8, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/series/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Series on RayElliottDev</title>
|
||||
<link>https://rayelliott.dev/blog/series/</link>
|
||||
<description>Recent content in Series on RayElliottDev</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Sat, 08 Feb 2020 12:27:18 +0000</lastBuildDate>
|
||||
|
||||
<atom:link href="https://rayelliott.dev/blog/series/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Portfolio</title>
|
||||
<link>https://rayelliott.dev/blog/series/portfolio/</link>
|
||||
<pubDate>Sat, 08 Feb 2020 12:27:18 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/series/portfolio/</guid>
|
||||
<description></description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<!DOCTYPE html><html><head><title>https://rayelliott.dev/blog/series/</title><link rel="canonical" href="https://rayelliott.dev/blog/series/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://rayelliott.dev/blog/series/" /></head></html>
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Portfolio"/>
|
||||
<meta name="twitter:description" content=""/>
|
||||
|
||||
<meta property="og:title" content="Portfolio" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://rayelliott.dev/blog/series/portfolio/" />
|
||||
<meta property="og:updated_time" content="2020-02-08T12:27:18+00:00" />
|
||||
|
||||
|
||||
|
||||
<base href="https://rayelliott.dev/blog/series/portfolio/">
|
||||
|
||||
<title>Series: Portfolio · RayElliottDev</title>
|
||||
|
||||
|
||||
<link rel="canonical" href="https://rayelliott.dev/blog/series/portfolio/">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE+rA=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
|
||||
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" href="https://rayelliott.dev/blog/series/portfolio/index.xml" title="RayElliottDev" />
|
||||
<meta name="generator" content="Hugo 0.65.3" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="taxonomy colorscheme-auto">
|
||||
<main class="wrapper">
|
||||
<nav class="navigation">
|
||||
<section class="container">
|
||||
<a class="navigation-title" href="https://rayelliott.dev/blog/">
|
||||
RayElliottDev
|
||||
</a>
|
||||
|
||||
<span class="primary-menu-item">
|
||||
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
|
||||
</span>
|
||||
<input type="checkbox" id="menu-toggle" />
|
||||
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul class="navigation-list">
|
||||
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
|
||||
</li>
|
||||
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<section class="container list">
|
||||
<h1 class="title">Portfolio</h1><div class="list-meta">
|
||||
<span class="meta-tag">Portfolio</span>
|
||||
</div><ul>
|
||||
|
||||
<li>
|
||||
<span class="date">February 8, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="date">February 1, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="date">January 20, 2020</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="date">December 29, 2019</span>
|
||||
<a class="title" href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
|
||||
|
||||
|
||||
© 2020
|
||||
|
||||
Ray Elliott
|
||||
|
||||
|
||||
<span id="cs-mode-container" class="cs-mode-container">
|
||||
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
|
||||
</span>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://rayelliott.dev/blog/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Portfolio on RayElliottDev</title>
|
||||
<link>https://rayelliott.dev/blog/series/portfolio/</link>
|
||||
<description>Recent content in Portfolio on RayElliottDev</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Sat, 08 Feb 2020 12:27:18 +0000</lastBuildDate>
|
||||
|
||||
<atom:link href="https://rayelliott.dev/blog/series/portfolio/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Flow Model Management</title>
|
||||
<link>https://rayelliott.dev/blog/posts/flowmm/</link>
|
||||
<pubDate>Sat, 08 Feb 2020 12:27:18 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/flowmm/</guid>
|
||||
<description>Flow Model Management is a fictitious modelling agency. They were created solely for the purpose of giving me a reason to create their website.
|
||||
However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
|
||||
And so, my discussions with the stakeholders began.
|
||||
It quickly became apparent that the primary purpose of the proposed website would be to provide an attractive and stylish platform that would encourage visiting candidates to apply to join.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Marc Leopold Photography</title>
|
||||
<link>https://rayelliott.dev/blog/posts/leopold/</link>
|
||||
<pubDate>Sat, 01 Feb 2020 18:54:46 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/leopold/</guid>
|
||||
<description>Marc Leopold is an apocryphal photographer and visual artist based in Chicago, USA. He recently decided his previous (and rather imaginary) website, whose purpose was to showcase his work, was beginning to look dated.
|
||||
He decided that it was time for a modern, up to date portfolio site.
|
||||
Being a photographer&rsquo;s portfolio site, the requirements are fairly basic. Aside from the portfolio items, we just need some brief background information and an outline of the services provided along with a contact form.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Charles Stantham Legal Services</title>
|
||||
<link>https://rayelliott.dev/blog/posts/stanthams/</link>
|
||||
<pubDate>Mon, 20 Jan 2020 18:55:00 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/stanthams/</guid>
|
||||
<description>Charles Stantham are a firm of made-up solicitors who decided they wanted me to make up a website for their firm.
|
||||
The site is a fairly basic brochure site with no particularly special requirements.
|
||||
And so, for this relatively simple site I decided that a ready made customisable theme would be used.
|
||||
The Theme The theme I chose, that would be a starting point for the site, was OceanWP.
|
||||
There were a number of reasons why using OceanWP is appropriate for a project such as this:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Giana Boutique</title>
|
||||
<link>https://rayelliott.dev/blog/posts/giana/</link>
|
||||
<pubDate>Sun, 29 Dec 2019 18:55:07 +0000</pubDate>
|
||||
|
||||
<guid>https://rayelliott.dev/blog/posts/giana/</guid>
|
||||
<description>Now, this site, is one of the earliest I ever worked upon. It was my first time using WooCommerce and the second time using WordPress to build a site.
|
||||
It is the site of Giana Boutique, a fictitious, online ecommerce store.
|
||||
This was done quite some time ago. Very early on in my career as a web developer.
|
||||
For an ecommerce site, there was nothing special required. I used the WordPress plugin WooCommerce along with a pre-existing theme with a few modifications.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<!DOCTYPE html><html><head><title>https://rayelliott.dev/blog/series/portfolio/</title><link rel="canonical" href="https://rayelliott.dev/blog/series/portfolio/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://rayelliott.dev/blog/series/portfolio/" /></head></html>
|
||||
110
blog/sitemap.xml
110
blog/sitemap.xml
|
|
@ -1,110 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/bespoke/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/categories/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/cms/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/posts/flowmm/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/nuxt/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/series/portfolio/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/categories/portfolio/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/posts/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/series/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/vue/</loc>
|
||||
<lastmod>2020-02-08T12:27:18+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/posts/leopold/</loc>
|
||||
<lastmod>2020-02-01T18:54:46+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/october-cms/</loc>
|
||||
<lastmod>2020-02-01T18:54:46+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/about/</loc>
|
||||
<lastmod>2020-01-31T12:54:00+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/</loc>
|
||||
<lastmod>2020-01-31T12:54:00+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/posts/stanthams/</loc>
|
||||
<lastmod>2020-01-20T18:55:00+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/elementor/</loc>
|
||||
<lastmod>2020-01-20T18:55:00+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/wordpress/</loc>
|
||||
<lastmod>2020-01-20T18:55:00+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/ecommerce/</loc>
|
||||
<lastmod>2019-12-29T18:55:07+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/posts/giana/</loc>
|
||||
<lastmod>2019-12-29T18:55:07+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://rayelliott.dev/blog/tags/woocommerce/</loc>
|
||||
<lastmod>2019-12-29T18:55:07+00:00</lastmod>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
|
|
@ -5,7 +5,7 @@ languageCode = "en-us"
|
|||
title = "RayElliottDev"
|
||||
theme = "hugo-coder"
|
||||
|
||||
publishDir = "blog"
|
||||
publishDir = "dist/blog"
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe= true
|
||||
|
|
|
|||
Reference in New Issue