Add Projects and Talks pages with folder-per-entry content model#1
Merged
Conversation
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Splits the Projects section out of Experience into its own page with detail views, adds a new Talks page, and updates the header nav and Experience page (Other Experience section) to match. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Previously the whole card was a stretched link, which made most of the card look inert while only its edges responded to clicks. Scope the link to the "View details" text instead. Also ignore the local .playwright-mcp/ output directory. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Header lacked shrink-0, so in the h-screen flex column it would compress below its intended 80px whenever page content pushed total height past the viewport, most visibly on the About page. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Per the design handoff, the header was fully hidden below md. Show it on all viewport sizes with flex-wrap so all 5 links stay reachable on mobile instead of disappearing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Replace the flat projects.ts/talks.ts arrays with src/content/{projects,talks}/<slug>/
folders (meta.ts + details.md, optional cover image), so adding an entry is
"add a folder" instead of editing a shared array. details.md is rendered
with react-markdown + remark-gfm and supports images co-located in the same
folder, resolved through Vite's asset pipeline via import.meta.glob.
Projects gain the same optional cover-image convention talks already had,
replacing the static "project screenshot" placeholder.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
object-cover was cropping the top/bottom off portrait-oriented cover images (e.g. the Traefik talk's logo). Switch to object-contain on a neutral background so the whole image is always visible. Also fixes a related bug: object-contain + percentage h-full/w-full inside a flex container using aspect-ratio let the image's own intrinsic ratio distort the container's computed height. Take the image out of flow with absolute positioning so it strictly fills the aspect-ratio box instead. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/content/{projects,talks}/<slug>/meta.ts+details.md+ optional cover image) rendered via react-markdown, so adding an entry is just adding a folderTest plan
npm run build🤖 Generated with Claude Code