Portfolio | Enrique Emmanuel Jaime

Portfolio profesional orientado a oportunidades en análisis de datos, Business Intelligence, desarrollo de software, ingeniería de datos, automatización e inteligencia artificial.

Demo

• Portfolio: portfolio-emmanuel-jaime.vercel.app
• GitHub: github.com/emmanuel-jaime
• LinkedIn: Enrique Emmanuel Jaime
• Correo: emmanuel.jaime.dev@gmail.com

Características

• Diseño responsive y accesible con tema claro y oscuro.
• Inicio profesional con disponibilidad laboral, enlaces y llamada a la acción.
• Cinco proyectos administrados desde un único archivo de datos.
• Páginas dinámicas con casos de estudio completos.
• Integración opcional y resiliente con la API pública de GitHub.
• Formulario validado con endpoint serverless, protección básica anti-spam y respaldo por correo.
• Metadata, Open Graph, Twitter Cards, canonical, sitemap, robots, manifest y JSON-LD.
• Pruebas unitarias, integración, E2E y workflow de CI.
• Preparado para Vercel sin credenciales dentro del repositorio.

Tecnologías

Next.js 16, React 19, TypeScript, Tailwind CSS 4, ESLint, Prettier, Vitest, Testing Library y Playwright.

Estructura

app/                    Rutas, metadata y endpoint serverless
components/             Layout, secciones, proyectos y UI
data/                   Contenido editable del portfolio
lib/                    GitHub, validaciones y utilidades
public/                 Recursos locales, CV e imagen social
tests/                  Pruebas unitarias y end-to-end
types/                  Contratos TypeScript
.github/workflows/      Integración continua

Instalación

Requisitos: Node.js 24 LTS o compatible y npm.

git clone https://github.com/emmanuel-jaime/portfolio-emmanuel-jaime.git
cd portfolio-emmanuel-jaime
npm install
cp .env.example .env.local
npm run dev

Abrir http://localhost:3000.

Variables de entorno

Variable	Obligatoria	Uso
NEXT_PUBLIC_SITE_URL	Producción	Canonical, sitemap, JSON-LD y enlaces para compartir
RESEND_API_KEY	No	Envío serverless mediante Resend
CONTACT_TO_EMAIL	Si se usa Resend	Correo que recibe los mensajes
CONTACT_FROM_EMAIL	Si se usa Resend	Remitente autorizado en Resend
GITHUB_TOKEN	No	Aumenta el límite de la API pública de GitHub

Sin Resend, el formulario abre un mailto: como respaldo. Nunca publiques .env o .env.local.

Scripts

npm run dev        # desarrollo
npm run typecheck  # TypeScript
npm run lint       # ESLint
npm test           # pruebas unitarias
npm run test:e2e   # prueba E2E
npm run build      # build de producción
npm start          # ejecutar el build

Agregar o editar proyectos

1. Abrí data/projects.ts.
2. Copiá un objeto existente y asignale un slug único.
3. Completá problema, solución, tecnologías, arquitectura, impacto y aprendizajes sin inventar resultados.
4. Usá featured: true para destacarlo u ocultalo del inicio con featured: false y ajustando el listado si fuese necesario.
5. Si el repositorio es público, agregá su nombre a featuredRepositories en data/site.ts.
6. Guardá las capturas en public/images/projects/ y conectalas al componente ProjectVisual cuando estén listas.

La ruta /proyectos/[slug] se genera automáticamente para cada registro.

Integración con GitHub

La función lib/github.ts consulta solo los repositorios permitidos en data/site.ts. Usa caché de una hora y vuelve a contenido local si GitHub no responde. GITHUB_TOKEN es opcional y solo debe configurarse como variable del servidor.

Para crear el repositorio cuando GitHub CLI esté instalado y autenticado:

git init
git add .
git commit -m "feat: initial portfolio setup"
git branch -M main
gh repo create portfolio-emmanuel-jaime --public --source=. --remote=origin --push

Antes de hacer push, revisá git status, git diff --cached y confirmá que no existan secretos.

Formulario de contacto

1. Creá una cuenta y un dominio verificado en Resend.
2. Copiá .env.example a .env.local.
3. Completá RESEND_API_KEY, CONTACT_TO_EMAIL y CONTACT_FROM_EMAIL.
4. Repetí las mismas variables en Vercel.

El endpoint limita tamaño, valida campos, sanitiza HTML, usa un honeypot y aplica un límite básico en memoria. Para tráfico alto conviene reemplazar el límite por Upstash u otro almacén distribuido.

Despliegue en Vercel

1. Subí el repositorio a GitHub después de revisar los archivos incluidos.
2. En Vercel elegí Add New → Project e importá el repositorio.
3. El framework será detectado como Next.js; mantené los comandos predeterminados.
4. Configurá las variables de entorno del apartado anterior.
5. Desplegá y verificá HTTPS, rutas de proyectos, formulario, /sitemap.xml y /robots.txt.
6. Agregá el dominio personalizado en Settings → Domains.
7. Cambiá NEXT_PUBLIC_SITE_URL por la URL definitiva y volvé a desplegar.
8. Validá la imagen social y la canonical con la URL pública.

Publicar el portfolio en LinkedIn

1. Agregá la URL en la sección Destacado del perfil.
2. Incorporala en Información de contacto.
3. Vinculá los casos individuales desde la sección Proyectos.
4. Sumá el enlace en la descripción del perfil.
5. Publicá un post breve explicando qué construiste, qué problemas resuelve y qué estás buscando.

El sitio incluye botones oficiales de compartir; no realiza scraping ni almacena sesiones de LinkedIn.

Personalización pendiente

• Agregar capturas reales de los proyectos.
• Conectar demos y repositorios que todavía no son públicos.
• Reemplazar el favicon por la identidad definitiva si se desea.
• Incorporar una foto solo si aporta al relato profesional; el diseño funciona sin ella.

Roadmap

• Versión en inglés mediante rutas localizadas.
• Filtros de proyectos por categoría.
• Nuevos casos con resultados cuantitativos verificables.
• Analíticas privadas y respetuosas de la privacidad.

Licencia

MIT © 2026 Enrique Emmanuel Jaime.