diff --git a/bun.lockb b/bun.lockb
index 2a04662..d4d15e6 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index a0801cc..84d2924 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,7 @@
     "@astrojs/tailwind": "^5.0.4",
     "@fontsource/averia-serif-libre": "^5.0.18",
     "@fontsource/merriweather": "^5.0.8",
-    "astro": "^4.0.8",
-    "astro-compress": "^2.2.15",
+    "astro": "^4.9.2",
     "astro-page-insight": "^0.4.1",
     "astro-robots-txt": "^1.0.0",
     "astro-seo": "^0.8.3",
diff --git a/public/video/view-transitions-demo.webm b/public/video/view-transitions-demo.webm
new file mode 100644
index 0000000..094d52a
Binary files /dev/null and b/public/video/view-transitions-demo.webm differ
diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
index 53e1eb7..966544e 100644
--- a/src/components/featured-and-projects/projects.tsx
+++ b/src/components/featured-and-projects/projects.tsx
@@ -135,6 +135,113 @@ function goLeft() {
   cooldown.value = COOLDOWN_TIME
 }
 
+function GitHubIcon() {
+  return (
+    <svg
+      height='20'
+      id='Layer_1'
+      style='enable-background:new 0 0 512 512;'
+      version='1.1'
+      viewBox='0 0 512 512'
+      width='20'
+      class='dark:fill-white'
+    >
+      <g>
+        <path
+          class='st0'
+          d='M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1   c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14   c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5   c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7   c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3   c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7   C480,134.8,379.7,32,256,32z'
+        />
+      </g>
+    </svg>
+  )
+}
+
+function DemoIcon() {
+  return (
+    <svg
+      enable-background='new 0 0 24 24'
+      id='Layer_1'
+      version='1.1'
+      viewBox='0 0 24 24'
+      width='20'
+      height='20'
+    >
+      <path
+        d='M22.7587891,5.0722656c-0.0148926-0.0089722-10.5439453-5.0239258-10.5439453-5.0239258  c-0.1367188-0.0644531-0.2929688-0.0644531-0.4296875,0c0,0-10.5291138,5.0149536-10.5439453,5.0239258  C1.0917969,5.1625977,1,5.3251953,1,5.5v12c0,0.1791992,0.0957031,0.3452148,0.2519531,0.434082l10.496582,5.9980469  c0,0,0.0003052,0.0003662,0.0004883,0.0004883l0.0006714,0.0001831l0.0022583,0.0012817l0.0003662-0.0006104  C11.8287964,23.9772339,11.9142456,24,12,24c0.0859375,0,0.1708984-0.0219727,0.2480469-0.065918l10.5-6  C22.9042969,17.8452148,23,17.6791992,23,17.5v-12C23,5.3251953,22.9082031,5.1625977,22.7587891,5.0722656z M6,19.4956665  l-4-2.2857056v-4.8834229l4,2.0952148V19.4956665z M2.6185303,5.5213013L6.874939,3.4943848l3.961731,1.8864746L6.3914795,7.4976196  L2.6185303,5.5213013z M11.5,16.173645L7,13.8164063V8.9453735l4.5,2.3572998V16.173645z M12.5,17.3027344l4.5-2.3571777v5.1213379  l-4.5,2.5712891V17.3027344z M13.1633301,5.3808594l3.961731-1.8864746l4.2564087,2.0269165l-3.7729492,1.9763184  L13.1633301,5.3808594z M22,11.1972656l-4,2.0953369V8.4215698l4-2.0953979V11.1972656z'
+        fill='#303C42'
+      />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+      <g />
+    </svg>
+  )
+}
+
+function OfficialWebsiteIcon() {
+  return (
+    <svg
+      height='20'
+      viewBox='0 0 24 24'
+      width='20'
+      class='fill-current'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M4.22182541,19.7781746 C3.29761276,18.8539619 3.03246659,17.4441845 3.32230899,15.5944173 C1.80937652,14.4913839 1,13.3070341 1,12 C1,10.6929659 1.80937652,9.50861611 3.32230899,8.40558269 C3.03246659,6.55581547 3.29761276,5.14603806 4.22182541,4.22182541 C5.14603806,3.29761276 6.55581547,3.03246659 8.40558269,3.32230899 C9.50861611,1.80937652 10.6929659,1 12,1 C13.3070341,1 14.4913839,1.80937652 15.5944173,3.32230899 C17.4441845,3.03246659 18.8539619,3.29761276 19.7781746,4.22182541 C20.7023872,5.14603806 20.9675334,6.55581547 20.677691,8.40558269 C22.1906235,9.50861611 23,10.6929659 23,12 C23,13.3070341 22.1906235,14.4913839 20.677691,15.5944173 C20.9675334,17.4441845 20.7023872,18.8539619 19.7781746,19.7781746 C18.8539619,20.7023872 17.4441845,20.9675334 15.5944173,20.677691 C14.4913839,22.1906235 13.3070341,23 12,23 C10.6929659,23 9.50861611,22.1906235 8.40558269,20.677691 C6.55581547,20.9675334 5.14603806,20.7023872 4.22182541,19.7781746 Z M8.65258332,18.5979847 C9.05851175,18.5110507 9.47593822,18.6839544 9.70150129,19.0324608 C10.582262,20.3932808 11.3676332,21 12,21 C12.6323668,21 13.417738,20.3932808 14.2984987,19.0324608 C14.5240618,18.6839544 14.9414883,18.5110507 15.3474167,18.5979847 C16.9324536,18.9374379 17.9168102,18.8111119 18.363961,18.363961 C18.8111119,17.9168102 18.9374379,16.9324536 18.5979847,15.3474167 C18.5110507,14.9414883 18.6839544,14.5240618 19.0324608,14.2984987 C20.3932808,13.417738 21,12.6323668 21,12 C21,11.3676332 20.3932808,10.582262 19.0324608,9.70150129 C18.6839544,9.47593822 18.5110507,9.05851175 18.5979847,8.65258332 C18.9374379,7.06754643 18.8111119,6.08318982 18.363961,5.63603897 C17.9168102,5.18888812 16.9324536,5.06256208 15.3474167,5.40201528 C14.9414883,5.48894934 14.5240618,5.31604564 14.2984987,4.96753923 C13.417738,3.60671924 12.6323668,3 12,3 C11.3676332,3 10.582262,3.60671924 9.70150129,4.96753923 C9.47593822,5.31604564 9.05851175,5.48894934 8.65258332,5.40201528 C7.06754643,5.06256208 6.08318982,5.18888812 5.63603897,5.63603897 C5.18888812,6.08318982 5.06256208,7.06754643 5.40201528,8.65258332 C5.48894934,9.05851175 5.31604564,9.47593822 4.96753923,9.70150129 C3.60671924,10.582262 3,11.3676332 3,12 C3,12.6323668 3.60671924,13.417738 4.96753923,14.2984987 C5.31604564,14.5240618 5.48894934,14.9414883 5.40201528,15.3474167 C5.06256208,16.9324536 5.18888812,17.9168102 5.63603897,18.363961 C6.08318982,18.8111119 7.06754643,18.9374379 8.65258332,18.5979847 Z M11,12.5857864 L15.2928932,8.29289322 L16.7071068,9.70710678 L11,15.4142136 L7.29289322,11.7071068 L8.70710678,10.2928932 L11,12.5857864 Z'
+        fill-rule='evenodd'
+      />
+    </svg>
+  )
+}
+
+function ExternalLinkBadge({
+  type = 'demo',
+  href,
+  lang = 'en'
+}: {
+  type: 'demo' | 'official' | 'repository'
+  href: string
+  lang?: 'en' | 'es'
+}) {
+  let displayedText
+  if (type === 'demo') {
+    displayedText = 'Preview'
+  } else if (type === 'official') {
+    if (lang === 'en') displayedText = 'Website'
+    else displayedText = 'Sitio Web'
+  } else if (lang === 'en') displayedText = 'Repository'
+  else displayedText = 'Repositorio'
+  const Icon =
+    type === 'demo'
+      ? DemoIcon
+      : type === 'official'
+        ? OfficialWebsiteIcon
+        : GitHubIcon
+  return (
+    <a
+      href={href}
+      className='font-secondary text-sm xl:text-base flex gap-1 items-center justify-center border px-2 py-1 rounded dark:bg-slate-950 bg-slate-300 hover:scale-105 transition-transform ease-in-out duration-300 '
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <Icon />
+      <span>{displayedText}</span>
+    </a>
+  )
+}
+
 function ProjectCard({
   project,
   lang,
@@ -182,34 +289,13 @@ function ProjectCard({
         )}
         <div className='flex gap-2'>
           {project?.repository && (
-            <a
-              href={project.repository}
-              className='border-b-2 font-secondary text-sm xl:text-base'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              {lang === 'es' ? 'Repositorio' : 'Repository'}
-            </a>
+            <ExternalLinkBadge type='repository' href={project.repository} />
           )}
           {project?.demo && (
-            <a
-              href={project.demo}
-              className='border-b-2 font-secondary text-sm xl:text-base'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              {lang === 'es' ? 'Demo' : 'Preview'}
-            </a>
+            <ExternalLinkBadge type='demo' href={project.demo} />
           )}
           {project?.website && (
-            <a
-              href={project.website}
-              className='border-b-2 font-secondary text-sm xl:text-base'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              {lang === 'es' ? 'Sitio web' : 'Website'}
-            </a>
+            <ExternalLinkBadge type='official' href={project.website} />
           )}
         </div>
       </div>
diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
index 5036466..9a829b5 100644
--- a/src/components/featured-and-projects/resources.tsx
+++ b/src/components/featured-and-projects/resources.tsx
@@ -85,7 +85,9 @@ export default function Resources({ n = 3 }: ResourceProps) {
         const resource = shuffleData.at((i + index.value) % data.length)
         return (
           <article
-            class={`col-span-2 row-span-4 rounded-[10px] shadow-[0_0_0.1rem_rgb(8_51_68)] flex xl:flex-col gap-5 items-center justify-center font-bold font-primary w-full xl:h-full h-16 transition-all text-cyan-950 dark:text-cyan-300 bg-slate-300/70 dark:bg-slate-900/90 text-base xl:text-2xl px-2 py-1 relative ${i === 1 ? 'px-5' : ''}`}
+            class={`col-span-2 row-span-4 rounded-[10px] shadow-[0_0_0.1rem_rgb(8_51_68)] flex xl:flex-col gap-5 items-center justify-center font-bold font-primary w-full xl:h-full h-16 transition-all text-cyan-950 dark:text-cyan-300 bg-slate-300/70 dark:bg-slate-900/90 text-base xl:text-2xl px-2 py-1 relative ${
+              i === 1 ? 'px-5' : ''
+            }`}
             key={i}
             id={
               i == 2
diff --git a/src/components/head/dev-scripts.astro b/src/components/head/dev-scripts.astro
index e104ce4..fb31f33 100644
--- a/src/components/head/dev-scripts.astro
+++ b/src/components/head/dev-scripts.astro
@@ -9,13 +9,15 @@ const { lang = 'en' } = Astro.props
 import { pwaInfo } from 'virtual:pwa-info'
 ---
 
+<!-- Theme & Language -->
 <script defer is:inline define:vars={{ lang }}>
   // Theme switch
   function setTheme() {
     const darkIcon = document.getElementById('theme-toggle-dark-icon')
     const lightIcon = document.getElementById('theme-toggle-light-icon')
 
-    // Cambia los iconos dentro del botón en función de la configuración anterior
+    // Cambia los iconos dentro del botón en
+    // función de la configuración anterior
     if (
       localStorage.getItem('color-theme') === 'dark' ||
       !('color-theme' in localStorage)
@@ -52,7 +54,8 @@ import { pwaInfo } from 'virtual:pwa-info'
           localStorage.setItem('color-theme', 'light')
         }
 
-        // se comprueba si el sistema operativo tiene configurado el tema oscuro
+        // se comprueba si el sistema operativo
+        // tiene preferencias de color
       } else if (document.documentElement?.classList?.contains('dark')) {
         document.documentElement?.classList?.remove('dark')
         document.documentElement?.classList?.add('light')
@@ -69,24 +72,17 @@ import { pwaInfo } from 'virtual:pwa-info'
   document.addEventListener('astro:after-preparation', setTheme)
   document.addEventListener('astro:after-swap', setTheme)
 
-  // Home & Random Place buttons
-  const setHomeRandomButton = () => {
+  // Home button
+  const prepareHomeButton = () => {
     const homeButton = document.getElementById('home-button')
-    const randomPlaceButton = document.getElementById('random-place-button')
 
     // Show home button only if not in home
-    // Otherwise show random place button
     if (
       window.location.pathname === '/' ||
       window.location.pathname === '/es'
     ) {
-      homeButton?.classList?.add('hidden')
-      randomPlaceButton?.classList?.remove('hidden')
-    } else {
-      homeButton?.classList?.remove('hidden')
-      randomPlaceButton?.classList?.add('hidden')
+      homeButton.classList.toggle('hidden')
     }
-
     // Add click event to home button
     homeButton?.addEventListener('click', () => {
       // window.location.href = '/'
@@ -94,18 +90,30 @@ import { pwaInfo } from 'virtual:pwa-info'
         ? (window.location.href = '/es')
         : (window.location.href = '/')
     })
-
-    randomPlaceButton?.addEventListener('click', () => {
-      const places = ['/blog', '/tech-stack', '/featured']
-      window.location.href = places[Math.floor(Math.random() * places.length)]
-    })
   }
 
-  setHomeRandomButton()
-  document.addEventListener('astro:after-preparation', setHomeRandomButton)
-  document.addEventListener('astro:after-swap', setHomeRandomButton)
+  prepareHomeButton()
+  document.addEventListener('astro:after-preparation', prepareHomeButton)
+  document.addEventListener('astro:after-swap', prepareHomeButton)
 </script>
 
+<!-- Cards hover effect -->
+<script>
+  window.onmousemove = (e) => {
+    for (const card of document.getElementsByClassName(
+      'card'
+    ) as any as HTMLElement[]) {
+      const rect = card.getBoundingClientRect(),
+        x = e.clientX - rect.left,
+        y = e.clientY - rect.top
+
+      card.style.setProperty('--mouse-x', `${x}px`)
+      card.style.setProperty('--mouse-y', `${y}px`)
+    }
+  }
+</script>
+
+<!-- Toast event listener -->
 <script>
   import { toast } from 'wc-toast'
   const copyMailButton = document.getElementById('copyMailButton')
@@ -119,6 +127,8 @@ import { pwaInfo } from 'virtual:pwa-info'
     })
   })
 </script>
+
+<!-- PWA Registration -->
 <script src='/src/pwa.ts'></script>
 {
   // eslint-disable-next-line
diff --git a/src/components/head/scripts.astro b/src/components/head/scripts.astro
index c65f42a..557f7bc 100644
--- a/src/components/head/scripts.astro
+++ b/src/components/head/scripts.astro
@@ -12,8 +12,19 @@ const blob = rawBlobs.at(index)!
 
 // @ts-ignore
 import { pwaInfo } from 'virtual:pwa-info'
+
+const url = Astro.url
+const isInDeno = url.toString().includes('.deno.dev')
 ---
 
+<!-- Redirect to jamerrq.dev if in deno -->
+<script is:inline define:vars={{ isInDeno }}>
+  if (isInDeno) {
+    window.location.href = 'https://jamerrq.dev'
+  }
+</script>
+
+<!-- Theme & Language -->
 <script defer is:inline define:vars={{ lang, blob }}>
   console.log(blob)
   // Theme switch
@@ -21,7 +32,8 @@ import { pwaInfo } from 'virtual:pwa-info'
     const darkIcon = document.getElementById('theme-toggle-dark-icon')
     const lightIcon = document.getElementById('theme-toggle-light-icon')
 
-    // Cambia los iconos dentro del botón en función de la configuración anterior
+    // Cambia los iconos dentro del botón en
+    // función de la configuración anterior
     if (
       localStorage.getItem('color-theme') === 'dark' ||
       !('color-theme' in localStorage)
@@ -58,7 +70,8 @@ import { pwaInfo } from 'virtual:pwa-info'
           localStorage.setItem('color-theme', 'light')
         }
 
-        // se comprueba si el sistema operativo tiene configurado el tema oscuro
+        // se comprueba si el sistema operativo
+        // tiene preferencias de color
       } else if (document.documentElement?.classList?.contains('dark')) {
         document.documentElement?.classList?.remove('dark')
         document.documentElement?.classList?.add('light')
@@ -75,24 +88,17 @@ import { pwaInfo } from 'virtual:pwa-info'
   document.addEventListener('astro:after-preparation', setTheme)
   document.addEventListener('astro:after-swap', setTheme)
 
-  // Home & Random Place buttons
-  const setHomeRandomButton = () => {
+  // Home button
+  const prepareHomeButton = () => {
     const homeButton = document.getElementById('home-button')
-    const randomPlaceButton = document.getElementById('random-place-button')
 
     // Show home button only if not in home
-    // Otherwise show random place button
     if (
       window.location.pathname === '/' ||
       window.location.pathname === '/es'
     ) {
-      homeButton?.classList?.add('hidden')
-      randomPlaceButton?.classList?.remove('hidden')
-    } else {
-      homeButton?.classList?.remove('hidden')
-      randomPlaceButton?.classList?.add('hidden')
+      homeButton.classList.toggle('hidden')
     }
-
     // Add click event to home button
     homeButton?.addEventListener('click', () => {
       // window.location.href = '/'
@@ -100,18 +106,30 @@ import { pwaInfo } from 'virtual:pwa-info'
         ? (window.location.href = '/es')
         : (window.location.href = '/')
     })
-
-    randomPlaceButton?.addEventListener('click', () => {
-      const places = ['/blog', '/tech-stack', '/featured']
-      window.location.href = places[Math.floor(Math.random() * places.length)]
-    })
   }
 
-  setHomeRandomButton()
-  document.addEventListener('astro:after-preparation', setHomeRandomButton)
-  document.addEventListener('astro:after-swap', setHomeRandomButton)
+  prepareHomeButton()
+  document.addEventListener('astro:after-preparation', prepareHomeButton)
+  document.addEventListener('astro:after-swap', prepareHomeButton)
 </script>
 
+<!-- Cards hover effect -->
+<script>
+  window.onmousemove = (e) => {
+    for (const card of document.getElementsByClassName(
+      'card'
+    ) as any as HTMLElement[]) {
+      const rect = card.getBoundingClientRect(),
+        x = e.clientX - rect.left,
+        y = e.clientY - rect.top
+
+      card.style.setProperty('--mouse-x', `${x}px`)
+      card.style.setProperty('--mouse-y', `${y}px`)
+    }
+  }
+</script>
+
+<!-- Toast event listener -->
 <script>
   import { toast } from 'wc-toast'
   const copyMailButton = document.getElementById('copyMailButton')
@@ -125,6 +143,8 @@ import { pwaInfo } from 'virtual:pwa-info'
     })
   })
 </script>
+
+<!-- PWA Registration -->
 <script src='/src/pwa.ts'></script>
 {
   // eslint-disable-next-line
diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro
index 579cd19..5baea9a 100644
--- a/src/components/main/buttons.astro
+++ b/src/components/main/buttons.astro
@@ -87,7 +87,7 @@ const SVGS_STYLES = [
     <span class='text-xs'>en/es</span>
   </a>
   <!-- HOME OR RANDOM PLACE -->
-  <button class={`${BUTTON_STYLES} hidden`} title='go home' id='home-button'>
+  <button class={`${BUTTON_STYLES} `} title='go home' id='home-button'>
     <Home class={SVGS_STYLES} />
     <span class='text-xs'>home</span>
   </button>
diff --git a/src/components/main/working-on.tsx b/src/components/main/working-on.tsx
index 9e3964e..d7878eb 100644
--- a/src/components/main/working-on.tsx
+++ b/src/components/main/working-on.tsx
@@ -57,7 +57,7 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
           alt={`snap for ${project?.title.en}`}
           width='960'
           height='720'
-          loading='lazy'
+          loading='eager'
           class='aspect-[4/3] w-32'
         />
         <aside class='flex flex-col xl:flex-row text-sm gap-4 items-center justify-around'>
diff --git a/src/data/blog.json b/src/data/blog.json
index 46ef9ed..a66626b 100644
--- a/src/data/blog.json
+++ b/src/data/blog.json
@@ -6,7 +6,7 @@
       "titleEs": "Acerca de esta web",
       "href": "blog/building-this-website",
       "hrefEs": "blog/acerca-de-esta-web",
-      "readTimeMins": "6",
+      "readTimeMins": "12",
       "tags": [
         "astro",
         "tailwindcss",
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 03da4dc..6b50cc0 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -37,21 +37,6 @@ const dev = import.meta.env.DEV
     <main class='min-h-[100dvh] grid place-content-center'>
       <slot />
     </main>
-    <script>
-      // Card hover effect
-      window.onmousemove = (e) => {
-        for (const card of document.getElementsByClassName(
-          'card'
-        ) as any as HTMLElement[]) {
-          const rect = card.getBoundingClientRect(),
-            x = e.clientX - rect.left,
-            y = e.clientY - rect.top
-
-          card.style.setProperty('--mouse-x', `${x}px`)
-          card.style.setProperty('--mouse-y', `${y}px`)
-        }
-      }
-    </script>
     {dev ? <DevScripts /> : <Scripts />}
     <ReloadPrompt />
   </body>
diff --git a/src/pages/blog/building-this-website.mdx b/src/pages/blog/building-this-website.mdx
index b803f7c..86c4fc5 100644
--- a/src/pages/blog/building-this-website.mdx
+++ b/src/pages/blog/building-this-website.mdx
@@ -32,7 +32,7 @@ Want to build your own portfolio or personal website? Here are some things you c
 
 - Server Side Rendering with Astro and Deno
 - Deploy your website for free with <a href="https://deno.com/deploy" target="_blank">Deno Deploy</a>
-- Astro View Transitions
+- <a href="#explore-this-app-with-astros-view-transitions">Astro View Transitions</a>
 - Preact Integration with Astro
 - How to use signals with Preact
 - CSS Grid & Flexbox Layouts
@@ -124,6 +124,80 @@ target="_blank" rel="noopener noreferrer" class="flex flex-col gap-3">
 
 <Title demo />
 
+### Explore this app with Astro's view transitions
+
+One of the most interesting features of Astro is the ability to implement
+transitions between views in a simple and elegant way. This allows you to create
+more attractive and dynamic user experiences, improving navigation and
+interaction with the web.
+
+In this website, I have used Astro's view transitions to create entry and exit
+effects when changing pages. This gives a special touch to the navigation and
+improves the user experience when exploring the content.
+
+Here is a demonstration video so you can see how the view transitions work on
+this website:
+
+<video controls autoplay loop muted playsinline>
+  <source src="/video/view-transitions-demo.webm" type="video/webm" />
+  Your browser does not support the video tag.
+</video>
+
+To implement view transitions in your Astro project, you just need to import
+them into your main layout, and then include them within the `<head>` component
+of your `layout.astro` file:
+
+```astro
+---
+import { ViewTransitions } from 'astro:transitions'
+---
+<head>
+  <ViewTransitions />
+</head>
+```
+
+With this, you will have the view transitions activated in your Astro project.
+Now you just have to add the transitions between elements of your web to give it
+a special touch to the navigation. How is it done? I'll give you an example 👇
+
+This is the `blog-about.astro` component that holds the title "Blog" when you
+enter the /blog subpage
+
+```astro
+<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>
+```
+
+And this would be the component that is part of the main bento of the web, i.e.
+`blog.astro`
+
+```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>
+```
+
+If you observe, both components have the property `transition:name='blog'` that indicates Astro to apply the transition between these two elements when navigating between them. This is how simple it is to implement view transitions in your Astro project. If you want to know more about how view transitions work, you can check the <a href="https://docs.astro.build/en/guides/view-transitions/" target="_blank" rel="noopener noreferrer">official Astro documentation</a>.
+
 ## Some References
 
 - <a
diff --git a/src/pages/es/blog/acerca-de-esta-web.mdx b/src/pages/es/blog/acerca-de-esta-web.mdx
index d16b2c5..33cd1bc 100644
--- a/src/pages/es/blog/acerca-de-esta-web.mdx
+++ b/src/pages/es/blog/acerca-de-esta-web.mdx
@@ -41,7 +41,7 @@ sugerencia. Eres totalmente bienvenido 😺
 - Renderizado del lado del servidor con Astro y Deno
 - Despliegue de tu web gratis con <a href="https://deno.com/deploy" target="_blank">Deno
   Deploy</a>
-- View Transitions con Astro y CSS
+- <a href="#explora-esta-app-con-las-view-transitions-de-astro">View Transitions con Astro</a>
 - Integración de Preact con Astro
 - Cómo usar señales con Preact
 - Diseños con CSS Grid y Flexbox
@@ -160,6 +160,83 @@ target="_blank" rel="noopener noreferrer" class="flex flex-col gap-3">
 
 <Title demo />
 
+### 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:
+
+<video controls autoplay loop muted playsinline>
+  <source src="/video/view-transitions-demo.webm" type="video/webm" />
+  Your browser does not support the video tag.
+</video>
+
+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`:
+
+```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
+```astro
+<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`
+
+```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 <a href="https://docs.astro.build/en/guides/view-transitions/" target="_blank" rel="noopener noreferrer">documentación oficial de Astro</a>.
+
 ## Referencias
 
 - <a