7.7 KiB
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, 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-iconviven ensrc/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, ejecutapnpm iy lanzapnpm deval adjuntarse. - Usa el puerto
4321para 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 conpnpm,gitycurl.
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-slimpara instalar dependencias conpnpm. - Ejecuta
pnpm run build. - Copia
dist/a/usr/local/apache2/htdocs/enhttpd: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:lintejecutabiome lint --writesobre el proyecto completo. Si ya existedist/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.tsexisten ensrc/icons/. - Los enlaces externos usan
target="_blank"yrel="noopener noreferrer"cuando corresponde.
Configuración destacada
astro.config.mjsintegra Tailwind CSS mediante@tailwindcss/vitey habilitaastro-icon.tsconfig.jsonextiendeastro/tsconfigs/stricty define aliases como@components/*,@layouts/*y@data/*.biome.jsonusa 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