Frontend design — portfolio 2025

Five sites. Five design languages. No templates.

Each demo below is a complete, custom-built front end — one HTML file, no framework, no page builder, no stock photography. Every illustration is drawn in SVG or CSS, and every one carries a real interactive feature you can click, not a screenshot of one.

5Complete demos
0Dependencies
1File per site
AAKeyboard & contrast
NovaSaaS · dark product UI

Nova — revenue intelligence

01

A dark product landing page for a B2B analytics tool. The dashboard is not a mockup image — the chart is generated from data with Catmull‑Rom smoothing, redraws when you switch time range, and reads out values on hover.

⌘K command palette Live SVG chart Pricing calculator Bento gridCount-up KPIsScroll progress
Open demo Inter Tight · JetBrains Mono
Atelier RueCreative studio · editorial

Atelier Rue

02

Editorial and deliberately loud. Custom cursor that grows and labels itself, a project index where a generated cover chases your pointer, and an archive rail you throw with real momentum physics.

Custom cursorDrag inertia rail Cursor-follow preview PreloaderMagnetic linksPaper grain
Salt & EmberRestaurant · warm luxury

Salt & Ember

03

Fine dining, built around a canvas of rising embers. The booking flow is genuinely functional: a real calendar that closes Mondays, time slots whose availability responds to party size, and inline validation.

3-step booking flowEmber canvas Filterable menu Live open/closedCustom calendarParallax
OSSAE-commerce · minimal

OSSA

04

A skincare shop with a working basket. Bottles are one parametric SVG that recolours per variant, the cart survives a reload, and a three-question quiz recommends a product — including telling you to buy nothing.

Persistent cartProduct configurator Recommendation quiz Dark modeFree-ship meterParametric SVG
KINETICFitness · bold sport

Kinetic

05

High-contrast and heavy. A full weekly timetable you can filter by discipline and level, book into, and watch the remaining spots drop — plus a draggable before/after slider built from two live data panels.

Bookable timetableComparison slider Plan switcher Filter chipsKinetic tickerCoach reveals

How these are built

Delivery One file, no build step

Each demo is a single self-contained index.html: markup, styles and behaviour in one place. Drop it on any host, open it from a USB stick, hand it to a developer — it just runs.

Imagery Nothing is a stock photo

Every visual is drawn: SVG compositions, canvas particles, CSS gradients with real grain. That is why they do not look like the same five templates everyone else is selling, and why they weigh almost nothing.

Craft Interactions that actually work

The calculator calculates, the calendar refuses Mondays, the cart remembers you. Reduced-motion is respected throughout, everything is reachable by keyboard, and focus is always visible.