Sobre esta web


Mejor empezar que perfecto

Empezar algo es a veces la clave para terminarlo. Siempre puedes irlo mejorando con el tiempo.

¿Quién soy?

Mi nombre es Jamer José, soy ingeniero matemático y desarrollador web. Mis primeros acercamientos al código no fueron muy afortunados, pero con el tiempo y de la mano de las matemáticas, encontré en la programación una forma de expresión y creatividad que me ha permitido explorar y aprender muchas cosas nuevas e interesantes.

En 2024, decidí crear esta web para compartir mis conocimientos y experiencias en este mundo. Entre mis intereses se encuentran el código abierto, linux (Ubuntu), el desarrollo web, los algoritmos así como las matemáticas aplicadas a la programación.

Siéntete libre de explorar mi web y de contactarme si tienes alguna pregunta o sugerencia. Eres totalmente bienvenido 😺

¿Qué puedes aprender de este proyecto?

¿Quieres construir tu propio portafolio o página web personal? Aquí tienes algunas cosas que puedes aprender de este proyecto:

Trataré de ir expandiendo este artículo entrando en más detalles sobre cada uno de estos puntos, mientras tanto puedes explorar el código fuente de esta web en GitHub [jamerrq/jamerrq.dev]

¿Qué es Astro? (Y por qué deberías aprenderlo)

Astro Logo

Astro es un framework de frontend moderno diseñado para la creación de sitios web altamente optimizados y rápidos. Se destaca por su capacidad de generar HTML estático de manera predeterminada, lo que minimiza la carga de JavaScript en el cliente, mejorando significativamente el rendimiento.

Astro también permite la integración de componentes de diversos frameworks como React, Svelte y Vue en un mismo proyecto, ofreciendo una gran flexibilidad. Además, facilita el uso de Markdown y MDX (Markdown + JS) para la creación de contenido.

Así mismo cuenta con un sistema de plugins robusto que amplía sus funcionalidades, haciendo de Astro una herramienta poderosa y versátil para desarrolladores web. Si quieres saber más sobre Astro, puedes visitar su sitio web oficial en astro.build para que conozcas todas sus características y beneficios.

Cómo empezar una aplicación web con Astro

Empezar un proyecto Astro es muy sencillo. Sólo necesitas tener un entorno para ejecutar JavaScript y un editor de texto. En mi caso, uso Bun como mi gestor de paquetes durante el desarrollo ya que es un proyecto en el que tengo la libertad de experimentar con diferentes tecnologías y herramientas. Sin embargo, puedes usar el gestor de paquetes de tu preferencia.

Para crear un nuevo proyecto Astro, puedes usar el siguiente comando:

bun create-astro@latest

Si usas npm, puedes ejecutar el siguiente comando:

npm create astro@latest

Con pnpm:

pnpm create astro@latest

Yarn:

yarn create astro

Este comando ejecutará un asistente que te guiará a través de la configuración inicial de tu proyecto. Una vez completado, podrás empezar a desarrollar tu aplicación Astro en tu editor de texto favorito. Yo recomiendo altamente Visual Studio Code ya que cuenta con una gran cantidad de extensiones y herramientas que te facilitarán el desarrollo. Entre ellas, la extensión oficial de Astro que te permitirá tener una mejor experiencia en el desarrollo de tu proyecto.

LightHouse y Pagespeed Insights

Para asegurarme de que mi web es accesible y rápida, he utilizado herramientas como LightHouse y Pagespeed Insights para medir y optimizar el rendimiento de mi web a medida que he la he ido desarrollando.

Este proceso me ha permitido identificar y corregir problemas de rendimiento y accesibilidad, así como mejorar la experiencia de usuario en esta web. Más adelante escribiré un artículo detallando cómo he optimizado mi web con Astro para que puedas aplicar estos mismos principios en tu proyecto.

Este es el resultado de la última auditoría realizada a mi web con Pagespeed Insights:

Pagespeed InsightsPagespeed Insights Desktop

Tal vez no se note, pero…

HOVER ME!

Explora esta app con las view transitions de Astro

Una de las características más interesantes de Astro es la posibilidad de implementar transiciones entre vistas de forma sencilla y elegante. Esto permite crear experiencias de usuario más atractivas y dinámicas, mejorando la navegación y la interacción con la web.

En esta web, he utilizado las view transitions de Astro para crear efectos de entrada y salida al cambiar de página. Esto le da un toque especial a la navegación y mejora la experiencia de usuario al explorar el contenido.

Te dejo un video de demostración para que veas cómo funcionan las view transitions en esta web:

Para implementar las view transitions en tu proyecto Astro, sólo debes importarlas dentro de tu layout principal, para luego incluirlas dentro del componente <head> de tu archivo layout.astro:

---
import { ViewTransitions } from 'astro:transitions'
---
<head>
  <ViewTransitions />
</head>

Con esto, ya tendrás las view transitions activadas en tu proyecto Astro. Ahora sólo resta agregar las transiciones entre elementos de tu web para darle un toque especial a la navegación. ¿Cómo se hace? Te pongo un ejemplo 👇

Este es el componente blog-about.astro que sostiene el título “Blog” cuando entras a la subpágina /blog

<a
  class={ABOUT_STYLES}
  transition:name='blog'
  href={lang === 'en' ? '/' : '/es'}
>
  <span class='dark:text-cyan-300'>Blog</span>
  <svg
    class='w-8 h-8 inline-flex dark:fill-cyan-300 fill-amber-950'
    set:html={siGitbook.svg}
  />
</a>

Y este sería el componente que hace parte del bento principal de la web, i.e. blog.astro

<Hbox
  title='Blog'
  href={lang === 'en' ? '/blog' : '/es/blog'}
  otherStyles='xl:row-span-2 [&_p]:text-3xl'
>
  <div class='flex gap-2' transition:name='blog'>
    <p>Blog</p>
    <svg
      class='w-8 h-8 inline-flex dark:fill-cyan-300 fill-cyan-950'
      set:html={siGitbook.svg}
    />
  </div>
</Hbox>

Si te fijas, ambos componentes tienen la propiedad transition:name='blog' que es la que le indica a Astro que debe aplicar la transición entre estos dos elementos cuando se navega entre ellos. Así de sencillo es implementar las view transitions en tu proyecto Astro. Si quieres saber más sobre cómo funcionan las view transitions, puedes consultar la documentación oficial de Astro.

Referencias