50 studies · built from scratch · August 2026

Design Lab.

Fifty one-page layout studies I built while working out the direction for this site. Each one is a complete, responsive page written from scratch in HTML and CSS — no page builder, no template, no framework. They're here because the quickest way to show you what I can do to a storefront is to show you fifty of them.

Every study carries the same content deliberately, so what changes between them is purely the design and the structure. Click any tile to open the full page.

Batch 1 · 01–10Pure HTML and CSS, zero JavaScript
Batch 2 · 11–20GSAP scroll and pointer animation
Batch 3 · 21–30Structure led by conversion research
Batch 4 · 31–502026 platform features and trend research
ThroughoutResponsive, accessible, reduced-motion aware
Study 03 won. The brutalist direction is now the live homepage, rebuilt properly with real content, structured data and a working booking flow. The version in this lab is the original study — see the finished site.
These are studies, not client work. The copy in them is my own, and the testimonial and metric slots are left visibly marked as placeholders rather than filled with invented quotes or numbers. My actual client work is on the main site.
01
Editorial Serif

01 · Editorial Serif

Warm cream paper, big Fraunces display type with italic accents, numbered service rows and generous whitespace. Reads like a design magazine rather than a service page. Quietly expensive.

Best for: premium positioning, higher day rates
02
Bento Grid

02 · Bento Grid

Modular card layout in the 2026 bento style: dark hero cell, violet identity cell, stat tiles, service cards and project cards all snapping into one grid. Feels like a product, not a brochure.

Best for: tech-literate clients, SaaS founders
03★ LIVE
Brutalist Type

03 · Brutalist Type — now the homepage

Huge Archivo Black headlines, hard 3px borders, offset acid-yellow shadows and a visible grid. Loud and confident, with a scrolling ticker across the top. Impossible to confuse with a template.

Best for: standing out fast, DTC and creative brands
04
Soft & Friendly

04 · Soft & Friendly

The classic VA look done well: rounded everything, blush and mint blobs, floating status cards, a handwritten accent and a four-step process. Warm and approachable without going twee.

Best for: the widest client pool, non-technical buyers
05
Dark Luxe

05 · Dark Luxe

Near-black canvas, gold hairlines, Cormorant italics and glass panels. Roman-numeral service list, alternating case-study layout and a restrained, boutique tone throughout.

Best for: luxury and fashion clients like Adahlia
06
Terminal

06 · Terminal / Console

Monospace, scanlines, a blinking prompt and a status log instead of a bio. Services render as a table, and each case study opens with a real Liquid or YAML snippet. Proof you can read code.

Best for: technical VA positioning, dev-adjacent work
07
Sidebar Doc

07 · Sidebar Doc

A Notion-style working document: sticky left sidebar with page and client nav, collapsible service toggles, a callout box, quick-fact tiles and a vertical process timeline. Signals "organised" without saying it.

Best for: ops-heavy VA work, clients who live in Notion
08
Retro Print

08 · Retro Print

Risograph-inspired: paper grain, terracotta and olive duotones, hard drop shadows, a stamped postcard fact panel and dashed-rule dividers. Handmade character, still tidy.

Best for: food, craft and independent brands
09
Split Sticky

09 · Split Sticky

Fixed dark identity panel on the left with your pitch, stats and nav permanently in view; content scrolls on the right. Agency-grade structure, and the CTA is never off screen.

Best for: conversion, pitching to agencies
10
Kinetic Gradient

10 · Kinetic Gradient

Animated mesh backdrop, a rotating headline that cycles through your services, gradient text and glassy cards. The most modern-feeling of the ten, and the most alive on load.

Best for: younger DTC brands, showing motion skill

Batch 2 — GSAP animated

Ten more concepts, each built around a specific motion idea rather than decorated with one. All use GSAP with ScrollTrigger from a CDN, respect prefers-reduced-motion, and fall back to fully readable static pages if the CDN is unreachable.

11GSAP
Horizontal Scroll

11 · Horizontal Scroll

The page scrolls sideways. Five full-screen panels pinned and pulled across on scrub, with a progress bar and section labels tracking where you are. Collapses to a normal vertical page on mobile.

Motion: pinned scrub, containerAnimation reveals, char-split headings
12GSAP
Magazine Cover

12 · Magazine Cover

