Based on TechFolios.
"100 is lighthouse's limit, not this website's limit."
"So accessible, so performant, makes me want to consider my career as a front end dev"
—— Tom Han 2025
Changes made from the original TechFolios template include:
- Features
- Animation effects for icons around profile picture
- Implemented dark mode with toggles.
- Added a "Now Playing" Indicator with Now Playing API
- Clicking my name would cycle through different versions of my name.
- Added now page.
- Added mermaid support for essays.
- Projects can be filtered by labels (programming languages/technologies).
- Aesthetics
- Layout changes to the home page (bio section under the profile picture)
- Added "Last Updated" field to writings/essays that receives updates.
- Refine the project page logic to include years long project and sort accordingly
- Reworked card layout to adapt for mobile interface and support non-square images.
- Badges/Pills that represents a coding language/technology change color based on the language and have a little icon along with it.
- Accessibility
- Badges/Pills with brand color that have low contrast with the background will have a contrasting border to improve visibility, in compliance with WCAG 2.1 AA standards.
- Using
prefer-contrastCSS media query to detect if the user prefers high contrast mode, and adjust the styles to be in compliance with WCAG AAA standards.
- Performance
- Smart prefetching and lazy loading of images to improve performance.
- With GitHub Actions, the site inlines critical CSS and minified JavaScript to reduce render-blocking resources.
- Miscellaneous
TODO:
- Visitor counter (distinct visitors and page views I guess).
- Add a Chinese (Simplified) Version, and the corresponding language toggle.
AI Summary For Projects (cuz everyone loves that)I actively hate this idea now!- Profile Icons with the latest project that I am working on.
- Make my cool adaptive badge/pill system more generic so that I can use it for other things.
Footnotes
-
Which is greatly appreciated. ↩