fix: type errors

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

frontend/package-lock.json

@@ -29,6 +29,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/matter-js": "^0.19.8",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1696,6 +1697,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/matter-js": {
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@types/matter-js/-/matter-js-0.19.8.tgz",
+      "integrity": "sha512-W2ZWG58Lijv/4v768NgpeyFqqiOyslmAU7qqM1Lhz4XBoUgGtZtPz4CjcOKYtqHIak14dvPldslQhltqLTWwsw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",

frontend/package.json

@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/matter-js": "^0.19.8",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

frontend/src/app/blog/cognitive-atrophy.tsx

@@ -1,49 +0,0 @@
-
-
-
-```
-Cognitive Atrophy
-Coming soon to a friend near you.
-
-
-
-Almost all questions can be answered by AI now
-
-1 + 1/2 + 1/4 + 1/8 + ....
-
-This tends to 2. I know this because I can work it out. Some people just memorize it to be 2, but don't know why.
-With AI, the latter shall become a considerable majority. I'm not sure if it's a good thing.
-
-
-
-I used to consider myself smarter (for lack of a better word) than them
-
-
-
-infusing LLMs into workflows has
-
-- for something trivial like spellcheck, maybe it's fine. but for something more complex like building software / architectural designs for buildings. is it really a good thing?
-- spellcheck is a binary problem.
-- software engg isn't. Nor is generating architectural schematics
-- I consider myself to be someone who can, but someone new to this field will happily use it without knowing any better
-
-
-- with reliance on AI, i'll start fogoing the intuition which is usually developed over years of practice
-
-- when it comes to software, I luckily do consider myself in a postiion to judege
-
-
-
-
-for my personal website which has 10 users, a simple server will do.
--
-
-all things converge to the lowest common denominator if there is not enough artificial resistance present in the system.
-
-Don't get me wrong, I'm long on AI. But is it a good thing for my perosnal cognitive self is a question I'm strugging to answer.
-
-
-
-PS> I did use spellcheck for the blog
-
-```

frontend/src/app/portfolio/page.tsx

@@ -25,10 +25,10 @@ export default async function Portfolio() {
     },
     AI: {
       LangChain: "simple-icons:langchain",
-      Livekit: null,
+      Livekit: "",
       ElevenLabs: "simple-icons:elevenlabs",
       Ollama: "simple-icons:ollama",
-      vllm: null,
+      vllm: "",
     },
     Databases: {
       Postgres: "devicon:postgresql",
@@ -84,10 +84,10 @@ export default async function Portfolio() {
       "Robot Operating System ROS": "devicon:ros",
     },
     "Spoken Languages": {
-      English: null,
+      English: "",
-      Hindi: null,
+      Hindi: "",
-      Marathi: null,
+      Marathi: "",
-      Konkani: null,
+      Konkani: "",
     },
   };
 

frontend/src/components/PhysicsSimulation.tsx

@@ -140,6 +140,7 @@ export function World() {
       mouse,
       constraint: {
         stiffness: 1,
+        // @ts-ignore Comment
         angularStiffness: 0,
         render: { visible: false },
       },
@@ -168,60 +169,62 @@ export function World() {
       const pillText = pillInfo.text;
 
       const ctx = render.canvas.getContext("2d");
-      ctx.font = `${fontSizeRem}rem Mono`;
+      if (ctx) {
-      const textWidth = ctx.measureText(pillText).width;
+        ctx.font = `${fontSizeRem}rem Mono`;
+        const textWidth = ctx.measureText(pillText).width;
 
-      const pillHeight = convertRemToPixels(fontSizeRem) * 2;
+        const pillHeight = convertRemToPixels(fontSizeRem) * 2;
-      const pillWidth = textWidth + pillHeight;
+        const pillWidth = textWidth + pillHeight;
-      [randomX, randomY] = getRandomXY(width, height, pillWidth / 2);
+        [randomX, randomY] = getRandomXY(width, height, pillWidth / 2);
-      const chamferRadius = pillInfo.chamferRadius || pillHeight / 2;
+        const chamferRadius = pillInfo.chamferRadius || pillHeight / 2;
-      const pill = Matter.Bodies.rectangle(
+        const pill = Matter.Bodies.rectangle(
-        randomX,
+          randomX,
-        randomY,
+          randomY,
-        pillWidth,
+          pillWidth,
-        pillHeight,
+          pillHeight,
-        {
+          {
-          chamfer: { radius: chamferRadius },
+            chamfer: { radius: chamferRadius },
-          isStatic: false,
+            isStatic: false,
-          density: 0.001,
+            density: 0.001,
-          friction: 0.05,
+            friction: 0.05,
-          frictionAir: 0.01,
+            frictionAir: 0.01,
-          render: {
+            render: {
-            fillStyle: "rgba(255, 255, 255, 0)", // transparent fill
+              fillStyle: "rgba(255, 255, 255, 0)", // transparent fill
-            strokeStyle: fgColor, // black border
+              strokeStyle: fgColor, // black border
-            lineWidth: 1,
+              lineWidth: 1,
+            },
           },
-        },
+        );
-      );
 
-      pills.push(pill);
+        pills.push(pill);
-      const text: HTMLDivElement = document.createElement("div");
+        const text: HTMLDivElement = document.createElement("div");
-      Object.assign(text.style, {
+        Object.assign(text.style, {
-        ...twj("absolute flex justify-center items-center"),
+          ...twj("absolute flex justify-center items-center"),
-        ...{
+          ...{
-          width: `${pillWidth}px`,
+            width: `${pillWidth}px`,
-          height: `${pillHeight}px`,
+            height: `${pillHeight}px`,
-          fontFamily: "Space Mono",
+            fontFamily: "Space Mono",
-          fontSize: `${fontSizeRem}rem`,
+            fontSize: `${fontSizeRem}rem`,
-          color: fgColor,
+            color: fgColor,
-          pointerEvents: "none",
+            pointerEvents: "none",
-        },
+          },
-      });
+        });
-      text.innerText = pillText;
+        text.innerText = pillText;
-      pillTexts.push(text);
+        pillTexts.push(text);
 
-      document.body.appendChild(text);
+        document.body.appendChild(text);
 
-      const deltaX =
+        const deltaX =
-        (window.innerWidth * (100 - viewportWidthPercent)) / 100 / 2;
+          (window.innerWidth * (100 - viewportWidthPercent)) / 100 / 2;
-      const deltaY = window.innerWidth >= 640 ? -4 : 20;
+        const deltaY = window.innerWidth >= 640 ? -4 : 20;
 
-      Events.on(engine, "afterUpdate", () => {
+        Events.on(engine, "afterUpdate", () => {
-        text.style.left = `${pill.position.x - pillWidth / 2 + deltaX}px`;
+          text.style.left = `${pill.position.x - pillWidth / 2 + deltaX}px`;
-        text.style.top = `${pill.position.y + pillHeight / 2 + deltaY}px`;
+          text.style.top = `${pill.position.y + pillHeight / 2 + deltaY}px`;
 
-        text.style.transform = `rotate(${pill.angle}rad)`;
+          text.style.transform = `rotate(${pill.angle}rad)`;
-      });
+        });
+      }
     });
 
     // Add all elements to the world
@@ -244,7 +247,7 @@ export function World() {
     return () => {
       Render.stop(render);
       Runner.stop(runner);
-      Composite.clear(engine.world);
+      Composite.clear(engine.world, false);
       Engine.clear(engine);
       render.canvas.remove();
       pillTexts.forEach((pillText) => {

frontend/src/components/TextScramble.tsx

@@ -9,6 +9,12 @@ interface TextScrambleProps {
   onlineHandleFirstName: string;
   onlineHandleLastName: string;
 }
+interface QueueItem {
+  fromText: string;
+  toText: string;
+  start: number;
+  end: number;
+}
 
 const TextScramble: React.FC<TextScrambleProps> = ({
   firstName,
@@ -26,7 +32,7 @@ const TextScramble: React.FC<TextScrambleProps> = ({
     (fromText: string, toText: string, setFunction: Function) => {
       let counter = 0;
       const length = Math.max(fromText.length, toText.length);
-      const queue = [];
+      const queue: QueueItem[] = [];
 
       // Pad texts with spaces if they have different lengths
       fromText = fromText.padEnd(length, " ");