Project 04
This Website
The site you're on right now — built to be its own proof of what I can do.
Overview
What it is
A personal portfolio built entirely from plain HTML, CSS and JavaScript — no framework, no build step, no template. Nine pages, a working screenshot carousel, a scroll-drawn timeline, and a proper light/dark theme system, all hand-written.
The brief
Why it exists
I wanted a site that didn't read as a generic developer template — calm, premium, and technical without leaning on hacker clichés like neon and matrix rain. It needed to feel like scrolling through a story, not a static CV, and hold up equally well on mobile.
Technology
How it's built
Genuinely dependency-free — the only external resource is the Google Fonts stylesheet for Space Grotesk, Inter and IBM Plex Mono. Everything else, including the animation system and the carousel, is hand-written.
Development
Approach & features
Scroll reveals run on IntersectionObserver
rather than a scroll-jacking library, with varied fade/scale/blur
transitions instead of one repeated animation. The Education page
draws an SVG "signal path" as you scroll past each stage. The
project galleries — dots, arrows, swipe support — pull their
image lists from one small config file, so adding screenshots
never means touching markup or JavaScript logic.
Challenges
Getting mobile right
The hardest part wasn't desktop — it was making sure a design built around generous scroll storytelling didn't feel cramped or messy once it hit smaller screens: decorative elements like the scroll cue needed to know when to get out of the way rather than being scaled down and left overlapping content.
Result
Where it stands
Live at cairimell.co.uk, hosted on IONOS, and still actively evolving — this case study included.
Screenshots
A closer look
Reflection
What I learned
Building the portfolio itself as a real project — with iteration, feedback and revisions rather than a one-shot deliverable — turned out to be a good exercise in the same thing I want to bring to client work: knowing when a feature earns its complexity and when it doesn't.