# RooBal - Sitio Web Personal

Sitio web estático de 3 páginas creado con HTML5, CSS3 y JavaScript vanilla.

## 📋 Descripción

Portafolio personal que muestra proyectos, unidades académicas y experiencia profesional. Diseñado con un enfoque moderno, responsivo y con código limpio y semántico.

## 🎨 Características

- ✅ Diseño completamente responsivo
- ✅ Arquitectura modular con componentes reutilizables (Header y Footer)
- ✅ Paleta de colores sofisticada basada en tonos violeta/púrpura
- ✅ Animaciones y transiciones suaves
- ✅ Imágenes reales de producción (Unsplash)
- ✅ JavaScript vanilla sin dependencias
- ✅ Código semántico y accesible
- ✅ Compatible con todos los navegadores modernos

## 📁 Estructura del Proyecto

```
/
├── index.html              # Página principal
├── proyectos.html          # Página de proyectos
├── unidades.html           # Página de unidades académicas
├── components/
│   ├── header.html         # Componente Header reutilizable
│   └── footer.html         # Componente Footer reutilizable
├── css/
│   └── styles.css          # Estilos principales
├── js/
│   ├── components-loader.js # Cargador de componentes
│   ├── carousel.js         # Funcionalidad del carrusel
│   └── filter.js           # Sistema de filtros
├── cv/
│   ├── index.html          # Página de CV
│   └── styles/
│       └── cv.css          # Estilos del CV
├── divi-projects/
│   ├── index.html          # Página de proyectos Divi
│   └── styles/
│       └── divi-projects.css # Estilos proyectos Divi
└── README.md               # Este archivo
```

## 🚀 Instalación y Uso

### Opción 1: Abrir directamente

1. Descarga o clona el repositorio
2. Abre `index.html` en tu navegador

### Opción 2: Con servidor local

```bash
# Con Python 3
python -m http.server 8000

# Con Node.js (http-server)
npx http-server

# Con PHP
php -S localhost:8000
```

Luego visita `http://localhost:8000` en tu navegador.

## 🎯 Páginas Incluidas

### 1. Inicio (index.html)
- Hero section con carrusel
- Sección de equipo
- Información personal
- Fortalezas
- Proyectos destacados

### 2. Proyectos (proyectos.html)
- Sistema de filtrado por categorías
- Showcase de proyectos
- Organización por áreas
- Call to action

### 3. Unidades (unidades.html)
- Cursos por semestre
- Recursos generales académicos

### 4. Mi CV (cv/index.html)
- Curriculum vitae completo
- Función de descarga/impresión
- Diseño profesional

### 5. Proyectos Divi (divi-projects/index.html)
- Galería de proyectos Divi
- Diseño visual atractivo
- Categorización por tipo de proyecto

## 🎨 Paleta de Colores

```css
--color-primary: #7B68EE     /* Violeta principal */
--color-primary-dark: #5D4EC4 /* Violeta oscuro */
--color-secondary: #A78BFA    /* Púrpura claro */
--color-accent: #C4B5FD       /* Lavanda */
--color-dark: #1a1a2e         /* Negro azulado */
--color-pink: #e5d5d8         /* Rosa claro */
--color-rose: #d8b4b8         /* Rosa medio */
```

## 💻 Tecnologías Utilizadas

- **HTML5**: Estructura semántica
- **CSS3**: Estilos modernos con variables CSS, Grid y Flexbox
- **JavaScript (Vanilla)**: Sin frameworks, código puro
- **Fetch API**: Carga dinámica de componentes
- **Google Fonts**: Tipografía Poppins
- **Unsplash**: Imágenes de alta calidad

## ✨ Funcionalidades JavaScript

### Cargador de Componentes (components-loader.js)
- Carga dinámica de Header y Footer
- Detección de página activa
- Menú móvil responsive
- Efecto scroll en header

### Carrusel (carousel.js)
- Navegación entre slides
- Auto-play con pausa en hover
- Indicadores interactivos
- Animaciones suaves

### Filtro de Proyectos (filter.js)
- Filtrado dinámico por categoría
- Animaciones de transición
- Estado activo de botones

## 📱 Responsive Design

El sitio es completamente responsivo con breakpoints en:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

## 🔧 Personalización

### Cambiar colores

Edita las variables CSS en `css/styles.css`:

```css
:root {
    --color-primary: #TU_COLOR;
    /* ... más variables */
}
```

### Modificar contenido

- **Header/Footer**: Edita `components/header.html` y `components/footer.html`
- **Páginas**: Modifica directamente los archivos `.html`
- **Estilos**: Ajusta `css/styles.css` o los archivos CSS específicos

### Agregar nuevas imágenes

Reemplaza las URLs de Unsplash con tus propias imágenes:

```html
<img src="tu-imagen.jpg" alt="Descripción">
```

## 🌐 Compatibilidad

- ✅ Chrome/Edge (últimas versiones)
- ✅ Firefox (últimas versiones)
- ✅ Safari (últimas versiones)
- ✅ Opera (últimas versiones)

## 📄 Licencia

Este proyecto es de código abierto y está disponible para uso personal y educativo.

## 👤 Autor

**RooBal**
- Email: contacto@roobal.com
- Ubicación: Lima, Perú

---

Desarrollado con ❤️ y código limpio
