387 lines
17 KiB
HTML
387 lines
17 KiB
HTML
<!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>
|