I designed this website with a modern, static, pre-compiled approach to optimize for speed and ease of deployment. It's an example of the JAM Stack philosophy of web development. Page style is responsive, utilizing the same CSS for desktop, tablet, and mobile browsers.

The site is hosted on a cloud service and uses k3s to orchestrate the Docker containers. HTTPS certificates are generated with certbot and validated by Let's Encrypt.

JAMstack sites are well-positioned for ease of deployment with services such as Netlify and GitHub Pages. However, I wanted to demonstrate my proficiency in building out the backend architecture from scratch.

The cloud server has two major components: a nginx reverse proxy, and a single node k3s cluster which manages the web container. The reverse proxy points HTTPS traffic at the open NodePort in the k3s cluster. The reverse proxy handles HTTPS encryption and automatically renews expiring certificates.

The k3s cluster manages a single service and deployment. The service exposes a NodePort which points to the deployment. In a larger-scale or multi-node architecture, the NodePort would be replaced with a LoadBalancer.

k3s is configured to pull from my private registry, using a stored secret in the cluster to access the registry over HTTPS.

Deploying a new website release is a single command, using an ansible playbook. The playbook builds a new site version, packages the docker container, pushes it to my private registry, and then uses kubeconfig to push an update to the k3s controller plane.

A useful tool for private registries is the Docker Registry Browser. You can look at all of the tags and layers for containers stored in the registry.

The website is written in JavaScript, using React to build the user interface. React-static provides the static site functionality, with webpack and babel under the hood. React-static allows for extremely fast rendering with minimal configuration.

All CSS styles are written in-line with JS code, using styled-components to render CSS. Code is split during build time, creating standalone, pre-rendered template pages. Site content is written in markdown and converted to JSX using markdown-to-jsx. Site data is loaded with jdown during the build process.

I use Affinity Designer to mock up website designs before moving to code. I targeted a retro-future design feel, using the color scheme as the base for the design. The color scheme is inspired from a Google Wallpapers image. To keep with the design goal, I used geometric shapes, gradients, drop shadows, neon glows, and a block style typeface.