# Portfolio Web - Asis Ferrer

Portfolio profesional desarrollado con [Astro](https://astro.build/), Tailwind CSS y TypeScript. Presenta experiencia, habilidades, proyectos y datos de contacto de Asis Ferrer, SysAdmin y Desarrollador Web Full Stack.

## 🚀 Estructura del Proyecto

```
/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── About.astro
│   │   ├── Experience.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   ├── Hero.astro
│   │   ├── Projects.astro
│   │   ├── Skills.astro
│   │   └── ui/
│   ├── data/
│   │   └── index.ts
│   ├── icons/
│   ├── layouts/
│   │   └── Layout.astro
│   ├── lib/
│   ├── pages/
│   │   └── index.astro
│   └── styles/
│       └── global.css
├── astro.config.mjs
├── biome.json
├── Dockerfile
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.json
└── README.md
```

## 🛠️ Tecnologías principales

- **Astro**: Framework para sitios web rápidos y modernos.
- **Tailwind CSS**: Utilidades CSS para diseño responsivo y moderno.
- **TypeScript**: Tipado estático para JavaScript.
- **Docker**: Contenedores para desarrollo y despliegue.
- **Biome**: Formateo y linting de código.

## ✨ Funcionalidades

- Presentación profesional con sección de héroe.
- Experiencia laboral detallada.
- Habilidades técnicas con iconos y tooltips.
- Sección "Acerca de mí".
- Footer con información de autor y año.


## 🔨 Desarrollo en entorno DevContainer

Este proyecto incluye configuración para desarrollo en contenedor usando [DevContainer](https://containers.dev/).

1. Abre el proyecto en VS Code y selecciona "Reopen in Container".
2. El entorno instalará dependencias automáticamente (`pnpm i`) y lanzará el servidor de desarrollo (`pnpm dev`).
3. El puerto 4321 estará disponible para acceder a la app desde tu navegador.

### Personalización del DevContainer
- Archivo de configuración: `.devcontainer/devcontainer.json`
- Extensiones recomendadas: Astro, Tailwind CSS, Biome
- Usuario: `node`

## 📦 Instalación y uso manual

1. Instala dependencias:
	```sh
	pnpm install
	```
2. Inicia el servidor de desarrollo:
	```sh
	pnpm dev
	```
3. Compila para producción:
	```sh
	pnpm build
	```
4. Previsualiza el sitio compilado:
	```sh
	pnpm preview
	```

## 🚢 Crear imagen Docker y desplegar

1. Construye la imagen Docker:
	```sh
	docker build -t portfolio-astro .
	```
2. Ejecuta el contenedor:
	```sh
	docker run -p 8080:80 portfolio-astro
	```
3. Accede a la web en [http://localhost:8080](http://localhost:8080)

La imagen usa Apache para servir el contenido estático generado en `dist/`.

## 🧑‍ Scripts útiles

| Comando                | Acción                                    |
| ---------------------- | ----------------------------------------- |
| `pnpm install`         | Instala dependencias                      |
| `pnpm dev`             | Inicia servidor local en `localhost:4321` |
| `pnpm build`           | Compila el sitio en `./dist/`             |
| `pnpm preview`         | Previsualiza el sitio compilado           |
| `pnpm astro ...`       | Ejecuta comandos CLI de Astro             |
| `pnpm astro -- --help` | Ayuda sobre la CLI de Astro               |
| `pnpm biome:format`    | Formatea el código con Biome              |
| `pnpm biome:lint`      | Linting del código con Biome              |
| `pnpm biome:all`       | Formatea y linting con Biome              |

## 👤 Autor

- **Nombre:** Asis Ferrer
- **Título:** SysAdmin & Desarrollador Web Full Stack
- **Bio:** Apasionado por la tecnología y el desarrollo, SysAdmin con sólida experiencia en administración de sistemas y redes, adentrándose en el desarrollo web full stack.
- **Email:** info@aferrer.dev
- **LinkedIn:** [linkedin.com/in/asis-ferrer](https://linkedin.com/in/asis-ferrer)

## 📚 Más información

- [Documentación Astro](https://docs.astro.build)
- [Tailwind CSS](https://tailwindcss.com/)

---