From 13be919de284090aac496f0fa09a0150d42e6259 Mon Sep 17 00:00:00 2001 From: Asis Ferrer Date: Wed, 10 Jun 2026 09:57:05 +0200 Subject: [PATCH] docs: refresh portfolio README --- README.md | 227 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 135 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index 6ce77b2..64272a5 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,52 @@ +# Portfolio Web — Asis Ferrer -# 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. -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 +## 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/ +├── public/ # Assets públicos: avatar, favicon e imágenes de proyectos ├── src/ -│ ├── assets/ -│ ├── components/ +│ ├── components/ # Secciones Astro reutilizables │ │ ├── About.astro │ │ ├── Experience.astro │ │ ├── Footer.astro @@ -18,116 +54,123 @@ Portfolio profesional desarrollado con [Astro](https://astro.build/), Tailwind C │ │ ├── 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 +│ │ └── 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 -└── README.md +└── tsconfig.json # TypeScript estricto y aliases de imports ``` -## 🛠️ Tecnologías principales +## Personalizar contenido -- **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. +La mayor parte del contenido y de los datos del portfolio se centraliza en `src/data/index.ts`: -## ✨ Funcionalidades +| 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. | -- 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. +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 -## 🔨 Desarrollo en entorno DevContainer +- 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`. -Este proyecto incluye configuración para desarrollo en contenedor usando [DevContainer](https://containers.dev/). +## Scripts disponibles -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. +| 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`. | -### Personalización del DevContainer -- Archivo de configuración: `.devcontainer/devcontainer.json` -- Extensiones recomendadas: Astro, Tailwind CSS, Biome -- Usuario: `node` +## Desarrollo con DevContainer -## 📦 Instalación y uso manual +El proyecto incluye un entorno de desarrollo en `.devcontainer/` para VS Code o herramientas compatibles con [Dev Containers](https://containers.dev/). -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 - ``` +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. -## 🚢 Crear imagen Docker y desplegar +Archivos relevantes: -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) +- `.devcontainer/devcontainer.json`: configuración del entorno, extensiones recomendadas y puerto expuesto. +- `.devcontainer/Dockerfile`: imagen base Node con `pnpm`, `git` y `curl`. -La imagen usa Apache para servir el contenido estático generado en `dist/`. +## Docker de producción -## 🧑‍ Scripts útiles +La imagen de producción compila el sitio y sirve el contenido estático con Apache httpd. -| 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 | +```sh +docker build -t portfolio-astro . +docker run -p 8080:80 portfolio-astro +``` -## 👤 Autor +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 -- **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 +## Referencias -- [Documentación Astro](https://docs.astro.build) +- [Documentación de Astro](https://docs.astro.build) - [Tailwind CSS](https://tailwindcss.com/) - ---- - +- [Dev Containers](https://containers.dev/) +- [Biome](https://biomejs.dev/)