sunday funday

readme.md

@@ -13,8 +13,8 @@ CSS](https://img.shields.io/badge/-Tailwind%20CSS-lightblue?style=flat-square&lo
 
 ## Previews
 
-![Desktop](./lib/snaps/preview.png)
-![Mobile](./lib/snaps/preview-mobile.png)
+![Desktop](./lib/snaps/preview.webp)
+![Mobile](./lib/snaps/preview_mobile.webp)
 
 ### Tooling 🛠️
 

src/components/badges/badge.astro

@@ -15,26 +15,26 @@ const { props } = Astro
 
     border-image-source: conic-gradient(
       from var(--a),
-      yellowgreen,
-      green,
-      lightgreen
+      #8decb4,
+      #41b06e,
+      #141e46
     );
 
     border-radius: 5px;
 
     border-image-slice: 0.9 1 1 1;
     border-image-width: 0.15rem;
 
-    animation: move 1s infinite var(--timing);
+    animation: move 5s infinite var(--timing);
+  }
 
-    &.fill {
-      border-image-slice: 1 1 1 1 fill;
-    }
+  .badge .fill {
+    border-image-slice: 1 1 1 1 fill;
+  }
 
-    &:active {
-      transform: translate(5px, 5px);
-      box-shadow: none;
-    }
+  .badge:active {
+    transform: translate(5px, 5px);
+    box-shadow: none;
   }
 
   @keyframes move {
@@ -52,12 +52,10 @@ const { props } = Astro
     initial-value: 0deg;
   }
 </style>
-<div
-  class=`xl:absolute top-2 right-2 animate-slide-in-top rounded ${props.class}`
->
+<div class=`animate-slide-in-top rounded ${props.class}`>
   <span class='relative flex overflow-hidden rounded shadow shadow-black'>
     <div
-      class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 bg-emerald-500 backdrop-blur-3xl shadow shadow-black dark:shadow-gray-300 badge'
+      class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 dark:text-emerald-100 backdrop-blur-3xl shadow shadow-black dark:shadow-gray-300 badge'
     >
       <slot />
     </div>

src/components/badges/email-badge.astro

@@ -0,0 +1,56 @@
+---
+interface Props {
+  lang?: string
+}
+const { lang = 'en' }: Props = Astro.props
+import Badge from './badge.astro'
+---
+
+<Badge
+  class='animate-fade-in group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md font-medium text-neutral-200 duration-500'
+>
+  <div
+    class='translate-x-0 opacity-100 transition group-hover:-translate-x-[150%] group-hover:opacity-0 flex'
+  >
+    [email protected]
+    <svg
+      class='w-4 h-4 ml-2 text-slate-900 group'
+      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>
+  </div>
+  <button
+    class='absolute translate-x-[150%] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100 flex items-center gap-2'
+    id='copyMailButton'
+  >
+    {lang === 'en' ? 'copy this email' : 'copia este correo'}
+    <svg
+      width='15'
+      height='15'
+      viewBox='0 0 15 15'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      class='h-6 w-6'
+    >
+      <path
+        d='M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z'
+        fill='currentColor'
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+      >
+      </path>
+    </svg>
+  </button>
+</Badge>

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

@@ -12,7 +12,7 @@ import Badge from './badge.astro'
   rel='noopener noreferrer'
 >
   <Badge
-    class='animate-fade-in group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md font-medium text-neutral-200 duration-500'
+    class='animate-fade-in group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md font-medium text-neutral-200 duration-500 top-2 right-2 xl:absolute'
   >
     <div
       class='translate-x-0 opacity-100 transition group-hover:-translate-x-[150%] group-hover:opacity-0 flex'
@@ -37,7 +37,7 @@ import Badge from './badge.astro'
       </svg>
     </div>
     <div
-      class='absolute translate-x-[150%] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100 flex items-center text-emerald-950 gap-2'
+      class='absolute translate-x-[150%] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100 flex items-center gap-2'
     >
       {lang === 'en' ? "Let's connect!" : 'Conecta conmigo!'}
       <svg

