chore: stuff

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

frontend/src/components/Navbar.tsx

@@ -1,24 +1,56 @@
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { ModeToggle } from "@/components/ModeToggle";
+import {
+  House,
+  NotebookPen,
+  BriefcaseBusiness,
+  MessageCircleMore,
+  Handshake,
+} from "lucide-react";
 
 export function NavigationMenu() {
   return (
     <div className="flex justify-center fixed left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-50">
       <Button variant="ghost">
-        <Link href="/">Home</Link>
+        <Link href="/">
+          <div className="hidden md:inline">Home</div>
+          <div className="md:hidden">
+            <House />
+          </div>
+        </Link>
       </Button>
       <Button variant="ghost">
-        <Link href="/blog">Blog</Link>
+        <Link href="/blog">
+          <div className="hidden md:inline">Blog</div>
+          <div className="md:hidden">
+            <NotebookPen />
+          </div>
+        </Link>
       </Button>
       <Button variant="ghost">
-        <Link href="/portfolio">Portfolio</Link>
+        <Link href="/portfolio">
+          <div className="hidden md:inline">Portfolio</div>
+          <div className="md:hidden">
+            <BriefcaseBusiness />
+          </div>
+        </Link>
       </Button>
       <Button variant="ghost">
-        <Link href="/talk">Talk</Link>
+        <Link href="/talk">
+          <div className="hidden md:inline">Talk</div>
+          <div className="md:hidden">
+            <MessageCircleMore />
+          </div>
+        </Link>
       </Button>
       <Button variant="ghost">
-        <Link href="/references">References</Link>
+        <Link href="/references">
+          <div className="hidden md:inline">References</div>
+          <div className="md:hidden">
+            <Handshake />
+          </div>
+        </Link>
       </Button>
       <ModeToggle />
     </div>

frontend/src/components/PhysicsSimulation.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef } from "react";
 import { useTheme } from "next-themes";
 import Matter from "matter-js";
+import { twj } from "tw-to-css";
 
 export function World() {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -24,14 +25,18 @@ export function World() {
 
     const width = container.offsetWidth;
     const height = container.offsetHeight;
-    const bgColor = getComputedStyle(document.documentElement)
-      .getPropertyValue("--color-background")
-      .trim();
-    const fgColor = getComputedStyle(document.documentElement)
-      .getPropertyValue("--color-foreground")
-      .trim();
 
-    console.log(resolvedTheme, bgColor, fgColor);
+    // TODO: ask Shubh about using variables in useEffect not working as expected
+    // const bgColor = getComputedStyle(document.documentElement)
+    //   .getPropertyValue("--color-background")
+    //   .trim();
+    // const fgColor = getComputedStyle(document.documentElement)
+    //   .getPropertyValue("--color-foreground")
+    //   .trim();
+    const bgColor =
+      resolvedTheme === "dark" ? "oklch(0.145 0 0)" : "oklch(1 0 0)";
+    const fgColor =
+      resolvedTheme === "dark" ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)";
 
     const {
       Engine,
@@ -89,20 +94,20 @@ export function World() {
     });
 
     // Random ball position
-    const radius = 15;
+    const ballRadius = 15;
 
-    let [randomX, randomY] = getRandomXY(width, height, radius);
+    let [randomX, randomY] = getRandomXY(width, height, ballRadius);
-    const ballRed = Bodies.circle(randomX, randomY, radius, {
+    const ballRed = Bodies.circle(randomX, randomY, ballRadius, {
       restitution: 0.8,
       render: { fillStyle: "red" },
     });
-    [randomX, randomY] = getRandomXY(width, height, radius);
+    [randomX, randomY] = getRandomXY(width, height, ballRadius);
-    const ballBlue = Bodies.circle(randomX, randomY, radius, {
+    const ballBlue = Bodies.circle(randomX, randomY, ballRadius, {
       restitution: 0.8,
       render: { fillStyle: "blue" },
     });
-    [randomX, randomY] = getRandomXY(width, height, radius);
+    [randomX, randomY] = getRandomXY(width, height, ballRadius);
-    const ballGreen = Bodies.circle(randomX, randomY, radius, {
+    const ballGreen = Bodies.circle(randomX, randomY, ballRadius, {
       restitution: 0.8,
       render: { fillStyle: "green" },
     });
@@ -132,12 +137,12 @@ export function World() {
       const pillText = pillInfo.text;
 
       const ctx = render.canvas.getContext("2d");
-      ctx.font = `${fontSize}px Arial`;
+      ctx.font = `${fontSize}px Mono`;
       const textWidth = ctx.measureText(pillText).width;
 
       const pillHeight = fontSize * 2;
       const pillWidth = textWidth + pillHeight;
-      [randomX, randomY] = getRandomXY(width, height, radius);
+      [randomX, randomY] = getRandomXY(width, height, pillWidth / 2);
       const chamferRadius = pillInfo.chamferRadius || pillHeight / 2;
       const pill = Matter.Bodies.rectangle(
         randomX,
@@ -161,16 +166,15 @@ export function World() {
       pills.push(pill);
       const text: HTMLDivElement = document.createElement("div");
       Object.assign(text.style, {
-        position: "absolute",
+        ...twj("absolute flex justify-center items-center"),
-        width: `${pillWidth}px`,
+        ...{
-        height: `${pillHeight}px`,
+          width: `${pillWidth}px`,
-        display: "flex",
+          height: `${pillHeight}px`,
-        justifyContent: "center",
+          fontFamily: "Space Mono",
-        alignItems: "center",
+          fontSize: `${fontSize}px`,
-        fontFamily: "Space Mono",
+          color: fgColor,
-        fontSize: `${fontSize}px`,
+          pointerEvents: "none",
-        color: fgColor,
+        },
-        pointerEvents: "none",
       });
       text.innerText = pillText;
       pillTexts.push(text);