个人博客

Project / 2026 / Live

Portfolio System

内容驱动的个人站点系统,统一承载项目、博客和个人品牌表达。

使用 Next.js App Router 构建的个人网站系统,支持项目案例、文章内容、SEO、分析和可扩展的设计系统。

WebSEO内容系统

项目背景

我希望个人网站不仅能展示页面,还能作为长期内容资产平台,沉淀项目、技术文章和职业品牌。

因此在前期就把站点拆成多个内容域,并预留 SEO、分析和平台化扩展能力。

我的职责

设计站点信息架构与多域路由方案
建立内容数据模型与可复用 UI Design System
打通项目详情页、博客路由、SEO 和部署骨架

技术栈

用于支撑项目交付的关键框架、语言和工程能力。

Next.jsTypeScriptTailwindshadcn/ui

难点与解决方案

把项目中的关键挑战拆成问题和方案,方便后续继续补充复盘。

内容模型需要兼顾展示和扩展

问题:项目、博客、关于我内容既要快速上线,也要方便长期维护。

解决方案:将基础数据抽象为强类型对象,先用 data 层承载,后续可平滑迁移到 MDX 或 CMS。

设计系统与业务页面同步演进

问题:如果组件系统和页面实现脱节,后续维护会反复返工。

解决方案:先建立统一 token 与基础组件,再让页面全部复用这一套组件体系。

截图区域

当前保留为截图占位区,后续可替换为真实项目界面、流程图或性能对比图。

Home Hero

首页头图区块占位,可替换为最终品牌视觉截图。

Project Detail

项目详情页占位,可替换为真实案例展示截图。