Adds one project to the portfolio's Work section: a card in the grid plus a
detail page at /project/<slug> with metadata, an embedded video, and
distilled description sections.
-
Read the note. Find the project's .md in the vault (case-insensitive,
user may abbreviate the name). Extract: cover filename, tags, date, video
URL, and the description body.
-
Check the three ingredients — cover image (exists in Resources), video
link, and real description text (not just a video embed). Many vault notes
are video-only. If something is missing, don't silently ship a thin page:
tell the user what's missing and ask whether to (a) draft a short
description for them from the video/tags/old site, (b) proceed without
that ingredient (no video → cover image hero; no cover → gradient
placeholder card, already styled), or (c) wait until they fill the note.
-
Copy images into public/projects/ with kebab-case names derived from
the slug (e.g. syncscape.png, syncscape-pano.png). Obsidian filenames
often contain spaces or hash-like names — never reference the vault paths
directly; the site must be self-contained.
-
Convert the video URL to an embed id. Watch URLs don't embed.
https://youtu.be/<id>?... or youtube.com/watch?v=<id> → { type: "youtube", id: "<id>" } (strip query params like ?si=)https://vimeo.com/<digits>?... → { type: "vimeo", id: "<digits>" }
-
Write the entry in src/content/site.tsx, appended to projects
(or where the user wants it ordered — order = display order):
{
slug: "kebab-case-name",
title: "Display Name",
tag: "Domain · Tech · Year",
blurb: "One sentence, ~15 words, what + why it's interesting.",
cover: "/projects/<slug>.png",
video: { type: "youtube", id: "..." },
meta: [
{ label: "Type", value: "Research · XR" },
{ label: "Stack", value: "Unity 6 · Photon Fusion 2" },
{ label: "Date", value: "2026" },
],
sections: [
{ heading: "Overview", body: <>...</> },
{ heading: "How it works", body: <>...</>,
image: { : , : } },
],
}
-
Distill, don't dump. Vault notes are research write-ups; the site is a
portfolio. Rewrite into 3–4 sections of one tight paragraph each
(Overview → approach/how it works → 1–2 distinctive aspects → current/
future work). Keep concrete details that show depth (algorithm names,
stack choices, numbers); cut headers like "Challenges/What we learned"
narrative padding. Match the site's voice: first person, confident,
plain English. Escape apostrophes in JSX (').
-
Verify before showing the user. Run npm run lint and npm run build
(both must pass — the data is typed, typos in fields fail here). For
visual confirmation, start the dev server and screenshot the Work grid
and the new /project/<slug> page with Playwright (headless browsers may
show a video-provider security notice instead of the player — that's the
provider blocking headless, not a bug).
-
Commit with a message describing the added project. Push only if the
user asks or has an established push-every-change pattern.
