portfolio-next/docs/specs/009-work-page-cv-first.md

status

status
implemented

009 — /work/: CV first, six proud projects, a record of competitions and courses

Designed with the owner on 2026-11-12 over six rounds of rendered mockups (log in docs/inspiration.md, "Work page, CV first"). He picked K and then its refinement, built on the approved mockups/tech-r3-c.html: "This looks like a good improvement. Lets make it work!" Design truth: mockups/work-k2.html (screenshot mockups/shots/work-k2-1440.png). Extends docs/specs/001-site.md §8 (the work space). Choices marked [call] were made while writing the spec, not by the owner.

Why

The owner has made many projects of uneven quality, and the page gave them all the same weight; there was no place for his courses, certificates, competitions or volunteer work. In his words, a visitor should first see the CV in ten seconds, then "the most impressive projects I've made first, with the other less important ones still viewable … but less focused", and near the top "the certificates/courses and most important accolades, with fuller information near the bottom". Courses should show that he keeps up to date and "actively works to keep himself knowledgeable", with a searchable list "somewhere, but it doesn't need to be front and center".

What

Page order on /work/ (top to bottom)

1. CV header (replaces today's intro block and the Now / Latest writing / CV strip).
2. Projects I'm proudest of: the featured projects as large panels (today's Featured, extended to six).
3. Also made: today's project list (tabs, search, thumbnails, side sheet) with the remaining projects.
4. Record: recognition & volunteering next to keeping up (courses), the full versions.
5. Writing and Where I've worked, as today.
6. Footer.

Every section that has no content is left out, and the top bar links only to sections that exist (as today).

1. CV header

One card, two columns (stacked on narrow screens):

