home: wip

static/style.css

@@ -131,6 +131,47 @@ table {
   border-spacing: 0;
 }
 
+/* Animations */
+
+@keyframes woopwoop {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(-2deg);
+  }
+
+  50% {
+    transform: translateY(-10px) rotate(2deg);
+  }
+}
+
+
+@keyframes woopwoopmove {
+  to {
+    background-position: 200% center;
+  }
+}
+
+@keyframes scanlines {
+  0% {
+    background-position: 0 50%;
+  }
+}
+
+@keyframes boing {
+
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
 
 :root {
 
@@ -146,7 +187,6 @@ table {
 }
 
 ::selection {
-
   text-shadow: 0px 0px 3px var(--darkerer-pink)
 }
 
@@ -202,12 +242,6 @@ crt {
   }
 }
 
-@keyframes scanlines {
-  0% {
-    background-position: 0 50%;
-  }
-}
-
 /* persistent-ui */
 persistent-ui {
   position: fixed;
@@ -358,14 +392,15 @@ home-content {
 
   boxes {
     display: flex;
-    width: 30%;
+    flex-wrap: wrap;
+    width: min(90svw, 800px);
     gap: 1rem;
 
     box {
       border-radius: 0.25rem;
       box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
       background-color: white;
-      padding: 4rem;
+      padding: 1rem;
 
       &#bigbox {
         flex: 1;
@@ -376,6 +411,43 @@ home-content {
       }
     }
   }
+
+  pronouns {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.15rem 0.55rem;
+    border-radius: 9999px;
+    background-color: var(--blue);
+    font-weight: 500;
+    font-size: 13px;
+    color: white;
+    white-space: nowrap;
+    line-height: 1.4;
+  }
+
+  darkerer-pink {
+    color: var(--darkerer-pink);
+  }
+
+  boing {
+    display: inline-block;
+    color: var(--darkerer-pink);
+    animation: boing 0.8s infinite;
+  }
+
+  shitty {
+    color: #753b00;
+  }
+
+  woopwoop span {
+    display: inline-block;
+    background: linear-gradient(90deg, var(--blue), var(--darker-pink), var(--darkerer-pink), var(--lavender), var(--light-blue), var(--light-pink), var(--pink));
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: woopwoop 1.2s ease-in-out infinite, woopwoopmove 2s linear infinite;
+  }
 }
 
 /* 404 */

templates/partials/home.html

@@ -5,25 +5,23 @@
   </welcome>
   <boxes>
     <box id="bigbox">
-      Thank you for visiting my website !
+      Thank you for visiting my <woopwoop>brand new</woopwoop> website !
       For now it's still a <darkerer-pink>work in progress</darkerer-pink> but I'm sure you will see
       changes if you come back from time to time :)
       <br /><br />
       My name is <darkerer-pink>Agahnim</darkerer-pink>
-      <pronouns className="ml-1 px-2 py-[1px] text-xs rounded-full bg-blue-ouga text-white font-semibold">she/her
+      <pronouns>she/her</pronouns>,
-      </pronouns>,
+      I'm a <darkerer-pink>developer</darkerer-pink> and <darkerer-pink>music producer</darkerer-pink> from
-      I'm a <darkerer-pink className="text-darkerer-pink-ouga">developer</darkerer-pink> and <darkerer-pink
+      <darkerer-pink>France</darkerer-pink> !
-        className="text-darkerer-pink-ouga">music producer</darkerer-pink> from <darkerer-pink
-        className="text-darkerer-pink-ouga">France</darkerer-pink> !
       <br /><br />
-      I created this website not just to <darkerer-pink className="text-darkerer-pink-ouga">improve</darkerer-pink> my
+      I created this website not just to <darkerer-pink>improve</darkerer-pink> my
       web development
-      skills, but also because it's <boing className="inline-block text-darkerer-pink-ouga animate-bounce">fun</boing>
+      skills, but also because it's <boing>fun</boing>
       to
       build a project like this. It's a small, personal space on the internet, away from the social climate, which is
-      getting <shitty className="text-red-700">worse and worse</shitty>
+      getting <shitty>worse and worse.</shitty>
       <br /><br />
-      This website is inspired by the <darkerer-pink className="text-darkerer-pink-ouga">vaporwave
+      This website is inspired by the <darkerer-pink>vaporwave
         aesthetic</darkerer-pink> and
       the old
       PCs I used to tinker with when I was a kid.
@@ -35,3 +33,12 @@
     </box>
   </boxes>
 </home-content>
+
+<!-- I know I know but I need it for this pretty rainbow flagish animation -->
+<script>
+  const el = document.querySelector('woopwoop');
+  const text = el.textContent;
+  el.innerHTML = text.split('').map((ch, i) =>
+    `<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>`
+  ).join('');
+</script>