My WordPress blog just wasn’t cutting it. It was a fine blog, but if I was going to represent myself as a web developer, I needed something a little more custom. I wanted to put my programming skills to use by building an attractive site that could house all of my online projects. This included a filmmaking portfolio, programming portfolio, and blog.
Designing The Site
I scoured Behance for design inspiration. I couldn’t help noticing how much care some of the designers put into the presentation of their work. They would fit together mockups, font stylings, and color swatches together in a single canvas. Beyond looking slick and professional, I could see how this extra information could help express the feel of the site and make my job easier when the time came to develop. The design phase turned into a project in its own right. You can find by final design on Behance.
My design was inspired by a set of photos I had taken at Glacier National park. Hannah and I stopped through Glacier when we were traveling out west a few years ago. The mist sprayed pines and rushing glacial rivers had some of the most intense colors I had ever seen. It was like stepping into another world. We also stumbled across a lodge in the park that had been built in 1913. With its stove fireplace and massive timbers, the place looked like it hadn’t changed in a century. With the park in mind, I chose fonts that felt classy and timeless. I selected my fonts from Google fonts and used Adobe Kuler to create my color scheme. The design work was done in Photoshop.
My website needed to function as a gallery to showcase my work. I needed it to showcase three disparate types of work. This presented a design challenge. How could I display my video work, web development projects, and blog with equal importance. My solution was to treat the homepage as a landing page similar to a link tree. My portfolios and resume can all be accessed via buttons on the homepage (in addition to the navigation bar). They are stacked in a way that gives equal visual importance. Placing the cards in a grid also lends itself to mobile designs because they can stack one on top to the other.
Choosing My Framework
While I knew I wanted to build my site from scratch, I still wanted to write and manage my blog posts using wordpress. I could have built a custom WordPress theme, but I just wasn’t interested in writing PHP. I wanted something more performant, and I preferred working with Javascript. This led me to Gatsby JS.
What Is Gatsby
Gatsby is a static site generator, but some argue it’s more of a front end framework. Gatsby sites are written in React, but are deployed as a collection of static files. This solves some of the search engine optimization problems that come along with React. Gatsby sites are also inherently secure because they do not involve any server side rendering. Gatsby uses GraphQL to build its data layer. This means data from multiple sources can be funneled into one GraphQL server. After installing the necessary source plugins, data from (for example) markdown and WordPress are queried in the same way. Finally, Gatsby is built with speed in mind.
Project Structure
React allows developers to create reusable components. This means portions of code that appear in multiple places (such as a navigation bar) can be written once, stored in its own file, and imported into the pages that require it. This makes site maintenance infinitely easier, improves code readability, and makes for a more enjoyable developing experience. Keeping DRY principles in mind, I created a layout component . Each page calls the layout component and passes the page content to the component. The layout component then generates the page title and tacks on the navigation bar and footer. Because the homepage features a full screen image that the navigation bar sits on top of, I needed to allow the homepage to render the navigation bar on its own. I used conditional rendering to render that navigation bar within the layout component only if the page title is not titled “Home”. My code is still DRY because the navigation bar is stored in its own component.
Organizing My Style Sheet
Global CSS style sheets are notoriously difficult to maintain. I wanted to make sure my style sheet would make sense to my future self. I achieved this by separating my styles into logical sections using comment headings. The top of the document has rules for resetting default styles and color variables. Styles unique to one page sit under a comment header identifying the page that the styles belong to. Sections are loosely laid out based on where they appear on the page. For example, the footer rules are at the bottom of the document just above the media queries.
Using WordPress as a Headless CMS
Because I already had blog posts on my WordPress site, I wanted to dynamically pull posts from my existing blog to my new site. I was able to do this using GraphQL and the WordPress API. The front end (the head) is built with Gatsby while the back end data is stored in WordPress. This makes WordPress a headless content management system. I’m able to use all of the editing tools native to WordPress while still taking advantage of Gatsby’s speed, security, and enjoyable development experience. I am still able to achieve blazing fast speeds because my website only queries wordpress when I generate that static files. It took some fiddling to get the formatting and page routing right, but the final result is an attractive and maintainable blog.
The Jam Session Player
“Jam sessions” were a series of acoustic live performances I recorded between 2015 and 2017. I wanted to create a component with a list of video thumbnails on the bottom and a video player at the top. I created an array of objects to store information on each video. Each object contains the video title, Youtube ID, and a boolean to denote visibility. I then loop over the array and display the video using React Player. If the visibility property is set to false, the CSS display property is set to none. Below the video player, I display a list of video thumbnails pulled from the ytimg API using the Youtube ID. When a user clicks on a thumbnail, the corresponding video’s visibility is set to true and all other video’s visibility is set to false. Click to see the Jam Session player in action.
Future Updates
There are a few changes I would like to make to my website. The site could use a gallery component to display my photos. Ideally, It would allow me to organize photos into separate albums and display the selected album in an attractive grid similar to the Jam Session player described above. Also, my design shows blog post filtering based on tags. Once implemented, users will be able to click on the tag buttons at the top of the blog post list to filter the posts. This will be more useful once I have written more blog posts.