• Left, "CV in ten seconds": site.name as the heading, site.tagline under it; rows now (cv.now), before (cv.before, one per line), degree, contact (email); if site.now has lines they are shown as a short list under the rows [call] (today's "Now" cell has no other home). Buttons: CV PDF (only when links.cv), "full history ↓" (to #cv), GitHub, LinkedIn.
• Right, two blocks:
  • Highlights: recognition entries marked highlight: true, in file order, at most 3 [call]; the result (the placement) in the accent colour, the title in the normal text colour (owner, 2026-11-12: "focus on the placement, not the competition"). A link "+ N more in the record ↓" when the record holds more entries than shown. No highlighted entries: the block is left out.
  • Keeping up: a large certificate count with the seal mark ("18 certificates"), then one mono line: " courses & hands-on labs · ~ h since "; then up to 5 topic chips, " ", topics ordered by total time, largest first [call]; topics are short names (one field serves chips, table and filters, so content keeps them short, e.g. "Ansible", "RAG & LLMs"); link "all courses ↓" (to the record). No courses: the block is left out. No certificates but courses: the count line leads instead.
  • Both blocks missing: the card is one column.
• The page's AI explanation moves to the right of the "Projects I'm proudest of" heading: one short line plus the legend marks. [call] site.intro is no longer shown on /work/; docs/CONTENT-CONTRACT.md says so.

2. Projects I'm proudest of

• Heading "Projects I'm proudest of", count, hint "hover the drawings · open a panel for the full story".
• Up to 6 featured projects (today: 4), by featured rank. Layout by position, repeating: 1 wide · 2–3 halves · 4 wide reversed · 5–6 halves. With fewer than six the pattern stops where they end; an odd last half takes the full row width as a wide panel [call].
• Panels are today's: showcase (or image) + number, group and where, title, summary, the why / interesting facts from the body (panelFacts, unchanged: rows with no matching section are left out, never placeholders), stack chips, "Read the full story" / "Read more", AI mark, filter note when hidden.
• Screenshots are muted: an image in a panel (and a thumbnail in the list) is shown desaturated and slightly darker (about half saturation, 80% brightness) and comes to full colour when the pointer is over its panel or row, or the panel has keyboard focus within. Drawn showcases are not muted. Owner: full greyscale "makes the page look boring and not interactable"; the colour on hover "is nice". Under prefers-reduced-motion the change is instant.

3. Also made

Today's ProjectList with the non-featured projects, heading "Also made" (was "All projects" / "Everything else"). Behaviour unchanged (tabs, search, thumbnails, side sheet, AI filter), plus:

• Search finds certificates too. When the search box has text, the courses whose title, provider, topic or keywords match are listed under the search, above the project rows, as a compact strip: seal mark when there is a certificate, title, "lab" tag for labs, provider · month year · duration. At most 5 shown, then "+ N more on the learning page →" linking to /work/learning/?q=<text>. The count next to the heading reads e.g. "1 project · 5 courses match" (labs count as courses here; the seal marks which carry a certificate) [call]. [call] Courses never appear when the search is empty, and they are not affected by the AI preference (courses carry no AI level).

4. Record (#record)

Two cards side by side (stacked on narrow screens). Either card is left out without content; with neither, the section is left out.

• Recognition & volunteering: two groups, "Competitions" and "Volunteering" (a group with no entries is left out), entries in file order. Each row: title (a link when url is given, with its host and ↗), an optional small detail after it, and at the right the result; for volunteering, the role and then "ongoing" or "site retired" when status says so. highlight: true entries show the result in the accent colour; titles stay in the text colour. Years appear only when given.
• Keeping up: summary line (seal, " certificates", "from courses and hands-on labs", "~ hours of course time since "), then a table by topic, ordered by total time: topic · " courses · labs" (a part that is zero is left out) · seal + certificate count · hours (one decimal, "h"). Then a link "All courses and certificates, searchable →" to /work/learning/.
• Hours are course time only (from minutes); the page says "course time", never more.

5. /work/learning/ (new page)

A quiet page in the work frame: heading "Courses & certificates", the same summary line, a search field and topic filter buttons ("All ", then each topic with its count), and a table, newest first: completed (date), course (title, a link when url is given; "lab" tag for labs), topic, provider, certificate (seal or —), time.

• Complete without JavaScript: the full table is in the HTML. A small plain page script (no React) filters rows by the search text (title, provider, topic, keywords) and the topic button, and reads ?q= on load. Rows not matching are hidden; a "No course matches" line appears when none do.
• In the sitemap; not in the feeds. Linked from the record, from the search strip, and in the top bar of this page.
• Without any courses the page is not built and nothing links to it.

6. Top bar and footer (work space)

• Top bar links on /work/: Projects (#featured), Record (#record), Writing, CV, each only when its section exists. "All projects" goes; the list is reached by scrolling or from Projects. [call]
• Work footer: back to the gate, /simple, GitHub, LinkedIn, email. The Bluesky link is removed from the work footer (owner, 2026-11-12). The off-the-clock footer and /simple keep it.

Content: two new optional files (content repo root)

docs/CONTENT-CONTRACT.md documents both. Both are optional; a missing file means no entries. [call] No contract bump: an older app ignores unknown files and a newer app reads content without them (the same reasoning as spec 008's pins).

recognition.yml, a list, file order = display order:

- title: AUHackathon 2019          # required
  kind: competition                # required: competition | volunteering
  result: winner · best AUHack     # required for competitions; for volunteering the role, e.g. "IT & website"
  highlight: true                  # optional, default false; candidates for the header (first 3)
  detail: four years               # optional short text after the title
  year: 2019                       # optional text ("2019", "2016–2019"); shown only when present
  url: https://example.invalid     # optional http(s)
  status: ongoing                  # optional, volunteering only: ongoing | retired

courses.yml, a list (any order; the site sorts):

- title: Ansible Fundamentals      # required
  provider: Pluralsight            # required
  kind: course                     # required: course | lab
  topic: Ansible                   # required, a short name; courses with the same text group together
  completed: 2025-04-18            # required, a real calendar date
  minutes: 224                     # required, positive integer (course time only)
  certificate: true                # optional, default false
  url: https://example.invalid     # optional http(s)
  keywords: [ansible, automation]  # optional list of text, used by search only

Validation follows the existing loader: every problem is listed with its file and field; unknown keys are errors [call] (catches typos like certifcate), as for projects.

Content changes the owner makes (not in this repo)

For the real site, in portfolio-next-content: featured ranks for the six (Gacha 1, Config 2, Bachelor Report 3, Mixed-Reality Rowing Game 4, Student Dashboard 5, VR-Classroom 6), showcase: config-editor on Config, peer-network on Bachelor Report, rowing-stroke on the Rowing game; ## Why and ## What's interesting sections in project bodies where he wants the facts rows; recognition.yml from his CV lines; courses.yml from his spreadsheet "Courses and Learning.xlsx" (the WordPress course has no completion date and stays out until it has one). The implementation prepares these as a folder outside both repos (the session scratchpad, content-proposal/), uses it only through a temporary copy of the real content for the preview, and hands it to the owner; it never writes to the portfolio-next-content clone. Rules for that set:

• Only facts he gave: the four CV lines and the two volunteer roles as he wrote them; unknown years are left out (no placeholders on the real site). No ## Why / ## What's interesting text is written for him; panels without those sections simply show no facts rows.
• Spreadsheet mapping [call]: one row per completed course (rows without a completion date are left out); kind: lab when "Course Type" contains "Lab"; minutes from "Course Hours"; certificate: true when "Certificate Available?" is "Yes" (he asked for the page to "show that I got certificates from them"; Pluralsight issues a certificate for every completed course that offers one); keywords from "Keywords"; url from "Link". topic is a hand grouping of "Bottom Category" into short names, the same text in chips, table and filter: Serverless → "Serverless / AWS", Ansible → "Ansible", Machine Learning and LLMs/RAG → "RAG & LLMs", Linux & System Administration → "Linux", Security → "Security", Metrics/logging → "Observability".

Non-goals

• No new drawn showcases (Gacha, Student Dashboard, VR-Classroom use their screenshots).
• No Skill IQ percentiles (left out on purpose during design).
• No change to the side sheet, project pages, writing pages, the off-the-clock side or /simple (beyond what is named above).
• No certificate PDFs or images.

Anti-goals (owner's hard lines)

Nothing moves unless the visitor acts; no trophy icons, badges walls or anything that sells; no uneven "bento" mosaic (tried in rounds 2–4 and rejected as "too chaotic and unfocused"); no greyscale screenshots.

Acceptance

• /work/ on the fixtures shows, in order: CV header (with highlights and keeping up), Projects I'm proudest of, Also made, Record, Writing, Where I've worked; each section disappears when its content is missing.
• Six featured fixture projects lay out as wide, half, half, wide reversed, half, half at ≥ 1100 px; one column on a phone; five featured ends with a wide panel.
• Screenshot panels and list thumbnails are muted until hovered; drawings are not.
• Searching the list for a fixture keyword shows matching courses with the right count and the learning-page link.
• /work/learning/ lists every fixture course newest first; search and topic filter hide rows; ?q= pre-filters; without JavaScript every row is visible.
• The work footer has no Bluesky link; the off-the-clock footer still does.
• validate reports each malformed field of recognition.yml and courses.yml, by file and field.
• Typecheck, bun test and Playwright pass; the page is checked at 1440 px and 390 px.