+
+
+
+
+
+
+
+
+
+
+
diff --git a/blog/categories/portfolio/index.xml b/blog/categories/portfolio/index.xml
new file mode 100644
index 0000000..e64662d
--- /dev/null
+++ b/blog/categories/portfolio/index.xml
@@ -0,0 +1,63 @@
+
+
+
+ Portfolio on RayElliottDev
+ https://rayelliott.dev/blog/categories/portfolio/
+ Recent content in Portfolio on RayElliottDev
+ Hugo -- gohugo.io
+ en-us
+ Sat, 08 Feb 2020 12:27:18 +0000
+
+
+
+
+
+ Flow Model Management
+ https://rayelliott.dev/blog/posts/flowmm/
+ Sat, 08 Feb 2020 12:27:18 +0000
+
+ https://rayelliott.dev/blog/posts/flowmm/
+ 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.
+
+
+
+ Marc Leopold Photography
+ https://rayelliott.dev/blog/posts/leopold/
+ Sat, 01 Feb 2020 18:54:46 +0000
+
+ https://rayelliott.dev/blog/posts/leopold/
+ 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’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.
+
+
+
+ Charles Stantham Legal Services
+ https://rayelliott.dev/blog/posts/stanthams/
+ Mon, 20 Jan 2020 18:55:00 +0000
+
+ https://rayelliott.dev/blog/posts/stanthams/
+ 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:
+
+
+
+ Giana Boutique
+ https://rayelliott.dev/blog/posts/giana/
+ Sun, 29 Dec 2019 18:55:07 +0000
+
+ https://rayelliott.dev/blog/posts/giana/
+ 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.
+
+
+
+
\ No newline at end of file
diff --git a/blog/categories/portfolio/page/1/index.html b/blog/categories/portfolio/page/1/index.html
new file mode 100644
index 0000000..7de7b95
--- /dev/null
+++ b/blog/categories/portfolio/page/1/index.html
@@ -0,0 +1 @@
+https://rayelliott.dev/blog/categories/portfolio/
\ No newline at end of file
diff --git a/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css b/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css
new file mode 100644
index 0000000..95256aa
--- /dev/null
+++ b/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css
@@ -0,0 +1 @@
+body.colorscheme-dark{color:#dadada;background-color:#212121}body.colorscheme-dark a{color:#2381ff}body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6{color:#dadada}body.colorscheme-dark code{background-color:#424242;color:#dadada}body.colorscheme-dark pre code{background-color:inherit;color:inherit}body.colorscheme-dark blockquote{border-left:2px solid #424242}body.colorscheme-dark table td,body.colorscheme-dark table th{border:2px solid #dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto{color:#dadada;background-color:#212121}body.colorscheme-auto a{color:#2381ff}body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6{color:#dadada}body.colorscheme-auto code{background-color:#424242;color:#dadada}body.colorscheme-auto pre code{background-color:inherit;color:inherit}body.colorscheme-auto blockquote{border-left:2px solid #424242}body.colorscheme-auto table td,body.colorscheme-auto table th{border:2px solid #dadada}}body.colorscheme-dark .content .list ul li .title{color:#dadada}body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus{color:#2381ff}body.colorscheme-dark .content .centered .about ul li a{color:#dadada}body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus{color:#2381ff}body.colorscheme-dark .content .post-meta{opacity:.8}body.colorscheme-dark .content .meta-tag{color:#818181;background-color:#2e2e2e}body.colorscheme-dark .content .meta-tag--link{color:#2381ff}body.colorscheme-dark .content .meta-tag--link .icon{color:#818181}body.colorscheme-dark .content .meta-tag--link:hover{opacity:1;color:#70adff}body.colorscheme-dark .content .meta-tag--link:hover .icon{color:#2381ff}@media(prefers-color-scheme:dark){body.colorscheme-auto .content .list ul li .title{color:#dadada}body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus{color:#2381ff}body.colorscheme-auto .content .centered .about ul li a{color:#dadada}body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus{color:#2381ff}body.colorscheme-auto .content .post-meta{opacity:.8}body.colorscheme-auto .content .meta-tag{color:#818181;background-color:#2e2e2e}body.colorscheme-auto .content .meta-tag--link{color:#2381ff}body.colorscheme-auto .content .meta-tag--link .icon{color:#818181}body.colorscheme-auto .content .meta-tag--link:hover{opacity:1;color:#70adff}body.colorscheme-auto .content .meta-tag--link:hover .icon{color:#2381ff}}body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span{color:#dadada}body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus{color:#2381ff}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation #menu-toggle:checked+label{color:#424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .menu-button{color:#dadada}body.colorscheme-dark .navigation .menu-button:hover,body.colorscheme-dark .navigation .menu-button:focus{color:#2381ff}}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span{color:#dadada}body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus{color:#2381ff}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation #menu-toggle:checked+label{color:#424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .menu-button{color:#dadada}body.colorscheme-auto .navigation .menu-button:hover,body.colorscheme-auto .navigation .menu-button:focus{color:#2381ff}}body.colorscheme-dark .footer a{color:#2381ff}body.colorscheme-dark .cs-mode-button{color:#dadada}body.colorscheme-dark .cs-mode-button:hover{color:#2381ff;text-decoration:underline}@media(prefers-color-scheme:dark){body.colorscheme-auto .footer a{color:#2381ff}body.colorscheme-auto .cs-mode-button{color:#dadada}body.colorscheme-auto .cs-mode-button:hover{color:#2381ff;text-decoration:underline}}
\ No newline at end of file
diff --git a/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css b/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css
new file mode 100644
index 0000000..aa032aa
--- /dev/null
+++ b/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css
@@ -0,0 +1 @@
+*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:72%}@media only screen and (max-width:768px){html{font-size:61.5%}}body{color:#212121;background-color:#fafafa;font-family:Lato,sans-serif;font-size:1.6em;font-weight:400;line-height:1.8em}@media only screen and (max-width:768px){body{font-size:1.6em;line-height:1.6em}}a{font-family:Lato,sans-serif;font-weight:400;color:#0862da;letter-spacing:.3px;margin:0 1px;text-decoration:none}a:focus,a:hover{text-decoration:underline}strong a{font-weight:700}.content a{opacity:1;text-decoration:underline}.content a:hover{opacity:.6}p{margin:2rem 0}h1,h2,h3,h4,h5,h6{font-family:open sans,sans-serif;font-weight:600;color:#000;margin:6.4rem 0 3.2rem;text-align:center}h1{font-size:3.2rem;line-height:3.6rem}@media only screen and (max-width:768px){h1{font-size:3rem;line-height:3.4rem}}h2{font-size:2.8rem;line-height:3.2rem}@media only screen and (max-width:768px){h2{font-size:2.6rem;line-height:3rem}}h3{font-size:2.4rem;line-height:2.8rem}@media only screen and (max-width:768px){h3{font-size:2.2rem;line-height:2.6rem}}h4{font-size:2.2rem;line-height:2.6rem}@media only screen and (max-width:768px){h4{font-size:2rem;line-height:2.4rem}}h5{font-size:2rem;line-height:2.4rem}@media only screen and (max-width:768px){h5{font-size:1.8rem;line-height:2.2rem}}h6{font-size:1.8rem;line-height:2.2rem}@media only screen and (max-width:768px){h6{font-size:1.6rem;line-height:2rem}}b,strong{font-family:Lato,sans-serif;font-weight:700}.highlight>div,.highlight>pre{margin:0 0 2rem;padding:1rem;border-radius:1rem}pre{display:block;font-family:source code pro,lucida console,monospace;font-size:1.6rem;font-weight:400;line-height:2.6rem;overflow-x:auto;margin:0}pre code{display:inline-block;background-color:inherit;color:inherit}code{font-family:source code pro,lucida console,monospace;font-size:1.6rem;font-weight:400;background-color:#e0e0e0;color:#212121}blockquote{border-left:2px solid #e0e0e0;padding-left:2rem;line-height:2.2rem;font-weight:400;font-style:italic}th,td{padding:1.6rem}table{border-collapse:collapse}table td,table th{border:2px solid #000}table tr:first-child th{border-top:0}table tr:last-child td{border-bottom:0}table tr td:first-child,table tr th:first-child{border-left:0}table tr td:last-child,table tr th:last-child{border-right:0}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:90rem;width:100%;padding-left:2rem;padding-right:2rem}.fab{font-weight:400}.fas{font-weight:700}.float-right{float:right}.float-left{float:left}.fab{font-weight:400}.fas{font-weight:900}.content{flex:1;display:flex;margin-top:1.6rem;margin-bottom:3.2rem}.content article header{margin-top:6.4rem;margin-bottom:3.2rem;text-align:center}.content article header h1{font-size:4.2rem;line-height:4.6rem;margin:0}@media only screen and (max-width:768px){.content article header h1{font-size:4rem;line-height:4.4rem}}.content article footer{margin-top:4rem}.content article footer .see-also{margin:3.2rem 0}.content article footer .see-also h3{margin:3.2rem 0 1.6rem}.content article footer .see-also .see-also-list{list-style:none;padding-left:0;text-align:center}.content .post .post-title{margin-bottom:.75em}.content .post .post-meta{display:flex;flex-wrap:wrap;justify-content:center}.content .post .post-meta i{text-align:center;width:1.6rem;margin-left:0;margin-right:.5rem}.content .post .taxonomy{display:flex;flex-wrap:wrap;justify-content:center}.content img{display:block;margin-left:auto;margin-right:auto}.content figure{margin:0;padding:0}.content figcaption p{text-align:center;font-style:italic;font-size:1.6rem;margin:0}.content .featured-image{display:block;margin-left:auto;margin-right:auto}.content p a:link{font-weight:700;font-size:.95em}.content .social-links{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;font-size:1rem}.content .social-link-icon{font-size:1em;height:2em;margin-bottom:1rem;display:flex}.content .social-link-icon:link{text-decoration:none}.content .social-link-icon--svg svg{height:100%}.content .social-link-icon--text{height:auto;font-size:1.3em;line-height:1;font-weight:700}div.content .meta-tag{display:flex;align-items:center;padding:0 12px;margin:3px;border-radius:1px;background-color:#ededed;color:#474747}div.content .meta-tag .icon{display:flex;font-size:.9em;line-height:1;padding-right:6px}div.content .meta-tag--link{color:#0862da;font-size:.8em;text-decoration:underline}div.content .meta-tag--link:hover{opacity:1;color:#4f98f9}div.content .meta-tag--link:hover .icon{color:#0862da}div.content .meta-tag--link:hover .svg-icon{color:#212121}div.content .meta-tag--link .svg-icon{color:#212121}div.content .meta-tag .svg-icon>svg{height:1em;width:1em}.post-meta .meta-tag:not(.meta-tag--link){display:flex;align-items:center}.avatar img{width:20rem;height:auto;border-radius:50%}@media only screen and (max-width:768px){.avatar img{width:10rem}}.list ul:not(.pagination){position:relative;width:100%;margin:3.2rem 0;list-style:none;padding:0}@media only screen and (max-width:768px){.list ul:not(.pagination){text-align:center}}.list ul:not(.pagination) li{font-size:1.8rem}@media only screen and (max-width:768px){.list ul:not(.pagination) li{margin:1.6rem 0}}@media only screen and (min-width:768px){.list ul:not(.pagination) li{display:flex;margin-bottom:.8rem}}.list ul:not(.pagination) li .date{display:inline-block;width:50%;text-align:right;padding-right:1.5rem}@media only screen and (max-width:768px){.list ul:not(.pagination) li .date{width:100%;text-align:center;font-size:.9em;display:block;padding-right:0}}@media only screen and (min-width:768px){.list ul:not(.pagination) li .date{display:flex;align-items:start;justify-content:flex-end}}.list ul:not(.pagination) li .title{font-size:1.8rem;color:#212121;font-family:open sans,sans-serif;font-weight:700}@media only screen and (min-width:768px){.list ul:not(.pagination) li .title{padding-left:1.5rem;max-width:20ch}}.list ul:not(.pagination) li .title:hover,.list ul:not(.pagination) li .title:focus{color:#0862da}.list h1{margin-bottom:.8rem}.list .list-meta{text-align:center}.list .list-meta .meta-tag{display:inline-flex;font-size:.7em;margin-bottom:1.6rem}.list .list-meta .meta-tag i{font-size:1em;text-align:center;margin-left:0;margin-right:.5rem}.centered{display:flex;align-items:center;justify-content:center}.centered .about{text-align:center}.centered .about h1{margin-top:2rem;margin-bottom:.5rem}.centered .about h2{margin-top:1rem;margin-bottom:.5rem;font-size:2.4rem}@media only screen and (max-width:768px){.centered .about h2{font-size:2rem}}.centered .about ul{list-style:none;margin:3rem 0 1rem;padding:0}.centered .about ul li{display:inline-block;position:relative}.centered .about ul li a{color:#212121;text-transform:uppercase;margin-left:1rem;margin-right:1rem}.centered .about ul li a:hover,.centered .about ul li a:focus{color:#0862da}.centered .error{text-align:center}.centered .error h1{margin-top:2rem;margin-bottom:.5rem;font-size:4.6rem}@media only screen and (max-width:768px){.centered .error h1{font-size:3.2rem}}.centered .error h2{margin-top:2rem;margin-bottom:3.2rem;font-size:3.2rem}@media only screen and (max-width:768px){.centered .error h2{font-size:2.8rem}}.navigation{height:6rem;width:100%}.navigation>.container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.navigation a,.navigation span{display:inline;font-size:1.6rem;font-family:open sans,sans-serif;font-weight:700;line-height:6rem;color:#212121}.navigation a:hover,.navigation a:focus{color:#0862da}.navigation .navigation-title{letter-spacing:.1rem;text-transform:uppercase}.navigation .navigation-list{float:right;list-style:none;margin-bottom:0;margin-top:0}@media only screen and (max-width:768px){.navigation .navigation-list{position:absolute;top:6rem;right:0;z-index:5;visibility:hidden;opacity:0;padding:0;max-height:0;width:100%;background-color:#fafafa;border-top:solid 2px #e0e0e0;border-bottom:solid 2px #e0e0e0;transition:opacity .25s,max-height .15s linear}}.navigation .navigation-list .navigation-item{float:left;margin:0;position:relative}@media only screen and (max-width:768px){.navigation .navigation-list .navigation-item{float:none!important;text-align:center}.navigation .navigation-list .navigation-item a,.navigation .navigation-list .navigation-item span{line-height:5rem}}.navigation .navigation-list .navigation-item a,.navigation .navigation-list .navigation-item span{margin-left:1rem;margin-right:1rem}@media only screen and (max-width:768px){.navigation .navigation-list .menu-separator{border-top:2px solid #212121;margin:0 8rem}.navigation .navigation-list .menu-separator span{display:none}}.navigation #menu-toggle{display:none}@media only screen and (max-width:768px){.navigation #menu-toggle:checked+label{color:#e0e0e0}.navigation #menu-toggle:checked+label+ul{visibility:visible;opacity:1;max-height:100rem}}.navigation .menu-button{display:none}@media only screen and (max-width:768px){.navigation .menu-button{display:block;display:flex;font-size:2.4rem;font-weight:400;line-height:6rem;padding:.5em 0 .5em .5em;color:#212121;cursor:pointer}.navigation .menu-button:hover,.navigation .menu-button:focus{color:#0862da}.navigation .menu-button .svg-menu{height:1em}}.navigation .primary-menu-item{display:none}@media only screen and (max-width:768px){.navigation .primary-menu-item{display:block;margin-left:auto}}.pagination{margin-top:6rem;text-align:center;font-family:open sans,sans-serif;display:flex;justify-content:center;align-items:center;font-size:2rem}.pagination li{display:flex;justify-content:center;align-items:center}.pagination li>a,.pagination li.current-page{margin:0;padding:0 .25em;font-family:open sans,sans-serif;font-weight:600}.pagination li>a{display:block;text-decoration:none}.pagination li>a:hover{text-decoration:underline}.footer{width:100%;text-align:center;font-size:.8em;line-height:2rem;margin-bottom:1rem}.footer a{color:#0862da}.cs-mode-container{margin:0 0 0 .3em}.cs-mode-button{padding:0 .3em;border:none;background:0 0;font-family:open sans,sans-serif;cursor:pointer}.cs-mode-button:hover{color:#0862da;text-decoration:underline}.cs-mode-state{text-transform:capitalize;font-weight:700}
\ No newline at end of file
diff --git a/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css b/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css
new file mode 100644
index 0000000..d9c668b
--- /dev/null
+++ b/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css
@@ -0,0 +1 @@
+.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)}
\ No newline at end of file
diff --git a/blog/images/avatar.jpg b/blog/images/avatar.jpg
new file mode 100644
index 0000000..0431831
Binary files /dev/null and b/blog/images/avatar.jpg differ
diff --git a/blog/images/favicon-16x16.png b/blog/images/favicon-16x16.png
new file mode 100644
index 0000000..c0ce306
Binary files /dev/null and b/blog/images/favicon-16x16.png differ
diff --git a/blog/images/favicon-32x32.png b/blog/images/favicon-32x32.png
new file mode 100644
index 0000000..f2f0316
Binary files /dev/null and b/blog/images/favicon-32x32.png differ
diff --git a/blog/images/flowmm/flowmm-home-footer.jpg b/blog/images/flowmm/flowmm-home-footer.jpg
new file mode 100755
index 0000000..c2cd8b0
Binary files /dev/null and b/blog/images/flowmm/flowmm-home-footer.jpg differ
diff --git a/blog/images/flowmm/flowmm-home.jpg b/blog/images/flowmm/flowmm-home.jpg
new file mode 100755
index 0000000..62fd2b7
Binary files /dev/null and b/blog/images/flowmm/flowmm-home.jpg differ
diff --git a/blog/images/flowmm/flowmm-model-1.jpg b/blog/images/flowmm/flowmm-model-1.jpg
new file mode 100755
index 0000000..be10a3f
Binary files /dev/null and b/blog/images/flowmm/flowmm-model-1.jpg differ
diff --git a/blog/images/flowmm/flowmm-model.jpg b/blog/images/flowmm/flowmm-model.jpg
new file mode 100644
index 0000000..82aa635
Binary files /dev/null and b/blog/images/flowmm/flowmm-model.jpg differ
diff --git a/blog/images/giana/large-1.jpg b/blog/images/giana/large-1.jpg
new file mode 100644
index 0000000..c2e1c23
Binary files /dev/null and b/blog/images/giana/large-1.jpg differ
diff --git a/blog/images/giana/large-5.jpg b/blog/images/giana/large-5.jpg
new file mode 100644
index 0000000..49f2223
Binary files /dev/null and b/blog/images/giana/large-5.jpg differ
diff --git a/blog/images/leopold/large-1.jpg b/blog/images/leopold/large-1.jpg
new file mode 100644
index 0000000..85bc4e0
Binary files /dev/null and b/blog/images/leopold/large-1.jpg differ
diff --git a/blog/images/leopold/medium-2.jpg b/blog/images/leopold/medium-2.jpg
new file mode 100644
index 0000000..8644af3
Binary files /dev/null and b/blog/images/leopold/medium-2.jpg differ
diff --git a/blog/images/logos/docker-horizontal-monochromatic.png b/blog/images/logos/docker-horizontal-monochromatic.png
new file mode 100644
index 0000000..6eecb6b
Binary files /dev/null and b/blog/images/logos/docker-horizontal-monochromatic.png differ
diff --git a/blog/images/logos/docker-vertical-monochromatic.png b/blog/images/logos/docker-vertical-monochromatic.png
new file mode 100644
index 0000000..d83e54a
Binary files /dev/null and b/blog/images/logos/docker-vertical-monochromatic.png differ
diff --git a/blog/images/logos/elementor-icon.png b/blog/images/logos/elementor-icon.png
new file mode 100644
index 0000000..ed222ff
Binary files /dev/null and b/blog/images/logos/elementor-icon.png differ
diff --git a/blog/images/logos/git-orange.png b/blog/images/logos/git-orange.png
new file mode 100644
index 0000000..910f993
Binary files /dev/null and b/blog/images/logos/git-orange.png differ
diff --git a/blog/images/logos/nuxtjs-icon.svg b/blog/images/logos/nuxtjs-icon.svg
new file mode 100644
index 0000000..2374eda
--- /dev/null
+++ b/blog/images/logos/nuxtjs-icon.svg
@@ -0,0 +1,7 @@
+
diff --git a/blog/images/logos/nuxtjs-logo.svg b/blog/images/logos/nuxtjs-logo.svg
new file mode 100644
index 0000000..a2690d5
--- /dev/null
+++ b/blog/images/logos/nuxtjs-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/blog/images/logos/oceanwp-blue-icon.png b/blog/images/logos/oceanwp-blue-icon.png
new file mode 100644
index 0000000..d4fc3c3
Binary files /dev/null and b/blog/images/logos/oceanwp-blue-icon.png differ
diff --git a/blog/images/logos/october-icon.png b/blog/images/logos/october-icon.png
new file mode 100644
index 0000000..3b5bd99
Binary files /dev/null and b/blog/images/logos/october-icon.png differ
diff --git a/blog/images/logos/vue.svg b/blog/images/logos/vue.svg
new file mode 100644
index 0000000..71c1cfb
--- /dev/null
+++ b/blog/images/logos/vue.svg
@@ -0,0 +1,4 @@
+
diff --git a/blog/images/logos/woocommerce-logo.png b/blog/images/logos/woocommerce-logo.png
new file mode 100644
index 0000000..3a01664
Binary files /dev/null and b/blog/images/logos/woocommerce-logo.png differ
diff --git a/blog/images/logos/wp-logo.png b/blog/images/logos/wp-logo.png
new file mode 100644
index 0000000..e61ea4f
Binary files /dev/null and b/blog/images/logos/wp-logo.png differ
diff --git a/blog/images/profile--bg-darker.jpg b/blog/images/profile--bg-darker.jpg
new file mode 100644
index 0000000..f726d8e
Binary files /dev/null and b/blog/images/profile--bg-darker.jpg differ
diff --git a/blog/images/stanthams/large-1.jpg b/blog/images/stanthams/large-1.jpg
new file mode 100644
index 0000000..2fce10e
Binary files /dev/null and b/blog/images/stanthams/large-1.jpg differ
diff --git a/blog/images/stanthams/large-5.jpg b/blog/images/stanthams/large-5.jpg
new file mode 100644
index 0000000..17f5571
Binary files /dev/null and b/blog/images/stanthams/large-5.jpg differ
diff --git a/blog/images/stanthams/stanthams-team.jpg b/blog/images/stanthams/stanthams-team.jpg
new file mode 100644
index 0000000..03c1446
Binary files /dev/null and b/blog/images/stanthams/stanthams-team.jpg differ
diff --git a/blog/index.html b/blog/index.html
new file mode 100644
index 0000000..37079d3
--- /dev/null
+++ b/blog/index.html
@@ -0,0 +1,232 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RayElliottDev
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/blog/index.xml b/blog/index.xml
new file mode 100644
index 0000000..9f92e97
--- /dev/null
+++ b/blog/index.xml
@@ -0,0 +1,76 @@
+
+
+
+ RayElliottDev
+ https://rayelliott.dev/blog/
+ Recent content on RayElliottDev
+ Hugo -- gohugo.io
+ en-us
+ Fri, 31 Jan 2020 12:54:00 +0000
+
+
+
+
+
+ Flow Model Management
+ https://rayelliott.dev/blog/posts/flowmm/
+ Sat, 08 Feb 2020 12:27:18 +0000
+
+ https://rayelliott.dev/blog/posts/flowmm/
+ 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.
+
+
+
+ Marc Leopold Photography
+ https://rayelliott.dev/blog/posts/leopold/
+ Sat, 01 Feb 2020 18:54:46 +0000
+
+ https://rayelliott.dev/blog/posts/leopold/
+ 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’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.
+
+
+
+ About Me
+ https://rayelliott.dev/blog/about/
+ Fri, 31 Jan 2020 12:54:00 +0000
+
+ https://rayelliott.dev/blog/about/
+ 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.
+
+
+
+ Charles Stantham Legal Services
+ https://rayelliott.dev/blog/posts/stanthams/
+ Mon, 20 Jan 2020 18:55:00 +0000
+
+ https://rayelliott.dev/blog/posts/stanthams/
+ 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:
+
+
+
+ Giana Boutique
+ https://rayelliott.dev/blog/posts/giana/
+ Sun, 29 Dec 2019 18:55:07 +0000
+
+ https://rayelliott.dev/blog/posts/giana/
+ 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.
+
+
+
+
\ No newline at end of file
diff --git a/blog/js/script.js b/blog/js/script.js
new file mode 100644
index 0000000..e149dad
--- /dev/null
+++ b/blog/js/script.js
@@ -0,0 +1,74 @@
+// 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";
+ }
+})();
+
diff --git a/blog/posts/flowmm/index.html b/blog/posts/flowmm/index.html
new file mode 100644
index 0000000..5b266c0
--- /dev/null
+++ b/blog/posts/flowmm/index.html
@@ -0,0 +1,367 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Flow Model Management · RayElliottDev
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+Essential to this, would be to provide a simple process for users to submit an application.
+
The Front End
+
+
+
For this project I wanted to build a Single Page Application using Nuxt.js, which is an open source framework based on Vue.js.
+
+
+
+
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.
+
So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced.
+
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.
+
+
+
Vue.js 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.
+
+
+
+
However, Vue along with other SPA frameworks do have some disadvantages.
+
A major disadvantage is regarding Search Engine Optimisation.
+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.
+
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.
+
This may be taken even further, if desired, so that all 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.
+
These, Server Side Rendered applications can require a lot of setting up.
+There are also a number of pitfalls and considerations that need to be kept in mind:
+
+
there are no requests for new pages and so the browser history needs to be managed,
+
there are many threats of security vulnerabilities and exploits,
+
although browser standards have improved over time, there are still a number of differences in behaviour between the many devices and browsers in use.
+
+
+
+
+
+
This is where a framework such as Nuxt.js 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.
+
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 Progressive Web Applications are desired, in which case these can be more easily added due to already being supported by Nuxt.
+
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.
+
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.
+
The Design
+
+
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.
+
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.
+
Montserrat and Lato were the fonts chosen for the headings and body text respectively.
+These are both clean, easily readable fonts.
+
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.
+
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.
+
+
+
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.
+
+
+
+
The Deployment
+
The project is hosted on a Virtual Private Server, using Dokku.
+
Dokku is a Docker based, open source, Platform as a Service in which Heroku compatible applications can be deployed to and hosted upon.
+
+
+
+
+
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.
+
+
+
+
+
Combining Docker with Dokku also allows for simple deployment, which can be done with just a Git push.
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.
+
+
+
+
+
The main customisations were bits of CSS to tidy some things up – so a child theme was created.
+The parent theme is called Exchange and was obtained from ModernThemes.
+
Now, why did I use the Exchange theme?
+
Well, I’m an honest guy and so I’ll confess – it was free and, at the time, I thought it looked okay!
+
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.
+
So, would I use it again?
+
Now that I have a lot more experience develping for WordPress, I wouldn’t.
+
+
I felt it was difficult to customise, although this may have been at least partly due to my inexperience.
+
It doesn’t really offer anything over Storefront, the WooCommerce theme from Automattic – the core developers of WooCommerce itself.
+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.
+This theme does look a little different, but nothing substantial. Certainly nothing that couldn’t be achieved with some customisation of Storefront.
+
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.
+
+
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.
+
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.
+
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.
+
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.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/blog/posts/index.xml b/blog/posts/index.xml
new file mode 100644
index 0000000..0a8e55a
--- /dev/null
+++ b/blog/posts/index.xml
@@ -0,0 +1,63 @@
+
+
+
+ Posts on RayElliottDev
+ https://rayelliott.dev/blog/posts/
+ Recent content in Posts on RayElliottDev
+ Hugo -- gohugo.io
+ en-us
+ Sat, 08 Feb 2020 12:27:18 +0000
+
+
+
+
+
+ Flow Model Management
+ https://rayelliott.dev/blog/posts/flowmm/
+ Sat, 08 Feb 2020 12:27:18 +0000
+
+ https://rayelliott.dev/blog/posts/flowmm/
+ 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.
+
+
+
+ Marc Leopold Photography
+ https://rayelliott.dev/blog/posts/leopold/
+ Sat, 01 Feb 2020 18:54:46 +0000
+
+ https://rayelliott.dev/blog/posts/leopold/
+ 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’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.
+
+
+
+ Charles Stantham Legal Services
+ https://rayelliott.dev/blog/posts/stanthams/
+ Mon, 20 Jan 2020 18:55:00 +0000
+
+ https://rayelliott.dev/blog/posts/stanthams/
+ 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:
+
+
+
+ Giana Boutique
+ https://rayelliott.dev/blog/posts/giana/
+ Sun, 29 Dec 2019 18:55:07 +0000
+
+ https://rayelliott.dev/blog/posts/giana/
+ 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.
+
+
+
+
\ No newline at end of file
diff --git a/blog/posts/leopold/index.html b/blog/posts/leopold/index.html
new file mode 100644
index 0000000..dbdc926
--- /dev/null
+++ b/blog/posts/leopold/index.html
@@ -0,0 +1,386 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Marc Leopold Photography · RayElliottDev
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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’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.
+
The Front End
+
+
+
For the front end of this project, I went with Vue.js — a fast, modern JavaScript framework used to create web interfaces.
+
+
+
+
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.
+
I feel that using a Single Page Application will give a nice user experience whilst browsing and viewing the images.
+
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.
+
The Back End
+
+
+
For the backend I decided to use October, a Content Management System, based on the Laravel framework, which is a popular, open source, PHP based framework.
+
+
+
+
The major requirements of a backend for this type of project is to store and organise images.
+
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.
+
Fortunately, there are already a number of actively developed libraries and frameworks available that have already solved these issues:
+
+
they have the advantage of being tried and tested with real world use by many users,
+
using one of these shortens development time considerably,
+
we are able to build upon and extend functionality rather than reimplementing these features from scratch.
+
+
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 October for a number for reasons.
+
+
+
+
+
+
+
Performant
+
October isn’t bloated with unneeded functionality.
+
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.
+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.
+
+
+
Developer Oriented
+
October is targeted towards developers.
+
High quality documentation and a clean and modern codebase makes it easy to extend and add functionality.
+Plugins are entirely separate - they have their own database and namespaces preventing conflicts between them.
+The templating system and text file based website structure allows for separation of data and presentation and gives easy version control management.
+
+
+
Community
+
There is a large developer community.
+
This means a large number of plugins and themes provided by the community.
+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.
+
+
+
Secure
+
Relatively secure when compared to alternatives like WordPress.
+
There is a single point of entry into the application, with only one file that can ever be accessed, index.php, reducing the potential attack area.
+There is also more rigorous approval process for plugins and themes, that with some alternative platforms.
+Each one must undergo a strict verification progress.
+
+
+
Customisation
+
It is simple and straight forward to customise the administrative interface.
+
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.
+
+
+
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.
+
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.
+
+
+
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 over 30% of the world’s websites.
+
+
+
+
However, it is also a victim of its own success.
+
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.
+
The Design
+
As the primary purpose of the site was to display a portfolio of images, then naturally the focus should be on those images.
+
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.
+
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.
+
+
The Deployment
+
The website is hosted on a Virtual Private Server using Docker.
+
The main advantage of using Docker containers in this case, is in how it simplifies development and deployment.
+
Using containers ensures the development environment is identical to the deployment environment.
+
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.
+
Deployment is also simplified in that the containers can be easily pushed to production servers.
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:
+
+
+
+
+
Quick. Using such solutions can cut development time considerably – especially important for low budget sites.
+Instead of building a site completely from scratch, a general, existing theme can be highly customised.
+
Flexible. Although not as flexible as a bespoke theme, OceanWP is highly customisable.
+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.
+
Extensible. Many features are provided as extensions to the base theme.
+It is also not difficult to add custom functionality if needed.
+
Lightweight. There are a lot of popular page builders available for WordPress.
+Not all of them are, relatively speaking, as lightweight or well coded.
+
+
There are, however, disadvantages.
+
One of those being bloat.
+Pre-built themes are typically designed to provide for very broad and general use cases.
+
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.
+
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).
+
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.
+
So, when working with WordPress, developing a theme from scratch will be faster, more efficient, and result in
+a leaner theme.
+
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.
+
As there were some minor customisations required that were not possible through the theme’s interface, a child theme was created.
Elementor is a ‘Page Builder’ that provides component based building blocks that can be added to a WordPress site and customised.
+
+
+
+
This has the advantage of speeding up development time considerably but brings disadvantages similar to those discussed above for using OceanWP.
+
Again, for this particular project, I felt the advantages outweighed the disadvantages.
+
Apart from Elementor, a limited number of other plugins were also used:
+
+
Contact Form 7.
+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.
+
Elementor Addon Elements.
+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.
+
GDPR Cookie Compliance.
+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.
+
iThemes Security.
+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).
+
UpdraftPlus - Backup/Restore.
+Regular, offsite backups are another essential component to any website.
+UpdraftPlus handles these very well.
+
WP Fastest Cache.
+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.
+
WP Mail SMTP.
+It can sometimes be a little tricky getting mail working when using WordPress within Docker containers.
+This plugin provides a simple solution.
+
+
For an actual production site where Search Engine Optimisation is important I would also use a plugin to cover this.
+I find The SEO Framework to be the least bloated, competent plugin to achieve this.
+
With WordPress, it is essential to test the speed of the site before and after adding any plugins, especially for ones not used before.
+
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.
+
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.
+
The Summary
+
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.
+
More interesting are the justifications I covered regarding the development choices made.
+
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.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/blog/series/portfolio/index.xml b/blog/series/portfolio/index.xml
new file mode 100644
index 0000000..e7364f2
--- /dev/null
+++ b/blog/series/portfolio/index.xml
@@ -0,0 +1,63 @@
+
+
+
+ Portfolio on RayElliottDev
+ https://rayelliott.dev/blog/series/portfolio/
+ Recent content in Portfolio on RayElliottDev
+ Hugo -- gohugo.io
+ en-us
+ Sat, 08 Feb 2020 12:27:18 +0000
+
+
+
+
+
+ Flow Model Management
+ https://rayelliott.dev/blog/posts/flowmm/
+ Sat, 08 Feb 2020 12:27:18 +0000
+
+ https://rayelliott.dev/blog/posts/flowmm/
+ 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.
+
+
+
+ Marc Leopold Photography
+ https://rayelliott.dev/blog/posts/leopold/
+ Sat, 01 Feb 2020 18:54:46 +0000
+
+ https://rayelliott.dev/blog/posts/leopold/
+ 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’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.
+
+
+
+ Charles Stantham Legal Services
+ https://rayelliott.dev/blog/posts/stanthams/
+ Mon, 20 Jan 2020 18:55:00 +0000
+
+ https://rayelliott.dev/blog/posts/stanthams/
+ 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:
+
+
+
+ Giana Boutique
+ https://rayelliott.dev/blog/posts/giana/
+ Sun, 29 Dec 2019 18:55:07 +0000
+
+ https://rayelliott.dev/blog/posts/giana/
+ 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.
+
+
+
+
\ No newline at end of file
diff --git a/blog/series/portfolio/page/1/index.html b/blog/series/portfolio/page/1/index.html
new file mode 100644
index 0000000..82b326d
--- /dev/null
+++ b/blog/series/portfolio/page/1/index.html
@@ -0,0 +1 @@
+https://rayelliott.dev/blog/series/portfolio/
\ No newline at end of file
diff --git a/blog/sitemap.xml b/blog/sitemap.xml
new file mode 100644
index 0000000..a692ff1
--- /dev/null
+++ b/blog/sitemap.xml
@@ -0,0 +1,110 @@
+
+
+
+
+ https://rayelliott.dev/blog/tags/bespoke/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/categories/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/cms/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/posts/flowmm/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/nuxt/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/series/portfolio/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/categories/portfolio/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/posts/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/series/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/vue/
+ 2020-02-08T12:27:18+00:00
+
+
+
+ https://rayelliott.dev/blog/posts/leopold/
+ 2020-02-01T18:54:46+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/october-cms/
+ 2020-02-01T18:54:46+00:00
+
+
+
+ https://rayelliott.dev/blog/about/
+ 2020-01-31T12:54:00+00:00
+
+
+
+ https://rayelliott.dev/blog/
+ 2020-01-31T12:54:00+00:00
+
+
+
+ https://rayelliott.dev/blog/posts/stanthams/
+ 2020-01-20T18:55:00+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/elementor/
+ 2020-01-20T18:55:00+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/wordpress/
+ 2020-01-20T18:55:00+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/ecommerce/
+ 2019-12-29T18:55:07+00:00
+
+
+
+ https://rayelliott.dev/blog/posts/giana/
+ 2019-12-29T18:55:07+00:00
+
+
+
+ https://rayelliott.dev/blog/tags/woocommerce/
+ 2019-12-29T18:55:07+00:00
+
+
+
\ No newline at end of file
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+