feat: styles & enhancement

jamerrq · May 30, 2024 · c74e6db · c74e6db
1 parent 097ab11
commit c74e6db
Show file tree

Hide file tree

Showing 13 changed files with 338 additions and 87 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git 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
diff --git 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
@@ -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
@@ -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,43 +72,48 @@ 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 = '/'
       lang === 'es'
         ? (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
@@ -14,14 +14,24 @@ const blob = rawBlobs.at(index)!
 import { pwaInfo } from 'virtual:pwa-info'
 ---
 
+<!-- Redirect to jamerrq.dev if in deno -->
+<script>
+  const isInDeno = window.location.pathname.includes('.deno.dev')
+  if (isInDeno) {
+    window.location.href = 'https://jamerrq.dev'
+  }
+</script>
+
+<!-- Theme & Language -->
 <script defer is:inline define:vars={{ lang, blob }}>
   console.log(blob)
   // 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)
@@ -58,7 +68,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,43 +86,48 @@ 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 = '/'
       lang === 'es'
         ? (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 +141,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
@@ -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>