My personal website built with jekyll hosted by GitHub Pages.
- A desktop-first responsive design
- Rich components:
- SVG epicycles sketching a path (coordinates list)
- Responsive tabs for small content (experience, projects)
- Accordeon-styled section
- Responsive nav menu
- A simple loader
- SEO and Open Graph
- GitHub's Feather SVG Icons
- No more bloated CSS/JS libraries! I am big boy now.
- Minified HTML, CSS, and JS
Using Google Fonts, with best practices for fonts in mind to optimize performance.
- Sans serif: Lato by Łukasz Dziedzic
Serif: Roboto Slab by Christian Robertson- Monospace: Roboto Mono by Christian Robertson
A near perfect score on the Lighthouse performance test!
Full JSON report here
I optimized performance as much as possible, ditched bloated libraries I was using (Bootstrap, jQuery, FontAwesome, etc), and tried my best to follow best practices. I recommend reading guides from web.dev.
This website has a desktop-first responsive design, the Lighthouse performance test for the mobile version is in the 60s.
I have finally opted for a CI to deploy to the gh-pages branch,
for the following reasons:
- To use third-party plugins (aka "unsupported plugins")
- To update to Jekyll 4 (the
github-pagesgem have been stuck on 3.9 for years) - To change my Jekyll source directory (yes, I'm one of those people)
I use GitHub Actions as a CI tool
to build and deploy the Jekyll website on every push from my master branch.
I used Jekyll Deploy Action for the Jekyll build/deploy action, check Jekyll's detailed guide on CI with GitHub Actions for more details or other choices.
This website does not depend on any plugins to work.
Removing the plugins from the Gemfile and _config.yml
would allow Jekyll to run smoothly.
Nevertheless, I am using jekyll-minifier for minifying JS and HTML, I think it's excellent.
This repo is under the MIT License, you can use any of its components as long as you acknowledge its authors.
I was inspired by many designs and elements on CodePen. While I haven't forked/copied code, I have used designs from others, notabely Brittany Chiang's website.
Also, I'm pretty proud of my SVG Fourier epicycles animation, I did it from scratch in Vanilla JS to optimize its speed, so please give me credit if you use it in your work. I'm probably going to open up a repo for it.
After cloning the repository, make sure you have Ruby and RubyGems installed. Check official Jekyll guide.
I recommend installing Bundler. Make sure you run these commands from the repository root directory.
gem install bundler
bundle install --path vendorIf the gems are successfully installed, you should be able to run the website on a local web server using the following command.
bundle exec jekyll serve --watch