[ portfolio.preview / geek-mode ]
selected cases
01
24+
可以放精选项目、实验页面和工具型作品，不必都塞成长篇案例。
build identity
02
Code x Design
把“能设计也能落地”的个人特征做成页面的第一视觉印象。
motion profile
03
Lite FX
只放少量有效动效：加载显现、状态变化、悬停反馈，避免廉价炫技。
content mode
04
Modular
后续能自然扩成项目详情、文章页、实验清单，或者接你的真实数据源。
[ selected work ]
精选项目
项目卡片先故意做得像模块面板，强调结构、参数和结果感，而不是只靠大图堆情绪。
01 / web-app
online
AI Workspace Console
把多步骤内容生成、知识检索和结果编辑收拢成一个工作台式界面，让复杂任务也能像命令流一样被拆解和追踪。
Outcome
复杂流程可视化
Stack
React / API / Prompt Ops
Open Structure
02 / data-story
beta
Signal Data Canvas
用可滚动的故事化布局，把性能指标、行为数据和设计决策放进同一个阅读流里，兼顾信息密度和节奏控制。
Outcome
高信息密度叙事
Stack
SVG / Motion / CMS
Inspect Case
03 / portfolio-lab
active
Interactive Portfolio System
不是做一张“好看封面”，而是把你的项目、标签、文章和实验做成一个可扩展的内容系统，支持长期维护和演进。
Outcome
作品展示可持续升级
Stack
Static First / Modular Page
View Layout
04 / experiment
lab
Motion Testbed
集中收纳过渡、视差、状态反馈、字体实验和界面细节，通过小样机持续验证交互气质，而不是一次性拍脑袋定风格。
Outcome
风格迭代更快
Stack
CSS / JS / Interaction Study
Read Log
[ system profile ]
能力图谱
这里不走传统简历式技能罗列，而是用更接近“系统状态”的方式展示你的能力重心和擅长组合。
Interface Engineering
92%
更偏向能把复杂想法变成可交付界面的能力，包括布局、组件、前端实现和交互组织。
Design System Thinking
88%
适合展示你不只是做页面，而是能建立规则、语义和一致性的那一面。
Experimental Interaction
81%
保留一点实验气质，但不把页面做成只剩特效的演示稿。
[ work mode ]
工作方式
这块是“极客感”的关键，不只是视觉，更是把你做项目时的思路显性化。
01. Define Constraints
scope
先确定边界、目标和信息结构，再决定页面该酷到什么程度，避免风格压过内容。
02. Build Structured UI
system
把作品页拆成可维护模块，后续接更多项目、文章和实验记录时不会崩。
03. Tune the Feeling
polish
最后再收束配色、动效和文案语气，让页面从“能用”升级到“有辨识度”。
[ build log ]
演进轨迹
如果你后面想让个人站更完整，这一块可以扩成 timeline、case archive 或 blog index。
Recent Entries
2026 // now
Portfolio System Prototype
先用一张单页把调性、结构、模块划分和交互语言跑通，再决定是否拆成多页面体系。
2025 // Q4
AI + Workflow Exploration
如果你做过 AI 工具、自动化或创作辅助，这一段可以成为区别于普通作品集的重要标签。
2025 // Q2
Interaction Pattern Library
把常用交互、动画节奏和卡片语言逐步沉淀下来，让之后每次扩站都能直接复用。
Open Tabs
Project Detail Page pending
精选项目的详情页模板，包括背景、目标、方案、关键界面和结果。
Filtering / Tag System ready
后续可以加按类型、行业、技术栈或年份筛选，让作品更像作品库而不是海报墙。
Writing / Notes Section optional
如果你还有技术文章、设计思考或实验记录，可以接成二级入口，整体会更完整。
[ next command ]
如果这套气质对路，下一步就把它扩成真正可用的个人站。
可以继续补真实作品数据、你的介绍、联系方式、英文版本、项目详情页，也可以进一步把动画、切换和内容结构做得更完整。
[ quick links ]
外链占位
GitHub placeholder
X / Social placeholder
Email placeholder
这些链接先是示意字段。确认方向后，再换成你的真实账号、头像、作品数据和项目详情结构。