portfolio/README.md

# Portfolio Web — Asis Ferrer

Portfolio profesional de Asis Ferrer, SysAdmin y Desarrollador Web Full Stack. El sitio presenta experiencia, proyectos, habilidades técnicas y enlaces de contacto en una aplicación estática construida con [Astro](https://astro.build/), Tailwind CSS y TypeScript.

## Ruta rápida

```sh
pnpm install
pnpm dev
```

Después abre [http://localhost:4321](http://localhost:4321) para ver el portfolio en desarrollo.

Para validar una build de producción:

```sh
pnpm build
pnpm preview
```

## Qué incluye

- Hero profesional con avatar, título, bio y enlaces sociales.
- Navegación fija con menú responsive para escritorio y móvil.
- Proyectos destacados con imagen, tecnologías, enlace live y repositorio.
- Experiencia profesional en formato timeline.
- Habilidades técnicas con iconos y tooltips.
- Sección "Acerca de mí" y footer dinámico.
- Build estática lista para servir desde Apache mediante Docker.

## Stack principal

| Área                | Tecnología                     |
| ------------------- | ------------------------------ |
| Framework           | Astro 6                        |
| UI / estilos        | Tailwind CSS 4                 |
| Lenguaje            | TypeScript                     |
| Iconos              | `astro-icon`                   |
| Calidad             | Biome                          |
| Contenedores        | DevContainer y Docker          |
| Servidor producción | Apache httpd sirviendo `dist/` |

## Estructura del proyecto

```text
/
├── public/                    # Assets públicos: avatar, favicon e imágenes de proyectos
├── src/
│   ├── components/            # Secciones Astro reutilizables
│   │   ├── About.astro
│   │   ├── Experience.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   ├── Hero.astro
│   │   ├── Projects.astro
│   │   ├── Skills.astro
│   │   └── ui/                # Componentes base como Section y Tooltip
│   ├── data/index.ts          # Fuente principal de contenido del portfolio
│   ├── icons/                 # Iconos usados por astro-icon
│   ├── layouts/Layout.astro   # Layout HTML base e imports globales
│   ├── lib/scroll.ts          # Utilidades de comportamiento visual
│   ├── pages/index.astro      # Composición de la página principal
│   └── styles/global.css      # Estilos globales y clases compartidas
├── .devcontainer/             # Entorno de desarrollo en contenedor
├── astro.config.mjs           # Configuración Astro, Tailwind y astro-icon
├── biome.json                 # Formato y linting
├── Dockerfile                 # Build estática + runtime Apache
├── package.json               # Scripts y dependencias
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── tsconfig.json              # TypeScript estricto y aliases de imports
```

## Personalizar contenido

La mayor parte del contenido y de los datos del portfolio se centraliza en `src/data/index.ts`:

| Export         | Qué controla                                                       |
| -------------- | ------------------------------------------------------------------ |
| `navItems`     | Enlaces de navegación del header.                                  |
| `personalInfo` | Nombre, título, bio, email disponible en datos y enlaces sociales. |
| `aboutMe`      | Texto largo de la sección "Acerca de mí".                          |
| `experience`   | Timeline de experiencia profesional.                               |
| `skills`       | Habilidades e iconos mostrados en la sección técnica.              |
| `projects`     | Tarjetas de proyectos, imágenes, tags y enlaces.                   |

Los componentes de `src/components/` consumen estos datos desde `src/pages/index.astro`, por lo que normalmente no hace falta tocar la estructura visual para actualizar textos, experiencia o proyectos.

### Imágenes e iconos

- Las imágenes públicas se guardan en `public/` y se referencian con rutas absolutas como `/avatar.webp`.
- Los iconos usados por `astro-icon` viven en `src/icons/`.
- Si agregas una skill o tecnología nueva, añade el SVG correspondiente y referéncialo desde `src/data/index.ts`.

## Scripts disponibles

| Comando             | Acción                                               |
| ------------------- | ---------------------------------------------------- |
| `pnpm install`      | Instala dependencias.                                |
| `pnpm dev`          | Inicia Astro en modo desarrollo con host habilitado. |
| `pnpm build`        | Genera la build estática en `dist/`.                 |
| `pnpm preview`      | Previsualiza la build generada.                      |
| `pnpm astro ...`    | Ejecuta comandos de la CLI de Astro.                 |
| `pnpm biome:format` | Formatea el código con Biome.                        |
| `pnpm biome:lint`   | Ejecuta linting con Biome y aplica fixes permitidos. |
| `pnpm biome:all`    | Ejecuta `biome check --write`.                       |

## Desarrollo con DevContainer

El proyecto incluye un entorno de desarrollo en `.devcontainer/` para VS Code o herramientas compatibles con [Dev Containers](https://containers.dev/).

1. Abre el repositorio en VS Code.
2. Ejecuta **Reopen in Container**.
3. El contenedor instala `pnpm`, ejecuta `pnpm i` y lanza `pnpm dev` al adjuntarse.
4. Usa el puerto `4321` para acceder al sitio desde el navegador.

Archivos relevantes:

- `.devcontainer/devcontainer.json`: configuración del entorno, extensiones recomendadas y puerto expuesto.
- `.devcontainer/Dockerfile`: imagen base Node con `pnpm`, `git` y `curl`.

## Docker de producción

La imagen de producción compila el sitio y sirve el contenido estático con Apache httpd.

```sh
docker build -t portfolio-astro .
docker run -p 8080:80 portfolio-astro
```

Después abre [http://localhost:8080](http://localhost:8080).

Flujo interno del `Dockerfile`:

1. Usa `node:lts-slim` para instalar dependencias con `pnpm`.
2. Ejecuta `pnpm run build`.
3. Copia `dist/` a `/usr/local/apache2/htdocs/` en `httpd:2.4`.

## Calidad y verificación

Este repositorio no define un script de tests automatizados dedicado. Para revisar cambios, usá la build de Astro y Biome:

```sh
pnpm build
pnpm biome:lint
```

> Nota: el script `pnpm biome:lint` ejecuta `biome lint --write` sobre el proyecto completo. Si ya existe `dist/` o archivos generados en `.astro/`, Biome puede reportar diagnósticos sobre código generado. Para revisar solo el código fuente sin aplicar cambios, podés usar `./node_modules/.bin/biome lint src astro.config.mjs`.

Criterios básicos antes de publicar:

- La build de Astro termina sin errores.
- Biome no reporta problemas pendientes en el código fuente mantenido por el proyecto.
- Las rutas de imágenes en `public/` existen.
- Los iconos referenciados desde `src/data/index.ts` existen en `src/icons/`.
- Los enlaces externos usan `target="_blank"` y `rel="noopener noreferrer"` cuando corresponde.

## Configuración destacada

- `astro.config.mjs` integra Tailwind CSS mediante `@tailwindcss/vite` y habilita `astro-icon`.
- `tsconfig.json` extiende `astro/tsconfigs/strict` y define aliases como `@components/*`, `@layouts/*` y `@data/*`.
- `biome.json` usa tabulación, comillas dobles en JavaScript y reglas recomendadas, con ajustes específicos para archivos `.astro`.

## Autor

- **Nombre:** Asis Ferrer
- **Título:** SysAdmin & Desarrollador Web Full Stack
- **Email:** info@aferrer.dev
- **LinkedIn:** [aferrer.dev/linkedin](https://aferrer.dev/linkedin)

## Referencias

- [Documentación de Astro](https://docs.astro.build)
- [Tailwind CSS](https://tailwindcss.com/)
- [Dev Containers](https://containers.dev/)
- [Biome](https://biomejs.dev/)