Folio Kit

Folio Kit proves that a portfolio doesn’t need a CSS framework to look exceptional. Built with pure CSS custom properties and Svelte 5’s transition system, it delivers the kind of page transitions and micro-interactions that make visitors slow down and actually look at your work.

The project showcase uses a case study format — each project gets a dedicated page with hero images, context sections, and embedded media. It’s structured to tell the story of your work, not just list it.

What stands out

The transitions. Page navigations feel silky, images load with subtle reveals, and the overall rhythm of the site feels considered. This isn’t a template — it’s a design statement.

No framework dependency means the CSS is yours to understand and modify. Custom properties make theming straightforward, and the dark mode implementation detects system preference while allowing manual override.

The transitions are implemented using Svelte 5’s transition: directive combined with a custom onNavigate callback in +layout.svelte. Page elements stagger out with a 40ms delay between items, then the incoming page fades up from a slight Y offset. Image reveals use an IntersectionObserver wrapper that triggers a clip-path animation — it feels native, not library-heavy. The total transition JS adds under 2 KB to the bundle.

Each case study page follows a structured template: a full-bleed hero image, a metadata bar (client, role, timeline, tools), a two-column “challenge / solution” narrative section, and a scrollable gallery of process artifacts or final deliverables. The template supports embedded video, before/after image sliders, and pull-quotes — so you can showcase design thinking, not just final screenshots.

Where it could improve

The design is strongly opinionated. If your personal brand doesn’t align with the minimalist aesthetic, you’ll be restyling rather than customizing. That said, the CSS architecture makes restyling manageable.

Content is stored as markdown and JSON files — no CMS. Fine for a personal site, but if you want to hand this off to a non-technical client, consider adding a headless CMS.