# Designer Portfolio — Day 15 of 365

A multi-page designer portfolio template built with Astro + Tailwind CSS. Type-driven editorial aesthetic with full-bleed photography, long-scroll project showcase, and a distinct visual register that reads instantly as "designer" — not developer, not agency.

**Live demo:** https://templates.allanninal.dev/designer-portfolio/

---

## Visual Design

- **Typography:** Archivo Black (display, uppercase) + Cormorant Variable (body, serif, elegant)
- **Palette:** Warm white `#FAFAF8` base + parchment `#F0ECE6` surface + terracotta `#A84A2D` accent + warm near-black `#1A1410` text
- **Light-only** — no dark mode, editorial register throughout
- **Layout:** Brutalist-editorial — oversized uppercase display, alternating full-bleed / split-column project scroll

---

## Pages

| Route | Content |
|-------|---------|
| `/` | Hero, selected works (long-scroll), approach, capabilities, availability, contact |
| `/work/` | Portfolio index (all projects) |
| `/work/[slug]/` | Individual case study page (4 projects) |
| `/about/` | Bio, process, services list |
| `/contact/` | Inquiry form (Formspree) + socials |
| `/404` | Custom 404 |

---

## Features

- 4 project case studies with individual pages and navigation
- Full-bleed hero images + alternating project scroll layout
- Availability band ("Currently in studio")
- Project inquiry form via Formspree
- `Person` + `CreativeWork` JSON-LD schema on each page
- Sitemap via `@astrojs/sitemap`
- Custom 404 page
- Ko-fi support link (attribution bar)
- LinkedIn primary, email secondary contact CTA

---

## Quick Start

```bash
git clone https://github.com/allanninal/templates.git
cd templates/templates/designer-portfolio
npm install
npm run dev
```

Open http://localhost:4321/

---

## Customize

### Persona / Copy

Edit `src/data/designer.ts` — all copy, project data, social links, and services live here.

### Projects

Add / remove entries in the `projects` array in `src/data/designer.ts`. Each project renders on the homepage scroll, the `/work/` index, and gets its own `/work/[slug]/` page automatically.

### Contact Form

1. Create a free account at [formspree.io](https://formspree.io)
2. Create a new form, copy your form ID
3. Add `PUBLIC_FORMSPREE_ID=your_form_id` to `.env` (see `.env.example`)

### Images

Replace Unsplash URLs in `src/data/designer.ts` with your own. Always include `width`, `height`, and `alt` attributes for performance and accessibility.

### Fonts

Both fonts are self-hosted via `@fontsource`:
- `@fontsource/archivo-black` — display headings
- `@fontsource-variable/cormorant` — body text

---

## Deploy to GitHub Pages

1. Fork/copy this template directory to a new repo
2. Enable GitHub Actions: Repo Settings → Pages → Source: GitHub Actions
3. The included `.github/workflows/pages.yml` builds and deploys on push to `main`
4. Set `PUBLIC_FORMSPREE_ID` in repo Secrets if using the contact form

---

## Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Start dev server at localhost:4321 |
| `npm run build` | Build static output to `dist/` |
| `npm run preview` | Preview the built site |
| `npm test` | Run Playwright test suite |
| `npm run test:a11y` | Run axe accessibility tests |
| `npm run test:links` | Check for broken links |
| `npm run test:lighthouse` | Run Lighthouse CI (≥95 all categories) |

---

## License

MIT — see [LICENSE](./LICENSE).

Part of the [365 Templates Challenge](https://github.com/allanninal/templates). If this helped you, [tip on Ko-fi](https://ko-fi.com/allanninal).
