Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A portfolio-style About block for designers, engineers, freelancers, and individuals. Three stacked rows on a shared 7-column grid (3+4 split): role + time in the top-left aligns with tab navigation in the middle-left; bio in the top-right aligns with location/contact metadata in the middle-right. A large hero image anchors the bottom.
The shared 3+4 column rhythm is the load-bearing visual feature — the reader's eye tracks two coherent columns down the page despite the rows being thematically different.
Key Features:
Tabs primitive (Radix under the hood) — proper keyboard navigation (arrow keys), focus management, and ARIA roles for the tab listbio and images overrides; defaults fall back to the top-level bio and images propsABOUT) above a display role, system clock in font-mono with a · separator, tab labels prefixed with mono numerical indices (01 / 02 / 03 / 04)md+lg+ for the top + middle rows, single column belowfont-semibold active, font-normal muted) plus opacity contrastimages={[]}, or per-tab by setting images: [] on a tabaria-live="polite" so screen readers announce content changes when switching tabs| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | "ABOUT" | Tiny mono uppercase eyebrow above the role. Pass empty string to omit. |
role | string | "Design Engineer" | Short role / title in the top-left column. |
time | string | "12:12 PM" | Time shown beneath the role. Pass empty string to omit. |
timezone | string | "CST" | Timezone abbreviation alongside the time. Pass empty string to omit. |
bio | string | Designer/engineer paragraph | Default bio paragraph. Used when the active tab doesn't override it. |
tabs | Array<{ label: string; bio?: string; images?: Array<{ src, alt? }> }> | Information / Work / Journal / Archive | Tabs in the middle row. Each can optionally carry its own bio and images to swap content on activation. |
defaultTab | string | First tab's label | Label of the tab that should be active on initial render. |
location | Array<{ label, active? }> | Australia / Brisbane / +1 … | Location and contact metadata. One should have active: true. |
images | Array<{ src: string; alt?: string }> | 3 default images (07, 08, 09) | Default image cluster. First image is the large primary tile, rest stack beside it. Pass [] for text-only. |
className | string | undefined | Additional CSS classes on the outer <section>. |
The block is built as three rows that all share the same 7-column grid (grid-cols-1 lg:grid-cols-7):
col-span-3 left (role + time) + col-span-4 right (bio).border-t: col-span-3 left (tabs) + col-span-4 right (location).Reusing the 3+4 split across rows 1 and 2 means the role label visually aligns with the tabs, and the bio paragraph aligns with the location list. That column-tracking is what gives the layout its editorial rhythm; if the columns were sized differently per row, the page would feel disjointed.
On <lg, the grid collapses to a single column. The middle row uses order-1 / order-2 to reposition tabs below location on mobile — location belongs near the bio (geographical context for the person), tabs are navigation chrome that moves to the bottom.
Both tabs and location use the same convention: pass active: true on the item you want highlighted. Active items render at text-foreground, inactive at text-foreground/30 (tabs) or text-foreground/40 (location). The slightly different opacities are inherited from the source design — tabs are interactive so they need stronger contrast on hover, while location items are passive metadata that read as a quieter list.
Drop this on a personal portfolio site, freelancer landing page, or designer/engineer "About me" page. The layout shines when:
col-span-4)For team or company About pages, reach for about-staggered instead — that block uses an asymmetric staggered two-column layout designed for collective bios with multiple images.