Components

133 components, grouped by the part of a portfolio they're for. Open one for its examples, code, props and install command.

Layout 6

Sections, containers, grids, headers and footers.

Announcement Bar

Slim banner above the header for launches and availability. Static, accent-filled or scrolling, with an optional close button that can be remembered.

Bento Grid

Six-column grid of spanning cards with labels, titles and full-bleed visuals, for about sections, stats and tool stacks.

Footer Reveal

The curtain footer: the page lifts away at the end to reveal the footer waiting underneath. Pure CSS sticky, with an optional lift-in effect.

Section

Page section with container widths, vertical spacing and a composable header: eyebrow, title, description and actions.

Site Footer

Site footer with link columns, a small-print row and an optional giant wordmark that fills the full width.

Sticky Layout

Two-column page layout: a pinned intro with scrollspy navigation on the left and scrolling sections on the right.

Menus, docks, command palettes and theme controls.

Back To Top

Floating button that appears after scrolling, shows page progress around its edge and scrolls back to the top.

Command Menu

A ⌘K palette for jumping to pages, projects and actions, with fuzzy search, grouped results and keyboard hints. Pass data or compose the parts yourself.

Floating Dock

A macOS-style navigation dock. Icons grow toward the pointer, labels appear above them and the current page gets a dot.

Language Switch

Links to the translated versions of a page, as “EN / DE / FR” text, a segmented pill or a globe menu. Sets `hrefLang`, `lang` and `aria-current` for you.

Overlay Menu

Full-screen menu with a Menu ↔ Close morphing trigger, big numbered links, hover previews and a footer slot.

Pill Nav

Segmented navigation with a sliding pill that follows the pointer and rests on the current page.

Scroll Progress

Reading-progress indicator for the page or a single article, as a thin bar across the top or a small ring with a percentage.

Site Header

Sticky header with brand, nav, actions and a full-screen mobile menu. Bar or floating-pill style, optional hide-on-scroll.

Scrollspy navigation for case studies and articles, as a rail with a moving marker or a plain list. Clicking scrolls to the heading and updates the URL hash.

Theme Picker

Switch between `data-theme` presets with round color swatches or a labelled list, on <html> or any element, and optionally remember the choice.

Theme Toggle

Light, dark and system switch, as a sun/moon icon button or a three-way segmented control, that remembers the choice and follows the OS.

Hero 10

Intros, statements, availability and location.

Availability Badge

Status pill with a pulsing dot that says whether you're taking work, e.g. “Available for work” or “Booked until March”.

Hero Intro

The main portfolio hero: eyebrow, display title, lead, actions, optional media and a bottom meta row, with a staggered CSS entrance. Stacked, split or centered.

Hero Statement

Oversized typographic hero. Lines slide up from a mask, inline media pills widen on hover, and a labeled meta grid sits underneath.

Hero Video

A full-bleed hero over a muted, looping background video, with a legible scrim and a visible pause button; it shows the poster under reduced motion or Save-Data and rests while off screen.

Local Time

Live clock for your city (“Lisbon 14:32 GMT+1”) with a day/night icon and an optional blinking colon.

Location Tag

“Based in Lisbon, Portugal” with a map pin, optional coordinates in mono and an optional link to a map.

Profile Card

Link-in-bio style card with avatar, name, role, location, status, bio, socials and a primary action. Vertical card or compact row.

Scroll Cue

“Scroll” indicator for full-height heroes: a moving line, a mouse with a rolling wheel or a bobbing arrow. Can link to the next section.

Showreel

A large poster with a play button that follows the cursor; it opens your reel in a full-screen player (or plays it in place), with a duration label and a quiet coming-soon state.

Word Rotate

Cycles words inside a headline with a slide-and-blur swap, in a slot as wide as the widest word so the line never reflows. Screen readers get one static sentence.

About 14

Bio, experience, timeline, skills and stats.

Bio

About-me block with a captioned portrait, prose that opens with a lead paragraph, a facts list and an optional sign-off.

