a

package-lock.json

@@ -20,6 +20,7 @@
         "lucide-react": "^0.274.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "sass": "^1.69.0",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "^3.3.3",
         "tailwindcss-animate": "^1.0.7",
@@ -2507,6 +2508,11 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
     "node_modules/import-meta-resolve": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
@@ -5212,6 +5218,22 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass": {
+      "version": "1.69.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.0.tgz",
+      "integrity": "sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "lucide-react": "^0.274.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.69.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",

src/components/Badge.astro

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

src/components/HackerText.astro

@@ -6,7 +6,7 @@ interface Props {
 const { text } = Astro.props;
 ---
 
-<p id="text" data-value={text} class="mt-4 text-center text-7xl font-['Researcher']">{text}</p>
+<p id="text" data-value={text} class="drop-shadow-lg mt-4 text-center text-7xl font-['Researcher']">{text}</p>
 
 <script>
     // Code I stole