feat: animated border bage

package.json

@@ -51,6 +51,7 @@
     "prettier": "^3.1.1",
     "prettier-config-standard": "^7.0.0",
     "prettier-plugin-astro": "^0.12.3",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "sass": "^1.69.7",
     "tailwindcss-debug-screens": "^2.2.1"
   }

src/components/badges/badge.astro

@@ -1,9 +1,55 @@
-<div class='xl:absolute top-2 right-2 animate-slide-in-top'>
-  <span
-    class='relative flex overflow-hidden rounded p-[1.25px] shadow shadow-black'
-  >
+<style>
+  .badge {
+    --timing: linear(0, 0.3, 0.75, 1);
+
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+
+    border-image-source: conic-gradient(
+      from var(--a),
+      yellowgreen,
+      green,
+      lightgreen
+    );
+
+    border-radius: 5px;
+
+    border-image-slice: 0.9 1 1 1;
+    border-image-width: 0.15rem;
+
+    animation: move 1s infinite var(--timing);
+
+    &.fill {
+      border-image-slice: 1 1 1 1 fill;
+    }
+
+    /* box-shadow: 5px 5px 0 #0006; */
+
+    &:active {
+      transform: translate(5px, 5px);
+      box-shadow: none;
+    }
+  }
+
+  @keyframes move {
+    from {
+      --a: 0deg;
+    }
+    to {
+      --a: 360deg;
+    }
+  }
+
+  @property --a {
+    syntax: '<angle>';
+    inherits: true;
+    initial-value: 0deg;
+  }
+</style>
+<div class='xl:absolute top-2 right-2 animate-slide-in-top rounded'>
+  <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'
+      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'
     >
       <slot />
     </div>

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

@@ -1,6 +1,7 @@
 ---
 import OpenToWork from '@components/badges/open-to-work.astro'
 import Box from '@components/boxes/box.astro'
+import Dice from '@icons/dice.astro'
 interface Props {
   lang: string
 }
@@ -62,5 +63,13 @@ const { lang = 'en' }: Props = Astro.props
         </p>
       </li>
     </ul>
+    <a
+      href='/games'
+      title='games section'
+      aria-label='games section'
+      class='animate-vertical-bounce animate-iteration-count-thrice animate-delay-500 hover:animate-iteration-count-infinite'
+    >
+      <Dice />
+    </a>
   </div>
 </Box>

src/components/main/title.astro

@@ -8,7 +8,7 @@ import BitwiseLiminal from '@movies/bitwise-liminal.astro'
 ---
 
 <div
-  class='row-span-2 xl:col-span-2 title bg-transparent text-emerald-400 p-2 rounded-sm w-full h-full flex items-center flex-row animate-blurred-fade-in relative'
+  class='row-span-2 xl:col-span-2 title bg-transparent text-emerald-400 p-2 rounded w-full h-full flex items-center flex-row animate-blurred-fade-in relative'
 >
   <div class='flex flex-col gap-1 animate-fade-in z-10'>
     <a href={lang !== 'en' ? '/' : 'es'}>
@@ -25,7 +25,7 @@ import BitwiseLiminal from '@movies/bitwise-liminal.astro'
     </span>
   </div>
   <div
-    class='fixed -z-10 top-0 left-0 origin-top-left w-full xl:flex place-content-center flex overflow-hidden h-full bg-opacity-10'
+    class='fixed -z-10 top-0 left-0 origin-top-left w-full xl:flex place-content-center flex overflow-hidden h-full bg-opacity-10 rounded'
     id='animation-container'
   >
     <BitwiseLiminal />

src/pages/board.astro

@@ -9,6 +9,56 @@ import Buttons from '@components/main/buttons.astro'
   <main class='flex flex-col w-[100dvw] h-[100dvh]'></main>
   <div class='absolute top-1 w-full mx-auto'>
     <Buttons />
+    <style>
+      button {
+        --timing: linear(0, 0.3, 0.75, 1);
+
+        font-family: Jost, sans-serif;
+        font-size: 1rem;
+
+        padding: 1rem 2rem;
+        background: none;
+        color: #fff;
+
+        border-image-source: conic-gradient(
+          from var(--a),
+          indigo,
+          purple,
+          hotpink
+        );
+        border-image-slice: 1 1 1 1;
+        border-image-width: 0.25rem;
+
+        animation: move 1s infinite var(--timing);
+
+        &.fill {
+          border-image-slice: 1 1 1 1 fill;
+        }
+
+        box-shadow: 5px 5px 0 #0006;
+
+        &:active {
+          transform: translate(5px, 5px);
+          box-shadow: none;
+        }
+      }
+
+      @keyframes move {
+        from {
+          --a: 0deg;
+        }
+        to {
+          --a: 360deg;
+        }
+      }
+
+      @property --a {
+        syntax: '<angle>';
+        inherits: true;
+        initial-value: 0deg;
+      }
+    </style>
+    <button>A</button>
   </div>
   <Footer />
 </Layout>

tailwind.config.ts

@@ -44,7 +44,8 @@ export default {
   },
   plugins: [
     require('tailwindcss-debug-screens'),
-    require('@midudev/tailwind-animations')
+    require('@midudev/tailwind-animations'),
+    'prettier-plugin-tailwindcss'
   ],
   safelist: [
     'fill-[#BC52EE]',

tsconfig.json

@@ -35,6 +35,9 @@
       ],
       "@media/*": [
         "src/media/*"
+      ],
+      "@icons/*": [
+        "src/components/icons/*"
       ]
     },
     "jsx": "preserve",