codingcoffee/one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: stuff

Browse source 
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
Ameya Shenoy 2025-06-07 16:33:42 +05:30
parent 93f1ea741d
commit 406177bf01
2 changed files with 67 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/components/Navbar.tsx
View file

@ -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>

56
frontend/src/components/PhysicsSimulation.tsx
View file

@ -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);
const ballRed = Bodies.circle(randomX, randomY, radius, {
let [randomX, randomY] = getRandomXY(width, height, ballRadius);
const ballRed = Bodies.circle(randomX, randomY, ballRadius, {
restitution: 0.8,
render: { fillStyle: "red" },
});
[randomX, randomY] = getRandomXY(width, height, radius);
const ballBlue = Bodies.circle(randomX, randomY, radius, {
[randomX, randomY] = getRandomXY(width, height, ballRadius);
const ballBlue = Bodies.circle(randomX, randomY, ballRadius, {
restitution: 0.8,
render: { fillStyle: "blue" },
});
[randomX, randomY] = getRandomXY(width, height, radius);
const ballGreen = Bodies.circle(randomX, randomY, radius, {
[randomX, randomY] = getRandomXY(width, height, ballRadius);
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",
width: `${pillWidth}px`,
height: `${pillHeight}px`,
display: "flex",
justifyContent: "center",
alignItems: "center",
fontFamily: "Space Mono",
fontSize: `${fontSize}px`,
color: fgColor,
pointerEvents: "none",
...twj("absolute flex justify-center items-center"),
...{
width: `${pillWidth}px`,
height: `${pillHeight}px`,
fontFamily: "Space Mono",
fontSize: `${fontSize}px`,
color: fgColor,
pointerEvents: "none",
},
});
text.innerText = pillText;
pillTexts.push(text);