My personal website is my home on the web.
I made this site because I want to have an online presence, but I don’t want to use social media (e.g. Instagram, Twitter), nor do I want to use someone else’s premade blogging platform (e.g. Blogger, Tumblr, Wordpress).
My solution was to code a site of my own.
Tech
This site is completely static and was programmed from scratch in pure vanilla HTML, CSS, and JavaScript.
GitHub Pages
This site is hosted on GitHub Pages. I chose GitHub Pages because it’s free, seems reputable, and I was already going to use GitHub for source control.
Build
This site is built using Hugo, an SSG written in Go.
Before switching to Hugo, this site used a custom SSG I wrote with 500+ lines of Python code, archived here.
Style Guide
I had a moderately specific vision for what I wanted my website to look like, and I think I accomplished that well with my site’s CSS styles. The primary stylesheet, common.css, contains 1215 lines of code. The auxiliary stylesheets add another 2040 lines. I utilized nestled CSS to create reusable and readable styles.
Color Palette
This site uses a dark theme with a spearmint teal accent colour.
- Primary: #ffffff: White
- Backdrop: #121212: Black
- Accent: #8fdfd4: Spearmint Teal
Typography
I self-host this site’s fonts using variable woff2 files. Variable fonts significantly cut down on the file size, allowing the site to load faster. I sourced the fonts from the Variable Font Helper app, which sources them from Google Fonts.
- Primary Font: I use Nunito as the primary font, for its sleek neo-grotesque design and its support for both Latin and Cyrillic glyphs.
- Secondary Font: I use Sen as the font for headings. There are many subtle differences between Sen and Nunito, but the most noticeable is the lack of rounded strokes. Sen looks sharper and more angular than Nunito.
- Monospace Font: I use Fira Code for all monospace text, like code blocks, ASCII art, or inline code spans.
Special Effects
- Blur: I love glassmorphic blur effects, but due to performance concerns, I’ve only used it in the header and footer. If some mathematician figures out how to cheaply perform a gaussian blur over a large sample space, I want to be the first to know so I can add a subtle blur to the main panel without tanking performance.
- Tilt: If you hover over the cards on my home page, they’ll respond to the mouse by tilting in 3D. I used vanilla-tilt.js for this.
Lighthouse
As of July 14, 2025, the site earns a perfect 100 on Google Lighthouse.
To quote the official Lighthouse documentation: “A perfect score of 100 is extremely challenging to achieve and not expected”.
My site’s exceptional performance is largely a consequence of my aversion to web frameworks. Frameworks like React tend to be very heavy and slow, so by using hand-written JavaScript and CSS, fewer bytes need to be transferred to load the page. I also use WebP and WebM-AV1, the objectively best and most efficient formats for images and videos.
Privacy
This site does not use cookies, trackers, analytics, or any external telemetry tools. This is partially because I care about your privacy, but mostly because I don’t care about your personal information and collecting it sounds complicated. Your data remains yours because I don’t want it and can’t be bothered to harvest it.
Accessibility
This site is designed to be accessible to as many users as possible. I’ve done my best to follow best practices regarding meta tags, semantic markup, keyboard navigation, and alt text. Also, before each git push I test every single page in Firefox’s Responsive Design Mode to ensure that the site remains functional on different devices and screens.
Conclusion
My personal website is one of my favorite projects I’ve ever made. It’s aesthetically pleasing, serves a purpose, was fun to make, and forced me to learn new programming concepts.
I’m proud of my little corner on the web, and I hope you enjoy it as much as I do. Thanks for reading.
~Ethan