Diseñadora de Interiores · Documento de Estructura y Contenido

Versión 1.0 · Abril 2026

一、项目概述 / Resumen del Proyecto

网站名称： 个人作品集网站（Portfolio Personal）

核心目标： - 在大四实习期间作为求职工具，向西班牙设计公司展示个人能力 - 传达独特的设计哲学："轻足迹"空间设计理念 - 毕业后作为持续更新的职业名片

目标受众： - 西班牙马德里室内设计公司的HR和主创设计师 - 未来的潜在私人客户（住宅/商业空间） - 设计院校导师和同行

核心传达信息：

"这是一个有哲学立场的设计师——空间不是装饰，而是修复人与自然、人与人之间断裂连接的方式。"

品牌口号（贯穿全站）：

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

二、语言方案 / Idiomas

内容类型 语言
导航菜单 西班牙语
品牌口号 西班牙语（主）+ 中文（副）
关于我 / 设计理念 西班牙语（主）+ 英语（副）
作品描述 西班牙语（主）+ 英语（副）
联系页面 西班牙语

*此网站支持 西班牙语，英文及简体中文

三、网站地图 / Mapa del Sitio

首页 (Inicio)
├── 关于我 (Sobre mí)
├── 作品集 (Proyectos)
│   ├── 项目 01
│   ├── 项目 02
│   └── 项目 03（占位，后续添加）
├── 简历 (CV)
└── 联系 (Contacto)

共 5 个主页面 + 每个项目独立详情页。

四、页面详细结构 / Estructura por Página

页面 1 — 首页 (Inicio)

目的： 建立第一印象，传达品牌气质，引导进入作品集。

模块 1.1 — 导航栏 (Navegación)

  • Logo / 姓名（左上角）- (Chijia)
  • 导航链接：Proyectos · Sobre mí · CV · Contacto（右上角）
  • 样式：透明背景，滚动后变为白色/米色背景

模块 1.2 — Hero 区（全屏封面）

  • 背景： 一张最能代表你设计气质的作品图或氛围图（自然光、原始材质）
  • 文字层：
  • 主标题：Diseño donde los humanos aterrizan suavemente.
  • 副标题：Diseñadora de interiores · Madrid
  • CTA 按钮： Ver proyectos（跳转到作品集页）

内容来源：从课程作品中选一张最好的渲染图或手绘草图

模块 1.3 — 理念简介（一句话区块）

  • 3 行短句，提炼品牌核心价值观，例如：
  • Espacios que respiran.
  • Materiales que hablan.
  • Conexiones que sanan.
  • 视觉风格：大字号，居中，留白充足

模块 1.4 — 精选作品预览

  • 展示 2–3 个项目的封面图 + 项目名称
  • 点击跳转到对应项目详情页
  • 样式：网格布局，悬停显示项目名称
  • 姓名 + 联系邮箱 + LinkedIn 链接
  • 版权声明

页面 2 — 关于我 (Sobre mí)

目的： 展示设计师的人格、背景和哲学立场，建立信任感。

模块 2.1 — 个人介绍区

  • 左侧： 专业照片（建议：自然光，简洁背景）
  • 右侧文字：
  • 姓名、学校（Universidad / Madrid）
  • 2–3 段话：来自哪里、为什么做室内设计、对空间的理解
  • 内容提炼自品牌框架的 Origen 和 Propósito 部分

模块 2.2 — 设计哲学（重点区块）

  • 标题：Mi filosofía de diseño
  • 内容：用 3–4 段话解释"轻足迹"设计理念
  • 人与自然的断裂
  • 空间作为修复工具
  • 材料的诚实语言
  • 侘寂（wabi-sabi）与不完美的美
  • 内容直接从品牌框架文件提炼翻译

模块 2.3 — 技能与工具

  • 设计软件：AutoCAD · SketchUp · 3ds Max / Lumion · Adobe Suite
  • 手绘与模型制作
  • 语言：中文（母语）· 西班牙语（流利）· 英语（良好）

模块 2.4 — 教育背景时间线

  • 在读院校、专业、预计毕业年份
  • 相关课程亮点

页面 3 — 作品集 (Proyectos)

目的： 展示设计能力与思维过程，是网站最核心的部分。

