Personal Website
Overview
I built this personal website, using the static site generator Jekyll, to showcase my projects and skills while learning web development fundamentals. Instead of adopting one of the many publicly available pre-made Jekyll themes that other folks have created (a lot of them are pretty cool!), I decided to design and code my own Jekyll theme that reflects my minimalist aesthetic and includes modern features like system-aware dark mode. After building and testing this website locally, I decided to deploy this website to Cloudflare Pages with Git integration.
A brief primer on Jekyll
Jekyll is a static site generator. Basically, it takes a set of files organized according to a specific directory structure and spits out a fully-built static website! There are certain requirements needed before getting a site up and running, like installing Jekyll itself, for example. You can read all about it on the Jekyll website!
Cloudflare Pages and Git Integration
I needed a way to deploy this website, and Cloudflare Pages is the solution I chose to do this.
Initially, I had built a basic version of this website using a Jekyll theme I found on GitHub and I had deployed that version to GitHub Pages.
This was a satisfactory solution for me at the time as I was testing whether I could figure out how to build something with Jekyll and deploy something to GitHub Pages.
I wanted to take it further and not limit myself to the default domain name of a GitHub Pages site, username.github.io.
That’s when I bought my domain name through Cloudflare and I was curious about what else Cloudflare offers, and that’s when I came across Cloudflare Pages.
It seemed like a more attractive platform to me, especially since it offers more features and security.
Deploying on Cloudflare Pages has the benefit of offering automatic builds and deployments with Git integration. I’m using GitHub as my chosen Git hosting platform to do this but GitLab is also an option. Every push to the chosen production branch automatically triggers a new build and deployment, which makes updates seamless! You can read more about it on the Cloudflare Pages website.
I’m ready to discover more cool features and benefits that Cloudflare Pages and the built-in Git integration have to offer as I continue to experiment with this site.
Features
- Three-state dark mode. Auto, light, and dark modes that respect system settings while allowing manual override. Check out the legend and video demo below!
- Auto: Follows system settings
- Light: Always light mode
- Dark: Always dark mode
- Responsive design. Works seamlessly across desktop, tablet, and mobile devices
- Custom Jekyll theme. Built with organized SCSS architecture
- SEO optimized. Integrated sitemap and meta tags for search engine visibility
- Projects collection. Easy-to-maintain markdown-based project showcase
Technical Details
Built the entire site using Jekyll’s static site generator with a custom theme architecture. Implemented a sophisticated website theme setting using JavaScript and localStorage that detects system preferences on first visit, then remembers user choices across sessions. The theme toggle cycles through three states (light/auto/dark) with smooth CSS transitions.
Solved several technical challenges including Safari’s text selection behavior by using flexbox layouts and preventing flash of unstyled content on page load by running theme detection before DOM rendering.
The styling uses a modular SCSS architecture with separate files for variables, base styles, layouts, and dark mode overrides. This makes the codebase maintainable and easy to extend with new features.
Tech Stack
- Jekyll - Static site generator
- SCSS - CSS preprocessing with organized partials
- JavaScript - Theme toggle logic with localStorage persistence
- Liquid - Templating for dynamic content
- Cloudflare Pages - Hosting and deployment with CI/CD pipeline
- Git/GitHub - Version control
What I Learned
This project taught me how to build a modern website using a static site generator like Jekyll, website interactivity using JavaScript, and the importance of cross-browser compatibility testing.
I gained hands-on experience with writing HTML code for the different layouts I used to build this site, styling webpages using SCSS, responsive design principles, creating website pages with Markdown, using the Liquid templating language, Git workflows, and configuring a deployment on Cloudflare Pages with Git integration.
I developed effective problem-solving strategies by leveraging documentation, online resources, and modern AI tools to accelerate my learning while gaining a better understanding of the underlying technologies.
Working through styling challenges, like Safari text selection quirks, helped me practice my debugging skills and understand browser rendering differences.
I will admit that styling webpages was the most difficult aspect of this endeavor. Understanding how all the different HTML elements come together and interact with each other based on all the different rule sets had my head spinning. But using JavaScript to make the webpages interactive (toggling between themes!) was the most fun!
If you made it this far, thank you. You are on the live site now, so feel free to explore :)