[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","691d6a399ea48191b7862dc67b2af895","versionInt","title","前卫程序员个人主页","type","code/react","content","const works = [\n {\n id: 1,\n type: '游戏作品',\n title: 'Neon Runner · Web Game Demo',\n desc: '高节奏跑酷游戏，加入粒子特效、键盘反馈与自适应难度，用代码写出的“街机感”。',\n tags: ['Game', 'WebGL', 'Canvas', '前端玩法设计'],\n gradient: 'from-sky-500 via-cyan-400 to-emerald-300',\n },\n {\n id: 2,\n type: '摄影作品',\n title: 'City Pulse · 夜色城市系列',\n desc: '用长曝光和霓虹光轨记录城市的“心跳”，探索程序员视角下的都市情绪。',\n tags: ['摄影', '夜景', '城市', '长曝光'],\n gradient: 'from-slate-900 via-fuchsia-600 to-amber-400',\n },\n {\n id: 3,\n type: '画画作品',\n title: 'Glitch Portraits · 数字肖像',\n desc: '以故障风和几何分块绘制人物肖像，搭配高饱和配色与微弱的“电子感”。',\n tags: ['插画', '数字绘画', '故障风'],\n gradient: 'from-pink-500 via-rose-500 to-purple-500',\n },\n {\n id: 4,\n type: '游戏作品',\n title: 'Logic Architect · 解谜小品',\n desc: '基于逻辑电路的解谜小品，把算法思维做成可玩的关卡，面试展示非常加分。',\n tags: ['Game', 'TypeScript', '关卡设计'],\n gradient: 'from-amber-400 via-orange-400 to-red-400',\n },\n {\n id: 5,\n type: '摄影作品',\n title: 'Soft Morning · 自然光人像',\n desc: '用温柔自然光和低饱和色调拍出轻电影感的人像，强调微表情和情绪故事。',\n tags: ['摄影', '人像', '自然光'],\n gradient: 'from-emerald-300 via-teal-300 to-sky-300',\n },\n {\n id: 6,\n type: '画画作品',\n title: 'UI Fragments · 界面碎片',\n desc: '把 UI 元素拆成一张张小卡片，用插画的方式重新组合，展示你对界面的理解。',\n tags: ['插画', 'UI', '组件'],\n gradient: 'from-sky-500 via-indigo-500 to-fuchsia-500',\n },\n];\n\nconst posts = [\n {\n id: 1,\n title: '用 React + Tailwind 打造「前卫」作品集界面',\n summary:\n '从配色、排版到动效，拆解一个既高亮又不过分晃眼的个人主页设计思路。',\n tags: ['React', 'Tailwind', 'UI/UX'],\n },\n {\n id: 2,\n title: '把游戏思维塞进 Web：交互设计的另一种可能',\n summary:\n '为什么把成就、关卡、反馈机制应用到网页体验中，会让用户停留更久？',\n tags: ['Game Design', '交互设计'],\n },\n {\n id: 3,\n title: '程序员学摄影：如何把「画面感」反哺到写代码里',\n summary:\n '构图、色彩和节奏，其实和代码结构一样，都讲究层次与留白。',\n tags: ['摄影', '创作', '个人成长'],\n },\n];\n\nconst contacts = [\n {\n id: 'github',\n label: 'GitHub',\n value: 'github.com/your-id',\n href: 'https://github.com/your-id',\n icon: '🐙',\n },\n {\n id: 'twitter',\n label: 'Twitter / X',\n value: '@your_handle',\n href: 'https://twitter.com/your_handle',\n icon: '🐦',\n },\n {\n id: 'email',\n label: 'Email',\n value: 'you@example.com',\n href: 'mailto:you@example.com',\n icon: '✉️',\n },\n];\n\nfunction Pill({ children }) {\n return (\n \n #\n {children}\n \n );\n}\n\nfunction SectionTitle({ kicker, title, subtitle, id }) {\n return (\n

\n \n {kicker}\n

{title}

\n {subtitle && (\n

{subtitle}

\n )}\n

\n );\n}\n\nfunction Header() {\n const nav = [\n { id: 'works', label: '作品' },\n { id: 'blog', label: '博客' },\n { id: 'contact', label: '联系我' },\n ];\n\n return (\n

\n \n\n

\n \n \n \n 🚀\n 代码 · 游戏 · 摄影 · 绘画\n \n \n \n 用一个页面，把你所有的创作维度都展示出来\n \n

\n\n

\n 把程序员 \n 变成一个\n 多维创作者\n

\n 这里不仅有代码项目，还有游戏 Demo、摄影系列与插画作品。\n 明亮的配色、顺滑的动效，让访客一眼就记住你的风格。\n

\n\n

\n \n ✨\n 立即联系我\n \n \n 查看作品\n ↓\n \n

\n\n

\n \n 👨‍💻\n React · TypeScript · Tailwind\n \n \n 👾\n 游戏化交互 · 玩法设计\n \n \n 📷\n 摄影 · 视觉叙事 · 插画\n \n

\n\n

\n \n 正在创作 · Online\n

\n Your Name / Handle\n

\n Frontend Developer · Game & Visual Creator\n

\n 👨‍💻\n

\n\n

\n 主攻方向\n React / Node / Tailwind / Three.js\n

\n 创作标签\n 交互动画 · 游戏化 · 视觉设计\n

\n\n

\n \n \n ✨\n \n

创作状态：高能输出中

\n 最近更新了新的游戏 Demo、摄影组图和一篇设计文章。\n

\n \n 查看最新博文 →\n \n

\n );\n}\n\nfunction WorksSection() {\n return (\n

\n \n

\n {works.map((w) => (\n \n

\n \n {w.type === '游戏作品' ? '👾' : w.type === '摄影作品' ? '📷' : '🎨'}\n {w.type}\n \n \n featured\n \n

\n {w.title}\n

\n {w.desc}\n

\n {w.tags.map((t) => (\n {t}\n ))}\n

{title}

\n {w.title}\n

\n {p.title}\n