Credentials

Education, certifications, courses and awards as rows with a kind icon, issuer, date and an optional verify link.

Credits List

Colophon-style credits: roles paired with the people behind them (optionally linked), as ruled columns, centered film credits or one compact inline line.

Dot Map

A dotted world map with pins for where you’re based, your clients or your travels, plus optional pulsing and connecting arcs. Pure SVG, no map library.

Experience

Work history as a hover-focus list, a vertical timeline that marks the current role, or compact résumé rows.

Now

A /now page block listing what you're building, reading and learning, with an “updated” date. Card grid or divided list.

Photo Stack

A pile of 3–5 photos that fans out on hover or keyboard focus. Click, tap or press Enter to send the top photo to the back.

Portrait

A personal photo as a matted frame, tilted polaroid, arch or circle, with a subtle hover effect.

Principles

Numbered values or process steps (01, 02, 03…) as a card grid or divided rows with large numbers.

Signature

A handwritten SVG signature that writes itself, stroke by stroke, when it scrolls into view — the sign-off at the end of a bio or letter.

Skill Groups

Skills grouped by discipline, as chips or level bars. Each skill can show a 1–5 level, years of use and an icon.

Stats

Headline numbers (years, projects, stars, awards) that count up as they scroll into view. Plain, divided or card layouts.

Timeline

Milestones on a vertical or alternating rail with dates, icons or media, a current step, and dots that can fill as they scroll into view.

Tool Grid

A /uses page: tools grouped by category, with logos or monogram tiles, short notes, favorites and optional links.

Work 21

Project cards, grids, lists and long-form case studies.

Archive Table

Sortable table of every project (year, name, client, stack and link), grouped by year, with columns that collapse on small screens.

Before After

Comparison slider for redesigns. Drag, click or use the keyboard to wipe between two layers, horizontally or vertically.

Case Study Header

Opening of a case study: back link, display title, summary, a ruled facts grid (client, role, timeline, live site) and a cover image.

Case Study Section

Case study chapter with a sticky numbered label, styled prose, pull quotes, outcome metrics and figures that can span the label column.

Color Swatches

A project’s palette for case studies: named swatches with hex and OKLCH values you click to copy, WCAG contrast labels, and grid, strip or proportional (by usage) layouts.

Device Frame

Browser, phone, laptop and window frames for screenshots, videos or artwork, drawn with theme tokens.

Draggable Canvas

An endless canvas of project tiles you drag, flick, scroll or arrow around, the award-site signature. Without JavaScript it’s a plain grid.

Expanding Panels

A row of tall project panels: hover or focus one and it widens to show its title and details while the others fold into vertical labels. Stacks into an accordion on phones.

Image Gallery

Images in a grid, masonry columns or a scrolling strip, with a lightbox you can use by keyboard, swipe or buttons.

Lab Grid

Dense grid of side projects, experiments and toys, each with a status (live, WIP, archived), a small preview and a one-line meta row. Also renders as compact text rows.

Lightbox

Click-to-expand viewer for images, artwork and video: the thumbnail zooms into a full-screen view you browse with arrows, keys or swipes.

Next Project

End-of-case-study pager: a large “next project” link whose cover widens on hover, as a full-width hero or a previous/next split.

Photo Meta

EXIF-style caption for photographs and film stills (camera, lens, focal length, aperture, shutter, ISO, place and date) as a mono line, a spec grid or an overlay on the image.

Project Card

Composable work card with media, meta, title, summary and tags, in card, minimal or overlay style. The whole card is one link.

Project Carousel

Scroll-snap carousel for projects with mouse drag, arrow keys, previous/next buttons, a slide counter and a progress bar. No dependencies.

Project Grid

Responsive grid for project cards: even rows, staggered columns, or a featured first project that spans two columns.

Project List

Projects as large text rows, with a preview image that follows the cursor on desktop and thumbnails on mobile.

Scroll Steps

