# Day 15 — Designer Portfolio — Research Brief

## Niche Analysis

### The persona

**Mara Voss** — freelance graphic and brand designer, 8 years experience. Based in Amsterdam. Works across brand identity, editorial design, packaging, and art direction. Available for select projects. Represented on Dribbble, Behance, LinkedIn, and Instagram.

Her portfolio is not a developer's code showcase and not a studio's agency pitch. It is a *designer talking to designers and creative directors* — the people who hire senior freelancers. The writing is confident, minimal, slightly literary. Language: "selected works", "currently in studio", "let's make something", "available for select briefs", "work I'm proud of".

Contact: landix.ninal@gmail.com (per memory — Allan-as-persona). Social: @allanninal on GitHub, LinkedIn, Instagram, Dribbble, Ko-fi.

---

## Visual Differentiation from Days 1–14

**Critically adjacent templates:**
- Day 1 (developer-portfolio): dark indigo, Inter/Geist, code-heavy MDX, developer persona — must differ on ALL axes: light default, serif display, designer persona, image-led not prose-led.
- Day 8 (agency-studio): burnt orange on warm off-white, Fraunces + Space Grotesk, abstract SVGs — must differ on ALL axes: different accent family, different type system, real photography (not SVG), different language register.
- Day 9 (resume-cv): Source Serif 4 + Inter Tight, monochrome slate, document register — must differ: larger scale, bolder typography, more expressive layout.

**Register choice: BRUTALIST-EDITORIAL**

Reason: The editorial-magazine register risks proximity to Day 11 (cream + Lora) and Day 12 (Fraunces). The Swiss-grid register risks proximity to Day 8. The brutalist-expressive register is entirely untaken and most precisely reads as "designer with opinions" — AWWWARDS-adjacent, Tobias van Schneider energy, Virgil Abloh reference points.

Large uppercase grotesque at massive scale + warm terracotta/dusty rose accent (untaken) + cream ground = instantly "designer" without overlapping any prior template's visual fingerprint.

---

## Typography System

**Display / Headings:** **Archivo Black** (Google Fonts, OFL licensed)
- Grotesque, heavy, uppercase, slightly condensed
- Feels editorial, assertive, print-magazine
- Completely untaken across Days 1–14
- Used at 80–144px on desktop hero, 48–72px on section headers
- Tracking: -0.02em to -0.04em at display sizes
- Letter-spacing tight for a compressed, deliberate feel

**Body / UI:** **Cormorant Garamond** (Google Fonts, OFL licensed) at body size
- High-contrast old-style serif — EXTREMELY rare in web templates
- Untaken across Days 1–14 (Source Serif 4 is Day 9, Newsreader is Day 5, Lora is Day 11, Fraunces is Day 12)
- At 1.1–1.2rem / 1.7 line-height: readable, elegant, designer-coded
- Pairs with Archivo Black creating a classic grotesque + serif tension that top design studios use
- Used for captions, body paragraphs, project descriptions, about text

**Eyebrows / Meta:** Archivo (regular weight, uppercase, tracked) — same family as display, lighter weight.

**Pairing precedent:** Druk + Canela, Suisse BP + Canela, Big Shoulders + Cormorant — this is the typographic signature of high-end design portfolio sites.

---

## Color Palette

**Primary background:** `#FAFAF8` — near-pure warm white, barely tinted. Clean ground for photography.

**Secondary surface:** `#F0ECE6` — warm parchment for bands/cards. Slightly more tinted.

**Accent:** `#C45B3A` — terracotta/rust. Warm, saturated, earthy. NOT coral (Day 4 was coral `#FF6B4A` — this is darker, more muted, more deliberate). NOT burnt orange (Day 8 was burnt orange `#C2410C`). Terracotta reads as "studio craft, artisan, considered."

**Text primary:** `#1A1410` — warm near-black. Ink-register.

**Text secondary:** `#6B6055` — warm brown-gray. Muted, warm.

**Accent light:** `#F2E8E4` — very light terracotta wash for selected states and hover backgrounds.

**This palette is untaken across all 14 prior days.** Closest neighbor: Day 4 (coral) — this is 30% darker and brown-shifted, a meaningfully different family. Day 8 (burnt orange) — that is also darker/more orange; terracotta is more red-brown.

**WCAG verification:**
- `#C45B3A` on `#FAFAF8`: contrast ratio ~4.8:1 (AA pass for normal text, large text easily AAA)
- `#1A1410` on `#FAFAF8`: contrast ratio ~18:1 (AAA)
- `#FAFAF8` on `#C45B3A`: for buttons/badges — contrast ~4.8:1 (AA)
- `#6B6055` on `#FAFAF8`: ~4.5:1 (AA pass)

