# 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/)