Skip to content
Table of contents

Pixel Portal：8-bit 像素风个人主页

Updated August 22, 2026 5 min read ··· views #astro / #像素风 / #个人主页

项目来源：github.com/willimt/pixel-portal 线上演示：willimt.com

不只是一张个人名片

个人主页通常由头像、简介和几条链接组成。Pixel Portal 也有这些东西，但我更想把它做成一块刚通电的旧游戏机屏幕：先按下 PRESS START，再去发现页面会给出的回应。

它使用 Astro 构建，最终产物只是静态文件。没有数据库、后端进程、API Key，也不需要在服务器上常驻任何运行时；把 dist/ 放到静态托管上就能工作。页面内容则集中在 src/data/site.ts：个人资料、社交链接和卡片链接都能从这一处改掉，不必钻进组件里找文案。

下面几张截图记录了主页、链接区和互动场景的样子。

image-20260822155738145

image-20260822155808477

image-20260822155946723

image-20260822160043710

让链接页有一点可玩性

视觉上，页面坚持一套比较死板的 8-bit 规则：像素边框、硬阴影、点阵背景，以及不做平滑处理的角色帧。深色主题现在是默认外观，冷紫色面板、青绿色状态色和粉色强调色构成统一的终端配色；Featured 区域也改成了带像素封面的主次卡片，下面只保留更轻量的云盘和联系入口。开机后名字会慢慢打出来，页面背景可以点出粒子，底部显示从设定日期算起的运行天数；输入经典 Konami Code 也会有一个不太正经的庆祝画面。

最显眼的互动藏在头像里。点击银狼头像后，页面会抖一下，传送门、街机和角色动画依次出现，最后是一段推着街机离场的小剧情。角色没有接入 Live2D：项目把源图切成精灵图，用 Sharp 在构建时清理、压缩并对齐，运行时再由 Canvas 按帧绘制。这样既保留了像素感，也不会把一堆大图塞进首屏；精灵图会在头像首次悬停、聚焦或点击时才开始加载。

页面上的功能并不试图假装成一个完整的游戏系统，但它们会彼此串起来：按下开机按钮、打开音乐、打开全部主链接卡片、触发剧情、输入彩蛋，或在终端里执行 hack，都会分别点亮六项本地成就。成就面板会根据当前进度给出下一步提示；全部完成后，终端会解锁 root 命令和一套可以持续使用的紫青 Glitch 扫描线主题。进度与隐藏主题状态保存在浏览器的 localStorage，换设备自然不会同步，也正好不用为一个个人主页引入账户和服务端。

终端是另一个入口。按键盘左上角的“~”键，或者点击右上角按钮，就能打开 SILVERWOLF_OS。help 会列出命令；常用的有 links、achievements --hint、music on、sound off、theme light、hack 和 wolf。命令、设置值和链接名称都支持 Tab 补全，方向键可以翻阅历史。它更像给愿意多按几下键的人准备的一条暗门，而不是非用不可的导航。

声音和动态效果

背景音乐现在是随站点发布的一段循环 MP3，不再由浏览器临时合成，也没有保留实时频谱。页面不会一加载就自己放歌：可以点击音乐按钮；如果此前已保存为开启状态，按下 PRESS START 进入主页后也会恢复播放。按钮、点击和庆祝效果的短音仍通过 Web Audio 合成，因而没有额外的音效文件。

主题、音乐和音效开关都会记住上一次的选择。动态效果是这套视觉语言的一部分，因此默认持续开启，不再提供单独的 Motion 开关。开机遮罩期间主内容不可聚焦，终端会限制焦点范围，对话和成就提示也有对应的 ARIA 状态。即使禁用 JavaScript，遮罩会移除，基本的个人资料和链接仍然可读。

从链接页到可安装的小站

Latest Notes 卡片不再需要手动复制文章标题：Astro 在构建时读取博客 RSS，自动写入最新文章的标题、摘要和链接；如果 RSS 超时或内容无效，则使用 site.ts 中的静态回退配置，外部服务异常不会拖垮构建。

项目同时补齐了 Web App Manifest、应用图标和 Service Worker，可以在支持的浏览器中安装为 PWA，并为首页提供离线回退。首屏图片、银狼运行时精灵和 Featured 像素封面都经过压缩；Canonical、Sitemap、Open Graph 与 Twitter Card 元数据也已经配置好，分享 willimt.com 时会使用项目自带的 1200×630 社交卡片。

构建与部署

项目要求 Node.js 22.12.0 或更高版本，使用 pnpm 管理依赖：

git clone https://github.com/willimt/pixel-portal.git
cd pixel-portal
pnpm install --frozen-lockfile
pnpm dev
bash

日常改动后可以直接运行：

pnpm verify
bash

这条命令会依次进行 Astro/TypeScript 检查、重新生成银狼精灵图、构建静态页面，再对构建产物执行 Node 回归测试。项目配置为 output: 'static'，Cloudflare Pages、Vercel、Netlify 或任意能托管静态文件的服务都可以部署；发布前把 astro.config.mjs 里的 site 改成自己的正式地址即可。

留一点空白给访问者

Pixel Portal 的重点不是把主页塞满功能，而是让原本一眼就能看完的页面多一点停留的理由。需要它时，它是一张明确的个人名片；愿意探索时，它会像一台还留着几个按键组合的旧掌机。源码、配置和部署方式都放在仓库里，想把它改成自己的版本也不难。