Tener un portafolio profesional en línea marca la diferencia cuando buscas oportunidades como desarrollador. Astro ofrece un template de portafolio listo para usar, con diseño responsive, modo claro y oscuro, y una estructura que puedes personalizar con los conocimientos de HTML, CSS y JavaScript que ya dominas. Lo mejor: es preferible tener algo publicado que esperar al diseño perfecto.
¿Cómo crear el proyecto de portafolio con Astro?
El proceso inicia desde la terminal. Es importante estar fuera de cualquier carpeta de proyecto anterior antes de ejecutar el comando. La instrucción clave es npm create astro -- --template portfolio [00:46]. Este comando descarga un boilerplate específico que ya viene con configuración preestablecida, por lo que Astro no realiza tantas preguntas como en un proyecto desde cero.
Durante la creación, el asistente solicita:
- El nombre del proyecto, por ejemplo "my website".
- Si deseas instalar dependencias: responde sí.
- Si deseas iniciar un repositorio Git: también puedes aceptar.
Una vez creado, entras a la carpeta del proyecto y ejecutas npm run dev [01:34] para levantar el servidor local y visualizar el portafolio.
¿Qué incluye el template por defecto?
El template entrega una base bastante completa con los elementos esenciales que necesita un portafolio profesional [01:55]:
- Links a redes sociales ya incorporados.
- Alternancia entre light mode y dark mode.
- Un header con espacio para tu foto.
- Sección de proyectos con una landing de trabajo.
- Página de about para tu descripción personal.
- Diseño responsive bien estilizado con menú adaptable.
Al ejecutar Lighthouse sobre el template sin modificaciones, el puntaje de rendimiento es aceptable, aunque presenta oportunidades de mejora, especialmente en optimización de imágenes [02:49]. Métricas como el LCP (Largest Contentful Paint) y el FCP (First Contentful Paint) pueden mejorar significativamente al trabajar las imágenes.
¿Cómo personalizar el contenido del portafolio?
La personalización comienza con el hero, que es la sección principal visible en el index [03:29]. Aquí cambias tu nombre, tu copy de presentación y los roles o íconos que aparecen debajo. Por ejemplo, puedes colocar "developer", "speaker" o cualquier rol que te represente.
También existe una sección de Skills [04:06] donde puedes editar los componentes para reflejar tus habilidades reales, agregar más o quitar las que no apliquen. Todo esto se controla desde los componentes correspondientes en el código.
¿Cómo funcionan las colecciones de contenido en Astro?
La parte dinámica del portafolio se maneja a través de colecciones [04:28]. Astro permite crear contenido en formato Markdown dentro de la carpeta content. Cada archivo Markdown necesita ciertos tags de información al inicio, como título, fecha de publicación, imagen y etiquetas.
El esquema de estas colecciones se define en content.config [05:18], donde tipas los campos que tendrá cada pieza de contenido. Esto permite que Astro sepa exactamente qué esperar de cada archivo.
En el index, los proyectos se obtienen de la colección, se ordenan con sort por fecha de publicación y se cortan con slice a los primeros cuatro elementos [06:07]. En la página completa de work, se muestran todos sin ese límite.
Un detalle importante surgió durante la práctica: al agregar un nuevo proyecto, este no aparecía en ninguna vista [06:34]. El problema fue que el archivo Markdown estaba ubicado fuera de la carpeta correcta. Cada colección mapea un folder específico, y si el archivo no está dentro de esa carpeta, Astro simplemente no lo reconoce [07:06]. Cada tipo de contenido, ya sea work, projects u open source, necesita su propia carpeta con su esquema correspondiente.
¿Qué sigue después de personalizar el portafolio?
Una vez que adaptas el hero, los skills, la página de about con tu foto y experiencia, y agregas tus proyectos reales como colecciones en Markdown, el portafolio queda funcional. Sin embargo, queda pendiente un tema fundamental: la optimización de imágenes [08:04]. Hasta ahora se ha trabajado en optimización de JavaScript y CSS, pero las imágenes representan otro factor crítico en el rendimiento que Astro permite gestionar de forma eficiente.
¿Ya tienes tu portafolio publicado o vas a empezar con este template? Comparte tu experiencia en los comentarios.
