| name | portfolio-content |
| description | Añade/modifica contenido del portfolio raulfdez.dev: proyectos (PROJECTS[], TAGS{}), experiencia laboral (EXPERIENCE[]), tags tecnológicos con iconos SVG y enlaces sociales. Cubre ubicaciones de datos, formato de entradas y colores de tags. |
Añade/modifica proyectos, experiencia, tags y enlaces del portfolio.
Ubicaciones de contenido
| Contenido | Archivo | Variable |
|---|
| Proyectos | src/components/Projects.astro | PROJECTS[] |
| Tags tech | src/components/Projects.astro | TAGS{} |
| Experiencia | src/components/Experience.astro | EXPERIENCE[] |
| Navegación | src/components/Header.astro | navItems[] |
| Social links | src/components/Hero.astro | JSX directo |
| Footer | src/components/Footer.astro | JSX directo |
| Traducciones | src/i18n/ui.ts | ui.es + ui.en |
| Imágenes | public/companies/ o public/projects/ | .webp |
Añadir proyecto
- Imagen
.webp → public/projects/
- Keys en
ui.ts (es+en): projects.nombre.title, projects.nombre.description
- Entrada en
PROJECTS:
{
title: t("projects.nombre.title"),
description: t("projects.nombre.description"),
link: "https://...",
image: "/projects/nombre.webp",
tags: [TAGS.PHP, TAGS.SYMFONY],
}
- Si se usan tags nuevos, añadir a
TAGS
pnpm build
Imágenes en proyectos: Projects.astro renderiza las imágenes con <Image> de astro:assets (no <img>). El componente espera width, height, alt, loading="lazy". No requiere pasarlos manualmente en PROJECTS[], se pasan directamente en el template.
Añadir experiencia
- Logo
.webp → public/companies/
- Keys en
ui.ts (es+en): experience.empresa.date, .title, .company, .description
- Entrada en
EXPERIENCE:
{
date: t('experience.empresa.date'),
img: "/companies/empresa.webp",
title: t('experience.empresa.title'),
company: t('experience.empresa.company'),
description: t('experience.empresa.description'),
}
pnpm build
Añadir tag tecnológico
- Icono SVG →
src/components/icons/Nombre.astro (recibe class prop)
- Importar en Projects.astro
- Añadir a
TAGS:
NOMBRE: { name: "Tech", class: "bg-[#HEX] text-white", icon: Icono }
Plantilla de icono SVG
---
export interface Props { class?: string }
const { class: className } = Astro.props
---
<svg class={className} viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<!-- paths -->
</svg>
Colores de tags existentes
| Tag | bg |
|---|
| PHP | #539FD4 |
| Symfony/Laravel | #858585 |
| Vue.js | #183D2C |
| jQuery | #081F33 |
| Next.js | black |
| Tailwind CSS | #003159 |