Scrollytelling for case studies and process write-ups: steps of text scroll past a sticky media panel that cross-fades to the active step's image.

Stacked Cards

Featured projects as large sticky cards that stack while you scroll. Each card shrinks and dims as the next one covers it.

Type Specimen

A typeface showcase for case studies: a big “Aa”, the font’s name and foundry, its weights, the character set and a size ladder, all set in the project’s font.

View Toggle

Segmented grid / list / index switch with a sliding indicator, for choosing how a work section is laid out.

Services 5

What you offer, how you work and common questions.

FAQ

Accordion of questions and answers, as ruled lines or cards, with optional FAQPage JSON-LD for search engines.

Pricing Table

Two to four offers side by side (audit, sprint, retainer) with a featured tier, prices that switch with a billing toggle, aligned sections and a footnote.

Process Steps

How-I-work timeline of numbered steps with heading, description and duration, joined by a line. Stacks on mobile, runs in a row on large screens, and can mark a current step.

Service Card

Offer or pricing card with name, description, price, a checklist of what's included and a call to action. A featured variant highlights the offer you recommend.

Service List

Numbered list of services with big headings that expand to reveal details, deliverables, duration and price. Keyboard-accessible accordion.

Content 17

Writing, talks, repos, reading and activity.

An inline player for podcast clips, music, voice reels and sound design: a play button, a seek slider over an optional precomputed waveform and the time, on a native audio element, with one track playing at a time.

Bookshelf

Reading list as a shelf of standing covers that tilt on hover, or as a detailed list with status, rating and notes. Books without artwork get a generated cover.

Changelog

A dated "what changed" log for a portfolio or product page: releases with version, date and optional permalink, and changes labelled Added, Changed or Fixed in words.

Code Window

Code for case studies and developer portfolios: file tabs, a language label, copy, line numbers, highlighted and diff lines, and soft wrap. Plain text by default; bring your own highlighter.

Contribution Graph

GitHub-style activity heatmap: weeks by weekdays in five levels of the theme's accent, with month and weekday labels, a legend and a total. Scrolls to the latest weeks on small screens.

Link Preview

An inline link that shows a small card (cover, title, description, site) on hover or keyboard focus; Escape closes it. On touch screens it's just a link.

Media Appearances

Podcast episodes, video interviews and livestreams you appeared on, with show artwork, date, duration and listen/watch links per platform, as rows or cards.

Newsletter Form

Email sign-up form with inline validation and loading, success and error states. Pill-shaped inline field, stacked form or titled card.

Now Playing

Music widget: album art, track and artist with an animated equalizer while playing, or “Last played” with a date or relative time. Card or one-line inline style.

Post Card

Article card with cover, category, title, excerpt, date, reading time and author, in vertical, horizontal or large overlay styles.

Post List

Writing index for blogs and notes: compact dated rows, an archive grouped by year with a sticky year label, or detailed entries with excerpt and tags.

Product Card

Shop card for courses, prints and templates: cover, badge, details, price with a compare-at discount and a call to action. The whole card is one link.

Prose

Article typography for blog posts and case studies: headings, lists, quotes, code, figures, tables and footnotes styled from your theme, with no typography plugin.

Repo Card

GitHub-style repository card with owner/name, description, language, stars, forks, last update and topics. The whole card is one link.

Sidenote

Tufte-style margin notes: numbered references in the text with the notes beside it on wide screens, and tap-to-expand inline notes on phones.

Talk List

Talks, workshops and podcast appearances with event, location, date and links to slides or recordings. Future dates get an “Upcoming” badge.

Contact 8

Calls to action, forms, bookings and socials.

Availability Calendar

The next months at a glance, each marked open, limited or booked in words and a fill pattern, so clients see when you can start.

Booking Card

An “intro call” card with the host, meeting details and the next open slots as selectable chips. The button links to your scheduler with the chosen time.

Contact Bar

A slim bar pinned to the bottom of the screen on phones that keeps “Email me” and “Book a call” one tap away once the hero has scrolled past, without covering the end of the page.

