134 lines
4.1 KiB
Markdown
134 lines
4.1 KiB
Markdown
|
|
# Portfolio Web - Asis Ferrer
|
|
|
|
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
|
|
|
|
```
|
|
/
|
|
├── public/
|
|
├── src/
|
|
│ ├── assets/
|
|
│ ├── components/
|
|
│ │ ├── About.astro
|
|
│ │ ├── Experience.astro
|
|
│ │ ├── Footer.astro
|
|
│ │ ├── Header.astro
|
|
│ │ ├── 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
|
|
├── pnpm-lock.yaml
|
|
├── pnpm-workspace.yaml
|
|
├── tsconfig.json
|
|
└── README.md
|
|
```
|
|
|
|
## 🛠️ Tecnologías principales
|
|
|
|
- **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.
|
|
|
|
## ✨ Funcionalidades
|
|
|
|
- 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.
|
|
|
|
|
|
## 🔨 Desarrollo en entorno DevContainer
|
|
|
|
Este proyecto incluye configuración para desarrollo en contenedor usando [DevContainer](https://containers.dev/).
|
|
|
|
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 |
|
|
| ---------------------- | ----------------------------------------- |
|
|
| `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 |
|
|
|
|
## 👤 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
|
|
|
|
- [Documentación Astro](https://docs.astro.build)
|
|
- [Tailwind CSS](https://tailwindcss.com/)
|
|
|
|
---
|
|
|