# Alexandra Chen

Designer & Creative Director based in London, crafting thoughtful experiences through simplicity.

## About

I believe in the power of restraint. Every element should earn its place, every detail considered with intention.

### Experience

- Studio Minimal, London
- Pentagram, New York
- Independent Practice

### Recognition

- D&AD Yellow Pencil
- Wallpaper* Design Awards
- It's Nice That Feature

## Selected Works

### Ethereal Spaces

2024  
Architecture  
A residential project exploring the interplay of light and shadow.

### Mono Journal

2023  
Editorial Design  
Art direction and layout for a quarterly print publication.

### Stillness

2023  
Photography  
A visual meditation on urban solitude and quiet moments.

### Form & Function

2022  
Product Design  
Minimal homeware collection focused on essential forms.

## Contact

Let's create something meaningful together.

[hello@alexandrachen.com](mailto:hello@alexandrachen.com)

[Instagram](/content/examples/minimalist-portfolio#/index.html) [LinkedIn](/content/examples/minimalist-portfolio#/index.html) [Twitter](/content/examples/minimalist-portfolio#/index.html)

# Minimalist Portfolio

Clean, typography-focused portfolio with generous whitespace and refined designer aesthetic.

## 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
```

## 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