🚀 Portfolio Personal

Un portfolio personal moderno y profesional desarrollado con Next.js 15, TypeScript y Tailwind CSS.

🎯 Objetivo: Portfolio personal moderno y responsive con modo oscuro/claro

🚀 Características

🎨 Diseño Moderno
Interfaz limpia y minimalista inspirada en diseños profesionales
🌙 Modo Oscuro/Claro
Cambio automático basado en preferencias del sistema
📱 Totalmente Responsive
Optimizado para todos los dispositivos
✨ Animaciones Suaves
Transiciones y animaciones con Framer Motion
🔍 SEO Optimizado
Metadatos completos para mejor posicionamiento
♿ Accesibilidad
Diseñado siguiendo las mejores prácticas de accesibilidad

🛠️ Tecnologías Utilizadas

Next.js 15
TypeScript
Tailwind CSS
Framer Motion
Lucide React
next-themes

📦 Instalación

1. Instalar dependencias

npm install

2. Ejecutar en desarrollo

npm run dev

3. Construir para producción

npm run build

4. Iniciar en producción

npm start

🎨 Personalización

Cambiar Información Personal

Hero Section - src/components/hero.tsx
• Actualizar nombre y descripción
• Cambiar enlaces de redes sociales
About Section - src/components/about.tsx
• Modificar biografía
• Ajustar habilidades y niveles
Experience Section - src/components/experience.tsx
• Actualizar experiencia laboral
• Modificar formación académica
Projects Section - src/components/projects.tsx
• Agregar/editar proyectos
• Actualizar enlaces de GitHub
Contact Section - src/components/contact.tsx
• Cambiar información de contacto
• Configurar formulario

Cambiar Colores

Los colores se pueden personalizar editando las variables CSS en src/app/globals.css:

:root {
  --theme-primary: #3b82f6;
  --theme-secondary: #1f2937;
  --theme-muted: #6b7280;
  --theme-card: #ffffff;
  --theme-medium: #e5e7eb;
}

📁 Estructura del Proyecto

me/
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── components/
│       ├── about.tsx
│       ├── contact.tsx
│       ├── documentation.tsx
│       ├── experience.tsx
│       ├── hero.tsx
│       ├── navigation.tsx
│       ├── projects.tsx
│       ├── theme-provider.tsx
│       └── theme-toggle.tsx
└── public/
    └── documentacion/
        ├── README.md
        ├── INSTALACION.md
        └── cloudflare_workers.md

🚀 Despliegue

Vercel Recomendado

Pasos:
  1. 1. Conecta tu repositorio a Vercel
  2. 2. Configura las variables de entorno si es necesario
  3. 3. ¡Listo! Se desplegará automáticamente

Netlify

Pasos:
  1. 1. Sube tu código a GitHub
  2. 2. Conecta el repositorio a Netlify
  3. 3. Configura el comando de build: npm run build
  4. 4. Configura el directorio de salida: .next

Cloudflare Pages

Consulta la documentación específica:
Ver Documentación Cloudflare

🔧 Scripts Disponibles

npm run dev
Ejecutar en modo desarrollo
npm run build
Construir para producción
npm run start
Iniciar servidor de producción
npm run lint
Ejecutar linter
npm run type-check
Verificar tipos de TypeScript

📝 Licencia

Licencia MIT
Este proyecto está bajo la Licencia MIT. Puedes usarlo libremente para tu portfolio personal.

🤝 Contribuciones

¡Contribuciones bienvenidas!
Por favor, abre un issue o un pull request para contribuir al proyecto.
📅 Fecha de creación: 22 de Julio, 2025
👨‍💻 Autor: Andrés Costas Moreno
📄 Versión: 1.0
← Volver al Portfolio