Minimalist Portfolio

# Minimalist Portfolio Page

Create a refined, typography-focused portfolio that uses generous whitespace and subtle interactions to showcase creative work with elegance.

## Design Specifications

**Style**: Minimal / Designer portfolio
**Typography**: Refined serif for headlines, clean sans for body
**Layout**: Generous whitespace, asymmetric grids
**Colors**: Off-white background, near-black text, subtle grays

## Prompt for AI Code Generation

```
Build a minimalist portfolio page with these characteristics:

LAYOUT:
- Generous padding (64-128px between sections)
- Maximum width 1200px, centered
- Asymmetric two-column layouts
- Projects in 2-column grid

TYPOGRAPHY:
- Name/headline: 72-144px, serif, font-weight 300
- Section labels: 12px, uppercase, letter-spacing 0.1em, opacity 40%
- Body text: 16-18px, line-height 1.7
- Serif for headlines and statements, sans for navigation and labels

COLORS:
- Background: #fafafa (off-white)
- Text primary: #111111
- Text secondary: #111111 at 60% opacity
- Text tertiary: #111111 at 40% opacity
- No accent colors - monochromatic only

INTERACTIONS:
- Underlines that animate in from left on hover
- Subtle opacity changes (60% -> 100%)
- Project images with slight scale on hover
- Smooth 300ms ease transitions

SECTIONS TO INCLUDE:
1. Fixed navigation with name and page links
2. Hero with large name, title, and short bio
3. About section with two-column experience/recognition
4. Selected works grid (3-4 projects)
5. Contact section with email and social links
6. Minimal footer

TECHNICAL:
- Use opacity variants for text hierarchy
- Underline animation: width 0 -> 100% on hover
- Project cards with aspect-ratio 4/3
- Sticky navigation with backdrop blur
```

## Example React Component Structure

```tsx
export default function MinimalistPortfolio() {
  return (
    <div className="min-h-screen w-full bg-[#fafafa] text-[#111]">
      {/* Navigation */}
      <nav className="fixed top-0 right-0 left-0 z-50 bg-[#fafafa]/90 backdrop-blur-sm">
        <div className="mx-auto flex max-w-6xl justify-between px-8 py-6">
          <span className="text-sm tracking-widest uppercase">Portfolio</span>
          <div className="flex gap-8">
            {['Work', 'About', 'Contact'].map((item) => (
              <a key={item} className="group relative text-sm text-[#111]/60 hover:text-[#111]">
                {item}
                <span className="absolute -bottom-1 left-0 h-px w-0 bg-[#111] transition-all group-hover:w-full" />
              </a>
            ))}
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="flex min-h-screen flex-col justify-center px-8 pt-24">
        <h1 className="font-serif text-6xl font-light tracking-tight md:text-9xl">
          Alexandra
          <br />
          <span className="text-[#111]/40">Chen</span>
        </h1>
      </section>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --color-bg: #fafafa;
  --color-text: #111111;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --spacing-section: 8rem;
  --transition: 300ms ease;
}

a {
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--transition);
}

a:hover::after {
  width: 100%;
}
```

## Key Principles

1. **Let content breathe**: Generous whitespace between all elements
2. **Restraint in color**: Monochromatic palette with opacity for hierarchy
3. **Typography as design**: The typeface choices ARE the design
4. **Subtle interactions**: Micro-animations that reward attention
5. **Grid discipline**: Consistent spacing and alignment