Framed as Issue No. 01. Giant Anton masthead drops in letter by letter then parallaxes away on scroll, cover lines stagger, features open with drop caps and clip-path wipes.

Motion: char-split masthead, scroll parallax, clip-path spreads
13GSAP
Isometric Workspace

13 · Isometric Workspace

A 3D isometric scene built in pure CSS: a platform, a storefront monitor, stacked inventory boxes and floating status cards. Pieces drop into place on load, drift idly, and the whole scene tilts toward your cursor.

Motion: Z-axis assembly, quickTo mouse tilt, scroll parallax
14GSAP
Boarding Pass

14 · Boarding Pass

The portfolio as a ticket: perforated stub, generated barcode, route from "buried in the admin" to "store that grows". An AVAILABLE stamp slams down on load and a scan line sweeps the barcode on hover.

Motion: back.out stamp, barcode bar stagger, hover scan sweep
15GSAP
Swiss Grid

15 · Swiss Grid

Strict 12-column International Typographic Style. The column guides literally draw themselves down the page on load, headlines slide up out of overflow masks, and service rows wipe in left to right.

Motion: guide draw-on, masked line reveals, clip-path row wipes
16GSAP
Aurora Spotlight

16 · Aurora Spotlight

Drifting aurora ribbons behind a custom cursor: a soft spotlight, a lagging ring that grows over links, and a hard dot. Cards light up under the pointer and every button is magnetic.

Motion: quickTo cursor rig, magnetic buttons, per-card spotlight
17GSAP
Card Stack

17 · Card Stack

A deck that fans out on load and follows your cursor, then six service cards that stick and physically stack on top of each other as you scroll, each scaling back as the next covers it.

Motion: sticky scroll stacking, deck fan-out, parallax deck
18GSAP
Blueprint

18 · Blueprint

A technical drawing of your storefront. Real SVG schematics draw themselves stroke by stroke via dash-offset, dimension lines and annotations fade in after, and services are laid out as a parts list.

Motion: SVG stroke-dashoffset draw-on, staged annotation reveals
19GSAP
Marquee Wall

19 · Marquee Wall

Four counter-scrolling type rows as the hero. Scroll velocity feeds straight into the loops, so they speed up when you scroll fast and the whole page skews with the motion, then settles.

Motion: velocity-driven timeScale, scroll skew, seamless loops
20GSAP
Timeline Story

20 · Timeline Story

Your actual career as the hero section: McDonald's counter to data entry to patient care to two years inside Shopify to freelance. A copper spine draws as you scroll, milestones light up, and a sticky year chip counts forward.

Motion: scrub spine draw, milestone toggles, sticky year counter

Batch 3 — research-led

Ten more, built after a fresh pass on what actually converts on a freelance portfolio. These change the structure, not just the skin: a positioning statement and proof above the fold, case studies written as problem → approach → outcome, each testimonial sitting beside the project it belongs to, and a CTA in three places (hero, after the work, and the close). A third real case study — the custom inventory reconciliation tool — is included, since three strong studies beat a long list of weak ones. All GSAP-animated with the same no-CDN fallback.

21GSAP
Tactile Brutalism

21 · Tactile Brutalism

The named 2026 trend done properly: zero border-radius anywhere, 1px borders defining every container, no drop shadows at all — depth comes purely from overlapping z-index layers and animated SVG grain.

Structure: proof column pinned beside the positioning statement, above the fold
22GSAP
Variable Kinetic

22 · Variable Kinetic

Real variable-font axes wired to scroll position. Roboto Flex's weight (100–1000) and width (25–151) interpolate live as you move down the page, so the headlines physically thicken and stretch. Service names bulk up on hover.

Motion: font-variation-settings on scrub — typography as architecture
23GSAP
Case Study First

23 · Case Study First

The conversion-optimised one, where the structure is the design. Case studies come before services and before about. A scan bar directly answers the three questions a buyer checks in ten seconds. Highest-converting layout of the thirty.

Best for: actually winning clients — least stylish, most effective
24GSAP
Exaggerated Hierarchy

24 · Exaggerated Hierarchy

Two type sizes and nothing between them: enormous Anton display against 9px monospace labels. The maximalist 2026 subtrend, held to one strict rule. The positioning statement is the only mid-size text on the page, so it can't be missed.

