chore: navbar

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

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "one",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.511.0",
@@ -659,6 +660,39 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -964,7 +998,7 @@
       "version": "19.1.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
       "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -1097,7 +1131,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/detect-libc": {

frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.511.0",

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

@@ -0,0 +1,49 @@
+
+
+
+```
+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/globals.css

@@ -120,3 +120,11 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .text-fluid {
+    font-size: 13vw;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+}

frontend/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -12,9 +12,16 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const spaceGroteskSans = Space_Grotesk({
+  variable: "--font-spacegrotesk-sans",
+  subsets: ["latin"],
+});
+
+
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Ameya Shenoy",
+  description:
+    "Engineering lead with 8+ years of expertise in designing Scalable System Architecture, Leading high performing teams, and delivering AI driven solutions while also maintaining the role of an Individual Contributor",
 };
 
 export default function RootLayout({
@@ -25,7 +32,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${spaceGroteskSans.variable} antialiased`}
       >
         {children}
       </body>

frontend/src/app/page.tsx

@@ -1,12 +1,18 @@
-import Image from "next/image";
+import { NavigationMenuDemo } from "@/components/Navbar";
 
 export default function Home() {
   return (
-    <div className="">
-      <main className="">
+    <div className="min-h-screen">
+      <NavigationMenuDemo />
+      <main className="flex items-center justify-center h-screen">
+        <div className="flex justify-center font-[family-name:var(--font-spacegrotesk-sans)] font-semibold text-fluid">
+          <p>
+            <span className="selection:bg-red-500">Ameya </span>
+            <span className="text-red-500 selection:bg-black">Shenoy</span>
+          </p>
+        </div>
       </main>
-      <footer className="">
-      </footer>
+      <footer className=""></footer>
     </div>
   );
 }

frontend/src/components/Navbar.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export function NavigationMenuDemo() {
+  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 border-2 border-red-300">
+      <Button variant="ghost">
+        <Link href="/">Home</Link>
+      </Button>
+      <Button variant="ghost">
+        <Link href="/blog">Blog</Link>
+      </Button>
+      <Button variant="ghost">
+        <Link href="/portfolio">Portfolio</Link>
+      </Button>
+    </div>
+  );
+}

frontend/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }