feat: landing sort

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

frontend/package.json

@@ -19,7 +19,8 @@
     "next-themes": "^0.4.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^3.3.0"
+    "tailwind-merge": "^3.3.0",
+    "tw-to-css": "^0.0.12"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

frontend/src/components/PhysicsSimulation.tsx

@@ -1,12 +1,23 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } 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);
+  const viewportWidthPercent = 95;
+
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const [dimensions, setDimensions] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
   const { resolvedTheme } = useTheme();
 
   const getRandomXY = (width: number, height: number, radius: number) => {
@@ -15,6 +26,17 @@ export function World() {
     return [randomX, randomY];
   };
 
+  useEffect(() => {
+    const handleResize = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   useEffect(() => {
     const pillTexts: HTMLDivElement[] = [];
 
@@ -25,7 +47,6 @@ export function World() {
 
     const width = container.offsetWidth;
     const height = container.offsetHeight;
-    console.log("container stuff", width, height);
 
     // TODO: ask Shubh about using variables in useEffect not working as expected
     // const bgColor = getComputedStyle(document.documentElement)
@@ -128,11 +149,11 @@ export function World() {
     const pillsToRenderInfo = [
       { text: "ENGINEERING MANAGER" },
       { text: "PRINCIPAL ENGINEER" },
-      { text: "NIX", chamferRadius: 20 },
-      { text: "AI", chamferRadius: 20 },
+      { text: "NIX", chamferRadius: convertRemToPixels(1.25) },
+      { text: "AI", chamferRadius: convertRemToPixels(1.25) },
     ];
 
-    function convertRemToPixels(rem) {
+    function convertRemToPixels(rem: number) {
       // Get the root font size as a float (in px)
       const rootFontSize = parseFloat(
         getComputedStyle(document.documentElement).fontSize,
@@ -142,7 +163,7 @@ export function World() {
     }
 
     pillsToRenderInfo.forEach((pillInfo) => {
-      const fontSizeRem = 2;
+      const fontSizeRem = window.innerWidth >= 640 ? 2 : 1.2;
 
       const pillText = pillInfo.text;
 
@@ -176,9 +197,7 @@ export function World() {
       pills.push(pill);
       const text: HTMLDivElement = document.createElement("div");
       Object.assign(text.style, {
-        ...twj(
-          "absolute flex justify-center items-center border-2 border-red-500",
-        ),
+        ...twj("absolute flex justify-center items-center"),
         ...{
           width: `${pillWidth}px`,
           height: `${pillHeight}px`,
@@ -193,17 +212,13 @@ export function World() {
 
       document.body.appendChild(text);
 
-      console.log(pill);
+      const deltaX =
+        (window.innerWidth * (100 - viewportWidthPercent)) / 100 / 2;
+      const deltaY = window.innerWidth >= 640 ? -4 : 20;
 
       Events.on(engine, "afterUpdate", () => {
-        text.style.left = `${pill.position.x - pillWidth / 2 + 60}px`;
-        text.style.top = `${pill.position.y + pillHeight / 2 - 4}px`;
-
-        // text.style.left = `${pill.position.x - pillWidth / 2 + 10}px`;
-        // text.style.top = `${pill.position.y + pillHeight / 2 + 30}px`;
-
-        // text.style.left = `${pill.position.x + text.offsetWidth / 2}px`;
-        // text.style.top = `${pill.position.y + text.offsetHeight / 2}px`;
+        text.style.left = `${pill.position.x - pillWidth / 2 + deltaX}px`;
+        text.style.top = `${pill.position.y + pillHeight / 2 + deltaY}px`;
 
         text.style.transform = `rotate(${pill.angle}rad)`;
       });
@@ -236,12 +251,13 @@ export function World() {
         pillText.remove();
       });
     };
-  }, [resolvedTheme]);
+  }, [resolvedTheme, dimensions]);
 
   return (
     <div
       ref={containerRef}
-      className="w-[95vw] h-[40vh] mx-auto relative overflow-hidden"
+      className="h-[40vh] mx-auto relative overflow-hidden"
+      style={{ width: `${viewportWidthPercent}vw` }}
     />
   );
 }