• Acerca del Proyecto
• Acerca del Autor
• Características
• Tecnologías Utilizadas
• Estructura del Proyecto
• Instalación
• Uso
• Componentes
• Personalización
• Accesibilidad
• Documentación
• Contribuir
• Licencia
• Contacto

Este es un portfolio profesional completamente funcional diseñado para mostrar el trabajo y las habilidades de Ernesto Lázaro Guerrero como diseñador UI/UX. El sitio presenta un diseño moderno con tema oscuro en tonos navy y acentos azules, optimizado para una experiencia de usuario excepcional.

• 🎨 Diseño moderno y elegante con tema oscuro profesional
• 📱 Totalmente responsive - se adapta perfectamente a todos los dispositivos
• ♿ Accesible - cumple con estándares WCAG 2.1 AA
• ⚡ Rendimiento optimizado - carga rápida y experiencia fluida
• 🧩 Arquitectura modular - código limpio y mantenible
• 📝 Documentación completa - más de 22,500 palabras de documentación profesional

Semblanza Profesional:

La tecnología ha sido el motor que ha guiado cada etapa del camino profesional de Ernesto. Con 13 años de experiencia como Ingeniero de Soporte en sitios físicos, ahora está en plena transición hacia una nueva carrera en el mundo del diseño UI/UX, su verdadera pasión.

Su trayectoria combina un sólido background técnico con una creciente expertise en diseño centrado en el usuario. Esta fusión única le permite crear interfaces no solo visualmente atractivas, sino también funcionales y accesibles.

Certificaciones:

• 🎨 Google UX Design - Certified
• 📚 Carrera Platzi UX/UI - Diploma
• ☁️ AWS Certified Cloud Practitioner - Certified

Filosofía de Diseño:

"Cada proyecto representa la suma de ese recorrido y el compromiso de seguir evolucionando. Mi pasión por la tecnología y mi vocación por crear soluciones útiles se encuentran en el diseño UX/UI."

1. 🏠 Hero Section

   • Presentación impactante con foto profesional
   • Call-to-action destacado
   • Diseño visual atractivo

2. 👤 Sobre Mí

   • Biografía profesional
   • Certificaciones destacadas
   • Imagen de perfil profesional

3. 💼 Portafolio

   • Galería de proyectos destacados
   • Imágenes de alta calidad
   • Descripciones detalladas de cada proyecto

4. 🛠️ Habilidades

   • Categorización de skills técnicos
   • Visualización clara de competencias
   • Herramientas y tecnologías

5. 📧 Contacto

   • Formulario funcional
   • Información de contacto
   • Enlaces a redes sociales

6. 🦶 Footer

   • Navegación adicional
   • Copyright y créditos
   • Enlaces legales

• ✅ React 18.3.1 con hooks modernos
• ✅ TypeScript para type safety
• ✅ Tailwind CSS v4 para estilos utility-first
• ✅ Vite 6.3 para desarrollo rápido
• ✅ Componentes reutilizables y modulares
• ✅ Sistema de diseño consistente
• ✅ Optimización de imágenes con fallbacks
• ✅ Navegación smooth scroll
• ✅ Animaciones sutiles y transiciones
• ✅ SEO optimizado

{
  "react": "18.3.1",
  "react-dom": "18.3.1",
  "vite": "6.3.5",
  "tailwindcss": "4.1.12"
}

• react-hook-form (7.55.0) - Manejo de formularios
• input-otp (1.4.2) - Inputs de código

• clsx (2.1.1) - Conditional classnames
• tailwind-merge (3.2.0) - Merge Tailwind classes
• date-fns (3.6.0) - Manejo de fechas
• sonner (2.0.3) - Toast notifications

• react-dnd (16.0.1) - Drag and drop
• react-slick (0.31.0) - Carousels
• recharts (2.15.2) - Gráficas y charts
• embla-carousel-react (8.6.0) - Carouseles modernos

• @vitejs/plugin-react (4.7.0)
• @tailwindcss/vite (4.1.12)
• postcss - Procesamiento de CSS

portfolio-ernesto/
│
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── AboutSection.tsx       # Sección "Sobre Mí"
│   │   │   ├── ContactSection.tsx     # Formulario de contacto
│   │   │   ├── Footer.tsx             # Pie de página
│   │   │   ├── Header.tsx             # Encabezado y navegación
│   │   │   ├── HeroSection.tsx        # Sección principal
│   │   │   ├── PortfolioSection.tsx   # Galería de proyectos
│   │   │   ├── SkillsSection.tsx      # Habilidades técnicas
│   │   │   │
│   │   │   ├── figma/
│   │   │   │   └── ImageWithFallback.tsx  # Componente de imágenes
│   │   │   │
│   │   │   └── ui/                    # Componentes UI reutilizables
│   │   │       ├── accordion.tsx
│   │   │       ├── alert.tsx
│   │   │       ├── button.tsx
│   │   │       ├── card.tsx
│   │   │       ├── dialog.tsx
│   │   │       ├── input.tsx
│   │   │       └── ... (40+ componentes)
│   │   │
│   │   └── App.tsx                    # Componente principal
│   │
│   └── styles/
│       ├── index.css                  # Estilos globales
│       ├── tailwind.css               # Configuración Tailwind
│       ├── theme.css                  # Variables de tema
│       └── fonts.css                  # Fuentes personalizadas
│
├── guidelines/
│   └── Guidelines.md                  # Guías de desarrollo
│
├── Documentación/
│   ├── ATTRIBUTIONS.md               # Créditos y atribuciones
│   ├── COMPONENT_LIBRARY.md          # Librería de componentes
│   ├── DELIVERABLES.md               # Entregables del proyecto
│   ├── DESIGN_SYSTEM.md              # Sistema de diseño
│   ├── DEVELOPER_GUIDE.md            # Guía para desarrolladores
│   ├── DOCUMENTATION_INDEX.md        # Índice de documentación
│   ├── EXECUTIVE_SUMMARY.md          # Resumen ejecutivo
│   ├── STYLE_GUIDE.md                # Guía de estilos
│   └── TECH_LEADERS_PRESENTATION.md  # Presentación técnica
│
├── package.json                       # Dependencias del proyecto
├── vite.config.ts                     # Configuración de Vite
├── postcss.config.mjs                 # Configuración de PostCSS
└── README.md                          # Este archivo