---

## Layout Strategy: Long-Scroll Single-Column + Work Pages

**Not a grid.** Not a card gallery. Each project gets a full-viewport-width moment. The homepage is a long vertical scroll where each project section alternates: full-bleed image left + text right, then full-bleed image right + text left. This is the Locomotive/AWWWARDS convention for high-craft portfolios.

**Page structure (multi-page Astro site):**
1. `/` — Home: hero + selected works scroll + availability band + contact
2. `/work/[slug]` — Individual project case study pages (4 projects × MDX)
3. `/about` — Approach, process, capabilities, a photo
4. `/contact` — Contact form + socials

---

## Sections

### 1. Hero
- Full viewport height
- LEFT COLUMN: Mara Voss (Archivo Black, ~120px desktop, 56px mobile) + "Brand & Editorial Designer" + "Amsterdam — Available for select projects" in Cormorant body
- RIGHT COLUMN: featured project image (full-bleed, 60% of viewport width on desktop, stacked on mobile)
- Terracotta accent line (4px horizontal rule) separating name from role
- NO hero video, NO particle effects, NO scroll-jacking
- Subtle "Scroll to explore ↓" in Archivo tracked uppercase, small

### 2. Selected Works — Long Scroll
Four projects, alternating layout:
- Project 01: full-width image (100vw) + text overlay (project title, client, year, discipline tags) at bottom-left. Image is 70vh tall.
- Project 02: left-aligned text block (40%) + right image (60%). Text: number, title, 2-line description, "View case study →"
- Project 03: right-aligned text block + left image (mirror of 02)
- Project 04: full-width image same as 01

Each project image: 1200×800px (landscape), lazy-loaded (below fold), explicit width/height set, object-fit: cover.

### 3. About / Approach
- Short column (~45ch) prose about design philosophy
- Three approach principles: Research-led, Material-sensitive, Clarity-first (each with a terracotta numeral + Archivo label + Cormorant body)
- Skills/services list: Brand identity systems, Art direction, Editorial design, Packaging design, Type design exploration, Creative direction

### 4. Availability / Status
- "Currently in studio" band — warm parchment background, Archivo Black centered, "Available for new projects from [month]"
- Simple. No countdown, no form. Just a bold statement.

### 5. Contact + Socials
- One-liner invitation: "Let's make something."
- mailto link styled as a large Archivo headline link (hover: underline appears)
- Social row: LinkedIn (primary), Dribbble, Instagram, GitHub, Ko-fi
- Per memory: LinkedIn first, email secondary

---

## Projects (Fictional, Consistent Persona)

### Project 01 — "Forma" Brand Identity
- Client: Forma Architecture Studio, Oslo
- Year: 2024
- Role: Brand design, identity system, print collateral
- Disciplines: Identity, Print
- Description: A complete identity system for a Scandinavian architecture studio — wordmark, spatial application system, bespoke brand typeface specimen.
- Images: Abstract architecture / concrete texture / typography close-up imagery

### Project 02 — "Kūso" Packaging
- Client: Kūso Ceramics, Kyoto
- Year: 2023
- Role: Art direction, packaging design
- Disciplines: Packaging, Art Direction
- Description: Packaging system for a Japanese ceramics studio. Material-led — textured kraft paper, blind emboss, minimal ink. Let the object speak.
- Images: Packaging / kraft paper / ceramics imagery

### Project 03 — "Réverie" Magazine
- Client: Réverie Quarterly
- Year: 2024
- Role: Art direction, editorial design
- Disciplines: Editorial, Art Direction
- Description: Biannual print magazine for a contemporary art publication. Issue 04 theme: "Surface." 120pp, Swiss grid, Cormorant text face.
- Images: Magazine spread / editorial photography / printing press imagery

### Project 04 — "Atelier Nord" Visual Identity
- Client: Atelier Nord Gallery, Copenhagen
- Year: 2022
- Role: Brand identity, wayfinding
- Disciplines: Identity, Wayfinding
- Description: A restrained identity for a contemporary gallery — letterpress business cards, custom monogram, exhibition signage system.
- Images: Gallery wall / letterpress / signage imagery

---

## Image Strategy — Unsplash URLs

