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.
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.
Tech Stack
Strengths
- Gorgeous page transitions and micro-interactions
- No CSS framework dependency — pure CSS with custom properties
- Project case study template with rich media support
- Dark mode with system preference detection
Weaknesses
- Highly opinionated design — may need significant restyling
- No CMS — content lives in markdown/JSON
- Contact form needs a backend (Formspree, etc.)
Best for
Developers and designers who want a polished personal site with minimal setup
Not ideal for
Agencies with many team members or sites needing complex content management