Kanjo-Elkamira-Ndi/Mbachan-Fabrice-Portfolio

## 概述 这是一个全栈个人作品集，旨在将 Mbachan Fabrice 打造为顶尖的网络安全顾问。公开站点是一个充满电影感、暗黑高端风格的单页体验，包含 11 个板块，涵盖专业技能、案例研究、认证等内容。管理后台赋予 Fabrice 完整的内容控制权——对所有作品集内容进行 CRUD 操作，并配备专属收件箱管理联系消息——无需接触代码即可完成。 **设计方向：**暗黑高端风格与现代 SaaS 的结合。灵感来自 CrowdStrike 的精准度、Hack The Box 的美学以及 Linear 的交互品质。 ## 技术栈 | 层级 | 技术 | |---|---| | 前端框架 | React 19 + TypeScript + Vite | | 样式设计 | Tailwind CSS + shadcn/ui | | 动画效果 | Framer Motion + CSS 关键帧 | | 路由管理 | React Router DOM v6 | | 后端 | Node.js + Express + TypeScript | | 数据库 | PostgreSQL（通过 `pg` 执行原始 SQL — 无 ORM） | | 认证 | JWT（仅限管理面板） | | 字体 | Syne · Manrope · JetBrains Mono | | 部署 | Vercel（客户端） · Railway（服务端 + DB） | ## 功能 ### 公开作品集 - **终端启动动画** — 首次访问时呈现的电影级加载序列，存储于 `sessionStorage` - **粒子画布主视觉** — 带有鼠标接近感应的交互式网络动画 - **11 个板块** — Hero · Trust Bar · 关于 · 专业技能 · 技术栈 · 经历 · 案例研究 · 认证 · 客户评价 · 联系方式 · 页脚 - **滚动进度指示器** — 固定在视口顶部的 2px 青色进度条 - **Framer Motion 展示效果** — 每个板块在滚动时带交错效果淡入 - **响应式设计** — 移动优先，已在所有断点测试通过 ### 管理后台 (`/admin`) - 受 JWT 认证保护 - 全面支持以下内容的 CRUD：项目、认证、经历、技术栈、客户评价 - 联系消息收件箱 — 阅读、标记为已读、删除 - 带有指标和近期活动的总览仪表板 ## 项目结构 ``` mbachan-fabrice-portfolio/ ├── client/ # React frontend │ └── src/ │ ├── components/ │ │ ├── ui/ # shadcn components │ │ ├── layout/ # Navbar, Footer, AdminLayout │ │ ├── sections/ # One file per portfolio section │ │ ├── animations/ # ParticleCanvas, TerminalBoot, FadeInView │ │ └── admin/ # Admin CRUD tables and forms │ ├── pages/ # Home, admin/* pages, NotFound │ ├── data/ # Static seed data (V1) — replaced by API in V2 │ ├── hooks/ # useScrollProgress, useInView, useAuth │ ├── lib/ # api.ts, utils.ts, constants.ts │ └── types/ # Shared TypeScript interfaces │ └── server/ # Express backend └── src/ ├── routes/ # REST endpoints per resource ├── controllers/ # Business logic ├── models/ # Raw SQL query functions ├── middleware/ # JWT auth, rate limiting, error handling └── db/ └── migrations/ # Plain SQL migration files ``` ## 快速开始 ### 前置条件 - Node.js 20+ - PostgreSQL 15+ - npm 或 pnpm ### 克隆仓库 ``` git clone https://github.com/Kanjo-Elkamira-Ndi/Mbachan-Fabrice-Portfolio.git cd Mbachan-Fabrice-Portfolio ``` ### 客户端（前端） ``` cd client npm install npm run dev ``` 运行于 `http://localhost:5173` ### 服务端（后端） ``` cd server npm install cp .env.example .env # 填写你的 DATABASE_URL, JWT_SECRET, PORT npm run dev ``` 运行于 `http://localhost:3000` ### 数据库 ``` # 创建数据库 createdb mbachan_portfolio # 按顺序运行 migrations psql -d mbachan_portfolio -f server/src/db/migrations/001_create_projects.sql psql -d mbachan_portfolio -f server/src/db/migrations/002_create_certifications.sql psql -d mbachan_portfolio -f server/src/db/migrations/003_create_experience.sql psql -d mbachan_portfolio -f server/src/db/migrations/004_create_testimonials.sql psql -d mbachan_portfolio -f server/src/db/migrations/005_create_technologies.sql psql -d mbachan_portfolio -f server/src/db/migrations/006_create_messages.sql psql -d mbachan_portfolio -f server/src/db/migrations/007_create_blog_posts.sql psql -d mbachan_portfolio -f server/src/db/migrations/008_create_users.sql ``` ### 环境变量 **`server/.env`** ``` PORT=3000 DATABASE_URL=postgresql://user:password@localhost:5432/mbachan_portfolio JWT_SECRET=your_super_secret_jwt_key JWT_EXPIRES_IN=7d CLIENT_URL=http://localhost:5173 ``` **`client/.env`** ``` VITE_API_URL=http://localhost:3000/api ``` ## 部署说明 ### 客户端 → Vercel ``` cd client npm run build # 将 /dist 部署到 Vercel — 将 VITE_API_URL 设置为你的 Railway 服务器 URL ``` ### 服务端 → Railway 将 GitHub 仓库连接到 Railway。在 Railway 仪表板中设置所有环境变量。Railway 会自动检测 Node.js 并运行 `npm start`。 ## V1 → V2 迁移 前端分两个阶段构建： **V1（静态）** — 所有数据均由 `src/data/*.ts` 本地文件提供。管理端使用组件内状态。联系表单仅显示成功提示（toast）。 **V2（联网）** — 将数据文件导入替换为 `lib/api.ts` 调用。将联系表单 POST 连接至 `/api/messages`。添加真实的 JWT 登录。要迁移某个板块，请替换： ``` // V1 import { projects } from '@/data/projects' // V2 const [projects, setProjects] = useState([]) useEffect(() => { api.get('/projects').then(r => setProjects(r.data)) }, []) ``` ## 设计 Token ``` --color-bg-primary: #080C14; /* base background */ --color-bg-secondary: #0D1321; /* card surfaces */ --color-bg-tertiary: #111827; /* elevated surfaces */ --color-accent-cyan: #00E5FF; /* primary accent */ --color-accent-emerald: #10B981; /* secondary accent */ --color-accent-purple: #7C3AED; /* tertiary accent */ --color-text-primary: #F1F5F9; --color-text-secondary: #94A3B8; --color-text-muted: #475569; ``` **字体：** `Syne`（标题） · `Manrope`（正文） · `JetBrains Mono`（代码/终端装饰） ## 许可协议 本项目及其设计为 **Mbachan Fabrice** 的知识产权。代码结构贡献者为 [Kanjo Elkamira Ndi / Alchemy Codes](https://kanjo-elkamira-ndi.vercel.app)。未经明确许可，不得授权重复使用。

标签：GNU通用公共许可证, MITM代理, Node.js, PostgreSQL, React, Syscalls, 个人作品集, 后台管理, 测试用例, 自动化攻击