Holy Fuckles It's the 3D Knuckles

src/components/Badge.astro

@@ -0,0 +1,88 @@
+---
+import foscLogo from "../assets/img/fosc-logo-old.png";
+import { Image } from "astro:assets";
+
+---
+<div id="container" class="mt-[10vh] h-[30vh]">
+    <Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
+</div>
+
+<style>
+    #logo {
+  
+      /* Add border styles to create thickness */
+      border: -2px solid #ccc; /* Adjust border width for thickness */
+      border-radius: 50%; 
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
+    }
+  
+    #container {
+      perspective: 400px; /* Add perspective to the container for 3D effect */
+    }
+</style>
+  
+
+<script>
+// script.ts
+interface LogoElement extends HTMLElement {
+    rotationX: number;
+    rotationY: number;
+}
+
+const logo = document.querySelector("#logo") as LogoElement;
+const logoContainer = document.querySelector("#container") as HTMLElement;
+
+let sensitivity = 20; // Adjust the sensitivity as needed
+let mouseX = 0;
+let mouseY = 0;
+let targetRotationX = 0;
+let targetRotationY = 0;
+
+function updateLogoRotation() {
+    const { left, top, width, height } = logoContainer.getBoundingClientRect();
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+
+    const dx = (mouseX - centerX) / sensitivity;
+    const dy = (mouseY - centerY) / sensitivity;
+
+    targetRotationX = -dy;
+    targetRotationY = dx;
+}
+
+function animateRotation() {
+    const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions
+
+    const dx = targetRotationX - logo.rotationX;
+    const dy = targetRotationY - logo.rotationY;
+
+    logo.rotationX += dx * smoothingFactor;
+    logo.rotationY += dy * smoothingFactor;
+
+    logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;
+
+    requestAnimationFrame(animateRotation);
+}
+
+document.addEventListener('mousemove', (e: MouseEvent) => {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+    updateLogoRotation();
+});
+
+document.addEventListener('mouseleave', () => {
+    mouseX = 0;
+    mouseY = 0;
+    targetRotationX = 0;
+    targetRotationY = 0;
+    updateLogoRotation();
+});
+
+// Initial rotation values
+logo.rotationX = 0;
+logo.rotationY = 0;
+
+animateRotation();
+
+
+</script>

src/components/NavItem.astro

@@ -6,10 +6,4 @@ interface Props {
 
 const { href, title } = Astro.props;
 ---
-<li>
-<a
-    href={href}
-    class=""
-    >{title}
-</a>
-</li>
+<li><a href={href}>{title}</a></li>

src/components/Navbar.astro

@@ -6,7 +6,7 @@ import NavItem from "./NavItem.astro";
 import foscLogo from '../assets/img/fosc-logo-new.png'
 ---
 
-<div class="navbar backdrop-blur backdrop-brightness-50 drop-shadow-lg">
+<div class="navbar bg-base-100 backdrop-blur backdrop-brightness-50 drop-shadow-lg">
     
     <div class="navbar-start">
         <!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->

src/pages/index.astro

@@ -3,6 +3,7 @@ import "@/styles/globals.css";
 
 import Navbar from "../components/Navbar.astro";
 import HackerText from "../components/HackerText.astro";
+import Badge from "../components/Badge.astro"
 
 // Image imports
 import { Image } from "astro:assets";
@@ -48,9 +49,7 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
 
         <!-- Floating center items -->
         <div class="container-sm mx-auto px-4 flex flex-col justify-center items-center">
-          <div class="mt-[10vh] h-[30vh]">
-            <Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
-          </div>
+          <Badge></Badge>
           <HackerText text="FOSC"></HackerText>
         </div>
 
@@ -68,9 +67,9 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
 </html>
 
 <style>
-  body {
+  /* body {
     background-color: black !important;
     background-image: url(../img/coreboot2.webp);
-  }
+  } */
 </style>