Contact CTA

Closing section of a portfolio with a large invitation, availability, a copy-email button and actions. Centered, split, or under a scrolling “Let's talk” line.

Contact Form

Project inquiry form with name, email, company, budget and project-type chips and a message with a character count. Includes inline validation and sending, success and error states.

Copy Email

Your email as a button that copies it on click and briefly shows “Copied!”. Pill, ghost or display-size styles, with an optional mailto link.

Resume Link

Download-your-CV link as a button with a bouncing download icon, or a file card with type, size and last-updated date.

Social Links

Profile links as icons, pills or text. Pass URLs and the brand icon and label are detected automatically.

Effects 21

Motion, texture and pointer effects. Each one respects reduced motion.

Aurora

Slowly drifting gradient blobs in hues around your theme's highlight, used as a hero or card backdrop. Static under reduced motion.

Background Pattern

Grid, dot, line, cross or diagonal background in pure CSS, colored from theme tokens, with edge fades and an optional highlight glow.

Circular Text

A rotating badge of text set around a circle (“Available for work · Available for work ·”) with a slot in the middle for an icon or link. Pauses on hover and keyboard focus; can speed up or reverse with scrolling.

Custom Cursor

A dot and trailing ring that follow the pointer, grow over links and buttons, and show a text label over elements with `data-cursor`. Page-wide or scoped to a container.

Grain

Film-grain noise overlay for the whole page or a single element, built from one cached SVG tile, with optional jitter and any blend mode.

Horizontal Scroll

A pinned section whose row of cards travels sideways as you scroll down, with a progress bar. On touch screens, small or short viewports, reduced motion and in print it's a native swipeable row with snap points.

Image Trail

Images that spawn along the cursor's path and fade out behind it, over a hero or section. Touch screens and reduced motion get a still collage instead.

Magnetic

Pulls a button or icon toward a nearby pointer and springs back when it leaves. An optional inner layer moves further for depth.

Marquee

Endlessly scrolling row or column for client names, skills or testimonials, with edge fades, reverse direction, pause on hover or on demand and an optional scroll-velocity drive.

Page Transition

View Transitions helpers for any router: `startPageTransition()`, preset animations (fade, slide-up, curtain, zoom) and shared-element names. Instant with reduced motion or without browser support.

Parallax

Scroll-linked depth: layers that drift slower or faster than the page, and media that glides inside its frame. One shared animation frame, paused offscreen, still with reduced motion and in print.

Preloader

Intro screen with a 0–100 counter or cycling greetings, then a curtain lifts to reveal the page. Skippable with a click or any key, can show once per session, and skipped with reduced motion.

Reveal

Fades, lifts and un-blurs elements as they scroll into view, one by one or staggered across a group. Respects reduced motion.

Scramble Text

Text that decodes from random glyphs, left to right, on mount, when it scrolls into view or on hover. The layout never shifts.

Scroll Text

A statement paragraph whose words light up one after another as the reader scrolls through it, tied to scroll position rather than played once.

Scroll Zoom

A cover image or video that starts as an inset card and grows to full-bleed while the reader scrolls past it, for case-study openers and showreels.

Smooth Scroll

Lenis-powered inertial scrolling for the page or a container, with smooth anchor links and a useLenis() hook. Off under reduced motion; touch stays native.

Spotlight Card

Card with a soft glow that follows the pointer and a brighter rim on its border. Wrap cards in a group so one pointer lights the borders across a grid.

Sticker Board

Playful stickers and polaroids scattered over a section that visitors can pick up, drag, drop and nudge with the arrow keys, with a spring settle and a reset.

Text Reveal

Splits a headline into words or characters that slide up from a mask, staggered, when it scrolls into view. The original text stays accessible.

Tilt Card

3D card that tilts toward the pointer with a moving glare and parallax layers (`data-depth`), easing back when the pointer leaves. Off on touch and reduced motion.

Utilities 14

Links, media, icons, tags and other small parts.