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="lg:w-1/2 sm:max-w-1/2 rounded-lf">
-            <div className="mx-auto justify-center flex">
+            <div className="top-0 left-0 p-2 bg-gray-800">
-                <div className="w-1/2 rounded-lf relative">
+                <div className="pb-2">
-                    <div className="top-0 left-0 p-2 bg-gray-800">
+                <p className="font-bold inline pr-2">{props.name}</p>
-                        <p className="font-bold">{props.name}</p>
+                    <div className="pt-2 pb-2 inline-block space-x-2">
-                        <p className="pb-2">{props.subHeading}</p>
+                        {technologies}
-                        <hr />
-                        <p className="text-sm pt-2">{props.description}</p>
                     </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 />
+                    <div className="w-1/2 mx-auto">
-                    <p>Loading...</p>
+                        <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 />
+                    <div className="w-1/2 mx-auto">
-                    <Header />
+                        <Head />
-                    {children}
+                        <Header />
-                    <Footer />
+                        {children}
+                        <Footer />
+                    </div>
                 </main>
             )
         }
     } else {
         return (
             <main className="min-h-screen bg-black">
-                <Head />
+                <div className="w-1/2 mx-auto">
-                <Header />
+                    <Head />
-                {children}
+                    <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">
+            <div className="text-white max-w-sm mx-auto pt-2 pb-4">
-                <p className="text-2xl font-bold">alex</p>
                 <div className="inline-block pb-2">
                     <HeaderItem content="home" linkTo="/" />
                     <HeaderItem content="links" linkTo="/links" />

src/pages/create.tsx

@@ -14,38 +14,8 @@ export default function CreatePage() {
     const [message, setMessage] = useState<string | null>(null)
 
     // trpc hooks
-    const postMutation = api.post.create.useMutation()
     const linksMutation = api.links.create.useMutation()
 
-    function sanitizeTitleForLink(title: string) {
-        return title.replaceAll(" ", "-").toLowerCase()
-    }
-
-    function onPostSubmit(event: FormEvent<HTMLFormElement>) {
-        const form = event.target as HTMLFormElement
-
-        const titleElement = form.elements.namedItem('title') as HTMLInputElement;
-        const reviewElement = form.elements.namedItem('review') as HTMLInputElement;
-        const imageElement = form.elements.namedItem('image') as HTMLInputElement;
-        const typeElement = form.elements.namedItem('type') as HTMLInputElement;
-
-        if (!titleElement.value || !reviewElement.value || !imageElement.value || !typeElement.value) {
-            event.preventDefault();
-
-            setMessage("One or more values were missing!")
-            setTimeout(() => setMessage(null), 5000)
-        } else {
-            const object = {
-                name: sanitizeTitleForLink(titleElement.value),
-                reviewContents: reviewElement.value,
-                image: imageElement.value,
-                type: typeElement.value
-            }
-    
-            postMutation.mutate(object)
-        }
-    }
-
     function onLinkSubmit(event: FormEvent<HTMLFormElement>) {
         const form = event.target as HTMLFormElement
         const urlRegex = new RegExp("^((https):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$")

src/pages/index.tsx

@@ -1,54 +1,95 @@
 import RootLayout from "@/components/RootLayout";
-import Dropdown from "@/components/Dropdown";
+import Link from 'next/link';
 import ProjectCard from "@/components/ProjectsCard";
-import Image from 'next/image';
+import { Cli } from "grommet-icons";
-import MusicCard from '@/components/MusicCard'
 
 export default function Home() {
     return (
         <RootLayout>
-            <div className="w-1/2 mx-auto text-white">
+            <div className="text-white">
-                <Dropdown content={Music()} name="Music" />
+                <div className="text-center">
-                <Dropdown content={Games()} name="Games" />
+                    <h1 className="text-4xl font-bold">Alex Frantz</h1>
-                <Dropdown content={Projects()} name="Projects" />
+                    <p>QA Engineer, Zach Bryan Enthusiast</p>
+                </div>
+
+                <hr className="h-px my-2 bg-gray-200 border-0 w-1/2 mx-auto dark:bg-gray-700" />
+
+                <div className="my-4">
+                    <div className="bg-terminalback lg:max-w-xl sm:max-w-full m-auto">
+                        <div className="bg-terminalbar">
+                            <div className="pt-2 pl-2">
+                                <div className="bg-terminalback w-60 rounded-t-md">
+                                    <p className="p-2 pl-4 inline-block">
+                                        <Cli className="pr-2" />
+                                        <p className="inline">
+                                            Command Prompt
+                                        </p>
+                                        <p className="float-right ml-6">
+                                            <Link target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
+                                                X
+                                            </Link>
+                                        </p>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        {/* content of cmd */}
+                        <div className="p-2 font-mono">
+                            <p>Michaelsoft Binbows [Version 10.0.23420.6969]</p>
+                            <p>(c) Pixelpeek Development. No Rights Reserved.</p>
+                            <br />
+                            <p>C:\Users\CoolGuy>whoami</p>
+                            <p>Full Name: <span className="font-bold">Alex Frantz</span></p>
+                            <p>Based in: <span className="font-bold">Western New York</span></p>
+                            <p>Working at: <span className="font-bold hover:text-medal underline"><Link target="_blank" href="https://medal.tv">Medal.tv</Link></span></p>
+                            <p>Skills: <span className="font-bold">Java(Type)Script</span>, <span className="font-bold">Python</span>, <span className="font-bold">Go</span></p>
+                            <p>Learning: <span className="font-bold">Network Engineering</span>, <span className="font-bold">Game Dev</span>, <span className="font-bold">Frontend</span>, <span className="font-bold">Backend</span></p>
+                            <p>Website: <span className="font-bold underline hover:text-gray-500"><Link target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">alexavfrantz.com</Link></span></p>
+                            <br />
+                            <p>C:\Users\CoolGuy></p>
+                        </div>
+                    </div>
+                </div>
+
+                <hr className="h-px my-2 bg-gray-200 border-0 w-1/2 mx-auto dark:bg-gray-700" />
+                
+                <div>
+                    <h1 className="text-center text-2xl font-bold">Projects</h1>
+                    <div className="mt-2 flex flex-col justify-center items-center space-y-2">
+                        <ProjectCard
+                            name="SplitStat"
+                            description="SplitStat was a Discord bot that allowed you to see your stats & other player stats from the Splitgate game. It would also allow you to see the results of an in-game match or what matches a player had played recently."
+                            urlTo="https://github.com/azpha/splitstat"
+                            technologies={
+                                [
+                                    "JavaScript",
+                                    "Server Management"
+                                ]
+                            }
+                        />
+                        <ProjectCard
+                            name="Rconify"
+                            description="Rconify is a JavaScript package that allows you to connect & issue commands to a Valve-compliant RCON game server. This is useful for firing commands to games like Minecraft, Project Zomboid and more."
+                            urlTo="https://github.com/azpha/rconify"
+                            technologies={
+                                [
+                                    "TypeScript",
+                                ]
+                            }
+                        />
+                        <ProjectCard
+                            name="MCSRVSTAT Wrapper"
+                            description="MCSRVSTAT is a Minecraft server status website that provides an API to check the status/retrieve information about a Minecraft server. This package is a wrapper of that API, easily allowing you to fetch data from your NodeJS code."
+                            urlTo="https://github.com/azpha/mcsrvstat-js"
+                            technologies={
+                                [
+                                    "JavaScript",
+                                ]
+                            }
+                        />
+                    </div>
+                </div>
             </div>
         </RootLayout>
     )
-} 
-
-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" />,
-        <div key="5" className="float-right pt-8">
-            <MusicCard key="5" />
-        </div>
-    ]
 }

src/pages/links.tsx

@@ -1,4 +1,5 @@
 import SocialCard from '@/components/SocialCard'
+import Head from '@/components/Head';
 import { api } from "@/utils/api";
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
@@ -40,6 +41,7 @@ export default function Links() {
 
     return (
         <main className="bg-black flex flex-col justify-center items-center min-h-screen">
+            <Head />
             <Link href="/">
                 <h1 className="text-white text-sm underline hover:text-gray-500 pb-2">&lt;- Back Home</h1>
             </Link>

src/styles/globals.css

@@ -4,29 +4,4 @@
 
 body {
     font-family: 'Poppins', sans-serif;
-    overflow-y:hidden;
-    overflow-x:hidden;
-}
-
-@keyframes fall {
-    0% { transform: translateY(0); opacity: 1; }
-    100% { transform: translateY(90vh); opacity: 0; }
-}
-
-.snowflake {
-  animation: fall linear infinite;
-  position:absolute;
-  user-select:none;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-h2 {
-  font-size: 1rem;
-}
-
-h3 {
-  font-size: 0.5rem;
 }

tailwind.config.ts

@@ -5,6 +5,11 @@ export default {
   content: ["./src/**/*.tsx"],
   theme: {
     extend: {
+      colors: {
+        "terminalbar": "#333333",
+        "terminalback": "#0c0c0c",
+        "medal": "#ffb84b"
+      },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
       },