improvements

next.config.mjs

@@ -3,6 +3,14 @@ const nextConfig = {
 	output: "standalone",
 	images: {
 		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "cdn.rainnny.club",
+			},
+			{
+				protocol: "https",
+				hostname: "bonfire.wtf",
+			},
 			{
 				protocol: "https",
 				hostname: "img.icons8.com",
@@ -10,5 +18,4 @@ const nextConfig = {
 		],
 	},
 };
-
 export default nextConfig;

package.json

@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@heroicons/react": "^2.1.5",
 		"@radix-ui/react-navigation-menu": "^1.2.0",
+		"@radix-ui/react-scroll-area": "^1.1.0",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.2",
 		"class-variance-authority": "^0.7.0",

src/components/landing/nav-content/homelab.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 
 const HomelabContent = (): ReactElement => (
-    <ul>
+    <ul className="text-sm sm:text-base pointer-events-none">
         <li>
             <b>Server Rack:</b> 22U, 32&quot; Depth
         </li>

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

@@ -1,98 +1,61 @@
 "use client";
 
 import { MagicCard } from "@/components/ui/magic-card";
-import moment, { Moment } from "moment";
+import moment from "moment";
 import { useTheme } from "next-themes";
 import { UseThemeProps } from "next-themes/dist/types";
 import Link from "next/link";
 import { ReactElement } from "react";
-
+import Project from "@/types/project";
-type Project = {
+import Image from "next/image";
-    name: string;
-    link?: string | undefined;
-    previewContent: ReactElement;
-    startDate: Moment;
-    endDate?: Moment | undefined;
-};
 
 const projects: Project[] = [
     {
         name: "This Website!",
+        description: "This website!",
+        icon: "/me.png",
         link: "https://github.com/Rainnny7/rainnny.club",
-        previewContent: <div>This website!</div>,
         startDate: moment([2024, 7, 29]),
     },
     {
         name: "WildNetwork",
+        description:
+            "WildNetwork is a Minecraft server that contains multiple gamemodes, one of which is Prison, which is the most popular. I first joined the server as a Developer where I would work behind the scenes to create new features, now I&apos;m currently working as a System Administrator.",
+        icon: "https://cdn.rainnny.club/x6m1QENM9gZz.png",
         link: "https://discord.gg/WildPrison",
-        previewContent: (
-            <p>
-                WildNetwork is a Minecraft server that contains multiple
-                gamemodes, one of which is Prison, which is the most popular. I
-                first joined the server as a Developer where I would work behind
-                the scenes to create new features, now I&apos;m currently
-                working as a System Administrator.
-            </p>
-        ),
         startDate: moment([2020, 7, 1]),
     },
     {
         name: "Bonfire",
+        description:
+            "Bonfire is a platform similar to Discord that a friend and I are working on together in our free time. Bonfire is perfect for connecting with friends or building a global community. Personalize your space to chat, and hang out.",
+        icon: "https://bonfire.wtf/media/logo.png",
         link: "https://bonfire.wtf",
-        previewContent: (
-            <p>
-                Bonfire is a platform similar to Discord that a friend and I are
-                working on together in our free time. Bonfire is perfect for
-                connecting with friends or building a global community.
-                Personalize your space to chat, and hang out.
-            </p>
-        ),
         startDate: moment([2024, 3, 30]),
     },
     {
         name: "Lucity",
+        description:
+            "Lucity was a minigame network for the game Minecraft, and was owned by the YouTuber iamLucid. When I worked at Lucity, I was the development lead, I focused mainly on infrastructure, databases, and monitoring systems. A few things that I have made - a dynamically managed server system, proxy rotation via the TCPShield API, and an API that can interact with the entire network from a normal Java app.",
+        icon: "https://cdn.rainnny.club/UWdilkRUqTYl.png",
         link: "https://youtube.com/@iamLucid",
-        previewContent: (
-            <p>
-                Lucity was a minigame network for the game Minecraft, and was
-                owned by the YouTuber iamLucid. When I worked at Lucity, I was
-                the development lead, I focused mainly on infrastructure,
-                databases, and monitoring systems. A few things that I have made
-                - a dynamically managed server system, proxy rotation via the
-                TCPShield API, and an API that can interact with the entire
-                network from a normal Java app.
-            </p>
-        ),
         startDate: moment([2020, 7, 1]),
         endDate: moment([2022, 10, 30]),
     },
     {
         name: "Rainplex",
-        previewContent: (
+        description:
-            <p>
+            "Rainplex was a remake of the once popular Minecraft server, Mineplex. Rainplex initially came to light using the plugin, Skript where it just contained a Hub. After some time, the entirety of the network was re-coded in the Java programming from the ground up. Rainplex went through numerous re-codes over the time it was active, however I have since abandoned development due to lack of free time.",
-                Rainplex was a remake of the once popular Minecraft server,
+        icon: "https://cdn.rainnny.club/QC742YfKVcyI.png",
-                Mineplex. Rainplex initially came to light using the plugin,
-                Skript where it just contained a Hub. After some time, the
-                entirety of the network was re-coded in the Java programming
-                from the ground up. Rainplex went through numerous re-codes over
-                the time it was active, however I have since abandoned
-                development due to lack of free time.
-            </p>
-        ),
         startDate: moment([2018, 8, 1]),
         endDate: moment([2021, 6, 11]),
     },
     {
         name: "Arcane Client",
+        description:
+            "Arcane is the all-in-one Minecraft mod pack. This client was built to be similar to LunarClient for portfolio and experience sake. I have since abandoned development due to lack of free time.",
+        icon: "https://cdn.rainnny.club/MT45sXzZtah4.png",
         link: "https://github.com/ArcaneClientNET",
-        previewContent: (
-            <p>
-                Arcane is the all-in-one Minecraft mod pack. This client was
-                built to be similar to LunarClient for portfolio and experience
-                sake. I have since abandoned development due to lack of free
-                time.
-            </p>
-        ),
         startDate: moment([2021, 6, 1]),
         endDate: moment([2021, 10, 1]),
     },
@@ -101,25 +64,47 @@ const projects: Project[] = [
 const MyWork = (): ReactElement => {
     const { theme }: UseThemeProps = useTheme();
     return (
-        <div className="max-w-[50rem] flex flex-wrap gap-3 justify-center">
+        <div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
             {projects.map((project, index) => (
                 <Link key={index} href={project.link || "#"} target="_blank">
                     <MagicCard
-                        className="w-[15rem] p-3.5"
+                        className="w-[25rem] p-2.5 cursor-default opacity-95"
-                        gradientColor={
+                        gradientColor={theme === "dark" ? "#262626" : "#D9D9D9"}
-                            theme === "dark" ? "#262626" : "#D9D9D955"
-                        }
                     >
-                        <h1 className="font-bold select-none pointer-events-none">
+                        {/* Icon, Name & Years Active */}
-                            {project.name}
+                        <div className="flex gap-2.5 items-center">
-                        </h1>
+                            <Image
+                                className="rounded-full"
+                                src={project.icon}
+                                alt={`The ${project.name} Project Icon`}
+                                width={24}
+                                height={24}
+                            />
 
-                        {/* Years Active */}
+                            <h1 className="font-semibold select-none pointer-events-none">
-                        <h2>
+                                {project.name}
-                            {project.startDate.format("MMM YYYY")}
+                            </h1>
-                            {project.endDate &&
+                            <div className="flex gap-1">
-                                ` - ${project.endDate.format("MMM YYYY")}`}
+                                <span className="text-green-400/80">
-                        </h2>
+                                    {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>
+
+                        {/* 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">
+                            {project.description}
+                        </p>
                     </MagicCard>
                 </Link>
             ))}

src/components/landing/nav-content/skills.tsx

@@ -2,12 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { ReactElement } from "react";
 import SimpleTooltip from "@/components/ui/simple-tooltip";
-
+import Skill from "@/types/skill";
-type Skill = {
-    name: string;
-    icon: string;
-    link: string;
-};
 
 const skillset: Skill[] = [
     // Languages
@@ -132,6 +127,7 @@ const Skills = (): ReactElement => (
             >
                 <SimpleTooltip content={skill.name}>
                     <Image
+                        className="select-none"
                         src={skill.icon}
                         alt={`${skill.name} Skill Logo`}
                         width={36}

src/components/landing/navbar.tsx

@@ -33,7 +33,7 @@ const Navbar = (): ReactElement => (
 
 const Branding = (): ReactElement => (
     <Link
-        className="flex gap-3 items-center hover:opacity-75 cursor-default transition-all transform-gpu"
+        className="flex gap-3 items-center hover:opacity-75 cursor-default select-none transition-all transform-gpu"
         href="/"
     >
         <Image
@@ -68,7 +68,10 @@ const Links = (): ReactElement => (
                     passHref
                 >
                     <NavigationMenuLink
-                        className={cn(navigationMenuTriggerStyle(), "gap-2")}
+                        className={cn(
+                            navigationMenuTriggerStyle(),
+                            "gap-2 select-none"
+                        )}
                         target="_blank"
                     >
                         <span className="hidden sm:flex">Buy me a Coffee</span>
@@ -86,7 +89,7 @@ const Links = (): ReactElement => (
 );
 
 const UsefulLinksContent = (): ReactElement => (
-    <div className="p-3 flex gap-5">
+    <div className="w-[15.5rem] p-3 flex flex-wrap gap-5">
         {/* Git */}
         <Link href="https://git.rainnny.club" target="_blank">
             <Button className="gap-3 cursor-default" variant="ghost">

src/components/landing/navigation.tsx

@@ -12,14 +12,9 @@ import BlurFade from "@/components/ui/blur-fade";
 import HomelabContent from "./nav-content/homelab";
 import Skills from "./nav-content/skills";
 import MyWork from "./nav-content/my-work";
+import NavigationItem from "@/types/navigation";
 
-type Item = {
+const items: NavigationItem[] = [
-    name: string;
-    icon: ReactElement;
-    content: ReactElement;
-};
-
-const items: Item[] = [
     {
         name: "My Work",
         icon: <BriefcaseIcon width={22} height={22} />,
@@ -38,7 +33,9 @@ const items: Item[] = [
 ];
 
 const Navigation = (): ReactElement => {
-    const [selected, setSelected] = useState<Item | undefined>(undefined);
+    const [selected, setSelected] = useState<NavigationItem | undefined>(
+        undefined
+    );
     return (
         <div className="flex flex-col">
             {/* Selection Buttons */}
@@ -54,9 +51,7 @@ const Navigation = (): ReactElement => {
                                 )}
                                 variant="ghost"
                                 onClick={() =>
-                                    active
+                                    setSelected(active ? undefined : item)
-                                        ? setSelected(undefined)
-                                        : setSelected(item)
                                 }
                             >
                                 {item.icon}
@@ -70,7 +65,7 @@ const Navigation = (): ReactElement => {
             {/* Selected Content */}
             {selected && (
                 <BlurFade key={selected.name} delay={0.05} inView>
-                    <div className="mt-5">{selected.content}</div>
+                    <div className="mt-7">{selected.content}</div>
                 </BlurFade>
             )}
         </div>

src/types/navigation.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+
+type NavigationItem = {
+    name: string;
+    icon: ReactElement;
+    content: ReactElement;
+};
+export default NavigationItem;

src/types/project.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { Moment } from "moment/moment";
+
+type Project = {
+    name: string;
+    description: string;
+    icon: string;
+    previewContent?: ReactElement | undefined;
+    link?: string | undefined;
+    startDate: Moment;
+    endDate?: Moment | undefined;
+};
+export default Project;

src/types/skill.ts

@@ -0,0 +1,6 @@
+type Skill = {
+    name: string;
+    icon: string;
+    link: string;
+};
+export default Skill;

tailwind.config.ts

@@ -1,16 +1,14 @@
-import type {Config} from "tailwindcss"
+import type { Config } from "tailwindcss";
 
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 const config = {
     darkMode: ["class"],
-    content: [
+    content: ["./src/**/*.{ts,tsx}"],
-        "./src/**/*.{ts,tsx}",
-    ],
     prefix: "",
     theme: {
         screens: {
-            'xs': '475px',
+            xs: "475px",
             ...defaultTheme.screens,
         },
         container: {
@@ -63,12 +61,12 @@ const config = {
             },
             keyframes: {
                 "accordion-down": {
-                    from: {height: "0"},
+                    from: { height: "0" },
-                    to: {height: "var(--radix-accordion-content-height)"},
+                    to: { height: "var(--radix-accordion-content-height)" },
                 },
                 "accordion-up": {
-                    from: {height: "var(--radix-accordion-content-height)"},
+                    from: { height: "var(--radix-accordion-content-height)" },
-                    to: {height: "0"},
+                    to: { height: "0" },
                 },
             },
             animation: {
@@ -78,6 +76,6 @@ const config = {
         },
     },
     plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;
 
-export default config
+export default config;