src/components/boxes/hbox.astro

@@ -17,7 +17,6 @@ const { href, title } = props
   href={href}
   title={title}
   data-animated={props.animated}
-  id='card'
   class=`card bg-slate-400/90 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full  text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
 >
   <slot />

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

@@ -22,9 +22,7 @@ const { lang = 'en' }: Props = Astro.props
     }
   </style>
   <header class='flex flex-col xl:flex-row gap-1 items-center'>
-    <h1
-      class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl uppercase'
-    >
+    <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl'>
       {lang === 'en' ? 'Get To Know Me' : 'Conóceme'}
     </h1>
     <OpenToWork lang={lang} />

src/components/main/background.astro

@@ -1,17 +1,24 @@
+---
+const isInBlog = Astro.url.pathname.includes('/blog/')
+---
+
 <style>
-  .background {
-    /* background-image: url('/pizarra.webp'); */
-    background-color: #222831;
-    min-height: 100%;
-    width: 100vw;
-    background-position: center;
-    background-repeat: repeat;
+  .noise::before {
     position: fixed;
     top: 0;
     left: 0;
+    width: 100vw;
+    height: 100vh;
+    content: '';
+    opacity: 0.05;
     z-index: -50;
-    inset: 0;
+    pointer-events: none;
+    background: url('/img/resized_noise.gif');
   }
 </style>
-
-<div class='background'></div>
+<div
+  data-blog={isInBlog}
+  class='fixed top-0 -z-50 h-[100dvh] w-[100dvw] data-[blog]:bg-cover data-[blog]:bg-center bg-[#222831] data-[blog]:bg-[url("/pizarra.webp")] data-[blog]:bg-opacity-5'
+>
+  <div class='noise'></div>
+</div>

src/components/main/socials.astro

@@ -1,7 +1,6 @@
 ---
 import { siMaildotru } from 'simple-icons'
 
-import Copy from '@components/icons/copy.astro'
 import GenericIcon from '@components/icons/icon.astro'
 
 interface Props {
@@ -11,6 +10,7 @@ interface Props {
 const { lang }: Props = Astro.props
 
 import Box from '@components/boxes/box.astro'
+import EmailBadge from '@components/badges/email-badge.astro'
 
 import getIconsFn from '@data/socials.ts'
 const socials = getIconsFn(lang)
@@ -24,18 +24,7 @@ const socials = getIconsFn(lang)
     <p class='font-semibold text-3xl xl:text-4xl'>Contact Links</p>
     <GenericIcon svg={siMaildotru.svg} />
   </header>
-  <div class='flex h-fit w-full items-center justify-center gap-2'>
-    <span
-      class='font-bold font-secondary 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>
-    <button id='copyMailButton' aria-label='copy mail button' title='copy mail'>
-      <Copy
-        class='w-8 h-8 dark:bg-emerald-300 bg-slate-900 fill-slate-300 dark:fill-slate-950 px-2 py-1 rounded cursor-pointer hover:scale-110 transition-all shadow-sm shadow-black'
-      />
-    </button>
-  </div>
+  <EmailBadge lang={lang} />
   <div class='flex justify-around gap-4 w-[90%]'>
     {
       socials.map((s) => (

src/components/main/title.astro

@@ -22,20 +22,20 @@ const { lang = 'en' }: Props = Astro.props
   }
 </style>
 <div
-  class='bg-slate-500/70 dark:bg-slate-900/95 row-span-2 xl:col-span-2 title text-emerald-400 p-2 rounded w-full h-full flex items-center flex-row animate-blurred-fade-in relative card'
+  class='bg-slate-400/90 dark:bg-slate-900/95 row-span-2 xl:col-span-2 title dark:text-emerald-400 text-emerald-900 p-2 rounded w-full h-full flex items-center flex-row animate-blurred-fade-in relative card'
 >
   <div class='flex flex-col gap-1 animate-fade-in z-10'>
     <a href={lang !== 'en' ? '/' : 'es'}>
       <p
         class='font-primary font-semibold text-2xl xl:text-4xl px-2 py-1 rounded'
       >
-        @jamerrq.dev
+        Jamer José
       </p>
     </a>
     <span
       class='block font-secondary uppercase text-sm rounded w-fit mx-auto px-1 py-0.5 text-center'
     >
-      Backend Dev
+      Jr Backend Dev
     </span>
   </div>
   <div

src/components/main/working-on.astro

@@ -64,7 +64,11 @@ import ThreeDots from '@components/loaders/ThreeDots.astro'
       rel='noopener noreferrer'
       class='text-emerald-500 dark:text-emerald-300 bg-gray-600 px-2 py-1 rounded dark:bg-slate-900/80 hover:bg-gray-700 dark:hover:bg-slate-900/70 transition-colors'
     >
-      {lang === 'en' ? 'More info' : 'Más información'}
+      {
+        lang === 'en'
+          ? 'More info at holamundo.day/#speakers'
+          : 'Más información en holamundo.day/#speakers'
+      }
     </a>
   </span>
   <ThreeDots />

src/pages/board.astro

@@ -69,84 +69,24 @@ import Page1 from '@slides/oss/page1.astro'
           0 0;
       }
     }
-
-    :root {
-      --bg-color: #020617;
-      --card-color: #1e293b;
-    }
-
-    .card {
-      background-color: rgba(255, 255, 255, 0.1);
-      border-radius: 10px;
-      cursor: pointer;
-      display: flex;
-      height: 260px;
-      flex-direction: column;
-      position: relative;
-      width: 300px;
-    }
-
-    .card:hover::before {
-      opacity: 1;
-    }
-
-    .card::before,
-    .card::after {
-      border-radius: inherit;
-      content: '';
-      height: 100%;
-      left: 0px;
-      opacity: 0;
-      position: absolute;
-      top: 0px;
-      transition: opacity 500ms;
-      width: 100%;
-    }
-
-    .card::before {
-      background: radial-gradient(
-        800px circle at var(--mouse-x) var(--mouse-y),
-        rgba(255, 255, 255, 0.06),
-        transparent 40%
-      );
-      z-index: 3;
-    }
-
-    .card::after {
-      background: radial-gradient(
-        600px circle at var(--mouse-x) var(--mouse-y),
-        rgba(255, 255, 255, 0.4),
-        transparent 40%
-      );
-      z-index: 1;
-    }
-
-    .card > .card-content {
-      background-color: var(--card-color);
-      border-radius: inherit;
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      inset: 1px;
-      padding: 10px;
-      position: absolute;
-      z-index: 2;
-    }
   </style>
   <body class='dark'>
-    <div class='background w-[100dvw] h-[100dvh] fixed top-0 left-0'></div>
+    <div
+      class='background w-[100dvw] h-[100dvh] fixed top-0 left-0 hidden'
+      id='board-background'
+    >
+    </div>
     <main class='w-[100dvw] h-[100dvh] grid place-content-center'>
-      <header class='data-[dev]:flex hidden'>
+      <header class='flex'>
         <h1
-          class='text-xl font-bold absolute top-0 left-0 bg-gray-800/80 text-white w-full text-center font-secondary'
+          class='text-xl font-bold absolute top-0 left-0 bg-gray-800/80 text-white w-full text-center font-secondary uppercase'
         >
           Board
         </h1>
       </header>
       <Page1 />
-
       <footer
-        class='absolute bottom-0 left-0 w-full h-10 data-[dev]:flex hidden'
+        class='absolute bottom-0 left-0 w-full flex opacity-0 hover:opacity-100 transition-opacity duration-200 ease-in-out'
       >
         <Buttons rounded={false} />
       </footer>

src/pwa.ts

@@ -40,7 +40,7 @@ window.addEventListener('load', () => {
     immediate: true,
     onOfflineReady() {
       pwaToastMessage.innerHTML = 'App ready to work offline'
-      showPwaToast(true)
+      // showPwaToast(true)
     },
     onNeedRefresh() {
       pwaToastMessage.innerHTML =