layout and design inconsistency fix, new lora font

src/app.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
 @import "tailwindcss";
 @import "@catppuccin/tailwindcss/mocha.css";
 
@@ -19,6 +20,7 @@
 }
 
 @theme {
+  --font-custom: "Lora", serif;
   --animate-marquee: marquee 15s linear infinite;
   --animate-marquee2: marquee2 15s linear infinite;
   @keyframes marquee {
@@ -37,12 +39,16 @@
     0%, 100% { opacity: 0.15; }
     50% { opacity: 0.3; }
   }
+  @keyframes wave {
+    0%, 100% { transform: rotate(5deg); }
+    50% { transform: rotate(0deg); }
+  }
 }
 
 @layer base {
   * { @apply transition-all duration-300 ease-in-out; }
   html { @apply h-full scroll-smooth; }
-  body { @apply bg-ctp-crust text-ctp-text h-full; }
+  body { @apply bg-ctp-crust text-ctp-text h-full font-[Lora]; }
   h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
   h2 { @apply text-2xl md:text-3xl font-bold my-4; }
   h3 { @apply text-xl md:text-2xl font-bold my-4; }

src/lib/index.ts

@@ -48,8 +48,8 @@ export default {
     title: "satr14's site",
     quote: "sometimes you just gotta implement it yourself",
     name: "satr14",
-    roles: ["Web Dev", "Sys Admin", "Hobbyist", "Student"],
+    roles: ["Web Dev", "Sys Admin", "Hobbyist", "Student", "SWE?"],
-    description: "Welcome to my over-engineered corner of the Internet! I'm Satria, Im a self-taught hobbyist web developer and homelaber sysadmin from Indonesia. I've been programming since 2021 and spend my free time working on personal projects and experimenting with new technologies.",
+    description: "Welcome to my over-engineered corner of the Interwebs! I'm Satria, Im a self-taught hobbyist web developer and homelaber sysadmin from Indonesia. I've been programming since 2021 when I was 11. Spent my free time working on personal projects and experimenting with new technologies.",
     skills: ["Tailwind", "SvelteKit", "TypeScript", "Bun", "Linux", "Nginx", "Docker", "Git", "Bash", "Nix"],
     timezone: "Asia/Jakarta",
     location: "Indonesia",
@@ -72,7 +72,7 @@ export default {
         "Hack Club": {
             icon: "https://assets.hackclub.com/icon-square.png",
             role: "Former Event Organizer",
-            url: "https://hackclub.com/",
+            url: "https://daydream.hackclub.com/",
         },
     },
     socials: {

src/routes/+page.svelte

@@ -53,8 +53,8 @@
 
 <audio bind:this={audio} src="/hk-white-palace-ost.mp3" loop></audio>
 
-<a href="https://hackclub.com" target="_blank" class="z-50 fixed top-24 sm:top-12 md:top-4 -left-2 hover:left-0">
+<a href="https://hackclub.com" target="_blank" class="z-50 fixed top-24 sm:top-12 md:top-4 -left-12 hover:left-0 animate-[wave_1s_ease-in-out_infinite] [transform-origin:top_left]">
-  <img src="https://assets.hackclub.com/flag-orpheus-left.svg" alt="Hack Club Orpheus Flag" class="h-16">
+  <img src="https://assets.hackclub.com/flag-orpheus-left.svg" alt="Hack Club Orpheus Flag" class="h-20">
 </a>
 
 {#if showNotification}
@@ -125,14 +125,14 @@
     <div class="max-w-3xl mx-auto px-4 pt-2 sm:pt-4">
         <header>
             <nav class="overflow-hidden flex flex-col-reverse sm:flex-row justify-center sm:justify-between items-center sm:gap-4 text-lg max-w-full w-full px-4 text-nowrap">
-                <div class="flex justify-center gap-4 sm:gap-6">
+                <div class="flex justify-center gap-4 sm:gap-6 group">
                     {#each Object.entries(data.socials) as [name, url]}
                         <a href={url} target="_blank">
-                          <img src="https://cdn.simpleicons.org/{name}/cdd6f4" alt={name} class="h-6 sm:h-4 aspect-square" />
+                          <img src="https://cdn.simpleicons.org/{name}/cdd6f4" alt={name} class="h-6 sm:h-4 aspect-square hover:opacity-100 group-hover:opacity-80 opacity-70" />
                         </a>
                     {/each}
                 </div>
-                <a href="/#abt" id="abt" class="text-center no-underline text-xl font-extrabold" onclick={playAudio}>&uarr;</a>
+                <a href="/#abt" id="abt" class="text-center no-underline text-4xl leading-6 font-extrabold" onclick={playAudio}>&uarr;</a>
                 <p onclick={copyCurlCommand} class="text-center m-0 font-mono italic hidden md:block cursor-pointer hover:text-ctp-sky">curl https://satr14.my.id</p>
             </nav>
         </header>
@@ -151,23 +151,23 @@
                 </i></p>
                 <p class="flex flex-wrap gap-2 text-sm">
                     {#each data.skills as skill}
-                        <span class="bg-ctp-surface0 text-ctp-text px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</span>
+                        <span class="bg-ctp-base text-ctp-text px-2 py-1 rounded-lg no-underline text-xs sm:text-sm">{skill}</span>
                     {/each}
                 </p>
                 <div class="flex flex-row gap-1">
                     {#each Object.entries(data.links) as [title, url]}
                         <a href={url} target="_blank" class="flex items-center justify-between rounded-lg px-2 py-1 hover:bg-ctp-surface0 text-sm">
                             {title}
-                            <span class="text-ctp-overlay1 text-xs">↗</span>
+                            <span class="text-ctp-overlay1 text-2xl leading-0">&rarr;</span>
                         </a>
                     {/each}
                 </div>
                 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 py-4">
                     {#each Object.entries(data.communities) as [name, details]}
-                        <a href={details.url} target="_blank" class="flex items-center gap-3 rounded-lg p-2 hover:bg-ctp-surface0">
+                        <a href={details.url} target="_blank" class="flex items-center gap-3 rounded-lg py-2 px-3 hover:bg-ctp-surface0">
                             <img src={details.icon} alt={name} class="size-9 rounded-lg" loading="lazy" />
-                            <div>
+                            <div class="leading-2">
-                                <span class="text-sm block leading-tight text-ctp-text font-bold">{name}</span>
+                                <span class="text-sm block text-ctp-text font-bold">{name}</span>
                                 <span class="text-xs text-ctp-subtext0">{details.role}</span>
                             </div>
                         </a>
@@ -179,11 +179,11 @@
                     </a>
                 </div>
             </article>
-            <div class="opacity-75 hover:opacity-100 flex justify-center gap-6 pb-6 no-underline text-ctp-text">
+            <div class="opacity-75 hover:opacity-100 flex justify-center gap-2 pb-6 no-underline text-ctp-text">
-                <a href="https://nixwebr.ing/prev/satr14">&lt;prev</a>
+                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing/prev/satr14">&lt;prev</a>
-                <a href="https://nixwebr.ing">nix-webring</a>
+                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing">nix-webring</a>
-                <a href="https://nixwebr.ing/rand">&#9858;</a>
+                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing/rand">rand?</a>
-                <a href="https://nixwebr.ing/next/satr14">next&gt;</a>
+                <a class="hover:bg-ctp-surface0 px-2 rounded-lg pb-1" href="https://nixwebr.ing/next/satr14">next&gt;</a>
             </div>
         </main>
     </div>