Chijia · Portfolio personal

Diseño donde los humanos aterrizan suavemente. 设计，让人轻轻落脚的地方。

基于 SSD（# SSD — Sitio Web Portfolio.md）实现的室内设计师个人作品集网站。

技术栈：React 18 + Vite 5 + React Router 6 + react-i18next
三语支持：西班牙语（默认） / English / 简体中文
页面：Inicio · Sobre mí · Proyectos（含详情页）· CV · Contacto · 404
品牌：使用 SSD 中规定的配色（#F5F0EB / #2C2C2A / #8C6E52 …），字体 Cormorant Garamond + Inter（Google Fonts CDN）
响应式：桌面 / 平板 / 移动端均已适配
联系表单：内置 Formspree 支持，未配置时也可在控制台查看提交内容
SPA 路由：内置 Netlify _redirects 与 Vercel vercel.json 重写

一、目录结构

.
├── # SSD — Sitio Web Portfolio.md     # 项目需求文档
├── index.html                         # 入口 HTML（含 Google Fonts）
├── package.json
├── vite.config.js
├── vercel.json                        # Vercel SPA fallback
├── public/
│   ├── _redirects                     # Netlify SPA fallback
│   ├── favicon.svg
│   ├── README.txt                     # 资源目录说明（CV、图片）
│   ├── cv-chijia.pdf                  # ← 你需要自行放入
│   └── images/projects/<slug>/...     # ← 你需要自行放入项目图片
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── i18n.js
    ├── components/
    │   ├── Navbar.jsx
    │   ├── Footer.jsx
    │   ├── LanguageSwitcher.jsx
    │   ├── ProjectCard.jsx
    │   └── ScrollToTop.jsx
    ├── data/projects.js               # 项目数据（已含 2 个示例 + 1 个占位）
    ├── locales/                       # i18n 资源
    │   ├── es.json
    │   ├── en.json
    │   └── zh.json
    ├── pages/                         # 5 个主页面 + 详情页 + 404
    │   ├── Home.jsx
    │   ├── About.jsx
    │   ├── Projects.jsx
    │   ├── ProjectDetail.jsx
    │   ├── CV.jsx
    │   ├── Contact.jsx
    │   └── NotFound.jsx
    └── styles/global.css              # 全局样式（品牌色 / 字体 / 响应式）

二、本地运行

1. 准备

需要 Node.js ≥ 18（推荐 18 或 20）。检查：

node -v
npm -v

2. 安装依赖

进入项目根目录（这个 README 所在的位置）：

cd "/Users/nelsonlai/sources/freelance/vibe_coding"
npm install

你也可以使用 pnpm install 或 yarn。

3. 启动开发服务器

npm run dev

Vite 启动后会输出：

VITE v5.x  ready in xxx ms
➜  Local:   http://localhost:5173/

浏览器会自动打开 http://localhost:5173/。修改任何源文件，页面会热更新。

4. 生产构建 & 本地预览

npm run build      # 生成 dist/
npm run preview    # 启动 http://localhost:4173 预览构建结果

三、内容自定义

所有页面的文字都来自 src/locales/{es,en,zh}.json。三种语言字段名一致，改一个键，记得在三个文件里同时改。

1. 替换品牌信息

