docs: refresh portfolio README
This commit is contained in:
@@ -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.
|
## Ruta rápida
|
||||||
|
|
||||||
## 🚀 Estructura del Proyecto
|
|
||||||
|
|
||||||
|
```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/
|
├── src/
|
||||||
│ ├── assets/
|
│ ├── components/ # Secciones Astro reutilizables
|
||||||
│ ├── components/
|
|
||||||
│ │ ├── About.astro
|
│ │ ├── About.astro
|
||||||
│ │ ├── Experience.astro
|
│ │ ├── Experience.astro
|
||||||
│ │ ├── Footer.astro
|
│ │ ├── Footer.astro
|
||||||
@@ -18,116 +54,123 @@ Portfolio profesional desarrollado con [Astro](https://astro.build/), Tailwind C
|
|||||||
│ │ ├── Hero.astro
|
│ │ ├── Hero.astro
|
||||||
│ │ ├── Projects.astro
|
│ │ ├── Projects.astro
|
||||||
│ │ ├── Skills.astro
|
│ │ ├── Skills.astro
|
||||||
│ │ └── ui/
|
│ │ └── ui/ # Componentes base como Section y Tooltip
|
||||||
│ ├── data/
|
│ ├── data/index.ts # Fuente principal de contenido del portfolio
|
||||||
│ │ └── index.ts
|
│ ├── icons/ # Iconos usados por astro-icon
|
||||||
│ ├── icons/
|
│ ├── layouts/Layout.astro # Layout HTML base e imports globales
|
||||||
│ ├── layouts/
|
│ ├── lib/scroll.ts # Utilidades de comportamiento visual
|
||||||
│ │ └── Layout.astro
|
│ ├── pages/index.astro # Composición de la página principal
|
||||||
│ ├── lib/
|
│ └── styles/global.css # Estilos globales y clases compartidas
|
||||||
│ ├── pages/
|
├── .devcontainer/ # Entorno de desarrollo en contenedor
|
||||||
│ │ └── index.astro
|
├── astro.config.mjs # Configuración Astro, Tailwind y astro-icon
|
||||||
│ └── styles/
|
├── biome.json # Formato y linting
|
||||||
│ └── global.css
|
├── Dockerfile # Build estática + runtime Apache
|
||||||
├── astro.config.mjs
|
├── package.json # Scripts y dependencias
|
||||||
├── biome.json
|
|
||||||
├── Dockerfile
|
|
||||||
├── package.json
|
|
||||||
├── pnpm-lock.yaml
|
├── pnpm-lock.yaml
|
||||||
├── pnpm-workspace.yaml
|
├── pnpm-workspace.yaml
|
||||||
├── tsconfig.json
|
└── tsconfig.json # TypeScript estricto y aliases de imports
|
||||||
└── README.md
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 🛠️ Tecnologías principales
|
## Personalizar contenido
|
||||||
|
|
||||||
- **Astro**: Framework para sitios web rápidos y modernos.
|
La mayor parte del contenido y de los datos del portfolio se centraliza en `src/data/index.ts`:
|
||||||
- **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.
|
|
||||||
|
|
||||||
## ✨ 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.
|
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.
|
||||||
- Experiencia laboral detallada.
|
|
||||||
- Habilidades técnicas con iconos y tooltips.
|
|
||||||
- Sección "Acerca de mí".
|
|
||||||
- Footer con información de autor y año.
|
|
||||||
|
|
||||||
|
### 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.
|
|
||||||
|
|
||||||
### Personalización del DevContainer
|
|
||||||
- Archivo de configuración: `.devcontainer/devcontainer.json`
|
|
||||||
- Extensiones recomendadas: Astro, Tailwind CSS, Biome
|
|
||||||
- Usuario: `node`
|
|
||||||
|
|
||||||
## 📦 Instalación y uso manual
|
|
||||||
|
|
||||||
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
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🚢 Crear imagen Docker y desplegar
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
La imagen usa Apache para servir el contenido estático generado en `dist/`.
|
|
||||||
|
|
||||||
## 🧑 Scripts útiles
|
|
||||||
|
|
||||||
| Comando | Acción |
|
| Comando | Acción |
|
||||||
| ---------------------- | ----------------------------------------- |
|
| ------------------- | ---------------------------------------------------- |
|
||||||
| `pnpm install` | Instala dependencias |
|
| `pnpm install` | Instala dependencias. |
|
||||||
| `pnpm dev` | Inicia servidor local en `localhost:4321` |
|
| `pnpm dev` | Inicia Astro en modo desarrollo con host habilitado. |
|
||||||
| `pnpm build` | Compila el sitio en `./dist/` |
|
| `pnpm build` | Genera la build estática en `dist/`. |
|
||||||
| `pnpm preview` | Previsualiza el sitio compilado |
|
| `pnpm preview` | Previsualiza la build generada. |
|
||||||
| `pnpm astro ...` | Ejecuta comandos CLI de Astro |
|
| `pnpm astro ...` | Ejecuta comandos de la CLI de Astro. |
|
||||||
| `pnpm astro -- --help` | Ayuda sobre la CLI de Astro |
|
| `pnpm biome:format` | Formatea el código con Biome. |
|
||||||
| `pnpm biome:format` | Formatea el código con Biome |
|
| `pnpm biome:lint` | Ejecuta linting con Biome y aplica fixes permitidos. |
|
||||||
| `pnpm biome:lint` | Linting del código con Biome |
|
| `pnpm biome:all` | Ejecuta `biome check --write`. |
|
||||||
| `pnpm biome:all` | Formatea y linting con Biome |
|
|
||||||
|
|
||||||
## 👤 Autor
|
## 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
|
- **Nombre:** Asis Ferrer
|
||||||
- **Título:** SysAdmin & Desarrollador Web Full Stack
|
- **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
|
- **Email:** info@aferrer.dev
|
||||||
- **LinkedIn:** [linkedin.com/in/asis-ferrer](https://linkedin.com/in/asis-ferrer)
|
- **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/)
|
- [Tailwind CSS](https://tailwindcss.com/)
|
||||||
|
- [Dev Containers](https://containers.dev/)
|
||||||
---
|
- [Biome](https://biomejs.dev/)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user