From 31b1804fc9a67bc5a9d3040fa5a34d14d271a14f Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Sat, 3 Jan 2026 13:45:38 -0600
Subject: [PATCH] refactor: redesign homepage navigation and social links

- Move navigation to top-right header
- Replace simple underline links with styled card-based social links
- Add RSS and GitHub icons to header
- Remove About section from top nav
---
 src/app/(frontend)/page.tsx | 98 +++++++++++++++++++++++++------------
 1 file changed, 66 insertions(+), 32 deletions(-)

diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx
index 120783b..0d8c9af 100644
--- a/src/app/(frontend)/page.tsx
+++ b/src/app/(frontend)/page.tsx
@@ -3,6 +3,37 @@ import { Flex, Button, Text, Container, Box } from "@radix-ui/themes";
 import Link from "next/link";
 import { SiGithub, IconType } from "@icons-pack/react-simple-icons";
 import { SiLinkedin } from "react-icons/si";
+import { Rss } from "lucide-react";
+
+function NavLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link href={href}>
+      <Text size="3" className="text-(--gray-11) hover:text-(--gray-12)">
+        {children}
+      </Text>
+    </Link>
+  );
+}
+
+function IconLink({
+  href,
+  icon: Icon,
+}: {
+  href: string;
+  icon: React.ElementType;
+}) {
+  return (
+    <Link href={href} className="text-(--gray-11) hover:text-(--gray-12)">
+      <Icon className="size-5" />
+    </Link>
+  );
+}
 
 function SocialLink({
   href,
@@ -14,10 +45,15 @@ function SocialLink({
   children: React.ReactNode;
 }) {
   return (
-    <Link href={href} className="border-b border-(--gray-7)">
-      <Flex align="center" className="gap-x-1.5">
-        <IconComponent className="size-5 text-(--gray-11)" />
-        <Text className="text-(--gray-12)">{children}</Text>
+    <Link href={href}>
+      <Flex
+        align="center"
+        className="gap-x-1.5 px-1.5 py-1 rounded-xs bg-zinc-900 shadow-sm hover:bg-zinc-800 transition-colors"
+      >
+        <IconComponent className="size-4 text-zinc-300" />
+        <Text size="2" className="text-zinc-100">
+          {children}
+        </Text>
       </Flex>
     </Link>
   );
@@ -29,36 +65,34 @@ export default async function HomePage() {
       className="overflow-x-hidden font-schibsted"
       dotsClassName="animate-bg"
     >
-      <Flex
-        direction="row"
-        justify="between"
-        align="center"
-        width="100%"
-        pt="5"
-        px="6"
-        pb="9"
-      >
-        <Flex direction="column">
-          <Text size="6" weight="bold" highContrast>
-            Ryan Walters,
-          </Text>
-          <Text
-            size="6"
-            weight="regular"
-            style={{
-              color: "var(--gray-11)",
-            }}
-          >
-            Software Engineer
-          </Text>
+      {/* Top Navigation Bar */}
+      <Flex justify="end" align="center" width="100%" pt="5" px="6" pb="9">
+        <Flex gap="4" align="center">
+          <NavLink href="/projects">Projects</NavLink>
+          <NavLink href="/blog">Blog</NavLink>
+          <IconLink href="https://github.com/Xevion" icon={SiGithub} />
+          <IconLink href="/rss" icon={Rss} />
         </Flex>
-
-        <Text size="6" className="font-semibold" highContrast>
-          About
-        </Text>
       </Flex>
+
+      {/* Main Content */}
       <Flex align="center" direction="column">
-        <Box className="max-w-2xl mx-6 border-y border-(--gray-7) divide-y divide-(--gray-7)">
+        <Box className="max-w-2xl mx-6 border-b border-(--gray-7) divide-y divide-(--gray-7)">
+          {/* Name & Job Title */}
+          <Flex direction="column" pb="4">
+            <Text size="6" weight="bold" highContrast>
+              Ryan Walters,
+            </Text>
+            <Text
+              size="6"
+              weight="regular"
+              style={{
+                color: "var(--gray-11)",
+              }}
+            >
+              Software Engineer
+            </Text>
+          </Flex>
           <Box py="4" className="text-(--gray-12)">
             <Text style={{ fontSize: "0.95em" }}>
               A fanatical software engineer with expertise and passion for
@@ -70,7 +104,7 @@ export default async function HomePage() {
           <Box py="3">
             <Text>Find me on</Text>
             <Flex gapX="2" pl="3" pt="3" pb="2">
-              <SocialLink href="https://github.com/ryanwalters" icon={SiGithub}>
+              <SocialLink href="https://github.com/Xevion" icon={SiGithub}>
                 GitHub
               </SocialLink>
               <SocialLink