diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 66d4231..9ccee2f 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 17f6910..2ed3bce 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/app/blog/cognitive-atrophy.tsx b/frontend/src/app/blog/cognitive-atrophy.tsx deleted file mode 100644 index 2c81e7c..0000000 --- a/frontend/src/app/blog/cognitive-atrophy.tsx +++ /dev/null @@ -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 - -``` diff --git a/frontend/src/app/portfolio/page.tsx b/frontend/src/app/portfolio/page.tsx index 5aac6b8..a1cbad8 100644 --- a/frontend/src/app/portfolio/page.tsx +++ b/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, - Hindi: null, - Marathi: null, - Konkani: null, + English: "", + Hindi: "", + Marathi: "", + Konkani: "", }, }; diff --git a/frontend/src/components/PhysicsSimulation.tsx b/frontend/src/components/PhysicsSimulation.tsx index ebc38bb..7fba791 100644 --- a/frontend/src/components/PhysicsSimulation.tsx +++ b/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`; - const textWidth = ctx.measureText(pillText).width; + if (ctx) { + ctx.font = `${fontSizeRem}rem Mono`; + const textWidth = ctx.measureText(pillText).width; - const pillHeight = convertRemToPixels(fontSizeRem) * 2; - const pillWidth = textWidth + pillHeight; - [randomX, randomY] = getRandomXY(width, height, pillWidth / 2); - const chamferRadius = pillInfo.chamferRadius || pillHeight / 2; - const pill = Matter.Bodies.rectangle( - randomX, - randomY, - pillWidth, - pillHeight, - { - chamfer: { radius: chamferRadius }, - isStatic: false, - density: 0.001, - friction: 0.05, - frictionAir: 0.01, - render: { - fillStyle: "rgba(255, 255, 255, 0)", // transparent fill - strokeStyle: fgColor, // black border - lineWidth: 1, + const pillHeight = convertRemToPixels(fontSizeRem) * 2; + const pillWidth = textWidth + pillHeight; + [randomX, randomY] = getRandomXY(width, height, pillWidth / 2); + const chamferRadius = pillInfo.chamferRadius || pillHeight / 2; + const pill = Matter.Bodies.rectangle( + randomX, + randomY, + pillWidth, + pillHeight, + { + chamfer: { radius: chamferRadius }, + isStatic: false, + density: 0.001, + friction: 0.05, + frictionAir: 0.01, + render: { + fillStyle: "rgba(255, 255, 255, 0)", // transparent fill + strokeStyle: fgColor, // black border + lineWidth: 1, + }, }, - }, - ); + ); - pills.push(pill); - const text: HTMLDivElement = document.createElement("div"); - Object.assign(text.style, { - ...twj("absolute flex justify-center items-center"), - ...{ - width: `${pillWidth}px`, - height: `${pillHeight}px`, - fontFamily: "Space Mono", - fontSize: `${fontSizeRem}rem`, - color: fgColor, - pointerEvents: "none", - }, - }); - text.innerText = pillText; - pillTexts.push(text); + pills.push(pill); + const text: HTMLDivElement = document.createElement("div"); + Object.assign(text.style, { + ...twj("absolute flex justify-center items-center"), + ...{ + width: `${pillWidth}px`, + height: `${pillHeight}px`, + fontFamily: "Space Mono", + fontSize: `${fontSizeRem}rem`, + color: fgColor, + pointerEvents: "none", + }, + }); + text.innerText = pillText; + pillTexts.push(text); - document.body.appendChild(text); + document.body.appendChild(text); - const deltaX = - (window.innerWidth * (100 - viewportWidthPercent)) / 100 / 2; - const deltaY = window.innerWidth >= 640 ? -4 : 20; + 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 + deltaX}px`; - text.style.top = `${pill.position.y + pillHeight / 2 + deltaY}px`; + Events.on(engine, "afterUpdate", () => { + 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)`; - }); + 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) => { diff --git a/frontend/src/components/TextScramble.tsx b/frontend/src/components/TextScramble.tsx index 5c4f100..962dd41 100644 --- a/frontend/src/components/TextScramble.tsx +++ b/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 = ({ firstName, @@ -26,7 +32,7 @@ const TextScramble: React.FC = ({ (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, " ");