sergiomarquez.dev Portfolio Guide

Single-page portfolio site. All content driven by public/cv.json.

Content Updates

To update portfolio content, edit public/cv.json:

No code changes needed for content updates -- just edit the JSON.

Adding a New Section

1. •Add data to public/cv.json under a new key
2. •Update CvData type in src/data/cv.ts
3. •Create component: src/components/NewSection.astro
4. •Add to src/pages/index.astro with <section id="new-section">
5. •Add nav link in src/components/layout/Navigation.astro
6. •Add test in src/data/__tests__/cv.test.ts

Adding a Social Redirect

Create src/pages/platform-name/index.astro:

---
import { cv } from '@/data/cv';
const url = cv.basics.profiles.find(p => p.network === 'PlatformName')?.url;
return Astro.redirect(url ?? 'https://sergiomarquez.dev');
---

Layout Structure

┌──────────────────────────────────────────────┐
│                  Spotlight                     │
├──────────┬───────────────────────┬────────────┤
│ Sidebar  │    Main Content       │  Sidebar   │
│ Left     │                       │  Right     │
│ (sticky) │  ┌─ About ──────┐    │  (email)   │
│          │  ├─ Experience ──┤    │            │
│ Name     │  ├─ Projects ───┤    │            │
│ Title    │  └─ Certs ──────┘    │            │
│ Nav      │                       │            │
│ Social   │                       │            │
├──────────┴───────────────────────┴────────────┤
│              (mobile: single column)           │
└──────────────────────────────────────────────┘

Desktop: three-column (sidebar sticky at lg: breakpoint). Mobile: single column with mobile header.

File Conventions

Design Tokens

Font: Geist Variable (non.geist package).

Testing

• •Runner: Vitest (globals mode)
• •Tests: src/data/__tests__/cv.test.ts, github.test.ts
• •Focus: Data loader validation (structure, required fields)
• •Command: bun run test

CI/CD Pipeline

Push/PR to main → GitHub Actions (ci.yml)
  ├── bun install
  ├── type-check (astro check)
  ├── lint (biome check)
  ├── test (vitest)
  └── build (astro build)

Push to main → Cloudflare Pages (automatic)
  ├── npm ci (uses package-lock.json)
  └── npm run build → dist/

Pre-commit: Husky runs lint-staged → Biome check on src/**/*.

Key Gotchas

1. •Content = JSON only: All portfolio content lives in public/cv.json. Never hardcode content in components.
2. •Dual lockfile: bun.lock + package-lock.json must stay in sync.
3. •Path alias: Use @/ imports (e.g., import { cv } from '@/data/cv').
4. •Biome LF: Enforces LF endings. Windows users may see phantom diffs.
5. •Redirect pages: astro check false positives on unused imports -- ignore.
6. •Lighthouse target: 95+ performance, 100 SEO. Test before merging visual changes.