Skip to content跳到正文
All works全部作品
Code代码

This Site这个站

A portfolio where code, music and video are one content type with three presentations, written as MDX files in git.一个作品集:代码、音乐和影像是同一种内容类型的三种呈现,全部写成 git 里的 MDX 文件。

Stack技术栈
TypeScript · Next.js · MDX · Tailwind CSS

The premise: a repo and a beat are the same kind of object. Both are things I finished and want to show. What differs is presentation — a beat wants a play button, a repo wants a link and a stack list, a film wants an embed.

So there's one type with a discriminator:

export type Work = CodeWork | MusicWork | VideoWork;

and one card component that keeps the frame identical and swaps only the media block. A track and a repository sit in the same grid, at the same size, filtered by the same control — because on this site they rank the same.

Content is files

Every work and every note is an .mdx file under content/, with frontmatter validated at build time. Publishing is a git push. No database, no admin login, no CMS to keep upgrading, and the whole archive is greppable and diffable. If a frontmatter field is wrong, the build fails with the filename and the field — better to break in CI than to render a card with a blank title.

What the rebuild replaced

The previous version was a Vite single-page app that had grown into a browser DAW with a portfolio bolted to the front. Two thirds of the code was audio tooling, works were stored in IndexedDB so visitors saw an empty page, and nothing was server-rendered so nothing was indexable. The rewrite keeps the monochrome editorial look and throws out everything else.

前提是这样的:一个仓库和一段 beat 是同一类东西。都是我做完了、想拿出来给人看的东西。 不同的只是呈现方式——beat 需要一个播放按钮,仓库需要一个链接和技术栈列表,影片需要一个嵌入播放器。

所以只有一个类型,外加一个判别字段:

export type Work = CodeWork | MusicWork | VideoWork;

再配一个卡片组件,外框完全一致,只替换中间的媒体块。一首曲子和一个仓库待在同一个网格里、 同样的尺寸、被同一个控件筛选——因为在这个站上它们的地位是一样的。

内容就是文件

每一件作品、每一篇笔记都是 content/ 下的一个 .mdx 文件,frontmatter 在构建时校验。 发布就是一次 git push。没有数据库,没有后台登录,没有需要一直升级的 CMS, 整个存档都能 grep、能 diff。frontmatter 有字段写错,构建就会带着文件名和字段名失败—— 在 CI 里炸掉,好过渲染出一张标题空白的卡片。

这次重构替换掉了什么

上一版是一个 Vite 单页应用,长着长着变成了一个浏览器 DAW,前面勉强挂了个作品集。 三分之二的代码是音频工具,作品存在 IndexedDB 里所以访客看到的是空页面, 什么都没有服务端渲染所以什么都没法被索引。这次重写保留了那套黑白编辑排版的外观, 其余全部扔掉。

Next.jsMDXDesign SystemsNext.jsMDX设计系统