Personal Site Build
The Goal: For the last few years I have made several attempts to create a website/portfolio for myself that I could easily access and update. I had already gone through using both Wordpress and Canva but I was not satisfied with the amount of customization was available to me, and was left paying monthly subscription fees.
The Solution: So, I decided to build a static site from scratch using standard HTML and Tailwind CSS. It was a good opportunity to get more comfortable with code and set up a proper development workflow. It enabled me to have full control over the domain and hosting without the overhead of a website builder.
Escaping the "Builder" Trap
The main driver for this project was cost and flexibility. Website builders are convenient, but they lock you into their ecosystem. But by switching to HTML, I could create the exact minimalist layout I wanted! I used Tailwind CSS to handle the styling because it keeps the file small, manageable, and easy to update.
module.exports = {
darkMode: 'class',
theme: {
extend: {
colors: {
cream: '#F0EFEA',
surface: '#FFFFFF',
'dark-bg': '#18181B',
}
}
}
}The Deployment Workflow
I wanted the site to be as easy to update as possible. To do this I set up a continuous deployment pipeline using GitHub and Cloudflare Pages. Now, when I want to add a new project or fix a typo, I just edit the code on my laptop and push the changes with my command Terminal to the repository. Cloudflare detects the commit and rebuilds the site automatically in seconds.
# The entire update process takes three commands
git add .
git commit -m "Added new case study"
git push origin main
# Cloudflare automatically builds and deploys to https://olivertwilliams.com
My Project Update System
Early on, I used a custom html website for each individual project. But quickly I realized this was both wasteful with repetitive code, and was very time consuming. Every time I wanted to change the layout, I’d have to edit twenty different files. So after some research, I managed to build a single reusable template and a central Javascript file to pull information from.
const projects = [
{
title: "Mainframe Studios",
category: "Advertising",
desc: "Unique typeface and poster...",
image: "images/mainframe2.png",
link: "project.html?id=mainframe"
}
];How It Works
This array is the basis for the whole portfolio. When you click a project, it sends you to the master template (project.html).
It sees ?id=mainframe, looks up the corresponding object in this array, and injects the title, image, and description into the objecy model. This lets me just add a new case study by adding one block of text to this file, instead of having to write a new HTML page.