Portfolio Web - Asis Ferrer
Portfolio profesional desarrollado con Astro, 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.
- Abre el proyecto en VS Code y selecciona "Reopen in Container".
- El entorno instalará dependencias automáticamente (
pnpm i) y lanzará el servidor de desarrollo (pnpm dev). - 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
- Instala dependencias:
pnpm install - Inicia el servidor de desarrollo:
pnpm dev - Compila para producción:
pnpm build - Previsualiza el sitio compilado:
pnpm preview
🚢 Crear imagen Docker y desplegar
- Construye la imagen Docker:
docker build -t portfolio-astro . - Ejecuta el contenedor:
docker run -p 8080:80 portfolio-astro - Accede a la web en 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