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, Tailwind CSS y TypeScript.

Ruta rápida

pnpm install
pnpm dev

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

Para validar una build de producción:

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

/
├── 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.

Abre el repositorio en VS Code.
Ejecuta Reopen in Container.
El contenedor instala pnpm, ejecuta pnpm i y lanza pnpm dev al adjuntarse.
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.

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

Después abre http://localhost:8080.

Flujo interno del Dockerfile:

Usa node:lts-slim para instalar dependencias con pnpm.
Ejecuta pnpm run build.
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:

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: linkedin.com/in/asis-ferrer

Referencias

Languages

Astro 70.9%

TypeScript 23.4%

CSS 2.8%

Dockerfile 1.7%

JavaScript 1.2%