Improve mobile responsiveness

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4
+}

README.md

@@ -2,6 +2,6 @@
 My personal portfolio website hosted [here](https://rainnny.club)
 
 ## TODO
-- [ ] Mobile Responsiveness
+- [x] Mobile Responsiveness
 - [ ] Discord Integration (Status, Activity, etc)
 - [ ] Add Configuration

package.json

@@ -22,6 +22,7 @@
 		"next-themes": "^0.3.0",
 		"react": "^18",
 		"react-dom": "^18",
+		"sharp": "^0.33.5",
 		"tailwind-merge": "^2.5.2",
 		"tailwindcss-animate": "^1.0.7"
 	},

src/app/(pages)/page.tsx

@@ -11,7 +11,7 @@ const LandingPage = (): ReactElement => (
         }}
     >
         <Navbar />
-		<div className="h-full flex flex-col justify-center">
+        <div className="px-5 xs:px-7 h-full flex flex-col justify-center">
             <Greeting />
         </div>
     </main>

src/app/globals.css

@@ -65,6 +65,7 @@
     * {
         @apply border-border;
     }
+
     body {
         @apply bg-background text-foreground;
     }

src/components/landing/greeting.tsx

@@ -14,7 +14,7 @@ const Greeting = (): ReactElement => {
         <section className="flex flex-col gap-5 items-center">
             <BlurFade delay={0.3} inView>
                 <Image
-					className="shadow-2xl shadow-blue-500 rounded-full select-none pointer-events-none"
+                    className="shadow-2xl shadow-blue-500 rounded-full scale-90 sm:scale-100 select-none pointer-events-none transition-all transform-gpu"
                     src="/me.png"
                     alt="My Selfie (:"
                     width={174}
@@ -25,8 +25,8 @@ const Greeting = (): ReactElement => {
             <BlurFade delay={0.6} inView>
                 <h1
                     className={cn(
-						"flex gap-2 justify-center items-center text-4xl font-bold select-none pointer-events-none",
+                        "flex gap-2 justify-center items-center text-3xl sm:text-4xl font-bold select-none pointer-events-none transition-all transform-gpu",
-						"text-black dark:text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/60 to-white",
+                        "text-black dark:text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/60 to-white"
                     )}
                 >
                     Hello, I&apos;m
@@ -48,8 +48,8 @@ const Greeting = (): ReactElement => {
             <BlurFade delay={0.9} inView>
                 <FlipWords
                     className={cn(
-						"-mt-3 p-0 max-w-[23rem] text-center select-none pointer-events-none",
+                        "-mt-3 p-0 max-w-[23rem] text-sm sm:text-base text-center select-none pointer-events-none transition-all transform-gpu",
-						"text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/85 to-white",
+                        "text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/85 to-white"
                     )}
                     words={[
                         `A ${now.diff(moment([2002, 10, 13]), "years")} year old${" "}

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { MagicCard } from "@/components/ui/magic-card";
-import { cn } from "@/lib/utils";
 import moment, { Moment } from "moment";
 import { useTheme } from "next-themes";
 import { UseThemeProps } from "next-themes/dist/types";
@@ -28,25 +27,40 @@ const projects: Project[] = [
         link: "https://discord.gg/WildPrison",
         previewContent: (
             <p>
-				WildNetwork is a Minecraft server that contains multiple gamemodes, one
+                WildNetwork is a Minecraft server that contains multiple
-				of which is Prison, which is the most popular. I first joined the server
+                gamemodes, one of which is Prison, which is the most popular. I
-				as a Developer where I would work behind the scenes to create new
+                first joined the server as a Developer where I would work behind
-				features, now I&apos;m currently working as a System Administrator.
+                the scenes to create new features, now I&apos;m currently
+                working as a System Administrator.
             </p>
         ),
         startDate: moment([2020, 7, 1]),
     },
+    {
+        name: "Bonfire",
+        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",
         link: "https://youtube.com/@iamLucid",
         previewContent: (
             <p>
-				Lucity was a minigame network for the game Minecraft, and was owned by
+                Lucity was a minigame network for the game Minecraft, and was
-				the YouTuber iamLucid. When I worked at Lucity, I was the development
+                owned by the YouTuber iamLucid. When I worked at Lucity, I was
-				lead, I focused mainly on infrastructure, databases, and monitoring
+                the development lead, I focused mainly on infrastructure,
-				systems. A few things that I have made - a dynamically managed server
+                databases, and monitoring systems. A few things that I have made
-				system, proxy rotation via the TCPShield API, and an API that can
+                - a dynamically managed server system, proxy rotation via the
-				interact with the entire network from a normal Java app.
+                TCPShield API, and an API that can interact with the entire
+                network from a normal Java app.
             </p>
         ),
         startDate: moment([2020, 7, 1]),
@@ -56,12 +70,13 @@ const projects: Project[] = [
         name: "Rainplex",
         previewContent: (
             <p>
-				Rainplex was a remake of the once popular Minecraft server, Mineplex.
+                Rainplex was a remake of the once popular Minecraft server,
-				Rainplex initially came to light using the plugin, Skript where it just
+                Mineplex. Rainplex initially came to light using the plugin,
-				contained a Hub. After some time, the entirety of the network was
+                Skript where it just contained a Hub. After some time, the
-				re-coded in the Java programming from the ground up. Rainplex went
+                entirety of the network was re-coded in the Java programming
-				through numerous re-codes over the time it was active, however I have
+                from the ground up. Rainplex went through numerous re-codes over
-				since abandoned development due to lack of free time.
+                the time it was active, however I have since abandoned
+                development due to lack of free time.
             </p>
         ),
         startDate: moment([2018, 8, 1]),
@@ -72,9 +87,10 @@ const projects: Project[] = [
         link: "https://github.com/ArcaneClientNET",
         previewContent: (
             <p>
-				Arcane is the all-in-one Minecraft mod pack. This client was built to be
+                Arcane is the all-in-one Minecraft mod pack. This client was
-				similar to LunarClient for portfolio and experience sake. I have since
+                built to be similar to LunarClient for portfolio and experience
-				abandoned development due to lack of free time.
+                sake. I have since abandoned development due to lack of free
+                time.
             </p>
         ),
         startDate: moment([2021, 6, 1]),
@@ -90,7 +106,9 @@ const MyWork = (): ReactElement => {
                 <Link key={index} href={project.link || "#"} target="_blank">
                     <MagicCard
                         className="w-[15rem] p-3.5"
-						gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
+                        gradientColor={
+                            theme === "dark" ? "#262626" : "#D9D9D955"
+                        }
                     >
                         <h1 className="font-bold select-none pointer-events-none">
                             {project.name}
@@ -99,7 +117,8 @@ const MyWork = (): ReactElement => {
                         {/* Years Active */}
                         <h2>
                             {project.startDate.format("MMM YYYY")}
-							{project.endDate && ` - ${project.endDate.format("MMM YYYY")}`}
+                            {project.endDate &&
+                                ` - ${project.endDate.format("MMM YYYY")}`}
                         </h2>
                     </MagicCard>
                 </Link>

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

@@ -1,11 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
 import { ReactElement } from "react";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import SimpleTooltip from "@/components/ui/simple-tooltip";
 
 type Skill = {
@@ -129,7 +124,12 @@ const skillset: Skill[] = [
 const Skills = (): ReactElement => (
     <div className="max-w-[30rem] flex flex-wrap gap-3 justify-center">
         {skillset.map((skill, index) => (
-			<Link key={index} className="cursor-default" href={skill.link}>
+            <Link
+                key={index}
+                className="cursor-default hover:opacity-75 transition-all transform-gpu"
+                href={skill.link}
+                target="_blank"
+            >
                 <SimpleTooltip content={skill.name}>
                     <Image
                         src={skill.icon}

src/components/landing/navbar.tsx

@@ -4,35 +4,36 @@ import { ReactElement } from "react";
 import {
     NavigationMenu,
     NavigationMenuContent,
-	NavigationMenuIndicator,
     NavigationMenuItem,
     NavigationMenuLink,
     NavigationMenuList,
     NavigationMenuTrigger,
-	NavigationMenuViewport,
+    navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
-import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 import { HeartIcon } from "@heroicons/react/24/solid";
 import { cn } from "@/lib/utils";
 import ThemeSwitcher from "./theme-switcher";
 import { Button } from "@/components/ui/button";
-import { BookOpenIcon } from "@heroicons/react/24/outline";
+import {
-import { SignalIcon } from "@heroicons/react/24/outline";
+    BookOpenIcon,
+    CodeBracketIcon,
+    SignalIcon,
+} from "@heroicons/react/24/outline";
 import BlurFade from "@/components/ui/blur-fade";
-import { CodeBracketIcon } from "@heroicons/react/24/outline";
 
 const Navbar = (): ReactElement => (
     <BlurFade className="pt-1" delay={1.35} inView>
-		<nav className="py-4 flex gap-14 justify-center items-center border-b">
+        <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">
             <Branding />
             <Links />
+            <ThemeSwitcher />
         </nav>
     </BlurFade>
 );
 
 const Branding = (): ReactElement => (
     <Link
-		className="flex gap-4 items-center hover:opacity-75 cursor-default transition-all transform-gpu"
+        className="flex gap-3 items-center hover:opacity-75 cursor-default transition-all transform-gpu"
         href="/"
     >
         <Image
@@ -42,7 +43,7 @@ const Branding = (): ReactElement => (
             width={40}
             height={40}
         />
-		<h1 className="text-xl font-bold">RainnnyCLUB</h1>
+        <h1 className="hidden sm:flex text-xl font-bold">RainnnyCLUB</h1>
     </Link>
 );
 
@@ -61,12 +62,17 @@ const Links = (): ReactElement => (
 
             {/* Donate */}
             <NavigationMenuItem>
-				<Link href="https://buymeacoffee.com/Rainnny7" legacyBehavior passHref>
+                <Link
+                    href="https://buymeacoffee.com/Rainnny7"
+                    legacyBehavior
+                    passHref
+                >
                     <NavigationMenuLink
                         className={cn(navigationMenuTriggerStyle(), "gap-2")}
                         target="_blank"
                     >
-						<span>Buy me a Coffee</span>
+                        <span className="hidden sm:flex">Buy me a Coffee</span>
+                        <span className="sm:hidden">Donate</span>
                         <HeartIcon
                             className="text-red-500 animate-pulse"
                             width={20}
@@ -75,11 +81,6 @@ const Links = (): ReactElement => (
                     </NavigationMenuLink>
                 </Link>
             </NavigationMenuItem>
-
-			{/* Theme Switcher */}
-			<NavigationMenuItem>
-				<ThemeSwitcher />
-			</NavigationMenuItem>
         </NavigationMenuList>
     </NavigationMenu>
 );

src/components/landing/navigation.tsx

@@ -2,9 +2,11 @@
 
 import { ReactElement, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { BriefcaseIcon } from "@heroicons/react/24/outline";
+import {
-import { WrenchIcon } from "@heroicons/react/24/outline";
+    BriefcaseIcon,
-import { ServerStackIcon } from "@heroicons/react/24/outline";
+    ServerStackIcon,
+    WrenchIcon,
+} from "@heroicons/react/24/outline";
 import { cn } from "@/lib/utils";
 import BlurFade from "@/components/ui/blur-fade";
 import HomelabContent from "./nav-content/homelab";
@@ -40,19 +42,21 @@ const Navigation = (): ReactElement => {
     return (
         <div className="flex flex-col">
             {/* Selection Buttons */}
-			<div className="flex gap-5 justify-center">
+            <div className="flex gap-3 sm:gap-6 justify-center transition-all transform-gpu">
                 {items.map((item, index) => {
                     const active: boolean = selected === item;
                     return (
                         <BlurFade key={index} delay={0.9 + 0.3 * index} inView>
                             <Button
                                 className={cn(
-									"py-6 gap-2 bg-white/75 dark:bg-zinc-800/75 cursor-default hover:opacity-75 transition-all transform-gpu",
+                                    "px-3 sm:px-4 py-6 gap-2 shadow-sm bg-white/75 dark:bg-zinc-800/75 rounded-xl cursor-default hover:opacity-75 transition-all transform-gpu",
-									active && "opacity-70",
+                                    active && "opacity-70"
                                 )}
                                 variant="ghost"
                                 onClick={() =>
-									active ? setSelected(undefined) : setSelected(item)
+                                    active
+                                        ? setSelected(undefined)
+                                        : setSelected(item)
                                 }
                             >
                                 {item.icon}
@@ -66,7 +70,7 @@ const Navigation = (): ReactElement => {
             {/* Selected Content */}
             {selected && (
                 <BlurFade key={selected.name} delay={0.05} inView>
-					<div className="mt-4 p-4 border rounded-xl">{selected.content}</div>
+                    <div className="mt-5">{selected.content}</div>
                 </BlurFade>
             )}
         </div>

src/components/landing/theme-switcher.tsx

@@ -12,7 +12,7 @@ const ThemeSwitcher = (): ReactElement => {
     const isLight = theme === "light";
     return (
         <Button
-			className="relative mx-7 px-5 py-1.5 flex items-center cursor-default hover:opacity-85"
+            className="relative px-5 py-1.5 flex items-center cursor-default hover:opacity-85"
             variant="ghost"
             onClick={() => setTheme(isLight ? "dark" : "light")}
         >

src/components/ui/button.tsx

@@ -1,15 +1,16 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
     "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
             variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+                default:
+                    "bg-primary text-primary-foreground hover:bg-primary/90",
                 destructive:
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
@@ -31,26 +32,26 @@ const buttonVariants = cva(
             size: "default",
         },
     }
-)
+);
 
 export interface ButtonProps
     extends React.ButtonHTMLAttributes<HTMLButtonElement>,
         VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+    asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+        const Comp = asChild ? Slot : "button";
         return (
             <Comp
                 className={cn(buttonVariants({ variant, size, className }))}
                 ref={ref}
                 {...props}
             />
-    )
+        );
     }
-)
+);
-Button.displayName = "Button"
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/flip-words.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
-import { AnimatePresence, motion, LayoutGroup } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 
 export const FlipWords = ({
@@ -60,7 +60,7 @@ export const FlipWords = ({
                 }}
                 className={cn(
                     "z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2",
-					className,
+                    className
                 )}
                 key={currentWord}
             >
@@ -79,8 +79,16 @@ export const FlipWords = ({
                         {word.split("").map((letter, letterIndex) => (
                             <motion.span
                                 key={word + letterIndex}
-								initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
+                                initial={{
-								animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                                    opacity: 0,
+                                    y: 10,
+                                    filter: "blur(8px)",
+                                }}
+                                animate={{
+                                    opacity: 1,
+                                    y: 0,
+                                    filter: "blur(0px)",
+                                }}
                                 transition={{
                                     delay: wordIndex * 0.3 + letterIndex * 0.05,
                                     duration: 0.2,

src/components/ui/magic-card.tsx

@@ -27,7 +27,7 @@ export function MagicCard({
             mouseX.set(e.clientX - left);
             mouseY.set(e.clientY - top);
         },
-    [mouseX, mouseY],
+        [mouseX, mouseY]
     );
 
     const handleMouseLeave = useCallback(() => {
@@ -46,7 +46,7 @@ export function MagicCard({
             onMouseLeave={handleMouseLeave}
             className={cn(
                 "group relative flex size-full overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-900 border text-black dark:text-white",
-        className,
+                className
             )}
         >
             <div className="relative z-10">{children}</div>

src/components/ui/navigation-menu.tsx

@@ -13,7 +13,7 @@ const NavigationMenu = React.forwardRef<
         ref={ref}
         className={cn(
             "relative z-10 flex max-w-max flex-1 items-center justify-center",
-			className,
+            className
         )}
         {...props}
     >
@@ -31,7 +31,7 @@ const NavigationMenuList = React.forwardRef<
         ref={ref}
         className={cn(
             "group flex flex-1 list-none items-center justify-center space-x-1",
-			className,
+            className
         )}
         {...props}
     />
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-	"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium cursor-default transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+    "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium cursor-default transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -70,7 +70,7 @@ const NavigationMenuContent = React.forwardRef<
         ref={ref}
         className={cn(
             "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-			className,
+            className
         )}
         {...props}
     />
@@ -87,7 +87,7 @@ const NavigationMenuViewport = React.forwardRef<
         <NavigationMenuPrimitive.Viewport
             className={cn(
                 "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-				className,
+                className
             )}
             ref={ref}
             {...props}
@@ -105,7 +105,7 @@ const NavigationMenuIndicator = React.forwardRef<
         ref={ref}
         className={cn(
             "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-			className,
+            className
         )}
         {...props}
     >

src/components/ui/tooltip.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
     React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -24,7 +24,7 @@ const TooltipContent = React.forwardRef<
         )}
         {...props}
     />
-))
+));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
+import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge"
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs));
 }

tailwind.config.ts

@@ -1,15 +1,18 @@
-import type { Config } from "tailwindcss"
+import type {Config} from "tailwindcss"
+
+const defaultTheme = require('tailwindcss/defaultTheme')
 
 const config = {
     darkMode: ["class"],
     content: [
-    './pages/**/*.{ts,tsx}',
+        "./src/**/*.{ts,tsx}",
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
     ],
     prefix: "",
     theme: {
+        screens: {
+            'xs': '475px',
+            ...defaultTheme.screens,
+        },
         container: {
             center: true,
             padding: "2rem",
@@ -60,12 +63,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: {