Motion: giant type moves, tiny type only fades — the ratio widens on scroll
25GSAP
Inbox Thread

25 · Inbox Thread

The portfolio as a client conversation. Their problem, your reply, services as an attachment, case studies as cards, testimonials as forwarded messages. The composer at the bottom is the CTA. Fitting for a VA: it shows what working with you feels like.

Motion: messages arrive from their own side, live typing indicator
26GSAP
Broadsheet

26 · Broadsheet

A full newspaper: nameplate, folio lines, multi-column lead story with a drop cap, services as classified listings, case studies as field reports with halftone cuts, about as an opinion column. Denser than the magazine cover in #12, and colder.

Best for: a lot of copy, presented as authority rather than clutter
27GSAP
Field Notes

27 · Field Notes

Analog and tactile: ruled paper with punch holes and a red margin rule, handwritten annotations in Caveat, tabbed dividers, polaroids taped into case files, a typed memo for the about, and sticky notes for the CTAs.

Motion: paper lands with rotation, stamp presses, checkboxes tick in
28GSAP
Control Room

28 · Control Room

An ops dashboard that sells the promise directly: someone is watching your store. Sweeping SVG dials, an activity feed showing what a real week looks like, services as monitored systems with uptime bars, case studies as incident reports.

Best for: selling a retainer rather than a project
29GSAP
Gallery Wall

29 · Gallery Wall

An exhibition. Work is hung in mats and frames with a picture light that comes up as each piece enters view, museum plaques carry the case study copy, and the testimonial reads as an acquisition note. Turns "only three projects" into a virtue.

Best for: premium rates on a deliberately small body of work
30GSAP
Machine Readable

30 · Machine Readable

A split hero: what a person sees, beside what a machine sees. The JSON-LD shown on screen is genuinely in the page head — real Person and FAQPage schema, semantic markup, zero images anywhere, every diagram inline SVG. The page is the proof for the AEO service.

Best for: selling SEO/AEO — walks the walk on its own page

Batch 4 — 2026 platform & trend research

Twenty more, each one started from something specific found in the wild rather than from a mood: Pantone naming a white as Colour of the Year, Apple’s Liquid Glass, the CSS Working Group settling masonry on grid-lanes, container queries and anchor positioning reaching baseline, scroll-driven animation replacing what an animation library was for, the European Accessibility Act becoming enforceable, and the 2026 freelance-conversion writing on pricing transparency, fifteen-second scannability and publishing your receipts. Two of them — 34 and 35 — deliberately ship no animation library at all. The rest use GSAP with the same fallback as batches 2 and 3.

31GSAP
Cloud Dancer

31 · Cloud Dancer

Pantone made a white — Cloud Dancer — Colour of the Year for the first time ever, so this study builds the whole page out of one. No borders anywhere: elevation is carried entirely by soft shadow, and the proof cards keep a slow idle drift.

Best for: quiet-luxury positioning, premium day rates
32GSAP
Liquid Glass

32 · Liquid Glass

Apple’s Liquid Glass pulled glassmorphism back into the mainstream. Done here with the accessibility fix built in: every panel sits on a tinted scrim first and the blur is added inside an @supports block, so contrast survives without it.

Best for: a modern, expensive-looking product feel
33GSAP
Archival Index

33 · Archival Index

The library-catalogue aesthetic named as a defining 2026 direction: accession numbers, a real ruled table of contents, catalogue cards and technical-manual labelling. Turns a deliberately small body of work into a collection.

Best for: consultants who want to read as thorough
34No JS lib
Carbon Budget

34 · Carbon Budget

Sustainable web design, spent rather than described. No web fonts, no images, no animation library, no analytics — and a page-weight ledger in the header listing every one of those choices so you can check it in the network tab.

Best for: proving the performance pitch on the page itself
35CSS motion
Scroll Timeline

35 · Scroll Timeline

Scroll-driven animation with zero kilobytes of JavaScript: the progress rail and the section rules run on native scroll() and view() timelines, on the compositor. Every rule is behind @supports and only ever moves a transform.

Best for: selling Core Web Vitals work to a technical buyer
36GSAP
Off-Grid Collage

36 · Off-Grid Collage

