Colophon

I built my first portfolio webpage in 2018, welcome to its 2nd iteration.

Tech stack

This version of the website is built using Svelte (+ Sapper for routing) and is hosted on Vercel. It takes advantage of Github Actions for pulling ~live data from various APIs and updating the corresponding JSON files.

The projects, blog entries etc are written in markdown and parsed as HTML using marked. Here's the guide I used for setting up Netlify CMS with a Sapper app.

Style Guide

I wanted this version of the website to be minimalistic and scalable for years to come and I've tried my best to keep the design somewhat evergreen.

Typefaces

  • Akkurat for the main body and content
  • SF Mono for code snippets and other highlighted details
  • Recoleta for sweg šŸ˜Ž

CSS Palette

:root {
    /* Backgrounds */
    --dark-background: #161616;
    --light-background: #dadada;

    /* Text colours */
    --dark-text: #2B2B2B;
    --light-text: #dadada;

    /* Link underline and hover background */
    --link-underline: inset 0 -8px 0;
    --link-background: inset 0 -20px 0;

    --dark-link-color: #353535;
    --dark-link-underline: #93939388;
    --dark-link-hover-bg: #939393b7;
    --dark-link-hover: #313131;

    --light-link-color: #e2e2e2;
    --light-link-underline: #81818171;
    --light-link-hover-bg: #666666;
    --light-link-hover: #f0f0f0;

    /* Blockquote background */
    --dark-blockquote-background: #dadada28;
    --light-blockquote-background: #2B2B2B28;

    /* Card shadows */
    --light-card-shadow: 7px 7px 21px -10px #000000;
    --dark-card-shadow: 7px 7px 21px -10px #252525;

    /* Selection colour */
    --selection-font: #ffffff;
    --selection-background: #00415f73;
}

Licenses