Imported from tomygp97/new-portfolio (
AGENTS.md). Install upstream withnpx skills add tomygp97/new-portfolio. Copyright stays with the author.
AGENTS.md — Portfolio de Tomás Gutiérrez
Contexto para cualquier agente de IA (Cursor, Claude, etc.) que trabaje en este repo.
Qué es
Landing personal / portfolio. Solo frontend estático: sin backend, sin API routes, sin base de datos, sin variables de entorno. Desplegado en Netlify (build automático en cada push a main), dominio propio con DNS en Netlify.
Stack
- Next.js 14 (App Router) + React 18 + TypeScript
- Tailwind CSS 3
- Framer Motion (animaciones)
lucide-reactyreact-icons(íconos)@svgr/webpackconfigurado ennext.config.js(los.svgimportados se vuelven componentes)
Estructura
app/
layout.tsx # layout raíz, <head>, fuente Inter (next/font/google)
page.tsx # compone las secciones en orden
sections/ # Home, Technologies, Projects, WorkExperience(c), Contact
components/ # layout/ (Header, Footer), projects/ProjectCard, SectionTitle
constants/index.js # TODO el contenido: technologies, experiences, contactInfo, projects
types/project.ts # tipo Project
assets/projects/ # imágenes de proyectos (importadas desde constants)
public/ # íconos SVG, foto de perfil, background, CV en PDF
docs/profile.md # fuente de verdad de los datos personales (crear si no existe)
Comandos
npm run dev: servidor local en http://localhost:3000npm run build: tiene que pasar antes de dar cualquier tarea por terminadanpm run lint
Reglas
- El contenido vive en
app/constants/, nunca hardcodeado en componentes. Si encontrás texto de contenido en un componente, movelo a constants. - Los datos personales salen de
docs/profile.md. No inventes experiencia, fechas, métricas, tecnologías ni links. Si falta un dato, preguntá. - Mantener el sitio estático. No agregues API routes, server actions,
getServerSideProps, middleware ni dependencias de runtime de servidor sin consultar. - No agregues dependencias sin justificarlo. Preferí lo que ya está instalado.
- Imágenes: usar
next/image(nonext/legacy/image), comprimidas (WebP/AVIF, idealmente menos de 300 KB), conaltdescriptivo. - Responsive primero: verificar en 375px (móvil), 768px y 1280px+.
- Accesibilidad: HTML semántico, contraste AA, foco visible,
aria-labelen links que son solo íconos. - Cambios chicos y revisables: un tema por commit, con mensajes claros.
- Antes de cambios grandes (rediseño, reestructura, nuevas secciones), proponer un plan y esperar aprobación.
Flujo de Git
main= producción (Netlify despliega a tudominio.com). Nunca commitear ni pushear directo amain.development= integración. Netlify publica un preview endevelopment--<sitio>.netlify.app.- Para cada tarea: partir de
developmentactualizado → ramafeat/...,fix/...ochore/...→ commits chicos → merge (o PR) adevelopment. - Pasar
development→mainsolo cuando el usuario lo pida explícitamente, después de revisar el preview. - Antes de cambiar de rama, verificar
git statuslimpio. No usarpush --forceni reescribir historia de ramas compartidas.
Deuda conocida (a resolver en la revisión)
app/sections/WorkExperiencec.tsxtiene un typo en el nombre.app/constants/index.jses JS con JSX; conviene pasarlo a.tsxy tiparlo.constantsusanext/legacy/image.assets/projects/botto-background.pngpesa ~4 MB.- Metadatos pobres:
<title>"Tomi Portfolio" en<head>manual, sin description ni Open Graph (usar la APImetadatade Next). page.tsxes'use client'completo solo por la animación de entrada.- Hay dos favicons (
favicon.icoyfavicon2.ico) ypublic/background.jpgpesa ~520 KB.
