# Portafolio personal — "Creo en las soluciones"

Portafolio construido con **React + Vite + Tailwind CSS v4 + Framer Motion**.
Incluye 3 proyectos reales (AlPunto, EvalPingüino, Sistema de Gestión Clínica)
con caso de estudio, filtro por categoría, animaciones al hacer scroll y modo
oscuro por defecto. Todo el texto y los enlaces personales están centralizados
en `src/data/` para que no tengas que tocar componentes.

## 1. Instalar Node.js (si no lo tienes)

1. Ve a [nodejs.org](https://nodejs.org/) y descarga la versión **LTS**.
2. Instálalo (siguiente, siguiente, finalizar).
3. Verifica en una terminal:
   ```bash
   node -v
   npm -v
   ```

## 2. Abrir el proyecto en Visual Studio Code

1. Abre VS Code.
2. `Archivo → Abrir carpeta...` y selecciona la carpeta `portfolio/`.
3. Abre una terminal integrada: `Terminal → Nueva terminal`.

## 3. Instalar dependencias

```bash
npm install
```

## 4. Ejecutar en desarrollo

```bash
npm run dev
```

Abre en el navegador la URL que aparece (normalmente `http://localhost:5173`).
Los cambios que hagas en el código se reflejan al instante (Hot Reload).

## 5. Generar la versión de producción

```bash
npm run build
```

Esto crea la carpeta `dist/` lista para subir a cualquier hosting estático.
Para previsualizar esa build localmente:

```bash
npm run preview
```

## 6. Subir el proyecto a GitHub

```bash
git init
git add .
git commit -m "Portafolio inicial"
git branch -M main
git remote add origin https://github.com/TU_USUARIO/TU_REPO.git
git push -u origin main
```

## 7. Desplegar (recomendado: Vercel o Netlify)

**Vercel**
1. Crea cuenta en [vercel.com](https://vercel.com) e importa el repo de GitHub.
2. Framework preset: `Vite`. Build command: `npm run build`. Output: `dist`.
3. Deploy.

**Netlify**
1. Crea cuenta en [netlify.com](https://netlify.com) → "Add new site" → "Import from Git".
2. Build command: `npm run build`. Publish directory: `dist`.

---

## Personalización — dónde cambiar cada cosa

Todo tu contenido personal vive en **dos archivos**, no necesitas tocar los
componentes de `src/sections/` ni `src/components/`:

| Qué quieres cambiar | Archivo |
|---|---|
| Nombre, iniciales, edad, frases, foto, stats, redes sociales, links (email, GitHub, LinkedIn, WhatsApp, Instagram, CV), navegación, habilidades, proceso de trabajo, servicios | [`src/data/profile.js`](src/data/profile.js) |
| Proyectos (nombre, descripción, problema/idea/solución/aporte/resultado/aprendizaje, tecnologías, categorías, imágenes, links de demo y código) | [`src/data/projects.js`](src/data/projects.js) |

Busca cualquier texto entre corchetes, por ejemplo `[MI NOMBRE]`,
`[MI_EMAIL]`, `[LINK_GITHUB]`, `[IMAGEN_PROYECTO_ALPUNTO]`, y reemplázalo por
tu información real.

### Fotos y logo

1. Guarda tus imágenes dentro de `src/assets/images/` (por ejemplo
   `src/assets/images/foto-1.jpg`, `logo.svg`).
2. En `src/data/profile.js`, cambia `photo`, `photoAlt` y `logo` por esas
   rutas, por ejemplo:
   ```js
   photo: "/src/assets/images/foto-1.jpg",
   ```
3. Reemplaza también `public/favicon.svg` por tu logo si quieres que aparezca
   en la pestaña del navegador.
4. Mientras no pongas una imagen real, cada foto muestra automáticamente un
   placeholder con tus iniciales (no se rompe el diseño).

### Capturas de los proyectos

Igual que las fotos: guarda las capturas en `src/assets/images/` y actualiza
el campo `image` de cada proyecto en `src/data/projects.js`.

## Estructura del proyecto

```text
portfolio/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/images/       ← tus fotos, logo y capturas van aquí
│   ├── components/          ← piezas reutilizables (Navbar, cards, modal...)
│   ├── sections/             ← una sección de la página por archivo
│   ├── data/
│   │   ├── profile.js       ← tus datos personales, habilidades, proceso
│   │   └── projects.js      ← tus 3 proyectos reales
│   ├── hooks/
│   │   └── useReducedMotion.js
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css            ← tokens de diseño (colores, fuentes, glass, glow)
├── index.html
└── vite.config.js
```

## Notas técnicas

- **Accesibilidad**: la web respeta `prefers-reduced-motion` (desactiva
  animaciones si el usuario lo tiene configurado en su sistema), tiene estados
  de foco visibles y HTML semántico.
- **Rendimiento**: sin librerías innecesarias — solo Framer Motion (animación)
  y Lucide (iconos). Las animaciones usan `transform`/`opacity` (GPU-friendly).
- **Iconos de marca**: la versión instalada de `lucide-react` ya no incluye
  logos de marca (GitHub/LinkedIn/Instagram); esos tres se dibujaron a mano en
  `src/components/BrandIcons.jsx` con el mismo estilo del resto de iconos.
- Los 3 proyectos mostrados (AlPunto, EvalPingüino, Sistema de Gestión
  Clínica) están descritos a partir de tu código real. Los enlaces de
  demo/repositorio y las capturas quedaron como placeholders — complétalos
  cuando los tengas listos.
