Theme · Portfolio · Intermediate

Personal Portfolio

Portfolio = dark navy, a single mint accent, a type-led hero, and a project list you can scan in one screen.

How to prompt it

Build a personal portfolio in the visual language of Brittany Chiang — dark navy, mint-green accent, type-led.

STYLE
- Navy ground #0a192f, panel #112240, mint accent #64ffda
- Light slate text #ccd6f6, muted #8892b0; monospace only for the small kicker
- No rounded cards; hairline translucent rules

LAYOUT
- Top bar: monogram "AR", nav (Work / About / Contact)
- Intro block: small green "Hi, my name is", big white name "Alex Rivera.", slate role line "I build things for the web.", one-line about "I'm a front-end engineer crafting fast, accessible interfaces and the occasional design system.", ghost CTA "View my work"
- (Desktop) "Things I've built" section: a list of 4 projects, each name + year · tag, hairline-divided (Helio 2025 · Brand, Northwind 2024 · Web, Cadence 2024 · Product, Beacon 2023 · OSS)

COMPONENTS
- Top bar with monogram and nav
- Intro: kicker, display name, role, about, ghost button
- Project index list (shown when tall)

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the hero of this portfolio. Leave the project list unchanged.

CHANGES
- Lead with a one-line role statement instead of a greeting
- Set the name in smaller muted type above it
- Cut the hero to three lines in total

DO NOT
- Do not restyle the project list or the footer
- Do not add new colours or gradients

Build a production personal portfolio in the visual language of Brittany Chiang.

STYLE
- Dark navy #0a192f base, slate #8892b0 body text, mint #64ffda accent
- The accent appears on links, underlines, and one focus state only
- Mono for labels and numbering

LAYOUT
- Fixed left rail on desktop with social links
- Type-led hero: name, one-line role statement, short intro
- Numbered project list, each row scannable in one screen
- Closing contact section

COMPONENTS
- Navbar, card, button, link, badge, list
- Project rows use an accent underline on hover, not a card lift

INTERACTION
- Sections reveal on scroll with a 300ms fade-up
- Numbering sits in mono at 13px

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Respect prefers-reduced-motion

MOTION
- One orchestrated first-paint, under 600ms.
- Project cover: 300ms scale(1.03) inside a fixed crop on hover. The card does not grow.
- Scroll reveals stagger ~100ms.
- prefers-reduced-motion: no cover zoom, no stagger.

Modify prompts change only the target — the rest of your page stays untouched.

Tips

Keep contrast readable; the green is an accent, not a fill. Let the name be the largest element on the page.

Personal Portfolio

Alex Rivera.

Tips

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns