feat: styles & enhancement

package.json

@@ -9,6 +9,7 @@
     "@astrojs/prism": "^3.0.0",
     "@astrojs/sitemap": "^3.1.1",
     "@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",

src/components/badges/badge.astro

@@ -0,0 +1,12 @@
+<div class='absolute top-1 right-1'>
+  <span class='relative flex overflow-hidden rounded-full p-[1.25px]'>
+    <span
+      class='absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]'
+    ></span>
+    <div
+      class='flex items-center h-full w-full cursor-pointer justify-center rounded-full dark:bg-slate-950/90 px-3 py-1 text-sm font-bold text-white backdrop-blur-3xl'
+    >
+      <slot />
+    </div>
+  </span>
+</div>

src/components/badges/open-to-work.astro

@@ -3,28 +3,26 @@ interface Props {
   lang?: string
 }
 const { lang = 'en' }: Props = Astro.props
+import Badge from './badge.astro'
 ---
 
-<div
-  class='flex items-center animate-slide-in-top animate-delay-200 absolute top-1 right-1'
->
-  <span class='relative inline-flex overflow-hidden rounded-full p-[1px]'>
-    <span
-      class='absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#51E4B8_0%,#21554E_50%,#51E4B8_100%)]'
-    ></span>
-    <div
-      class='inline-flex items-center justify-center w-full px-3 py-1 text-sm text-green-800 bg-green-100 rounded-full cursor-pointer dark:bg-gray-800 dark:text-white/80 backdrop-blur-3xl whitespace-nowrap'
-    >
-      <svg viewBox='0 0 512 512' class='w-2.5 h-2.5 me-1.5' fill='currentColor'
-        ><title></title><g data-name='1' id='_1'
-          ><path
-            d='M291.48,449.94A15,15,0,0,1,278,441.5L207.5,296.57,62.57,226.08a15,15,0,0,1,1-27.41L435.48,49.08A15,15,0,0,1,455,68.6L305.4,440.54A15,15,0,0,1,292,449.93Zm-185.38-236,119.18,58a15,15,0,0,1,6.93,6.93l58,119.18L414,90Z'
-          ></path><path
-            d='M218.72,300.35a15,15,0,0,1-10.6-25.61L430.47,52.39a15,15,0,1,1,21.21,21.22L229.33,296A15,15,0,0,1,218.72,300.35Z'
-          ></path></g
-        ></svg
-      >
-      {lang === 'en' ? 'Open to work' : 'Abierto a ofertas'}
-    </div>
-  </span>
-</div>
+<Badge>
+  <svg
+    class='w-4 h-4 me-2 text-gray-100 dark:text-white'
+    aria-hidden='true'
+    xmlns='http://www.w3.org/2000/svg'
+    width='12'
+    height='12'
+    fill='none'
+    viewBox='0 0 24 24'
+  >
+    <path
+      stroke='currentColor'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      stroke-width='2'
+      d='M8 7H5a2 2 0 0 0-2 2v4m5-6h8M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m0 0h3a2 2 0 0 1 2 2v4m0 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6m18 0s-4 2-9 2-9-2-9-2m9-2h.01'
+    ></path>
+  </svg>
+  {lang === 'en' ? 'Open To Work' : 'Disponible Para Ofertas'}
+</Badge>

src/components/main/about-me-card.astro

