refactor: move navbar & footer to layout.tsx

steadyfall · steadyfall · commit 4a6b731ee1c1 · 2024-11-09T06:14:10.000-05:00
diff --git a/site/src/app/layout.tsx b/site/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { Inter, Space_Mono } from 'next/font/google'
 import { Providers } from './providers'
 import "./globals.css";
 import { detailsForMetadata } from "./config";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 
 const inter = Inter({ subsets: ['latin'] })
 const spaceMono = Space_Mono({ 
@@ -58,7 +60,11 @@ export default function RootLayout({
     <html lang="en" className={`${inter.className} ${spaceMono.variable}`} suppressHydrationWarning>
       <body suppressHydrationWarning>
         <div className={`min-h-screen bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200`}>
+          <div className="transition-colors duration-300">
+            <Navbar />
             <Providers> {children} </Providers>
+            <Footer />
+          </div>
         </div>
       </body>
     </html>
diff --git a/site/src/app/page.tsx b/site/src/app/page.tsx
@@ -1,32 +1,24 @@
 "use client";
 
 import Header from '@/components/Header'
-import Footer from '@/components/Footer'
 import About from '@/components/About'
 import { Experiences } from '@/components/Experiences'
 import { Projects } from '@/components/Projects'
 import { Education } from '@/components/Education'
 import { Skills } from '@/components/Skills';
-import Navbar from '@/components/Navbar';
 import { personalDetails, experiencesArray, projectsArray, skillsArray } from '@/app/config';
-import SmoothScroll from '@/hooks/smoothScrollEffect';
 
 export default function Portfolio() {
   return (
-    <div className="transition-colors duration-300">
-      <SmoothScroll />
-      <Navbar />
-      <div className="mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
-        <Header {...personalDetails} />
-        <main className="container mx-auto py-8 z-1">
-          <About />
-          <Experiences arr={experiencesArray} />
-          <Education />
-          <Skills arr={skillsArray}/>
-          <Projects arr={projectsArray} />
-        </main>
-        <Footer />
-      </div>
+    <div className="mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
+      <Header {...personalDetails} />
+      <main className="container mx-auto py-8 z-1">
+        <About />
+        <Experiences arr={experiencesArray} />
+        <Education />
+        <Skills arr={skillsArray}/>
+        <Projects arr={projectsArray} />
+      </main>
     </div>
   )
 }
diff --git a/site/src/components/Footer.tsx b/site/src/components/Footer.tsx
@@ -1,9 +1,13 @@
 import { ArrowUpRight } from "lucide-react"
 import { detailsForMetadata, personalDetails } from "@/app/config"
+import { cn } from "@/lib/utils"
 
 const Footer = () => {
   return (
-    <footer className="py-16 text-gray-500 dark:text-gray-400 flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between">
+    <footer className={cn(
+      "py-16 text-gray-500 dark:text-gray-400 flex flex-col items-center justify-center sm:flex-row-reverse sm:justify-between",
+      "mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl"
+    )}>
       <div className="flex justify-center md:justify-start space-x-4">
           <a href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
           className="inline-flex items-center hover:underline hover:underline-offset-2 text-pink-500"
diff --git a/site/src/hooks/smoothScrollEffect.tsx b/site/src/hooks/smoothScrollEffect.tsx