All images sourced from Unsplash. Prior templates checked: developer-portfolio, saas-landing, startup-waitlist, link-in-bio, personal-blog, documentation-site, mobile-app-landing, agency-studio, resume-cv, open-source-project, newsletter-landing, coming-soon, ai-startup-landing, indie-hacker-portfolio.

**Agency-studio used no photography (SVG-only)** — confirmed safe to use any Unsplash photos.
**Personal-blog** — nature/forest imagery. Safe.
**Mobile-app-landing** — no photography. Safe.

Curated Unsplash images for this template:

**Hero featured image (Project 01 preview):**
`https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&h=800&fit=crop`
(Abstract geometric design / color palette)

**Project 01 — Forma Brand Identity:**
- Hero: `https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop` (concrete architecture)
- Detail: `https://images.unsplash.com/photo-1586281380349-632531db7ed4?w=800&h=600&fit=crop` (stationery/print)

**Project 02 — Kūso Packaging:**
- Hero: `https://images.unsplash.com/photo-1612198188060-c7c2a3b66eae?w=1200&h=800&fit=crop` (ceramics)
- Detail: `https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop` (kraft paper texture)

**Project 03 — Réverie Magazine:**
- Hero: `https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=1200&h=800&fit=crop` (open magazine)
- Detail: `https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=800&h=600&fit=crop` (editorial/books)

**Project 04 — Atelier Nord:**
- Hero: `https://images.unsplash.com/photo-1561489422-45b5ace9d3a2?w=1200&h=800&fit=crop` (gallery space)
- Detail: `https://images.unsplash.com/photo-1568219656418-15c329312bf1?w=800&h=600&fit=crop` (letterpress)

**About page photo:**
`https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop` (designer working)

All images: explicit width/height set, loading="lazy" on all below-fold images, loading="eager" on hero only. Each `<img>` gets `decoding="async"`.

---

## Schema.org

**Homepage:** `Person` + `ProfilePage`
```json
{
  "@type": "Person",
  "name": "Mara Voss",
  "jobTitle": "Brand & Editorial Designer",
  "url": "https://templates.allanninal.dev/designer-portfolio/",
  "sameAs": ["LinkedIn", "Dribbble", "Instagram"],
  "email": "landix.ninal@gmail.com"
}
```

**Each project page:** `CreativeWork`
```json
{
  "@type": "CreativeWork",
  "name": "Forma — Brand Identity",
  "creator": { "@type": "Person", "name": "Mara Voss" },
  "dateCreated": "2024",
  "description": "...",
  "keywords": ["brand identity", "architecture", "Oslo"]
}
```

---

## OG Image

**og-image.svg** (static, committed): 1200×630, `#1A1410` near-black background, "MARA VOSS" in Archivo Black white at ~80px, "BRAND & EDITORIAL DESIGNER" in Cormorant Italic at ~28px below, single terracotta horizontal rule `#C45B3A` at 4px between, subtle parchment texture block bottom-right. Generates og-image.png from SVG.

---

## Performance Strategy

- Self-hosted fonts via `@fontsource/archivo-black` + `@fontsource/cormorant-garamond`. This avoids Google Fonts waterfall.
- All body images: `loading="lazy"`, explicit `width` + `height`
- Hero image: `loading="eager"`, `fetchpriority="high"`
- No JS framework. Astro static output only.
- CSS-only hover states (no JS)
- Tailwind purge removes unused utilities
- Expected LCP: hero image — optimize with `w=1200` Unsplash param, explicit dimensions prevent layout shift
- Expected Lighthouse Performance: ≥95 (image-heavy but all optimized)

---

## Differentiation Summary vs. Days 1–14

| Axis | Day 15 | Day 1 | Day 8 |
|------|--------|-------|-------|
| Persona | Freelance designer | Software developer | Creative agency |
| Language | "Selected works", "Let's make" | "Shipped products" | "Studio", "We" |
| Layout | Long-scroll alternating | MDX case studies | Work grid |
| Photography | Real Unsplash images | None | SVG compositions |
| Display font | Archivo Black (heavy grotesque) | Inter | Fraunces (Day 12) |
| Body font | Cormorant Garamond | Geist/Mono | Space Grotesk |
| Background | Warm white + parchment | Dark indigo | Warm off-white |
| Accent | Terracotta `#C45B3A` | Amber | Burnt orange |
| Light/dark | Light only | Dark default | Light only |
| Schema | Person + CreativeWork | Person | Organization |

**Visual register:** Brutalist-editorial. Reads as AWWWARDS-adjacent designer portfolio, not developer showcase, not studio pitch.
