Nice skills section

Author: ReKylee

src/app.css

@@ -6,9 +6,13 @@
 }
 
 @import "tailwindcss";
-@plugin "@tailwindcss/typography";
+
 @import "@catppuccin/tailwindcss/mocha.css";
+@custom-variant dark (&:where(.frappe, .frappe *, .macchiato, .macchiato *, .mocha, .mocha *));
+
 @import "tailwindcss-animated";
+
+@plugin "@tailwindcss/typography";
 @theme {
   --font-sans: "JetBrains Mono", sans-serif;
   --font-hebrew: "Noto Sans Hebrew", sans-serif;
@@ -27,7 +31,6 @@ html {
 }
 
 main {
-  overflow-y: auto;
   -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
 }
 .skill-chip {
@@ -59,13 +62,24 @@ main {
 
 /* Position each controller in the pile */
 .controller-icon:nth-child(1) {
-  transform: rotateX(60deg) rotateZ(-30deg) translateZ(0px);
+  transform: rotateX(5deg) rotateZ(-10deg) translateZ(0px) translateX(-25px)
+    translateY(-10px);
+  z-index: 3;
 }
 .controller-icon:nth-child(2) {
-  transform: rotateX(60deg) rotateZ(-30deg) translateZ(5px);
+  transform: rotateX(5deg) rotateZ(0deg) translateZ(5px) translateX(0px)
+    translateY(10px);
+  z-index: 2;
 }
 .controller-icon:nth-child(3) {
-  transform: rotateX(60deg) rotateZ(-30deg) translateZ(10px);
+  transform: rotateX(5deg) rotateZ(10deg) translateZ(10px) translateX(25px)
+    translateY(-10px);
+  z-index: 1;
+}
+
+/* Conditional coloring based on theme */
+:global(html.latte) .controller-icon {
+  filter: invert(1); /* Black for light mode */
 }
 
 /* The Exploded View on Hover */

src/lib/components/Header.svelte

@@ -8,9 +8,16 @@
     class="mb-8 flex flex-col items-center justify-between border-b-2 border-ctp-surface1 pb-4 md:flex-row"
     dir="ltr"
 >
-    <div class="relative mb-4 text-2xl font-bold md:mb-0">
-        <img src="./KBLogo.svg" alt="Kylee's Logo" />
-        <span class="glitch text-ctp-pink" data-text={$t("name")}>
+    <div class="flex items-center relative mb-4 md:mb-0">
+        <img
+            src="./favicon.svg"
+            alt="Kylee's Logo"
+            class="h-18 mr-4 inline-block"
+        />
+        <span
+            class="glitch text-3xl font-bold text-ctp-pink"
+            data-text={$t("name")}
+        >
             {$t("name")}
         </span>
     </div>

src/lib/components/SkillsSection.svelte

@@ -19,17 +19,17 @@
                     <img
                         src="/ryan-beck-dreamcast-controller.svg"
                         alt="Dreamcast Controller"
-                        class="controller-icon"
+                        class="controller-icon invert dark:invert-0 brightness-50 dark:brightness-110 group-hover:drop-shadow-[0_0_8px_theme(colors.ctp.mauve)]"
                     />
                     <img
                         src="/ryan-beck-gamecube-controller.svg"
                         alt="Gamecube Controller"
-                        class="controller-icon"
+                        class="controller-icon invert dark:invert-0 brightness-75 dark:brightness-100 group-hover:drop-shadow-[0_0_8px_theme(colors.ctp.mauve)]"
                     />
                     <img
                         src="/ryan-beck-wii-controller.svg"
                         alt="Wii Controller"
-                        class="controller-icon"
+                        class="controller-icon invert dark:invert-0 brightness-90 dark:brightness-90 group-hover:drop-shadow-[0_0_8px_theme(colors.ctp.mauve)]"
                     />
                 </div>
             </div>