Adds 3d star

vistawtf · Apr 25, 2024 · 5d81420 · 5d81420
1 parent a3d6356
commit 5d81420
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.7.0",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "three": "^0.164.0"
   }
 }
diff --git a/public/ALTERNATIVE BANNER 1.png b/public/ALTERNATIVE BANNER 1.png
diff --git a/public/ALTERNATIVE BANNER NO TAGLINE.png b/public/ALTERNATIVE BANNER NO TAGLINE.png
diff --git a/public/Banner V2.png b/public/Banner V2.png
diff --git a/public/CNAME b/public/CNAME
diff --git a/public/LOGO 1.png b/public/LOGO 1.png
diff --git a/public/PFP 1.png b/public/PFP 1.png
diff --git a/public/PFP WHITE.png b/public/PFP WHITE.png
diff --git a/public/PFP.png b/public/PFP.png
diff --git a/public/TSHIRT IDEA/0_FRONT.png b/public/TSHIRT IDEA/0_FRONT.png
diff --git a/public/TSHIRT IDEA/BACK.png b/public/TSHIRT IDEA/BACK.png
diff --git a/public/star ascii 1.png b/public/star ascii 1.png
diff --git a/public/star ascii 2.png b/public/star ascii 2.png
diff --git a/public/star.glb b/public/star.glb
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,53 @@
+import * as THREE from "three";
+import { AsciiEffect } from "three/addons/effects/AsciiEffect.js";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+camera.position.z = 5;
+
+const effect = new AsciiEffect(renderer, " .:-+*=%@#", { invert: true });
+effect.setSize(window.innerWidth, window.innerHeight);
+
+document.body.appendChild(effect.domElement);
+effect.domElement.style.color = "white";
+effect.domElement.style.backgroundColor = "black";
+effect.domElement.style.position = "fixed";
+effect.domElement.style.top = "0";
+effect.domElement.style.left = "0";
+effect.domElement.style.opacity = "0.1";
+effect.domElement.style.zIndex = "-1";
+
+const loader = new GLTFLoader();
+
+let model = null;
+loader.load("star.glb", function (gltf) {
+  model = gltf.scene.children[0];
+  model.material = new THREE.MeshBasicMaterial({
+    color: 0x00ff00,
+  });
+  model.scale.set(0.5, 0.5, 0.5);
+  scene.add(model);
+});
+
+function animate() {
+  requestAnimationFrame(animate);
+
+  if (model) {
+    model.rotation.x += 0.01;
+    model.rotation.y += 0.01;
+    model.rotation.z += 0.01;
+  }
+
+  effect.render(scene, camera);
+}
+
+animate();
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,61 +7,35 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap"
       rel="stylesheet"
     />
+
+    <style>
+      .inconsolata {
+        font-family: "Inconsolata", monospace;
+      }
+    </style>
+
+    <script src="../index.ts"></script>
   </head>
   <body
-    class="bg-black p-16 flex items-center justify-center flex-col h-svh font-mono"
-    style="background-image: url('');"
+    class="p-16 flex items-center justify-center flex-col h-svh inconsolata"
+    style="background-color: #000;color: #fff;"
   >
-    <img
-      src="./LOGO 1.png"
-      alt="logo"
-      id="logo1"
-      class="max-w-[300px] cursor-pointer"
-    />
-    <img
-      src="./star ascii 2.png"
-      alt="logo"
-      id="logo2"
-      class="max-w-[200px] cursor-pointer hidden"
-    />
-
-    <script>
-      const logo1 = document.getElementById("logo1");
-      const logo2 = document.getElementById("logo2");
-
-      logo1.addEventListener("click", () => {
-        logo1.classList.add("hidden");
-        logo2.classList.remove("hidden");
-      });
-
-      logo2.addEventListener("click", () => {
-        logo2.classList.add("hidden");
-        logo1.classList.remove("hidden");
-      });
-    </script>
-
-    <p class="text-white mt-6">
+    <h1 class="text-4xl">Vista</h1>
+    <p class="mt-3">
       crafting the best tooling & analytics for ethereum staking
     </p>
     <div class="flex items-center justify-center gap-3 mt-3">
       <a
-        class="text-blue-600 underline-offset-0 hover:underline"
+        class="text-blue-500 underline-offset-0 hover:underline"
         href="https://github.com/vistastaking">Github</a
       >
       <a
-        class="text-blue-600 underline-offset-0 hover:underline"
+        class="text-blue-500 underline-offset-0 hover:underline"
         href="https://twitter.com/vistastaking">Twitter</a
       >
     </div>
   </body>
 </html>
-
-<style>
-  .custom-font {
-    font-family: "Pixelify Sans", sans-serif;
-    font-optical-sizing: auto;
-  }
-</style>