About This Site

By day I work with Angular, so I wanted to use something completely different to make this site. I decided to go with Sapper, a Svelte framework based on next.js. I also haven't used Docker before and have need for handling different node versions, so I used this project to get started.

I have a few ideas for cool sections of the site, so check back soon!

Design

Yes, it's the default theme Sapper uses with some of the colors changed. I wanted something simple and I really liked it right off, so I'm sticking with it. At some point I'll do a portfolio piece of craziness, but I don't need one right now.

Tech

Because Svelte's components are so simple, I originally didn't think I'd be using Sass, but that changed real quick. I also did the layout with CSS Grid - what a breath of fresh air compared to Bootstrap and Flexbox.

Fonts

I used a type scale based on perfect fourths for the sizing. I wanted to use the golden ratio or perfect fifths, but the size gets too huge too quickly.

Headings: B612

This font was developed by AirBus to have high visibility on airplane cockpit screens, which is just about the coolest thing I've ever heard about a font. I'd love to use it as a programming font (there's a monospace version), but the parentheses look far too close to square brackets: ().

Body: Inter

I found this front from this fascinating Quora answer. The site has some super interesting info as well.

Code: Monoid Nerdfont

I picked Monoid as my main programming font a while ago because I found it super readable, it came with ligatures, and because a monad is a monoid in the category of endofunctors. I used to use vim as my main editor and still have it all tricked out so I need Powerline support, and the extra glyphs in the NerdFont version come in handy from time to time.

Build

The site is hosted on Github pages, which means the static files have to be in the master branch. So, I made a sapper branch to hold the application, which I put in the app folder.

Useful Resources

• Svelte
• Sapper
• Simplified guide to using Docker for local development environment
• Svelte / Sapper with Sass!
• A Complete Guide to Grid

For About Me, go to the homepage.