Colophon

How I built my portfolio website

Framework and tooling

I knew I wanted to build my portfolio website as a Jamstack site since I read in Tom Greenwood's book Sustainable Web Design about the advantages of this architectural approach for performance and web sustainability. As a static site builder, I chose Astro, a JavaScript meta framework designed for content-rich websites like blogs and portfolios.

I plan to use Front Matter CMS as a content management system for project descriptions and blog posts.

Design

I built this website with the official Astro portfolio theme. I plan to write a blog post to explain in more detail why I made this decision. Here are the main reasons:

  • I made this website to showcase my other coding projects. Using starter code got me to a working version much faster than starting from scratch.
  • I can use features that are outside of my current technical skills and gain experience in working with an existing code base.
  • I'm not a designer and don't have the skills to design a portfolio website. Even if I had opted to write all the code myself, I still would have used a design template.

The color palette came with the theme, as did the fonts and the SVG icons. The fonts are Public Sans for the body and Rubik for headings. Public Sans was developed by The United States Web Design System (USWDS). Rubik was designed by Philipp Hubert and Sebastian Fischer at Hubert & Fischer. Both are variable fonts and licensed under the Open Font License. The icons are adapted from Phosphor Icons.

Customi­zation

I plan to add a blog to this website.

I added this /colophon and a /now page. They are both slash pages. The /colophon describes how this website is made. The /now page tells you what I am focused on at this point in my life.

I made a few UI modifications to improve accessibility and responsive design. Web accessibility removes barriers that prevent access to and interaction with websites. Responsive web design (RWD) aims for web pages to render well on a variety of devices.

Hosting

This site is deployed to Netlify as a static site and takes advantage of continuous deployment. The source code is hosted in a Git repository on GitHub. Netlify watches this repository's main branch for changes. It rebuilds and republishes the site at each new commit.

Domain name

I chose my first and last name with a .com extension as the domain name for my portfolio site. This was the most obvious—and often recommended—choice for a website that I want to use in job applications. It also matches my social media handles on most platforms.

I use Hover as my domain registrar and Netlify DNS as my DNS provider. My email provider is Proton Mail.

Acknowl­edge­ments

I used the following resources as inspiration and guidance for creating this website:

  • Getting job ready learning path on Frontend Mentor - The article Creating an effective portfolio has helpful tips on how to structure a portfolio, source a design, select projects, and write project descriptions.
  • Building an Effective Dev Portfolio by Josh Comeau - This e-book has has two case study and lots of good advice on how to use a portfolio site to stand out to prospective employers when searching for a junior developer job.
  • You Belong in Tech by Anna Jean McDougall - This is a great book for anyone who is considering a career change into tech. The sections on personal branding and crafting an elevator pitch have been very helpful to me.

Last updated on June 25, 2025.