Hoja de Vida - Javier Duarte Báez 📄

Descripción

Este proyecto es una hoja de vida interactiva y responsiva desarrollada con HTML5 y CSS3. Presenta un diseño moderno y profesional que se adapta a diferentes dispositivos.

🎨 Características

• Diseño responsivo que se adapta a móviles, tablets y desktop
• Paleta de colores moderna y profesional
• Animaciones suaves y transiciones
• Estructura semántica HTML5
• Optimizado para accesibilidad
• Interfaz intuitiva y fácil de navegar

🛠️ Tecnologías Utilizadas

• HTML5
• CSS3
• Fuente Raleway (local)
• Diseño responsivo con CSS Grid y Flexbox
• Animaciones CSS

📁 Estructura del Proyecto

hoja-de-vida/
│
├── index.html          # Estructura principal del documento
├── styles.css          # Estilos y animaciones
├── img/               # Carpeta de imágenes
│   └── profile-photo.jpeg
├── fonts/             # Carpeta de fuentes
│   ├── Raleway-Regular.woff
│   └── Raleway-Regular.woff2
└── README.md          # Este archivo

🎯 Secciones Principales

1. Encabezado

   • Nombre y título profesional
   • Foto de perfil con efecto hover

2. Información de Contacto

   • Email
   • Dirección
   • Teléfono
   • Fecha de nacimiento
   • Nacionalidad

3. Contenido Principal

   • Objetivo profesional
   • Experiencia laboral
   • Educación
   • Habilidades
   • Idiomas
   • Logros
   • Reconocimientos

4. Footer

   • Enlaces a redes sociales
   • Información de contacto
   • Copyright

🎨 Paleta de Colores

--color-principal: #2c3e50;      /* Azul oscuro profesional */
--color-secundario: #34495e;     /* Azul grisáceo */
--color-acento: #e74c3c;         /* Rojo coral para destacados */
--color-claro: #ecf0f1;          /* Gris muy claro */
--color-oscuro: #2c3e50;         /* Azul oscuro para texto */
--color-fondo: #f5f6fa;          /* Fondo suave */
--color-borde: #bdc3c7;          /* Gris para bordes */
--color-hover: #c0392b;          /* Rojo más oscuro para hover */

📱 Responsividad

• Móvil: < 767px
• Tablet: 768px - 1023px
• Desktop: > 1024px

🚀 Características Técnicas

• Uso de CSS Grid para el layout principal
• Flexbox para alineación de elementos
• Variables CSS para consistencia
• Media queries para responsividad
• Animaciones y transiciones suaves
• Sistema de sombras para profundidad

📝 Mantenimiento

Para actualizar la información:

1. Modificar el contenido en index.html
2. Ajustar estilos en styles.css si es necesario
3. Actualizar la foto de perfil en la carpeta img/

🔧 Requisitos

• Navegador web moderno
• Soporte para CSS Grid y Flexbox
• Soporte para fuentes WOFF/WOFF2

👤 Autor

Javier Duarte Báez

• Email: javier.d.baez@gmail.com
• GitHub: javierduarte

📅 Última Actualización

Mayo 2025