aferrer/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: refresh portfolio README

Browse Source
This commit is contained in:
Asis ferrer
2026-06-10 09:57:05 +02:00
parent a6a315d70d
commit 13be919de2
1 changed files with 135 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+135 -92
View File
@@ -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/)