This Portfolio
Prerendered pages, live scores within a minute of a goal
- TypeScript
- Next.js
- Tailwind
What it is
The site you are reading, built so it loads fast, reads clearly on a phone, and never shows a number it cannot back up.
Who it helped
Whoever reads this is usually a recruiter with thirty seconds and a dozen tabs open, or a friend on their phone. Neither of them wants to wait for a page about somebody else's career to finish loading.
So every page is built ahead of time and served as plain HTML. The one live part, the Fantasy Premier League panel on the soccer page, refreshes on a timer instead of on every visit: every minute for live scores during a match, every five minutes for everything else. A slow upstream never slows the page down. The site also checks whether the reader has asked their device to reduce motion, and if so the animations turn themselves off rather than making someone feel unwell.
The other thing I wanted was for it to be honest. Every project page here has a section on what I would do differently, including the projects that did not really work. That is the version I would want to read about someone else.
What went well
The facts on the page come from the source, not from me typing them in. The status box on the home page reads the last commit, the build time and the Next.js version out of git and the build itself. If the Fantasy Premier League API fails, the panel shows nothing rather than a stale or half-loaded score. Log entries marked as drafts are left out of production builds automatically, so an unfinished post cannot go live by accident.
What's next
Measure what it costs to load. It started as a Go and htmx site that shipped about 14kB of JavaScript, and the rebuild traded some of that lightness for animation and a live panel. I want real numbers for load time and script size on a slow phone, and to cut whatever does not earn its weight.