move projects to projects page

src/components/ProjectsCard.tsx

@@ -10,27 +10,29 @@ type ProjectCardProps = {
 
 export default function ProjectCard(props: ProjectCardProps) {
     const technologies = props.technologies.map((v,k) => {
-        return <p key={k} className="border-solid border border-red-500 max-w-fit p-1 inline">{v}</p>
+        return <div key={k} className="inline">
+            <div className="max-w-fit p-1 inline">
+                {v}
+            </div>
+        </div>
     })
 
     return (
-        <div className="lg:w-1/2 sm:max-w-1/2 rounded-lf">
-            <div className="top-0 left-0 p-2 bg-gray-800">
-                <div className="pb-2">
-                <p className="font-bold inline pr-2">{props.name}</p>
-                    <div className="pt-2 pb-2 inline-block space-x-2">
-                        {technologies}
-                    </div>
+        <div className="bg-zinc-700 max-w-lg">
+            <div className="p-2 space-y-2 space-x-2">
+                <h1 className="font-bold text-2xl inline pl-2">{props.name}</h1>
+                <div className="inline-block">
+                    {technologies}
                 </div>
-                <hr />
-                <p className="text-sm pt-2 leading-6">{props.description}</p>
-
-                <div className="block pt-2">
+                <hr className="max-w-xs" />
+                <p>{props.description}</p>
+                
+                <div className="bg-zinc-900 max-w-fit p-2 rounded-lg">
                     <Link href={props.urlTo} target="_blank">
-                        <p className="bg-zinc-900 max-w-fit p-2 rounded-sm">Source</p>
+                        <p>Source</p>
                     </Link>
                 </div>
             </div>
-        </div>  
+        </div>
     )
 }

src/components/RootLayout.tsx

@@ -28,34 +28,24 @@ export default function RootLayout({ children, protectedPage }: LayoutProps) {
                     </div>
                 </main>
             )
-        }
-
-        if (status === "unauthenticated") {
+        } else if (status === "unauthenticated") {
             Router.replace("/").catch(() => {
                 console.error("Failed to reroute user!")
             })
-        } else {
             return (
-                <main className="min-h-screen bg-black">
-                    <div className="w-1/2 mx-auto">
-                        <Head />
-                        <Header />
-                        {children}
-                        <Footer />
-                    </div>
-                </main>
+                <></>
             )
         }
-    } else {
-        return (
-            <main className="min-h-screen bg-black">
-                <div className="w-1/2 mx-auto">
-                    <Head />
-                    <Header />
-                    {children}
-                </div>
-                <Footer />
-            </main>
-        )
     }
+
+    return (
+        <main className="min-h-screen bg-black">
+            <div className="lg:w-1/2 sm:w-full mx-auto">
+                <Head />
+                <Header />
+                {children}
+            </div>
+            <Footer />
+        </main>
+    )
 }

src/components/header.tsx

@@ -10,7 +10,7 @@ export default function Header() {
                 <div className="inline-block pb-2">
                     <HeaderItem content="home" linkTo="/" />
                     <HeaderItem content="links" linkTo="/links" />
-                    <HeaderItem content="blog" linkTo="/blog" />
+                    <HeaderItem content="projects" linkTo="/projects" />
                     { status === "authenticated" &&
                         <HeaderItem 
                             content="create"