An open-source editorial portfolio template for people whose careers are still taking shape.
一个面向“仍在成长中的人”的开源编辑式个人作品集模板。
Direction in Formation is a responsive personal portfolio template built around progression rather than self-promotion. It replaces the usual résumé dashboard, skill-pill wall, and inflated metrics with a continuous narrative about experience, turning points, selected work, and capabilities in formation.
The included demo uses Lou's SEO career story, but the structure can be adapted for developers, designers, marketers, researchers, writers, and other independent professionals.
- Editorial Chinese and Latin typography
- Asymmetric twelve-column grid
- Warm paper palette with one restrained accent colour
- A continuous SVG path linked to scroll progress and pointer movement
- Narrative chapters instead of conventional résumé cards
- Responsive mobile composition rather than a compressed desktop layout
- Keyboard-accessible navigation and visible focus states
prefers-reduced-motionsupport- No animation or UI dependency beyond React and CSS
The main demo content and section structure live in:
app/page.tsx— navigation, story, projects, capabilities, and contact detailsapp/globals.css— colour system, typography, grid, interaction, and responsive stylesapp/layout.tsx— page metadata and document language
Start by replacing the demo copy in app/page.tsx. Then update the colour variables at the top of app/globals.css and the metadata in app/layout.tsx.
Requires Node.js >=22.13.0.
npm install
npm run devValidation:
npm run build
npm run lintUse the Next.js (Static HTML Export) preset with:
- Build command:
npm run build:pages - Build output directory:
out - Root directory:
/ - Production branch:
main
Do not use npx wrangler deploy for a Pages project. For a manual Pages upload,
run npm run deploy:pages instead.
- React 19
- Next.js / Vinext
- TypeScript
- CSS and inline SVG
- Cloudflare-compatible deployment output
Direction in Formation 是一个响应式开源个人作品集模板。它不把个人经历做成简历面板、技能标签墙或夸张的数据展示，而是通过起点、转折、项目、能力与当下方向，讲清楚一个人如何逐渐变得更完整。
仓库中的演示内容使用 Lou 的 SEO 从业经历，但整体结构同样适用于开发者、设计师、营销从业者、研究者、写作者及其他独立职业者。
- 具有编辑感的中西文排版
- 非对称十二栏网格
- 暖纸张底色与单一克制强调色
- 随滚动进度和指针轻微响应的连续 SVG 路径
- 用完整叙事章节替代普通履历卡片
- 针对手机重新组织版面，而非简单压缩桌面端
- 支持键盘导航与清晰的焦点状态
- 支持
prefers-reduced-motion动效降级 - 除 React 与 CSS 外，不依赖额外动效或 UI 库
主要内容与样式位于：
app/page.tsx— 导航、个人故事、项目、能力与联系方式app/globals.css— 配色、字体、网格、交互与响应式样式app/layout.tsx— 页面标题、描述和文档语言
建议先替换 app/page.tsx 中的演示文案，再修改 app/globals.css 顶部的颜色变量，最后更新 app/layout.tsx 中的页面信息。
需要 Node.js >=22.13.0。
npm install
npm run dev构建与检查：
npm run build
npm run lint选择 Next.js (Static HTML Export) 预设，并使用：
- 构建命令：
npm run build:pages - 构建输出目录：
out - 根目录：
/ - 生产分支：
main
Pages 项目不要使用 npx wrangler deploy。如需手动上传 Pages，运行
npm run deploy:pages。
Released under the MIT License.
本项目基于 MIT License 开源，可自由使用、修改和分发，但请保留原始许可证与版权声明。