Sisuca/portfolio-isabel-abad

# 作品集 - Isabel Abad 🔗 **演示：** [https://www.isabelabad.es](https://www.isabelabad.es) 面向产品的专业作品集，使用 Astro 开发并部署在 Vercel 上，专注于 **前端安全**、**技术 SEO** 和 **优秀的架构实践**。 ## 项目重点 这个作品集不仅被设计为一个展示网站，而是作为一个接近生产环境的项目，用于应用以下技术： - 前端安全加固 - 架构决策（SSR vs Hybrid） - 技术 SEO 优化 - 类型定义与可维护性的最佳实践 ## 成果 - 安全性提升：从初始配置提升至 **B+ / A (Mozilla Observatory)** - 消除了 Astro v5 的警告（content collections 和类型） - 为混合环境（SSR + 静态）做好准备的架构 - 可扩展的基础架构，添加新项目时无需修改路由代码 ## 技术栈 - **框架：** Astro (SSR/Hybrid) - **语言：** TypeScript - **样式：** Tailwind CSS - **内容：** Markdown + Content Collections - **邮件：** Resend - **部署：** Vercel ## 安全性 该项目已通过安全审计，在标准安全分析（Mozilla Observatory）中获得了 **A / B+** 的评分。 - 实现了具有严格模型（`default-src 'none'`）的 **Content Security Policy (CSP)**，在安全性和兼容性之间取得平衡（由于 Astro/Tailwind 的限制，受控使用 `unsafe-inline`）。 - 在 Vercel 中配置了安全的 HTTP headers（`vercel.json`）。 - 防御 XSS、Clickjacking 和 MIME sniffing。 - 限制外部来源和资源。 ## 架构决策 在开发过程中为保证稳健性和可扩展性而做出的关键决策： - **架构：** 在 Astro 中使用 SSR/Hybrid 以支持动态功能（联系表单），同时保持其余页面为静态。 - **路由管理：** 实现自定义工具（`getSlug`）以适应 Astro v5 API 的变化（处理 `id` vs `slug`）。 - **内容：** 在 `content.config.ts` (Astro v5) 中显式定义集合，避免使用已弃用的自动生成。 - **SEO：** 手动创建 `sitemap.xml`，以避免与 Vercel adapter 产生冲突并确保正确建立索引。 ## 关键经验 - 适应框架变化（Astro v5：移除 `slug`） - 在真实环境中管理前端安全（CSP、HTTP headers） - 在简洁性与稳健性之间做出决策（SSR vs 静态） - 严格类型定义对于避免 runtime 错误的重要性 ## 技术 SEO - 实施 `sitemap.xml` 和 `robots.txt`。 - 为爬取和索引优化的语义化结构。 - 配置了 Meta 标签和规范 URLs。 ## 项目结构 ``` / ├── public/ │ ├── images/ # Imágenes optimizadas │ ├── certificates/ # PDFs de certificados │ ├── sitemap.xml # SEO: Mapa del sitio │ ├── robots.txt # SEO: Control de indexación │ └── favicon.svg # Favicon ├── src/ │ ├── components/ # Componentes reutilizables (UI) │ ├── content/ │ │ └── projects/ # Proyectos en Markdown │ ├── content.config.ts # Definición de colecciones (Astro v5) │ ├── layouts/ # Plantillas principales │ ├── pages/ # Rutas de la aplicación │ │ ├── index.astro │ │ ├── cv.astro │ │ └── projects/ # Rutas dinámicas ([slug]) │ ├── styles/ # Estilos globales │ └── utils/ # Helpers (getSlug) ├── astro.config.mjs # Configuración de Astro ├── tailwind.config.mjs # Configuración de Tailwind ├── vercel.json # Headers de seguridad HTTP └── package.json ``` ## 命令 | 命令 | 操作 | | ----------------- | ------------------------------------------- | | `npm install` | 安装依赖 | | `npm run dev` | 启动 `localhost:4321` 本地服务器 | | `npm run build` | 构建生产版本到 `./dist/` | | `npm run preview` | 在本地预览构建产物 | ## 环境变量 为了使联系表单正常工作，请创建一个 `.env` 文件： ``` RESEND_API_KEY=re_tu_clave_api CONTACT_EMAIL=tu_email@ejemplo.com ``` ## 作者 由 Isabel Abad 开发 —— 专注于产品、数据和数字营销的 Frontend Developer。 ## 许可证 MIT

标签：Asto框架, SEO优化, Vercel部署, 个人作品集, 前端安全加固, 前端开发