Brutalism’s 2026 mutation is anti-grid: blocks that refuse to line up. Done with grid spans and rotation rather than absolute positioning, so the reading order survives and it collapses to a clean single column on a phone.

Best for: creative and DTC brands, standing out fast
37GSAP
Dopamine Pop

37 · Dopamine Pop

Saturated colour is back after years of muted neutrals. The discipline that stops it becoming a mess: one hue owns each section outright, type stays high-contrast on top of it, and the motion overshoots once instead of pulsing forever.

Best for: younger DTC brands, high-energy categories
38GSAP
Progress Quest

38 · Progress Quest

Gamification moved from dashboards onto marketing pages. The honest version for a service page: a five-item store readiness check the visitor scores themselves, plus a HUD tracking real page progress. Every score is a visible placeholder.

Best for: engaging a founder who is still browsing
39GSAP
Scrollytelling Case

39 · Scrollytelling Case

One case study told the long way — a sticky storefront that assembles itself in six beats as you scroll, in the order the Taste Culinary Food build actually happened. The other two stay compact underneath.

Best for: when one project deserves the whole page
40GSAP
Price Card

40 · Price Card

Almost every productized-service site that converts shows its price. Three packages lead the fold — with the figures left as visible placeholders rather than invented — and a panel listing what is never quietly added to the bill.

Best for: filtering enquiries before the first call
41GSAP
Fifteen Seconds

41 · Fifteen Seconds

Built around the blunt rule that a visitor should understand you in fifteen seconds. The fold is a literal answer sheet — what, who for, why me, what it costs to find out — with a fifteen-second ring pacing it. Everything below is marked optional depth.

Best for: cold traffic and short attention
42GSAP
Receipts

42 · Receipts

An evidence dossier. Every claim is paired with the artefact that would prove it and a status saying whether that artefact is publishable — including two rows marked "not published", because a portfolio with no unproven rows is a highlight reel.

Best for: buyers who have been burned by a freelancer before
43GSAP
Container Shift

43 · Container Shift

Container queries, demonstrated rather than described: the same card rendered in a full-width row, a two-column row and a sidebar, each answering to its own box. Exactly the problem a reused Shopify section has.

Best for: showing theme-architecture skill to a developer
44GSAP
Masonry Lanes

44 · Masonry Lanes

Native CSS masonry — display: grid-lanes, with a columns fallback underneath. A ragged wall of tiles mixing facts, projects, an empty quote slot and a booking card, so a small body of work still reads as one surface.

Best for: an inspiration-gallery feel, browsable at a glance
45GSAP
Clay Console

45 · Clay Console

Neumorphism grown up: extruded clay with dual inner and outer shadow, and the contrast problem fixed by rule — the clay carries all the depth and none of the meaning. Buttons physically press when you click them.

Best for: a soft, approachable, app-like impression
46GSAP
Anchored Notes

46 · Anchored Notes

Native popovers anchored with CSS anchor-name — no tooltip library, no JavaScript. Five jargon terms in the opening brief each carry a plain-English note, and where the features are missing the note prints in the margin instead.

Best for: clients who have been sold jargon they did not understand
47GSAP
Choose Your Lane

47 · Choose Your Lane

Personalisation a one-person business can actually ship: the visitor says whether they own, manage or are hiring for a store, and the page reorders around them. Radio inputs plus :has(), no JavaScript, nothing tracked or stored.

Best for: a page serving three different buyers at once
48GSAP
Feedback Loop

48 · Feedback Loop

Micro-interactions as a specification rather than a showreel. Five live controls — button, toggle, field, copy action, link — each printing its own hover, press and focus rules beside it, and all of them stating why the rule exists.

Best for: proving UX craft to a design-literate client
49GSAP
Contrast First

49 · Contrast First

The European Accessibility Act is enforceable and being litigated, which makes WCAG a commercial fact for anyone selling into the EU. So the palette is printed with its contrast ratios, colour never carries meaning alone, and the focus ring is 3px.

Best for: EU-facing stores and anyone facing a compliance deadline
50GSAP
Snap Deck

50 · Snap Deck

The pitch as a deck: nine full-height chapters the browser lands on cleanly, with a fixed chapter rail. The snap is proximity rather than mandatory, so it never takes the scroll away from you, and it turns off entirely under reduced-motion.

Best for: presenting live, or sending a link instead of a deck