FolioSpace · 文山木公 / OVWS

一个把个人主页、项目展示和技术栈组合在一起的互动式 3D portfolio space。

项目以文山木公 / OVWS 的公开项目为内容，保留主页的 Intro、About、Lab、Blog 和 Gallery，同时把 Stack 改造成可探索的空间：项目卡片分布在 3D 场景中，通过地图、进度条和视角切换浏览。

功能

• 3D 项目空间：项目卡片、景深、转场和环境网格
• 交互导航：键盘方向键 / A-D、滚轮、触摸滑动、项目地图、Overview
• 双入口：主页 Stack 弹窗和独立 /stack/ 页面共用同一套交互脚本
• 个性化内容：GitHub、Blog、Email 与 OVWS 项目数据集中在 config.json
• 响应式布局：桌面、平板和移动端均可浏览

快速开始

npm install
npm run bootstrap
npm run dev

开发服务器默认运行在 http://localhost:8080。

生产构建：

npm run build
npm start

npm run bootstrap 会准备主页所需的流体背景、头像等资源；这些大文件被忽略并可随时重新生成。

内容配置

编辑 config.json 可以修改：

• intro：开场标题、转场入口和 GitHub 项目链接
• main：姓名、签名和主页导航
• about：终端 About 内容
• lab：工具和服务列表
• stack.profile / stack.projects / stack.groups：3D FolioSpace 内容
• blog / gallery：博客和画廊入口

目录

.
├── config.json              # 站点内容与项目配置
├── gulpfile.js              # Pug / Less / JS 构建
├── scripts/                 # 资源准备与静态服务
├── src/
│   ├── components/          # 页面模板
│   ├── css/                 # Less 样式模块
│   ├── js/                  # 页面交互与 FolioSpace 导航
│   └── assets/              # 头像、背景和字体
├── about/ lab/ stack/ links/ # 独立子页面
└── dist/                    # 构建产物

致谢

• 3D portfolio 交互思路参考 SimonAKing/FolioSpace（MIT）
• 主页动效骨架参考 SimonAKing/HomePage（LGPL-3.0）
• 流体背景引擎参考 PavelDoGreat/WebGL-Fluid-Simulation（MIT）