Index page updates

src/components/Dropdown.tsx

@@ -0,0 +1,22 @@
+import React, {useState} from 'react';
+
+type DropdownProps = {
+    name: string,
+    content: React.JSX.Element[]
+}
+
+export default function Dropdown(props: DropdownProps) {
+    const [active, setActive] = useState(false)
+    return (
+        <>
+            <div className="relative flex py-5 items-center hover:cursor-pointer" onClick={() => active ? setActive(false) : setActive(true)}>
+                <span className="flex-shrink mx-4 text-gray-400">{props.name}</span>
+                <div className="flex-grow border-t border-gray-400"></div>
+            </div>
+
+            <div className={`${active ? "block" : "hidden"} inline-block`}>
+                {props.content}
+            </div>
+        </>
+    )
+}

src/components/ProjectsCard.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link"
+
+type ProjectCardProps = {
+    name: string,
+    key: string,
+    description: string,
+    urlTo: string
+}
+
+export default function ProjectCard(props: ProjectCardProps) {
+    return (
+        <Link href={props.urlTo} target="_blank" rel="noreferrer">
+            <div className="inline">
+                <div key={props.key} className="w-1/2 rounded-lf relative">
+                    <div className="top-0 left-0 p-2 bg-gray-500">
+                        <p className="font-bold">{props.name}</p>
+                        <p className="text-sm">{props.description}</p>
+                    </div>
+                </div>  
+            </div>
+        </Link>
+    )
+}

src/components/footer.tsx

@@ -10,6 +10,9 @@ export default function Footer() {
                         alex@alexavfrantz.com
                     </Link>
                 </p>
+                <p className="text-center">
+                    All music, game, TV and movie covers are owned by their respective authors.
+                </p>
                 <p className="text-center">
                     &copy; Alex Frantz, 2023
                 </p>

src/pages/index.tsx

@@ -1,14 +1,55 @@
 import Header from "@/components/header";
 import Footer from "@/components/footer";
+import Dropdown from "@/components/Dropdown";
+import ProjectCard from "@/components/ProjectsCard";
+import Image from 'next/image';
 
 export default function Home() {
     return (
         <main className="min-h-screen bg-black">
             <div className="w-1/2 mx-auto text-white">
                 <Header />
-                <p>test</p>
+                
+                <Dropdown content={Music()} name="Music" />
+                <Dropdown content={Games()} name="Games" />
+                <Dropdown content={Projects()} name="Projects" />
+
                 <Footer />
             </div>
         </main>
     )
 } 
+
+function Projects() {
+    return [
+        <ProjectCard 
+            key="1"
+            name="Splitstat" 
+            description="This was a Discord bot that allowed you to see your statistics from the SplitStat game" 
+            urlTo="https://github.com/azpha/splitstat"
+        />,
+        <ProjectCard 
+            key="2"
+            name="Rconify" 
+            description="A simple tool to connect to RCON services that comply with Valve's RCON specifications" 
+            urlTo="https://github.com/azpha/rconify" 
+        />
+    ]
+}
+
+function Games() {
+    return [
+        <Image key="1" src="https://storage.thatalex.dev/content/firefly-logo-new.png" alt="TLOU Firefly" width="100" height="100" className="inline mr-2" />,
+        <Image key="2" src="https://storage.thatalex.dev/content/spiderman.png" alt="Spiderman" width="100" height="100" className="inline mr-2" />,
+        <Image key="3" src="https://storage.thatalex.dev/content/rdr2.png" alt="Red Dead Redemption 2" width="100" height="100" className="inline mr-2" />
+    ]
+}
+
+function Music() {
+    return [
+        <Image key="1" src="https://storage.thatalex.dev/content/5sos.png" alt="5 Seconds of Summer Cover" width="100" height="100" className="inline mr-2" />,
+        <Image key="2" src="https://storage.thatalex.dev/content/tlou-covers-and-rarities.jpg" alt="TLOU Covers and Rarities Cover" width="100" height="100" className="inline mr-2" />,
+        <Image key="3" src="https://storage.thatalex.dev/content/zach-bryan.png" alt="Zach Bryan Cover" width="100" height="100" className="inline mr-2" />,
+        <Image key="4" src="https://storage.thatalex.dev/content/reputation.jpg" alt="Reputation Cover" width="100" height="100" className="inline mr-2" />
+    ]
+}