Project card updates, resume page

src/components/ProjectsCard.tsx

@@ -2,6 +2,7 @@ import Link from "next/link"
 
 type ProjectCardProps = {
     name: string,
+    subHeading?: string,
     key: string,
     description: string,
     urlTo: string
@@ -10,11 +11,13 @@ type ProjectCardProps = {
 export default function ProjectCard(props: ProjectCardProps) {
     return (
         <Link href={props.urlTo} target="_blank" rel="noreferrer">
-            <div className="inline">
+            <div className="mx-auto text-center justify-center flex">
                 <div key={props.key} className="w-1/2 rounded-lf relative">
-                    <div className="top-0 left-0 p-2 bg-gray-500">
+                    <div className="top-0 left-0 p-2 bg-gray-800">
                         <p className="font-bold">{props.name}</p>
-                        <p className="text-sm">{props.description}</p>
+                        <p className="pb-2">{props.subHeading}</p>
+                        <hr />
+                        <p className="text-sm pt-2">{props.description}</p>
                     </div>
                 </div>  
             </div>

src/pages/resume.tsx

@@ -0,0 +1,71 @@
+import Header from "@/components/header"
+import Footer from "@/components/footer"
+import Image from "next/image"
+import ProjectCard from "@/components/ProjectsCard"
+
+export default function Resume() {
+    return (
+        <main className="min-h-screen bg-black">
+            <Header />
+
+            <div className="text-center mx-auto text-white">
+                <div className="flex flex-wrap justify-center pb-2">
+                    <Image src="https://storage.thatalex.dev/content/pfp.png" width="130" height="130" alt="PFP" className="rounded-3xl" />
+                </div>
+                <h1 className="text-2xl font-bold">Alex Frantz</h1>
+                <p>alex@alexavfrantz.com</p>
+                <p>Manual QA Tester + Test Automation Engineer</p>
+
+                <div className="flex flex-wrap w-8/12 mx-auto">
+                    <div className="flex-1 p-4">
+                        <h1 className="pb-2">Experience</h1>
+                        <hr className="w-1/12 mx-auto" />
+                        <div className="flex flex-col justify-center mx-auto pt-2">
+                            <ProjectCard 
+                                key="1"
+                                name="Medal.tv -- QA Engineer"
+                                subHeading="Mar. 2022 - Present"
+                                description="Testing features before anyone else to weed out breaking bugs. Also heading our test automation efforts to make testing as smooth as possible."
+                                urlTo="https://medal.tv"
+                            />
+                        </div>
+
+                        <h1 className="pb-2 pt-2">Education</h1>
+                        <hr className="w-1/12 mx-auto" />
+                        <div className="flex flex-col justify-center mx-auto pt-2">
+                            <ProjectCard 
+                                key="1"
+                                name="Acellus Academy"
+                                description="High school accrediation, studying Computer Science"
+                                urlTo="https://medal.tv"
+                            />
+                        </div>
+                    </div>
+                    <div className="flex-1 p-4">
+                        <p className="pb-2">Skills</p>
+                        <hr className="w-1/12 mx-auto" />
+                        <ul className="pt-2 pb-2 list-disc list-inside">
+                            <li>
+                                Test Automation
+                            </li>
+                            <li>
+                                End-to-end Testing
+                            </li>
+                            <li>
+                                Customer Support
+                            </li>
+                        </ul>
+
+                        <hr className="w-1/12 mx-auto" />
+
+                        <p className="pt-2">Contact</p>
+                        <p>Email: alex@alexavfrantz.com</p>
+                        <p>LinkedIn: in/thatalex</p>
+                    </div>
+                </div>
+            </div>
+
+            <Footer />
+        </main>
+    )
+}