update: map and images

src/ui/components/About/About.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import TxtRotate from "../../helpers/TypeCarousel";
 import styles from "./About.module.css";
-import god from "../../../assets/god.jpg";
+import god from "../../../assets/god.webp";
 
 const About = (): JSX.Element => {
   useEffect(() => {

src/ui/components/Experience/data.ts

@@ -1,10 +1,16 @@
-import delta from "../../../assets/delta.png";
+import delta from "../../../assets/delta.webp";
 import tedx from "../../../assets/tedx-logo.svg";
-import citi from "../../../assets/citi.png";
+import citi from "../../../assets/citi.webp";
 import globe from "../../../assets/globe.svg";
 import github from "../../../assets/github.svg";
 
 export const cardData: CardData[] = [
+  {
+    img: citi,
+    title: "Citi",
+    text: "Developed an update automation tool for creating update snapshots for the OpenLink Endur application. The tool was used by the team to automate the process of creating update snapshots, saving hours of manual work. Developed a node-wise XML comparison tool for comparing the XML Feeds of the Endur application's subcomponents.",
+    websites: [{ icon: globe, url: "https://www.citi.com/" }],
+  },
   {
     img: delta,
     title: "Delta Force",
@@ -24,10 +30,4 @@ export const cardData: CardData[] = [
       { icon: github, url: "https://github.com/tedxnittrichy" },
     ],
   },
-  {
-    img: citi,
-    title: "Citi",
-    text: "Developed an update automation tool for creating update snapshots for the OpenLink Endur application. The tool was used by the team to automate the process of creating update snapshots, saving 10s of hours of manual work. Developed a node-wise XML comparison tool for comparing the XML Feeds of the Endur application's subcomponents.",
-    websites: [{ icon: globe, url: "https://www.citi.com/" }],
-  },
 ];

src/ui/components/Projects/Projects.module.css

@@ -2,7 +2,7 @@
   width: 100%;
   min-height: 100vh;
   background-color: #000000;
-  background-image: url("../../../assets/projects-bg.jpg");
+  background-image: url("../../../assets/projects-bg.webp");
   background-size: cover;
   display: flex;
   flex-direction: column;

src/ui/components/Projects/data.ts

@@ -1,6 +1,6 @@
-import dwoc from "../../../assets/dwoc.jpg";
-import proximity from "../../../assets/proximity.png";
-import code from "../../../assets/codecharacter.png";
+import dwoc from "../../../assets/dwoc.webp";
+import proximity from "../../../assets/proximity.webp";
+import code from "../../../assets/codecharacter.webp";
 import globe from "../../../assets/globe.svg";
 import github from "../../../assets/github.svg";
 
@@ -14,6 +14,14 @@ export const cardData: CardData[] = [
       { icon: github, url: "https://github.com/delta/codecharacter-web-2022" },
     ],
   },
+  {
+    img: proximity,
+    title: "Proximity | An intelligent Discord bot",
+    text: "Built a Discord Bot with Music, Image Search and lots of fun commands using Node.js. Integrated IBM Watson Image Recognition and Google Text to Speech API to provide Image Classification and Text to Speech Features on Discord.",
+    websites: [
+      { icon: github, url: "https://github.com/vigneshd332/proximity" },
+    ],
+  },
   {
     img: dwoc,
     title: "DWOC | A GSOC-like program",
@@ -23,12 +31,4 @@ export const cardData: CardData[] = [
       { icon: github, url: "https://github.com/delta/dwoc-client" },
     ],
   },
-  {
-    img: proximity,
-    title: "Proximity | An intelligent Discord bot",
-    text: "Built a Discord Bot with Music, Image Search and lots of fun commands using Node.js. Integrated IBM Watson Image Recognition and Google Text to Speech API to provide Image Classification and Text to Speech Features on Discord.",
-    websites: [
-      { icon: github, url: "https://github.com/vigneshd332/proximity" },
-    ],
-  },
 ];

src/world/loaders/LoadScene.ts

@@ -58,12 +58,14 @@ export async function loadSceneAssets(
   // Social Icons
   const socialSpawns = await getSocialSpawns();
   socialSpawns.forEach((spawn) => {
-    new Platform(
-      scene,
-      spawn.platformModel,
-      spawn.position,
-      spawn.socialModel,
-      spawn.iconName
+    updateables.push(
+      new Platform(
+        scene,
+        spawn.platformModel,
+        spawn.position,
+        spawn.socialModel,
+        spawn.iconName
+      )
     );
   });
 

src/world/world.ts

@@ -5,6 +5,8 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { Spaceship } from "./objects";
 import { loadEvents, loadSceneAssets } from "./loaders";
 
+const MAP_SIZE = 150000;
+
 let container: Element,
   camera: THREE.PerspectiveCamera,
   scene: THREE.Scene,
@@ -53,7 +55,7 @@ export default async function init(setLoaded: (loaded: boolean) => void) {
 
   // Water
 
-  const waterGeometry = new THREE.PlaneGeometry(60000, 60000);
+  const waterGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE);
 
   water = new Water(waterGeometry, {
     textureWidth: 512,
@@ -76,7 +78,7 @@ export default async function init(setLoaded: (loaded: boolean) => void) {
   // Skybox
   sun = new THREE.Vector3();
   const sky = new Sky();
-  sky.scale.setScalar(60000);
+  sky.scale.setScalar(MAP_SIZE);
   scene.add(sky);
 
   const skyUniforms = sky.material.uniforms;