src/locales/*.json → brand.name、nav.*、brand.tagline 等
联系邮箱与 LinkedIn：src/components/Footer.jsx、src/pages/Contact.jsx

2. 添加 / 修改项目

打开 src/data/projects.js：

{
  slug: 'casa-luz-suave',          // URL：/proyectos/casa-luz-suave
  cover: '/images/projects/casa-luz-suave/cover.webp', // 没图就设 null
  type: 'residential',             // residential | commercial | academic
  featured: true,                  // 是否在首页精选
  meta: { type: {...}, area: {...}, year: {...}, location: {...} },
  title:       { es: '...', en: '...', zh: '...' },
  summary:     { es: '...', en: '...', zh: '...' },
  question:    { es: '...', en: '...', zh: '...' },
  description: { es: '...', en: '...', zh: '...' },
  materials:   { es: '...', en: '...', zh: '...' },
  gallery: [
    { kind: 'tall' },              // 占位用，给真实图就改成 { src: '...' }
    { kind: 'wide' }
  ]
}

没配真实图片时，详情页和卡片会显示按品牌色渲染的渐变占位块，不会报错。

3. 放置图片与 PDF

把图片放到 public/images/projects/<slug>/ 下，再到 projects.js 中把 cover / gallery[i].src 改成对应路径（以 / 开头）。

简历 PDF：把文件命名为 cv-chijia.pdf 放进 public/，"Descargar CV (PDF)" 按钮就会下载它。如果想换名字，同步修改 src/pages/CV.jsx 里的 href。

4. 配置联系表单（可选，推荐）

未配置时，提交会在控制台 console.info 打印数据并显示成功提示，方便本地调试。

接入 Formspree：

注册并新建一个表单，拿到 endpoint，例如 https://formspree.io/f/abcdwxyz
在项目根目录新建 .env（已被 .gitignore 忽略）： VITE_FORMSPREE_ENDPOINT=https://formspree.io/f/abcdwxyz
重启 npm run dev。提交后表单会真正发邮件。

四、部署

构建产物是纯静态文件（dist/），可托管在任何静态平台。下面是两种最简单的方式（SSD 推荐的就是这两种）。

方式 A · Vercel（推荐，零配置）

仓库根已经包含 vercel.json，处理好 SPA 刷新 404 的问题。

Web 控制台一键部署：

把项目推到 GitHub / GitLab / Bitbucket。
打开 https://vercel.com/new，导入仓库。
Framework Preset 选 Vite，其余保持默认（npm run build、dist）。
如有 Formspree，在 Environment Variables 里加 VITE_FORMSPREE_ENDPOINT。
点击 Deploy，几十秒后即可拿到 https://your-project.vercel.app。

或用 CLI：

npm i -g vercel
vercel            # 第一次会提问；之后 push 即可自动部署
vercel --prod     # 直接发布到生产环境

方式 B · Netlify

public/_redirects 已写入 /* → /index.html 200，可直接刷新任意子页面。

Web 控制台：

推到 GitHub。
在 https://app.netlify.com 选 Add new site → Import from Git。
Build command：npm run build；Publish directory：dist。
在 Site settings → Environment variables 里加 VITE_FORMSPREE_ENDPOINT（可选）。
Deploy。

或用 CLI：

npm i -g netlify-cli
npm run build
netlify deploy --prod --dir=dist

方式 C · GitHub Pages / 任意静态托管

npm run build
# 把 dist/ 整个目录上传到你的服务器或托管即可

若部署在子路径（如 https://user.github.io/repo/），编辑 vite.config.js 增加 base: '/repo/'。

自定义域名

参照 SSD 的建议（nombre.com / nombre.design）：

Vercel / Netlify 控制台都有 Domains 标签，添加域名后会给你两条 DNS 记录（CNAME 或 A）。
在域名服务商面板添加这两条记录，等待几分钟生效。
平台会自动签发 Let's Encrypt 证书，自带 HTTPS。

五、常见问题

Q. 启动后页面是白的？ A. 看终端是否有报错。一般是依赖没装好，再跑一次 npm install。

Q. 字体没加载？ A. 字体来自 Google Fonts CDN（在 index.html 中 <link> 引入）。如果在内网开发，请自行下载字体文件并改用本地引入。

Q. 路由刷新 404？ A. Vercel 用 vercel.json、Netlify 用 public/_redirects，本仓库都已内置。其他平台需要自行设置 SPA fallback。

Q. 想新增第四种语言？ A. 复制一份 src/locales/es.json 改成新语言；然后在 src/i18n.js 的 resources 与 supportedLngs 中注册；最后在 src/components/LanguageSwitcher.jsx 的 LANGS 数组加一项即可。