Portfolio profesional y moderno desarrollado con Next.js, TypeScript y Tailwind CSS. Showcaseando mi experiencia como Full Stack Developer y Game Scripter.
- Diseño Responsive - Optimizado para todos los dispositivos
- Modo Oscuro/Claro - Cambio de tema suave con persistencia
- Animaciones Fluidas - Transiciones elegantes con Framer Motion
- Internacionalización - Soporte para Español e Inglés
- Performance Optimizada - Carga rápida y SEO-friendly
- 🏠 Hero Section - Presentación personal con call-to-action
- 👨💻 Sobre Mí - Descripción profesional y habilidades
- 💼 Experiencia - Timeline interactivo con mi trayectoria profesional
- 🚀 Proyectos - Showcase de mis trabajos con filtros por categoría
- 📞 Contacto - Formulario funcional para comunicación
- 💎 Ruby Gems - Gemas personalizadas para Rails
- 🌐 Aplicaciones Web - Plataformas full-stack modernas
- 🎮 Minecraft Plugins - Sistemas complejos para servidores
- ⚛️ Apps React/Next.js - Interfaces de usuario dinámicas
Next.js 14.0.4 # Framework React con SSR/SSG
TypeScript 5.3.3 # Tipado estático
Tailwind CSS 3.4.1 # Framework CSS utility-first
Framer Motion 11.0.0 # Animaciones y transiciones
Lucide React 0.344.0 # Iconos modernos y optimizadosESLint 8.56.0 # Linting de código
PostCSS 8.4.35 # Procesamiento CSS
Autoprefixer 10.4.18 # Compatibilidad CSS
React Intersection Observer # Animaciones on-scroll- Node.js 18+
- npm o yarn o pnpm
# Clonar el repositorio
git clone https://github.com/PabloB07/portfolio.git
# Navegar al directorio
cd portfolio
# Instalar dependencias
npm install
# Configurar tu CV (opcional)
# Coloca tu archivo CV en: public/cv/PabloB-CV-es.pdf
# O actualiza la ruta en: src/app/api/download-cv/route.ts
# Iniciar servidor de desarrollo
npm run devnpm run dev # Servidor de desarrollo (http://localhost:3000)
npm run build # Build de producción optimizado
npm run start # Servidor de producción
npm run lint # Revisar código con ESLintportfolio/
├── 📂 src/
│ ├── 📂 app/ # App Router de Next.js
│ │ ├── layout.tsx # Layout principal
│ │ ├── page.tsx # Página de inicio
│ │ └── api/ # API routes
│ ├── 📂 components/ # Componentes React
│ │ ├── 📂 sections/ # Secciones del portfolio
│ │ │ ├── Hero.tsx # Sección hero
│ │ │ ├── About.tsx # Sobre mí
│ │ │ ├── Experience.tsx # Experiencia profesional
│ │ │ ├── Projects.tsx # Proyectos destacados
│ │ │ └── Contact.tsx # Formulario de contacto
│ │ └── 📂 common/ # Componentes reutilizables
│ ├── 📂 contexts/ # React Context (Theme, Language, Auth)
│ ├── 📂 hooks/ # Custom hooks
│ ├── 📂 data/ # Datos estáticos del portfolio
│ ├── 📂 types/ # Definiciones TypeScript
│ ├── 📂 utils/ # Utilidades y traducciones
│ └── 📂 lib/ # Configuraciones y librerías
├── 📂 public/ # Archivos estáticos
│ ├── 📂 cv/ # Archivos de CV
│ │ └── PabloB-CV-es.pdf # CV en formato PDF
│ ├── favicon.svg # Ícono del sitio
│ └── me.png # Foto de perfil
└── 📋 README.md # Este archivo
El portfolio incluye funcionalidad para descargar tu CV en PDF:
- Ubicación del archivo: Coloca tu CV en
public/cv/PabloB-CV-es.pdf - API Route: La descarga se maneja en
src/app/api/download-cv/route.ts - Botón de descarga: Disponible en la sección Hero con ícono y animaciones
# Para usar tu propio CV:
1. Reemplaza el archivo en: public/cv/PabloB-CV-es.pdf
2. O cambia la ruta en: src/app/api/download-cv/route.ts
3. Actualiza el nombre de descarga si es necesario- ✅ Descarga directa - Botón con ícono de descarga
- ✅ API segura - Endpoint protegido para servir el archivo
- ✅ Nombre personalizado - El archivo se descarga con nombre legible
- ✅ Animaciones - Hover effects y transiciones suaves
- ✅ Responsive - Funciona en todos los dispositivos
- Primario: Gradientes azul-púrpura (
primary-500,secondary-500) - Modo Claro: Fondos blancos y grises claros
- Modo Oscuro: Fondos oscuros con acentos sutiles
- Font System: Inter (sistema de fuentes moderno)
- Jerarquía Clara: H1-H6 con tamaños responsive
- Legibilidad: Alto contraste y espaciado optimizado
- Entrada Suave: Componentes aparecen con fade-in
- Hover Effects: Micro-interacciones en botones y cards
- Scroll Animations: Elementos aparecen al hacer scroll
- Loading States: Transiciones fluidas entre estados
- ⭐ Destacados - Mejores trabajos
- 💎 Ruby Gems - Librerías Ruby personalizadas
- 🌐 Web Apps - Aplicaciones full-stack
- 🎮 Minecraft - Plugins para servidores
- 🛤️ Rails - Proyectos Ruby on Rails
- ⚛️ Next.js - Apps React modernas
Cada proyecto incluye:
- 📝 Descripción completa con contexto técnico
- 🏷️ Tecnologías utilizadas con badges visuales
- 🔗 Enlaces a GitHub y demos en vivo
- 🚦 Estado (Completado/En desarrollo/Planificado)
- 🎯 Categorización para fácil filtrado
# Conectar con Vercel
npx vercel
# O usar GitHub integration
# Push to main branch → Auto deployment# Build command
npm run build
# Publish directory
out/# Habilitar export estático en next.config.js
npm run build- ✅ Static Generation - Páginas pre-renderizadas
- ✅ Image Optimization - Next.js Image component
- ✅ Code Splitting - Carga lazy de componentes
- ✅ Meta Tags - SEO optimizado
- ✅ Lighthouse Score - 95+ en todas las categorías
# Core Web Vitals
LCP: < 2.5s # Largest Contentful Paint
FID: < 100ms # First Input Delay
CLS: < 0.1 # Cumulative Layout ShiftSi encuentras algún bug o tienes sugerencias:
- Fork el proyecto
- Crea una feature branch (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la branch (
git push origin feature/AmazingFeature) - Abre un Pull Request
Este proyecto está bajo la Licencia MIT. Ver LICENSE para más información.
Pablo Blanco Navarro
- 🌐 Portfolio: blancocl.vercel.app
- 💼 LinkedIn: linkedin.com/in/pabloblanco
- 🐙 GitHub: github.com/PabloB07
- 📧 Email: [email protected]
- Next.js Team - Por el increíble framework
- Tailwind CSS - Por el sistema de diseño utility-first
- Framer Motion - Por las animaciones fluidas
- Lucide - Por los iconos hermosos y optimizados
- Vercel - Por el hosting gratuito y CI/CD
⭐ ¡Dale una estrella si te gusta este proyecto! ⭐
Desarrollado con ❤️ por Pablo Blanco Navarro