@@ -40,7 +40,7 @@ const ABOUT_ME_STYLES = [
     <OpenToWork lang={lang} />
   </header>
   <div
-    class='flex items-center p-3 justify-around w-full font-merriweather xl:text-base text-sm relative'
+    class='flex items-center p-3 justify-around w-full font-averia xl:text-lg text-sm relative'
   >
     <ul class='w-full text-center p-2 gap-1.5 flex flex-col'>
       <li>

src/components/main/footer.astro

@@ -1,6 +1,13 @@
 ---
 import Copyright from '@components/icons/copyright.astro'
-import { siAstro, siPreact, siTailwindcss, siMarkdown } from 'simple-icons'
+import {
+  siAstro,
+  siPreact,
+  siTailwindcss,
+  siMarkdown,
+  siMdx
+} from 'simple-icons'
+import { Image } from 'astro:assets'
 ---
 
 <style>
@@ -38,7 +45,7 @@ import { siAstro, siPreact, siTailwindcss, siMarkdown } from 'simple-icons'
     set:html={siTailwindcss.svg}
     fill={`#${siTailwindcss.hex}`}
   />
-  <svg class='w-6 h-6 inline' set:html={siMarkdown.svg} fill={`#fff`} />
+  <svg class='w-6 h-6 inline' set:html={siMdx.svg} fill={`#fff`} />
   <aside class=''>
     <a
       href='https://github.com/jamerrq'
@@ -55,10 +62,15 @@ import { siAstro, siPreact, siTailwindcss, siMarkdown } from 'simple-icons'
       href='https://librecounter.org/referer/show'
       target='_blank'
       rel='noreferrer'
+      aria-label='librecounter'
     >
-      <img
+      <Image
         class='w-2/3 hidden md:block lg:block xl:block'
         src='https://librecounter.org/oldStyle.svg'
+        alt='librecounter'
+        width='100'
+        height='30'
+        loading='eager'
       />
     </a>
   </aside>

src/components/main/project.astro

@@ -35,7 +35,7 @@ import { Image } from 'astro:assets'
   class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-sm [&>span]:text-sm [&>span]:xl:text-base'
 >
   <div
-    class='absolute bottom-0 right-2 font-rubik-doodle text-xs dark:bg-emerald-900 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'
+    class='absolute bottom-0 right-2 font-averia text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'
   >
     {project?.time}+ {lang === 'en' ? 'months' : 'meses'}
   </div>

src/components/main/socials.astro

@@ -73,7 +73,7 @@ const { lang }: Props = Astro.props
   </header>
   <div class='flex h-fit w-full items-center justify-center gap-2'>
     <span
-      class='font-bold text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-500 p-2 rounded shadow-sm shadow-black'
+      class='font-bold font-averia text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-500 p-2 rounded shadow-sm shadow-black'
     >
       [email protected]
     </span>
@@ -151,7 +151,7 @@ const { lang }: Props = Astro.props
   const copyMailButton = document.getElementById('copyMailButton')
   copyMailButton?.addEventListener('click', () => {
     navigator.clipboard.writeText('[email protected]')
-    toast('email shipped into your clipboard 🥳', {
+    toast('email shipped into your clipboard 📬', {
       duration: 2000,
       theme: {
         type: 'light'

src/components/main/tech-stack.astro

@@ -4,8 +4,6 @@ const TECH_STACK_STYLES: string = [
   'row-span-3',
   'bg-slate-300/80',
   'rounded-sm',
-  // 'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3)
-  // 'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]', // rgb(253, 230, 138)
   'flex',
   'flex-col',
   'p-2',
@@ -15,17 +13,14 @@ const TECH_STACK_STYLES: string = [
   'w-full',
   'h-full',
   'transition-all',
-  // 'border-2',
-  // 'border-amber-500',
   'text-amber-950',
   'dark:text-amber-300',
   'dark:bg-slate-900/95',
   'hover:scale-[1.02]',
   'hover:transition-all',
   'text-2xl'
-  // 'animate-blurred-fade-in',
-  // 'animate-delay-300'
 ].join(' ')
+
 import {
   siNodedotjs,
   siExpress,
@@ -40,7 +35,7 @@ import {
   siDocker,
   siUbuntu as siLinux
 } from 'simple-icons'
-// class='flex gap-2 [&>img]:rounded-sm bg-emerald-300 p-1 rounded-sm'
+
 const ICON_BLOCKS_STYLES = [
   'flex',
   'gap-2',
@@ -51,11 +46,11 @@ const ICON_BLOCKS_STYLES = [
 interface Props {
   lang?: string
 }
+
 const { lang = 'en' }: Props = Astro.props
 
 const SUBTITLE_STYLES = ['flex', 'flex-row', 'gap-2', 'text-2xl'].join(' ')
 
-// {SVGS_STYLES}
 const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
   ' '
 )
@@ -87,7 +82,7 @@ const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
       <svg
         class={SVGS_STYLES}
         set:html={siExpress.svg}
-        fill={`#${siSequelize.hex}`}
+        fill={`#${siDocker.hex}`}
       />
       <!-- PostgreSQL -->
       <svg
@@ -99,7 +94,7 @@ const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
       <svg
         class={SVGS_STYLES}
         set:html={siSequelize.svg}
-        fill={`#${siSequelize.hex}`}
+        fill={`#${siDocker.hex}`}
       />
     </div>
     <div class={SUBTITLE_STYLES}>
@@ -118,7 +113,7 @@ const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
       <svg
         class={SVGS_STYLES}
         set:html={siGnubash.svg}
-        fill={`#${siGnubash.hex}`}
+        fill={`#${siNodedotjs.hex}`}
       />
       <!-- Python -->
       <svg class={SVGS_STYLES} set:html={siPython.svg} fill='#ff9900' />
@@ -155,10 +150,10 @@ const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
   </div>
   <aside class='p-2 rounded-sm flex gap-2 justify-center items-center'>
     <p
-      class='font-bold text-sm xl:text-base font-merriweather dark:text-emerald-300 text-slate-900 border-b-2'
+      class='font-bold text-sm xl:text-base dark:text-emerald-300 text-slate-900 font-averia'
     >
-      <!-- Tap to see more -->
-      {lang === 'en' ? '❯ Tap to see more' : '❯ Toca para ver más'}
+      <span class='-mt-5'> ❯</span>
+      {lang === 'en' ? 'Tap to see more' : 'Toca para ver más'}
     </p>
   </aside>
 </a>

src/components/main/title.astro

@@ -14,24 +14,21 @@ const { lang = 'en' }: Props = Astro.props
         @jamerrq.dev
       </p>
     </a>
-    <span class='block font-merriweather text-sm text-center'>
-      {lang === 'en' ? 'Software Developer' : 'Desarrollador de Software'}
+    <span class='block font-averia text-sm text-center'>
+      {lang === 'en' ? 'Software Dev' : 'Desarrollador Backend'}
     </span>
   </div>
   <div
-    class='fixed -z-10 top-0 left-0 origin-top-left w-full flex place-content-center'
+    class='fixed -z-10 top-0 left-0 origin-top-left w-full xl:flex place-content-center hidden'
+    id='animation-container'
   >
-    <canvas
-      id='c'
-      class='grow'
-      style='display: flex; align-items: center; overflow: hidden;'
+    <!-- <canvas id='c' class='grow'
       ><svg
-        class='grow'
-        style=''
+        id='x'
         onload='setInterval("for(t+=.1,R=T=C=Math.cos,c.width=w=128,i=9986,V=t/9&3;Y=i--/w;c.getContext`2d`.fillRect(X,Y,(C(t/6)*T^V*i/1e4*T+t)%20?(R=T++,1):(T=9,19/R),5/Z))for(Z=5,X=i%w+4/R;0<(V*95+C(t/3)+Z*X/64-Z^Z|(60-Y)*Z/58)%13;Z+=.2);",t=9)'
       >
       </svg></canvas
-    >
+    > -->
   </div>
 </div>
 

src/components/main/working-on.astro

@@ -15,9 +15,6 @@ const EXPERIENCE_STYLES = [
   'font-rubik-doodle',
   'w-full',
   'h-full',
-  // 'border-2',
-  // 'dark:border-emerald-300',
-  // 'border-emerald-950',
   'dark:bg-slate-900/95',
   'dark:text-slate-200',
   'flex',
@@ -29,25 +26,9 @@ const EXPERIENCE_STYLES = [
   '[&>div>ul>li>a]:dark:bg-emerald-400',
   '[&>div>ul>li>a]:dark:text-emerald-950',
   '[&>div>ul>li>a]:text-slate-950'
-  // 'animate-blurred-fade-in',
-  // 'animate-delay-200'
 ].join(' ')
 
-import {
-  // siNodedotjs,
-  // siExpress,
-  // siPostgresql,
-  // siSequelize,
-  // siJsonwebtokens,
-  // siPostman,
-  // siReact,
-  // siRedux,
-  // siTailwindcss,
-  // siVercel,
-  // siVite,
-  // siAuth0,
-  siGitkraken
-} from 'simple-icons'
+import { siGitkraken } from 'simple-icons'
 
 interface Props {
   lang: string

src/layouts/layout.astro

@@ -5,8 +5,12 @@ interface Props {
 }
 
 const { title, lang = 'en' }: Props = Astro.props
+
+// Fonts
 import '@fontsource/merriweather'
 import '@fontsource/rubik-doodle-shadow'
+import '@fontsource/averia-serif-libre'
+
 import { ViewTransitions } from 'astro:transitions'
 import Background from '@components/main/background.astro'
 import SEO from '@components/head/seo.astro'
@@ -87,7 +91,7 @@ import { Image } from 'astro:assets'
         font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
       }
     </style>
-    <script defer define:vars={{ lang }}>
+    <script defer is:inline define:vars={{ lang }}>
       // Theme switch
       function setTheme() {
         const darkIcon = document.getElementById('theme-toggle-dark-icon')
@@ -184,7 +188,6 @@ import { Image } from 'astro:assets'
       document.addEventListener('astro:after-preparation', setHomeRandomButton)
       document.addEventListener('astro:after-swap', setHomeRandomButton)
     </script>
-    <script is:inline src='/prism.js'></script>
     <a
       href='https://librecounter.org/referer/show'
       target='_blank'
@@ -200,5 +203,17 @@ import { Image } from 'astro:assets'
         loading='eager'
       />
     </a>
+    <script is:inline defer>
+      // if screen is too small, don't render the animation
+      if (window.innerWidth > 1024) {
+        const x = document.createElement('canvas')
+        x.id = 'c'
+        x.setAttribute('class', 'grow')
+        x.innerHTML = `<svg id='x' onload='setInterval("for(t+=.1,R=T=C=Math.cos,c.width=w=128,i=9986,V=t/9&3;Y=i--/w;c.getContext\`2d\`.fillRect(X,Y,(C(t/6)*T^V*i/1e4*T+t)%20?(R=T++,1):(T=9,19/R),5/Z))for(Z=5,X=i%w+4/R;0<(V*95+C(t/3)+Z*X/64-Z^Z|(60-Y)*Z/58)%13;Z+=.2);",t=9)'></svg>`
+        document.addEventListener('DOMContentLoaded', () => {
+          document.getElementById('animation-container').appendChild(x)
+        })
+      }
+    </script>
   </body>
 </html>

src/movies/city-in-a-bottle.astro

@@ -0,0 +1,12 @@
+<div
+  class='w-full h-52 relative border-dashed hover:border rounded mx-auto self-center'
+>
+  <canvas
+    class=''
+    style='width:100%; z-index: -1; height: 250%;'
+    id='c'
+    onclick="setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)"
+  >
+  </canvas>
+  <span class='absolute z-10 top-1 right-3 text-xs'>click me</span>
+</div>