Clean up home page

src/components/Head.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 export default function HeadTags() {
     return (
         <Head>
-            <title>alexavfrantz</title>
+            <title>Alex Frantz</title>
             <meta property="og:title" content="alexavfrantz.com" />
             <meta property="og:description" content="Welcome to my personal website! See my favorite music, read my reviews on games and more!" />
             <link rel="me" href="https://mast.thatalex.dev/@alex" />

src/components/ProjectsCard.tsx

@@ -2,24 +2,35 @@ import Link from "next/link"
 
 type ProjectCardProps = {
     name: string,
+    technologies: string[],
     subHeading?: string,
     description: string,
     urlTo: string
 }
 
 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 (
-        <Link href={props.urlTo} target="_blank" rel="noreferrer">
-            <div className="mx-auto justify-center flex">
-                <div className="w-1/2 rounded-lf relative">
-                    <div className="top-0 left-0 p-2 bg-gray-800">
-                        <p className="font-bold">{props.name}</p>
-                        <p className="pb-2">{props.subHeading}</p>
-                        <hr />
-                        <p className="text-sm pt-2">{props.description}</p>
+        <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>  
+                </div>
+                <hr />
+                <p className="text-sm pt-2 leading-6">{props.description}</p>
+
+                <div className="block pt-2">
+                    <Link href={props.urlTo} target="_blank">
+                        <p className="bg-zinc-900 max-w-fit p-2 rounded-sm">Source</p>
+                    </Link>
+                </div>
             </div>
-        </Link>
+        </div>  
     )
 }

src/components/RootLayout.tsx

@@ -22,8 +22,10 @@ export default function RootLayout({ children, protectedPage }: LayoutProps) {
         if (status === "loading") {
             return (
                 <main className="min-h-screen bg-black">
-                    <Head />
-                    <p>Loading...</p>
+                    <div className="w-1/2 mx-auto">
+                        <Head />
+                        <p>Loading...</p>
+                    </div>
                 </main>
             )
         }
@@ -35,19 +37,23 @@ export default function RootLayout({ children, protectedPage }: LayoutProps) {
         } else {
             return (
                 <main className="min-h-screen bg-black">
-                    <Head />
-                    <Header />
-                    {children}
-                    <Footer />
+                    <div className="w-1/2 mx-auto">
+                        <Head />
+                        <Header />
+                        {children}
+                        <Footer />
+                    </div>
                 </main>
             )
         }
     } else {
         return (
             <main className="min-h-screen bg-black">
-                <Head />
-                <Header />
-                {children}
+                <div className="w-1/2 mx-auto">
+                    <Head />
+                    <Header />
+                    {children}
+                </div>
                 <Footer />
             </main>
         )

src/components/footer.tsx

@@ -5,7 +5,7 @@ export default function Footer() {
 
     return (
         <>
-            <div className="absolute bottom-0 left-0 w-full bg-zinc-900 p-2 text-white">
+            <div className="relative sm:w-1/2 m-auto mt-5 rounded-t-sm bg-zinc-900 p-2 text-white">
                 <p className="text-center">
                     <Link href="mailto:alex@alexavfrantz.com" className="hover:text-gray-500 hover:underline hover:cursor-pointer">
                         alex@alexavfrantz.com

src/components/header.tsx

@@ -6,8 +6,7 @@ export default function Header() {
 
     return (
         <>
-            <div className="text-white max-w-sm pt-2 pb-4 mx-auto">
-                <p className="text-2xl font-bold">alex</p>
+            <div className="text-white max-w-sm mx-auto pt-2 pb-4">
                 <div className="inline-block pb-2">
                     <HeaderItem content="home" linkTo="/" />
                     <HeaderItem content="links" linkTo="/links" />