Asegúrate de tener instalado:

• Node.js (v18 o superior)
• npm (v9 o superior) o pnpm (recomendado)

1. Clona el repositorio

git clone https://github.com/ErnestoLazaro
cd portfolio-ernesto

2. Instala las dependencias

npm install
# o con pnpm (recomendado)
pnpm install

3. Inicia el servidor de desarrollo

npm run dev
# o
pnpm dev

4. Abre tu navegador

http://localhost:5173

# Desarrollo - Inicia el servidor local
npm run dev

# Build - Compila para producción
npm run build

# Preview - Previsualiza el build de producción
npm run preview

Si necesitas configurar variables de entorno, crea un archivo .env en la raíz:

VITE_APP_NAME=Portfolio Ernesto
VITE_CONTACT_EMAIL=ernesto@example.com

Navegación principal con scroll suave y diseño sticky.

import { Header } from "@/app/components/Header";

Sección hero con presentación impactante.

import { HeroSection } from "@/app/components/HeroSection";

Información personal y certificaciones.

import { AboutSection } from "@/app/components/AboutSection";

Galería de proyectos destacados.

import { PortfolioSection } from "@/app/components/PortfolioSection";

Habilidades técnicas categorizadas.

import { SkillsSection } from "@/app/components/SkillsSection";

Formulario de contacto funcional.

import { ContactSection } from "@/app/components/ContactSection";

Pie de página con información adicional.

import { Footer } from "@/app/components/Footer";

El tema utiliza CSS variables definidas en /src/styles/theme.css:

:root {
  --portfolio-navy-dark: #0a1929;
  --portfolio-navy-medium: #132f4c;
  --portfolio-navy-light: #1e4976;
  --portfolio-blue-primary: #3399ff;
  --portfolio-blue-secondary: #66b2ff;
  --portfolio-text-primary: #ffffff;
  --portfolio-text-secondary: #b2bac2;
  --portfolio-text-muted: #8492a6;
}

Para cambiar el esquema de colores, edita las variables en theme.css y todos los componentes se actualizarán automáticamente.

1. Crea un nuevo componente en /src/app/components/
2. Importa y añade en App.tsx
3. Sigue la estructura de los componentes existentes

Este portfolio cumple con los estándares WCAG 2.1 nivel AA establecidos por el W3C:

Los 4 Principios Fundamentales:

1. PERCEPTIBLE - La información es presentable a los usuarios de formas que puedan percibir
2. OPERABLE - Los componentes de interfaz y navegación son operables
3. COMPRENSIBLE - La información y operación de interfaz es comprensible
4. ROBUSTO - El contenido es interpretable por diversos agentes de usuario

• ✅ Contraste de colores: Ratio mínimo 4.5:1 (muchos elementos cumplen AAA con 7:1+)
• ✅ Navegación por teclado completa: Todo accesible con Tab, Enter, Espacio
• ✅ ARIA labels descriptivos: En elementos interactivos y landmarks
• ✅ Textos alternativos: Todas las imágenes con alt descriptivos
• ✅ HTML5 semántico: Uso correcto de header, nav, main, section, footer
• ✅ Estados focus visibles: Indicadores claros para navegación por teclado
• ✅ Responsive accesible: Áreas de toque mínimas 44x44px
• ✅ Lectores de pantalla: Compatible con NVDA, JAWS, VoiceOver, TalkBack
• ✅ Sin trampas de teclado: Navegación libre por toda la aplicación
• ✅ Jerarquía de encabezados: h1 > h2 > h3 correctamente estructurados

Para información completa sobre accesibilidad, incluyendo:

• Guía detallada de cada principio WCAG
• Características por componente
• Pruebas de accesibilidad realizadas
• Herramientas de verificación
• Compatibilidad con tecnologías asistivas

Consulta: ACCESSIBILITY.md

• W3C Web Accessibility Initiative
• Introducción a la Accesibilidad Web (Español)
• WCAG 2.1 Guidelines

Este proyecto incluye documentación completa (+22,500 palabras) para diferentes audiencias:

Las contribuciones son bienvenidas. Si deseas contribuir:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

• Sigue el estilo de código existente
• Documenta nuevas funcionalidades
• Asegura que el código sea accesible
• Prueba en diferentes dispositivos

Este proyecto es de código abierto y está disponible bajo la licencia MIT.

Ernesto Lázaro Guerrero

• 🌐 Página Web Profesional: tu-portfolio.com
• 📧 Email: ernestolazaro84@gmail.com
• 💼 LinkedIn: linkedin.com/in/ernesto-lazaro
• 🐙 GitHub: github.com/ernesto
• 🎨 Behance: behance.net/ernesto

• React Team por la increíble biblioteca
• Tailwind CSS por el framework de utilidades
• Radix UI por los componentes accesibles
• Unsplash por las imágenes de alta calidad
• La comunidad de código abierto