模块 3.1 — 作品集列表页

  • 每个项目显示为一张卡片：封面图 + 项目名称 + 类型标签（住宅/商业/学术）
  • 点击进入项目详情页

每个项目详情页包含以下模块：

模块 3.2 — 项目封面 - 全宽大图 + 项目名称 + 一句话项目描述

模块 3.3 — 项目概述 - 项目类型 / 面积 / 时间 / 地点（课程作品填写"Proyecto académico"） - 设计出发点：¿Qué conexión quería restaurar con este espacio?（这个空间要修复什么连接？）

模块 3.4 — 设计过程展示 - 手绘草图 / 概念图（展示思维过程，非常重要） - 平面图 / 分析图 - 效果图 / 渲染图

模块 3.5 — 设计说明 - 材料选择的理由（回应"轻足迹"价值观） - 光线设计思路 - 空间如何回应品牌哲学

模块 3.6 — 导航 - 上一个项目 / 下一个项目 按钮

初版建议展示 2–3 个项目，每个项目深度讲解比数量更重要。

页面 4 — 简历 (CV)

目的： 提供可下载的简历，方便HR保存。

模块 4.1 — 简历概览（网页版）

  • 教育背景
  • 实习/工作经历（大四实习后更新）
  • 技能
  • 奖项/参赛经历（如有）

模块 4.2 — 下载按钮

  • 醒目的 CTA：Descargar CV (PDF)
  • PDF 简历需单独制作，风格与网站一致

页面 5 — 联系 (Contacto)

目的： 让有兴趣的公司或客户方便地联系你。

模块 5.1 — 联系信息

  • 邮箱地址（可点击发送）
  • LinkedIn 个人主页链接
  • 所在城市：Madrid, España

模块 5.2 — 联系表单

  • 字段：姓名 / 邮箱 / 留言
  • 提交按钮：Enviar mensaje

模块 5.3 — 结尾语

  • 一句有温度的话，例如： "Si crees que los espacios pueden sanar, hablemos." （如果你也相信空间能够疗愈，我们来谈谈。）

五、视觉规范 / Identidad Visual

配色方案

用途 颜色 色值
背景主色 暖白 / 米白 #F5F0EB
文字主色 深炭灰 #2C2C2A
文字副色 中灰 #7A7570
强调色 暖土棕 #8C6E52
分割线 浅米色 #E0D8D0

原则：克制、自然、有呼吸感。避免使用纯黑和纯白。

字体

用途 字体建议
标题 Cormorant Garamond（衬线，优雅感）
正文 Inter 或 DM Sans（无衬线，清晰易读）
口号/引语 Cormorant Garamond Italic

以上字体均可从 Google Fonts 免费获取。

图片风格关键词

  • 自然光优先，避免过度后期
  • 材质细节特写（木纹、石材、手绘线条）
  • 构图留白充足
  • 色调偏暖，避免冷蓝色调

六、技术说明 / Especificaciones Técnicas

项目 要求
响应式设计 必须适配手机、平板、桌面端
加载速度 图片需压缩，建议 WebP 格式
联系表单 需要后端处理或使用 Formspree 等第三方服务
PDF 下载 简历 PDF 托管在网站内，点击直接下载
SEO 基础 每页有 meta description，图片有 alt 文字
域名建议 nombre.com 或 nombre.design
托管建议 Netlify / Vercel（免费，适合静态网站）

使用 React.js 来制作此网站

七、内容准备清单 / Lista de Contenidos a Preparar

在开始制作网站之前，需要准备好以下内容：

文字内容

  • [ ] 个人简介（西班牙语，约 150 字）
  • [ ] 设计理念陈述（西班牙语，约 300 字，从品牌框架提炼）
  • [ ] 每个项目的描述文字（每个约 200 字）
  • [ ] 简历文字内容（教育、技能、语言）
  • [ ] 联系页结尾语

图片素材

  • [ ] 专业照片 1 张（个人照，关于我页面用）
  • [ ] 每个项目：封面图 1 张 + 过程图（草图、平面图）+ 效果图 2–4 张
  • [ ] Hero 区背景图 1 张（最能代表品牌气质）

文件

  • [ ] 简历 PDF（西班牙语版）
  • [ ] 项目平面图（如有）

文件版本：1.0 · 最后更新：2026年4月26 下一步：根据此 SSD 开始制作网站原型*