tailwind fucked up many things so its large small fix

src/app/page.tsx

@@ -5,10 +5,10 @@ export default function Home() {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
-      <div className="fixed z-50 flex flex-col content-start text-left top-1/2 left-1/4 text-white">
+      <div className="fixed z-50 flex flex-col content-start text-left top-1/2 left-1/4 gap-5 text-white">
-        <button className="">ABOUT ME</button>
+        <button className="text-5xl  hover:text-shadow">ABOUT ME</button>
-        <button className="">MY MODELS</button>
+        <button className="text-5xl hover:text-shadow">MY MODELS</button>
-        <button className="">CONTACT</button>
+        <button className="text-5xl hover:text-shadow">CONTACT</button>
         <div className=" fixed h-screen w-1/2 right-0 top-0">
           <Skeleton />
         </div>

src/components/footer.tsx

@@ -12,7 +12,7 @@ export default function Footer() {
         <Discord className="text-white" />
       </button>
       <button>
-        <Patreon className="text-white" />
+        <Patreon className="text-black" />
       </button>
     </footer>
   );

src/components/icons/patreon.tsx

@@ -3,15 +3,14 @@ export default function Patreon(props: any) {
     <svg
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 1080 1080"
+      viewBox="0 0 37 37"
       {...props}
-      fill="currentColor"
-
     >
       <path
         d="M1033.05,324.45c-0.19-137.9-107.59-250.92-233.6-291.7c-156.48-50.64-362.86-43.3-512.28,27.2
       C106.07,145.41,49.18,332.61,47.06,519.31c-1.74,153.5,13.58,557.79,241.62,560.67c169.44,2.15,194.67-216.18,273.07-321.33
       c55.78-74.81,127.6-95.94,216.01-117.82C929.71,603.22,1033.27,483.3,1033.05,324.45z"
+        fill="currentColor"
       />
     </svg>
   );

src/components/mesh/skeleton.tsx

@@ -8,8 +8,8 @@ import { Canvas } from "@react-three/fiber";
 
 function SkeletonMesh() {
   const [eyeAngle, setEyeAAngle] = useState<Number[]>([
-    THREE.MathUtils.degToRad(10),
+    THREE.MathUtils.degToRad(0),
-    THREE.MathUtils.degToRad(100),
+    THREE.MathUtils.degToRad(0),
     THREE.MathUtils.degToRad(0),
   ]);
   const mesh = useRef<Mesh>(null!);
@@ -21,10 +21,10 @@ function SkeletonMesh() {
     window.addEventListener("mousemove", (event) => {
       setEyeAAngle([
         THREE.MathUtils.degToRad(
-          ((event.clientY - window.innerHeight) * 15) / 360 + 20
+          ((event.clientY - window.innerHeight) * 15) / 360 + 30
         ),
         THREE.MathUtils.degToRad(
-          ((event.clientX - window.innerWidth) * 20 - 10) / 360
+          ((event.clientX - window.innerWidth) * 20 - 10) / 360 - 40
         ),
         0,
       ]);
@@ -60,12 +60,12 @@ export default function Skeleton() {
     <Canvas
       className="h-100 w-100"
       camera={{
-        position: [0, 0, 0],
+        type: "perspective",
+        position: [0, 0, 1],
         rotation: [0, 0, 0],
       }}
     >
-      <ambientLight />
+      <pointLight intensity={15} />
-      <pointLight intensity={4} />
       <SkeletonMesh />
     </Canvas>
   );

tailwind.config.js

@@ -1,4 +1,6 @@
 /** @type {import('tailwindcss').Config} */
+const plugin = require("tailwindcss/plugin");
+
 module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}", // Note the addition of the `app` directory.
@@ -9,7 +11,23 @@ module.exports = {
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      textShadow: {
+        DEFAULT:
+          "0 0 10px #fff, 0 0 20px #fff, 0 0 30px #23d400, 0 0 40px #00a30e, 0 0 50px #0a7c00, 0 0 60px #0b5e00, 0 0 70px #00440b",
+      },
+    },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          "text-shadow": (value) => ({
+            textShadow: value,
+          }),
+        },
+        { values: theme("textShadow") }
+      );
+    }),
+  ],
 };