fixes

src/app/(pages)/page.tsx

@@ -3,15 +3,15 @@ import Navbar from "@/components/landing/navbar";
 import { ReactElement } from "react";
 
 const LandingPage = (): ReactElement => (
-    <main
+    <main className="h-screen flex flex-col">
-        className="h-screen flex flex-col"
-        style={{
-            background:
-                "linear-gradient(to top, hsla(240, 8%, 8%, 0.5), hsl(var(--background)))",
-        }}
-    >
         <Navbar />
-        <div className="px-5 xs:px-7 h-full flex flex-col justify-center">
+        <div
+            className="h-full px-5 xs:px-7 flex flex-col justify-center"
+            style={{
+                background:
+                    "linear-gradient(to top, hsla(240, 8%, 8%, 0.7), hsl(var(--background)))",
+            }}
+        >
             <Greeting />
         </div>
     </main>

src/components/landing/nav-content/my-work.tsx

@@ -7,6 +7,7 @@ import { UseThemeProps } from "next-themes/dist/types";
 import Link from "next/link";
 import { ReactElement } from "react";
 import Project from "@/types/project";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import Image from "next/image";
 
 const projects: Project[] = [
@@ -64,51 +65,60 @@ const projects: Project[] = [
 const MyWork = (): ReactElement => {
     const { theme }: UseThemeProps = useTheme();
     return (
-        <div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
+        <ScrollArea className="h-[17.75rem]">
-            {projects.map((project, index) => (
+            <div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
-                <Link key={index} href={project.link || "#"} target="_blank">
+                {projects.map((project, index) => (
-                    <MagicCard
+                    <Link
-                        className="w-[25rem] p-2.5 cursor-default opacity-95"
+                        key={index}
-                        gradientColor={theme === "dark" ? "#262626" : "#D9D9D9"}
+                        href={project.link || "#"}
+                        target="_blank"
                     >
-                        {/* Icon, Name & Years Active */}
+                        <MagicCard
-                        <div className="flex gap-2.5 items-center">
+                            className="w-[15rem] lg:w-[25rem] p-3.5 cursor-default opacity-95"
-                            <Image
+                            gradientColor={
-                                className="rounded-full"
+                                theme === "dark" ? "#262626" : "#D9D9D9"
-                                src={project.icon}
+                            }
-                                alt={`The ${project.name} Project Icon`}
+                        >
-                                width={24}
+                            {/* Icon, Name & Years Active */}
-                                height={24}
+                            <div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
-                            />
+                                <div className="flex gap-3">
-
+                                    <Image
-                            <h1 className="font-semibold select-none pointer-events-none">
+                                        className="rounded-full"
-                                {project.name}
+                                        src={project.icon}
-                            </h1>
+                                        alt={`The ${project.name} Project Icon`}
-                            <div className="flex gap-1">
+                                        width={24}
-                                <span className="text-green-400/80">
+                                        height={24}
-                                    {project.startDate.format("MMM YYYY")}
+                                    />
-                                </span>
+                                    <h1 className="font-semibold select-none pointer-events-none">
-                                -
+                                        {project.name}
-                                {project.endDate ? (
+                                    </h1>
-                                    <span className="text-red-400/80">
+                                </div>
-                                        {project.endDate.format("MMM YYYY")}
+                                <div className="flex gap-1 text-sm">
-                                    </span>
-                                ) : (
                                     <span className="text-green-400/80">
-                                        Present
+                                        {project.startDate.format("MMM YYYY")}
                                     </span>
-                                )}
+                                    🞄
+                                    {project.endDate ? (
+                                        <span className="text-red-400/80">
+                                            {project.endDate.format("MMM YYYY")}
+                                        </span>
+                                    ) : (
+                                        <span className="text-green-400/80">
+                                            Present
+                                        </span>
+                                    )}
+                                </div>
                             </div>
-                        </div>
 
-                        {/* Description */}
+                            {/* Description */}
-                        <p className="mt-2.5 line-clamp-3 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
+                            <p className="mt-2.5 line-clamp-3 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
-                            {project.description}
+                                {project.description}
-                        </p>
+                            </p>
-                    </MagicCard>
+                        </MagicCard>
-                </Link>
+                    </Link>
-            ))}
+                ))}
-        </div>
+            </div>
+        </ScrollArea>
     );
 };
 export default MyWork;

src/components/landing/navbar.tsx

@@ -22,8 +22,8 @@ import {
 import BlurFade from "@/components/ui/blur-fade";
 
 const Navbar = (): ReactElement => (
-    <BlurFade className="pt-1" delay={1.35} inView>
+    <BlurFade className="pt-1 z-50" delay={1.35} inView>
-        <nav className="px-3 xs:px-7 py-4 flex gap-3 xs:gap-10 sm:gap-14 justify-center items-center border-b transition-all transform-gpu">
+        <nav className="px-3 xs:px-7 py-4 flex gap-3 xs:gap-10 sm:gap-14 justify-center items-center bg-background border-b transition-all transform-gpu">
             <Branding />
             <Links />
             <ThemeSwitcher />
@@ -110,7 +110,7 @@ const UsefulLinksContent = (): ReactElement => (
         <Link href="https://status.rainnny.club" target="_blank">
             <Button className="gap-3 cursor-default" variant="ghost">
                 <SignalIcon width={24} height={24} />
-                <span>Service Status</span>
+                <span>Status</span>
             </Button>
         </Link>
     </div>

src/components/landing/navigation.tsx

@@ -65,7 +65,7 @@ const Navigation = (): ReactElement => {
             {/* Selected Content */}
             {selected && (
                 <BlurFade key={selected.name} delay={0.05} inView>
-                    <div className="mt-7">{selected.content}</div>
+                    <div className="mt-5">{selected.content}</div>
                 </BlurFade>
             )}
         </div>

src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }