Developer Portfolio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# Developer Portfolio

A personal, technical, editorial-minimal portfolio template for a software / design engineer. Part of the DevSnips Vanilla Templates collection and built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system.

## Design language

Minimal · light · editorial · neutral · typography-driven · restrained.

- Light-default, calm opt-in dark mode (no-flash, persisted).
- Hairline 1px borders over shadows; small controlled radii.
- Inter (text) + JetBrains Mono (labels / metadata), system fallbacks.
- Single controlled blue accent; neutral-first palette.
- High information density with intentional whitespace.

## Structure

```
developer-portfolio/
├── pages/
│   ├── code.html      # HTML structure (links style.css + script.js)
│   ├── style.css      # design system (--ds-* tokens)
│   └── script.js      # theme toggle, mobile nav, scrollspy, reveal
├── preview.html       # self-contained single-file preview (inlines CSS+JS)
├── metadata.json
└── README.md
```

`preview.html` opens directly with no backend. The modular files in `pages/` are for customization.

## Sections

1. **Header** — brand mark, anchor nav, theme toggle, mobile drawer.
2. **Intro** — editorial `clamp()` lead, availability status badge, metadata grid.
3. **Selected work** — project cards (index, title, role, year, description, stack tags, case-study link).
4. **About** — narrative + capabilities table + four-up stat row.
5. **Notes** — writing list with date + category meta.
6. **Contact** — lead, channels list (email / GitHub / calendar).
7. **Footer** — copyright + footer links.

## Interactions

Scoped, dependency-free vanilla JS:

- Theme toggle (light ↔ dark, persisted, no-flash pre-paint).
- Mobile nav drawer (`aria-expanded`, Esc closes, auto-close on link click).
- Scrollspy active nav (`aria-current="location"` via `IntersectionObserver`).
- Scroll-reveal (`.reveal` → `.is-visible`, reduced-motion safe).

## Accessibility

Skip link, semantic landmarks, single `h1`, `aria-expanded`/`aria-controls` on the mobile toggle, `aria-current` on active nav, `:focus-visible` rings, native controls throughout, `prefers-reduced-motion` guards.

## Responsive

Three breakpoints (640 / 768 / 1024). Zero horizontal overflow at 320–1920px. Nav collapses to a drawer below 768px; grids reflow; intro splits to two columns on desktop.

## Dependencies

Google Fonts (Inter + JetBrains Mono). No framework, no build step.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# AGENTS.md — Developer Portfolio

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A personal, technical, editorial-minimal portfolio for a software / design engineer. Single page: header, intro, selected work, about/capabilities, notes, contact, footer.

## Design system

Built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system. **Light-default**; calm opt-in dark mode (no-flash, persisted). Inter + JetBrains Mono. Hairline 1px borders, small radii, single controlled blue accent.

## File layout

```
developer-portfolio/
├── pages/
│   ├── code.html      # HTML structure (links style.css + script.js)
│   ├── style.css      # design system (--ds-* tokens)
│   └── script.js      # theme toggle, mobile nav, scrollspy, reveal
├── preview.html       # self-contained preview (inlines CSS+JS)
├── metadata.json
└── README.md
```

## How to adapt it

1. **Swap the persona**: edit `pages/code.html`—name, brand mark, role, intro lead, status badge, metadata grid.
2. **Swap projects**: edit the `.work-card` blocks in the selected-work section (index, title, role, year, description, stack tags, link).
3. **Swap notes**: edit the `.note-row` blocks (date, category, title, excerpt).
4. **Rebrand**: edit the `--ds-*` tokens in `pages/style.css` `:root`—keep one controlled accent.
5. **Rebuild the preview**: run `python3 ../_build_preview.py .` from the template folder (inlines `style.css` + `script.js` into `code.html`).

## Do not

- Do not add glassmorphism, neon, gradients, blobs, or oversized decoration.
- Do not introduce a framework. Vanilla HTML + CSS + JS only.
- Do not remove the `--ds-*` token layer or hardcode visual values.

## Quality bar

Skip link, semantic landmarks, single `h1`, `aria-expanded`/`aria-controls` mobile toggle, `aria-current` scrollspy, `:focus-visible` rings, reduced-motion guard. Run `python3 scripts/qa/resources/qa_vanilla.py` after changes. Validate with `python3 scripts/qa/resources/_qa_template.py Vanilla/Templates/developer-portfolio/preview.html` (overflow + console + interactions).