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 an entire site from scratch.
Tech
This site is completely static and is written entirely in pure vanilla HTML, CSS, and JavaScript. It uses a few unavoidable premade libraries and services, but it's completely free from major frameworks (e.g. React, Vue.js, Angular).
External Libraries
- vanilla-tilt.js: Used to make the cards on the home page.
- quicklink: Used to improve loading times.
- Juxtapose.js: Used to make before/after comparisons (Example).
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
Each blog post is stored as a Markdown document, and is built into HTML by my custom static site generator. My SSG searches the blog_src directory for markdown files, reads the file contents, and applies it a template to create HTML files. It also dynamically updates other files (like the All tag page) with links to each blog post. I also wrote a pre-commit hook that runs build.py before each commit, ensuring I don't forget.
Web Components
I've utilized Web Components for things like the header, footer, and buttons.
This allows me to just quickly drop in an \<ethan-header> element, and the header will be instantiated in Shadow DOM.
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 500+ lines of CSS.
Color Palette
- Primary: #ffffff: White
- Backdrop: #121212: Black
- Accent: #8fdfd4: Spearmint Teal
Typography
- Body Font: I perused the entire Google Fonts catalogue to find a sleek neo-grotesque font that supported Latin and Cyrillic. I finally settled on Nunito. (Заслужаваше си, защото вече мога да имам български текст!)
- Header Font: I chose Sen for the headers because it looks stylish, clean, and I like the look of the lowercase t.
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 June 9, 2025, the site earns an average Lighthouse score of 99.75.
It's very close to a perfect score, but I lost one point in performance because of the 520 milliseconds (half a second) it takes to download the font.
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 harvesting it sounds complicated. Your data remains yours because I don't want it and can't figure out how to get 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