From 2a63fd119c7ef1d158511451974fc0c164eabf05 Mon Sep 17 00:00:00 2001
From: Alex Frantz <alex@alexavfrantz.com>
Date: Thu, 18 Apr 2024 02:32:20 -0400
Subject: [PATCH] pip :)

---
 src/components/HeaderItem.tsx    |  43 +++++-----
 src/components/InputOption.tsx   |  19 -----
 src/components/MusicCard.tsx     |  49 -----------
 src/components/NotFound.tsx      |   8 --
 src/components/ProjectsCard.tsx  |  38 ---------
 src/components/ReviewCard.tsx    |  25 ------
 src/components/RootLayout.tsx    |  38 +--------
 src/components/SocialCard.tsx    | 116 +++++++++++++++++++++-----
 src/components/footer.tsx        |   5 +-
 src/components/header.tsx        |  38 ++++-----
 src/pages/404.tsx                |  15 ----
 src/pages/_document.tsx          |   2 +-
 src/pages/about.tsx              |  16 ++++
 src/pages/create.tsx             | 121 ---------------------------
 src/pages/index.tsx              | 136 +++++++++++++++++++------------
 src/pages/links.tsx              |  85 +++++++------------
 src/pages/projects.tsx           |  96 ++++++++--------------
 src/server/api/root.ts           |   4 +-
 src/server/api/routers/misc.ts   |  43 ----------
 src/server/api/routers/social.ts |  31 +++++++
 src/styles/globals.css           |  22 ++++-
 21 files changed, 358 insertions(+), 592 deletions(-)
 delete mode 100644 src/components/InputOption.tsx
 delete mode 100644 src/components/MusicCard.tsx
 delete mode 100644 src/components/NotFound.tsx
 delete mode 100644 src/components/ProjectsCard.tsx
 delete mode 100644 src/components/ReviewCard.tsx
 delete mode 100644 src/pages/404.tsx
 create mode 100644 src/pages/about.tsx
 delete mode 100644 src/pages/create.tsx
 delete mode 100644 src/server/api/routers/misc.ts
 create mode 100644 src/server/api/routers/social.ts

diff --git a/src/components/HeaderItem.tsx b/src/components/HeaderItem.tsx
index 772a2cb..3852119 100644
--- a/src/components/HeaderItem.tsx
+++ b/src/components/HeaderItem.tsx
@@ -1,30 +1,29 @@
 import Link from "next/link"
-import type { MouseEventHandler } from "react"
 
 type HeaderItemProps = {
     content: string,
     linkTo: string,
-    onClick?: MouseEventHandler<HTMLButtonElement>, // don't even wanna bother
     newWindow?: boolean
 }
-export default function HeaderItem(props: HeaderItemProps) {
-    if (props.onClick) {
-        return (
-            <>
-                <button className="inline hover:text-gray-500 hover:underline pr-2 "
-                    onClick={props.onClick}
-                >
-                    {props.content}
-                </button>
-            </>
-        )
-    } else {
-        return (
-            <p className="inline pr-2 hover:text-gray-500 hover:underline">
-                <Link href={props.linkTo} target={props.newWindow ? "_blank" : "_self"}>
-                    {props.content}
-                </Link>
-            </p>
-        )
-    }
+export default function HeaderItem({
+    content,
+    linkTo,
+    newWindow
+}: HeaderItemProps) {
+    return (
+        <Link
+            className="inline text-green-500 hover:underline font-bold text-3xl pr-2" 
+            href={linkTo} 
+            target={newWindow ? "_blank" : "_self"}
+        >
+            {content}
+        </Link>
+        // <>
+        //     <button className="inline text-green-500 hover:underline font-bold text-3xl pr-2"
+        //         onClick={props.onClick}
+        //     >
+        //         {props.content}
+        //     </button>
+        // </>
+    )
 }
\ No newline at end of file
diff --git a/src/components/InputOption.tsx b/src/components/InputOption.tsx
deleted file mode 100644
index fa37822..0000000
--- a/src/components/InputOption.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-type InputOptionProps = {
-    label: string,
-    inputName: string,
-    isTextArea?: boolean
-}
-
-export default function InputOption(props: InputOptionProps) {
-    return (
-        <div className="pt-2 pb-2">
-            <label className="font-bold">{props.label}</label><br />
-            {
-                props.isTextArea ?
-                <textarea className="bg-gray-800 rounded-sm text-white resize-none h-32 w-72" name={props.inputName} />
-                :
-                <input className="bg-gray-800 rounded-sm text-white" name={props.inputName} />
-            }
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/MusicCard.tsx b/src/components/MusicCard.tsx
deleted file mode 100644
index cae1d1b..0000000
--- a/src/components/MusicCard.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import { api } from "@/utils/api";
-
-export default function MusicCard() {
-    const {data: musicData, fetchStatus} = api.misc.song.useQuery()
-
-    return (
-        <div className="bg-white text-black max-w-fit mx-auto p-4">
-            <h1 className="text-2xl font-bold inline">Listening To</h1>
-
-            {/* link to lastfm */}
-            <Link 
-                href="https://last.fm/user/lulawex"
-                target="_blank"
-                className="opacity-75 underline font-bold text-sm ml-2 hover:text-zinc-600"
-            >
-                Powered by Last.fm
-            </Link>
-
-            {
-                fetchStatus !== "fetching" ?
-                    <div className="space-y-2">
-                        {
-                            musicData?.track.map((v,k) => {
-                                return <div key={k}>
-                                    <Image 
-                                        src={v.image[0]?.["#text"] ?? "https://storage.thatalex.dev/content/pfp.jpg"}
-                                        width="50"
-                                        height="50"
-                                        alt={`${v.name} Cover Art`}
-                                        className="inline mr-2"
-                                    />
-                                    <div className="inline-block align-middle">
-                                        <Link href={v.url} target="_blank">
-                                            <h1 className="font-bold w-52 truncate hover:underline">{v.name}</h1>
-                                        </Link>
-                                        <p className="opacity-75">{v.artist["#text"]}</p>
-                                    </div>
-                                </div>
-                            })
-                        }
-                    </div>
-                :
-                    <p className="font-bold">Hold tight, fetching..</p>
-            }
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
deleted file mode 100644
index 407489f..0000000
--- a/src/components/NotFound.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function NotFound() {
-    return (
-        <div className="text-white text-center">
-            <h1 className="font-bold text-2xl">Well, this is awkward..</h1>
-            <p>There&apos;s nothing here right now :/</p>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/ProjectsCard.tsx b/src/components/ProjectsCard.tsx
deleted file mode 100644
index b4f909b..0000000
--- a/src/components/ProjectsCard.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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 <div key={k} className="inline">
-            <div className="max-w-fit p-1 inline">
-                {v}
-            </div>
-        </div>
-    })
-
-    return (
-        <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 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>Source</p>
-                    </Link>
-                </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/ReviewCard.tsx b/src/components/ReviewCard.tsx
deleted file mode 100644
index dab2557..0000000
--- a/src/components/ReviewCard.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Image from "next/image"
-import Link from 'next/link';
-
-type ReviewCardProps = {
-    title: string,
-    image: string,
-    url: string,
-    showText: boolean
-}
-
-export default function ReviewCard(props: ReviewCardProps) {
-    return (
-        <Link href={props.url}>
-            <div className="inline">
-                <Image alt={props.title + " cover"} width="160" height="160" src={props.image} className="p-2" />
-                {
-                    props.showText ?
-                    <p className="font-bold pt-2 text-center">{props.title}</p>
-                    :
-                    ""
-                }
-            </div>
-        </Link>
-    )
-}
\ No newline at end of file
diff --git a/src/components/RootLayout.tsx b/src/components/RootLayout.tsx
index b4788f6..a18107c 100644
--- a/src/components/RootLayout.tsx
+++ b/src/components/RootLayout.tsx
@@ -1,51 +1,21 @@
 // component imports
-import Header from "./header";
-import Footer from "./footer";
 import Head from "./Head"
 
 // react imports
 import React from 'react';
 
-// next modules
-import { useSession } from "next-auth/react";
-import Router from 'next/router';
-
 type LayoutProps = {
     children: React.ReactNode
     protectedPage?: boolean
 }
 
-export default function RootLayout({ children, protectedPage }: LayoutProps) {
-    const {status} = useSession()
-
-    if (protectedPage) {
-        if (status === "loading") {
-            return (
-                <main className="min-h-screen bg-black">
-                    <div className="w-1/2 mx-auto">
-                        <Head />
-                        <p>Loading...</p>
-                    </div>
-                </main>
-            )
-        } else if (status === "unauthenticated") {
-            Router.replace("/").catch(() => {
-                console.error("Failed to reroute user!")
-            })
-            return (
-                <></>
-            )
-        }
-    }
-
+export default function RootLayout({ children }: LayoutProps) {
     return (
-        <main className="min-h-screen bg-black">
-            <div className="lg:w-1/2 sm:w-full mx-auto">
-                <Head />
-                <Header />
+        <main className="bg-black h-screen flex flex-col justify-center items-center overflow-y-hidden">
+            <Head />
+            <div className="flicker">
                 {children}
             </div>
-            <Footer />
         </main>
     )
 }
\ No newline at end of file
diff --git a/src/components/SocialCard.tsx b/src/components/SocialCard.tsx
index ca39b8d..bd2ecf3 100644
--- a/src/components/SocialCard.tsx
+++ b/src/components/SocialCard.tsx
@@ -1,27 +1,103 @@
-import Link from "next/link"
-import { Trash } from "grommet-icons"
+import Image from "next/image";
+import Link from "next/link";
+import React, {useEffect, useState} from 'react';
+import { api } from "@/utils/api";
+
+// types
+import type {
+    MedalApiObject,
+    SteamApiObject,
+    MusicApiObject
+} from '@/utils/types'
 
 type SocialCardProps = {
-    name: string,
-    id: number,
-    url: string,
-    isAuthenticated: boolean,
-    deleteCallback: () => void
+    platform: "steam" | "music" | "medal"
 }
 
-export default function SocialMediaCard(props: SocialCardProps) {
+function MedalSocialCard() {
+    const { data: medalData, medalFetchStatus } = api.social.getMedalData.useQuery();
+
     return (
-        <div className="bg-white p-5 w-full text-left">
-            <Link href={props.url} target="_blank">
-                <h1 className="inline font-bold">{props.name}</h1>
-            </Link>
-            
-            { props.isAuthenticated && (
-                <>
-                    <Trash onClick={props.deleteCallback} color="black" className="float-right inline hover:cursor-pointer" />
-                    <p className="float-right opacity-50 font-bold inline mr-2">ID: {props.id}</p>
-                </>
-            )}
-        </div>
+        <>
+            {
+                medalData?.data.map((v: MedalApiObject,k: number) => {
+                    return <div key={k}>
+                        <Image 
+                            src={v.image[0]?.["#text"] ?? "https://storage.thatalex.dev/content/pfp.jpg"}
+                            width="50"
+                            height="50"
+                            alt={`${v.name} Cover Art`}
+                            className="inline mr-2"
+                        />
+                        <div className="inline-block align-middle">
+                            <Link href={v.url} target="_blank">
+                                <h1 className="font-bold w-52 truncate hover:underline">{v.name}</h1>
+                            </Link>
+                            <p className="opacity-75">{v.artist["#text"]}</p>
+                        </div>
+                    </div>
+                })
+            }
+        </>
     )
+}
+
+function SteamSocialCard() {
+    const { data: SteamData, steamFetchStatus } = api.social.getSteamData.useQuery();
+}
+
+function MusicSocialCard() {
+    const { data: MusicData, musicFetchStatus } = api.social.getMusicData.useQuery();
+    return 
+}
+
+export default function SocialCard({ platform }: SocialCardProps) {
+    const [content, setContent] = useState<React.JSX.Element | null>(null)
+
+
+    const platformDisplayElements = () => {
+        if (platform === "music") {
+            return (
+                <div className="space-y-2">
+                {
+                    socialData?.data.map((v,k) => {
+                        return <div key={k}>
+                            <Image 
+                                src={v.image[0]?.["#text"] ?? "https://storage.thatalex.dev/content/pfp.jpg"}
+                                width="50"
+                                height="50"
+                                alt={`${v.name} Cover Art`}
+                                className="inline mr-2"
+                            />
+                            <div className="inline-block align-middle">
+                                <Link href={v.url} target="_blank">
+                                    <h1 className="font-bold w-52 truncate hover:underline">{v.name}</h1>
+                                </Link>
+                                <p className="opacity-75">{v.artist["#text"]}</p>
+                            </div>
+                        </div>
+                    })
+                }
+            </div>
+            )
+        }
+    }
+
+    // return (
+    //     <div className="bg-white text-black max-w-fit mx-auto p-4">
+    //         <h1 className="text-2xl font-bold inline">{displayPlatform}</h1>
+    //     </div> 
+    //     // <div className="bg-white text-black max-w-fit mx-auto p-4">
+    //     //     <h1 className="text-2xl font-bold inline">Listening To</h1>
+
+    //     //     {/* link to lastfm */}
+    //     //     <Link 
+    //     //         href="https://last.fm/user/lulawex"
+    //     //         target="_blank"
+    //     //         className="opacity-75 underline font-bold text-sm ml-2 hover:text-zinc-600"
+    //     //     >
+    //     //         Powered by Last.fm
+    //     //     </Link>
+    //     // </div>
+    // )
 }
\ No newline at end of file
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index b9c4d03..5fef7ae 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -5,12 +5,15 @@ export default function Footer() {
 
     return (
         <>
-            <div className="relative sm:w-1/2 m-auto mt-5 rounded-t-sm bg-zinc-900 p-2 text-white">
+            <div className="relative rounded-t-sm p-2 text-white opacity-50">
                 <p className="text-center">
                     <Link href="mailto:alex@alexavfrantz.com" className="hover:text-gray-500 hover:underline hover:cursor-pointer">
                         alex@alexavfrantz.com
                     </Link>
                 </p>
+                <p className="text-center">
+                    The &apos;PipBoy&apos; is owned by Bethesda, I&apos;m just doing this for fun!
+                </p>
                 <p className="text-center">
                     &copy; Alex Frantz, {date.getFullYear()}
                 </p>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index b990718..33c0d57 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,31 +1,25 @@
-import {useSession, signIn, signOut} from 'next-auth/react';
 import HeaderItem from "./HeaderItem";
 
-export default function Header() {
-    const { status } = useSession()
+type HeaderProps = {
+    isNotHomePage: boolean
+}
 
+export default function Header({
+    isNotHomePage = false
+}: HeaderProps) {
     return (
         <>
             <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" />
-                    <HeaderItem content="projects" linkTo="/projects" />
-                    { status === "authenticated" &&
-                        <HeaderItem 
-                            content="create"
-                            linkTo="/create"
-                        />
-                    }
-                    <HeaderItem content={status == "unauthenticated" ? "login" : "logout" } onClick={async () => {
-                        if (status == "unauthenticated") {
-                            await signIn()
-                        } else {
-                            await signOut()
-                        }
-                    }} linkTo="" />
-                </div>
-                <hr />
+                <div className="inline-block pb-2 space-x-6 text-center">
+                    <HeaderItem content="HOME" linkTo={
+                        isNotHomePage ? "/?noAnimation"
+                        : "/"
+                    } />
+                    <HeaderItem content="LINKS" linkTo="/links" />
+                    <HeaderItem content="PROJECTS" linkTo="/projects" />
+                    <HeaderItem content="ABOUT" linkTo="/about" />
+                </div> 
+                <hr className="border-green-500" />
             </div>
         </>
     )
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
deleted file mode 100644
index c7a4997..0000000
--- a/src/pages/404.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Head from '@/components/Head'
-import Link from 'next/link'
-
-export default function NotFoundPage() {
-    return (
-        <main className="bg-black flex min-h-screen">
-            <Head />
-            <div className="m-auto text-white text-center">
-                <h1 className="text-center text-2xl font-bold">Well, this is awkward..</h1>
-                <p>There is nothing here. An endless void, if you will.</p>
-                <p>How about we <span className="underline hover:text-gray-500"><Link href="/">head back?</Link></span> Or you could check out <span className="underline hover:text-gray-500"><Link target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">this cool video I found.</Link></span></p>
-            </div>
-        </main>
-    )
-}
\ No newline at end of file
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index c77cec0..4c2871c 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -6,7 +6,7 @@ export default function Document() {
       <Head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
       </Head>
       <body>
         <Main />
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
new file mode 100644
index 0000000..f0f7053
--- /dev/null
+++ b/src/pages/about.tsx
@@ -0,0 +1,16 @@
+import RootLayout from "@/components/RootLayout";
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+
+export default function AboutPage() {
+    return (
+        <RootLayout>
+            <Header isNotHomePage={true} />
+                <div className="text-center text-green-500">
+                    <h1 className="font-bold text-2xl">About this website</h1>
+                    <p className="max-w-10">This is just a hobby project I thought was cool!<br /> I plan to play with it a bit to grasp more CSS, but so far, pretty cool right?</p>
+                </div>
+            <Footer />
+        </RootLayout>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/create.tsx b/src/pages/create.tsx
deleted file mode 100644
index 5d750f1..0000000
--- a/src/pages/create.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-// react modules
-import {useState} from 'react'
-import type {FormEvent} from 'react';
-
-// trpc api
-import { api } from "@/utils/api";
-
-// components
-import RootLayout from '@/components/RootLayout';
-import InputOption from '@/components/InputOption';
-
-export default function CreatePage() {
-    // ui states
-    const [message, setMessage] = useState<string | null>(null)
-
-    // trpc hooks
-    const linksMutation = api.links.create.useMutation()
-
-    function onLinkCreateSubmit(event: FormEvent<HTMLFormElement>) {
-        const form = event.target as HTMLFormElement
-        const urlRegex = new RegExp("^((https):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$")
-
-        const titleElement = form.elements.namedItem('title') as HTMLInputElement;
-        const urlElement = form.elements.namedItem('url') as HTMLInputElement;
-        const orderElement = form.elements.namedItem("orderNumber") as HTMLInputElement;
-        const urlMatches = urlElement.value.match(urlRegex)
-
-        if (!titleElement.value || !urlElement.value || (orderElement.value && isNaN(Number(orderElement.value)))) {
-            event.preventDefault();
-
-            setMessage("One or more values were missing!")
-            setTimeout(() => setMessage(null), 5000)
-        } else if (urlMatches != null && !urlMatches[1]) {
-            event.preventDefault();
-
-            setMessage("An invalid URL was provided!")
-            setTimeout(() => setMessage(null), 5000)
-        } else {
-            const object = {
-                name: titleElement.value,
-                url: urlElement.value,
-                orderNumber: Number(orderElement.value) || 0
-            }
-    
-            linksMutation.mutate(object)
-        }
-    }
-    function onLinkUpdateSubmit(event: FormEvent<HTMLFormElement>) {
-        const form = event.target as HTMLFormElement
-        const urlRegex = new RegExp("^((https):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$")
-
-        const idElement = form.elements.namedItem("id") as HTMLInputElement;
-        const titleElement = form.elements.namedItem('title') as HTMLInputElement;
-        const urlElement = form.elements.namedItem('url') as HTMLInputElement;
-        const orderElement = form.elements.namedItem("orderNumber") as HTMLInputElement;
-        const urlMatches = urlElement.value.match(urlRegex)
-
-        if (!idElement.value || isNaN(Number(idElement.value)) || (orderElement.value && isNaN(Number(orderElement.value)))) {
-            event.preventDefault();
-
-            setMessage("One or more values were missing!")
-            setTimeout(() => setMessage(null), 5000)
-        } else if (urlMatches != null && !urlMatches[1]) {
-            event.preventDefault();
-
-            setMessage("An invalid URL was provided!")
-            setTimeout(() => setMessage(null), 5000)
-        } else {
-            const object = {
-                id: Number(idElement.value),
-                name: titleElement.value,
-                url: urlElement.value,
-                orderNumber: Number(orderElement.value) || 0
-            }
-    
-            linksMutation.mutate(object)
-        }
-    }
-
-    return (
-        <RootLayout protectedPage={true}>
-            <div className="space-y-4">
-                <div className="w-96 p-2 mx-auto bg-gray-500 text-center text-white">
-                    <h1 className="font-bold text-2xl">Create Link</h1>
-
-                    <div className="pt-2 pb-2">
-                        <hr />
-                    </div>
-
-                    <form onSubmit={onLinkCreateSubmit}>
-                        <InputOption inputName="title" label="Title" />
-                        <InputOption inputName="orderNumber" label="Order Number" />
-                        <InputOption inputName="url" label="URL" />
-
-                        <button className="bg-gray-800 text-white rounded-lg p-2" type="submit">Submit</button>
-                    </form>
-                    
-                    <p>{message}</p>
-                </div>
-                <div className="w-96 p-2 mx-auto bg-gray-500 text-center text-white">
-                    <h1 className="font-bold text-2xl">Update Link</h1>
-
-                    <div className="pt-2 pb-2">
-                        <hr />
-                    </div>
-
-                    <form onSubmit={onLinkUpdateSubmit}>
-                        <InputOption inputName="id" label="Link ID" />
-                        <InputOption inputName="title" label="Title" />
-                        <InputOption inputName="orderNumber" label="Order Number" />
-                        <InputOption inputName="url" label="URL" />
-
-                        <button className="bg-gray-800 text-white rounded-lg p-2" type="submit">Submit</button>
-                    </form>
-                    
-                    <p>{message}</p>
-                </div>
-            </div>
-        </RootLayout>
-    )
-}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a6f5aa9..ff5b7b2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,61 +1,91 @@
-import RootLayout from "@/components/RootLayout";
-import MusicCard from "@/components/MusicCard";
-import Link from 'next/link';
-import { Cli } from "grommet-icons";
+import RootLayout from '@/components/RootLayout';
+import Header from '@/components/header';
+import Footer from '@/components/footer';
+import { useState, useEffect } from 'react';
 
 export default function Home() {
+    const [doAnimation, setDoAnimation] = useState<boolean>(false);
+    const [pastLogo, setPastLogo] = useState<boolean>(false);
+    const [text, setText] = useState<string[]>([]);
+
+    const generateRandomTextString = () => {
+        const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
+        const length = 66;
+        let result = "";
+        
+        for (let i = 0; i < length; i++) {
+            result += characters.charAt(Math.floor(Math.random() * characters.length)) + " "
+        }
+
+        return result;
+    }
+
+    useEffect(() => {
+        if (location.href.includes("?noAnimation")) {
+            const logoElement = document.getElementById("pipboy");
+            const textElement = document.getElementById("textwall");
+            const mainElement = document.getElementById("mainelement");
+
+            if (logoElement && textElement && mainElement) {
+                logoElement.style.display = "none";
+                textElement.style.display = "none";
+                mainElement.style.display = "block";
+            }
+        } else {
+            setDoAnimation(true)
+        }
+    })
+ 
+    useEffect(() => {
+        if (doAnimation) {
+            const element = document.getElementById("pipboy")
+            if (element) {
+                setTimeout(() => {
+                    element.style.display = "none";
+                    setPastLogo(true)
+                }, 4000)
+            }
+        }
+    }, [doAnimation])
+
+    useEffect(() => {
+        const textElement = document.getElementById("textwall");
+        const mainElement = document.getElementById("mainelement");
+        if (pastLogo && doAnimation) {
+            const interval = setInterval(() => {
+                setText((prevState) => {
+                    return [...prevState, generateRandomTextString()]
+                })
+            }, 50)
+
+            setTimeout(() => {
+                clearInterval(interval)
+                if (textElement && mainElement) {
+                    textElement.style.display = "none"
+                    mainElement.style.display = "block"
+                }
+            }, 5000)
+        }
+    }, [pastLogo, doAnimation])
+
     return (
         <RootLayout>
-            <div className="text-white">
-                <div className="text-center">
-                    <h1 className="text-4xl font-bold">Alex Frantz</h1>
-                    <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 md: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">
-                                    <div 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>
-                                    </div>
-                                </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> as a <span className="font-bold">QA Engineer</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 className="my-4">
-                    <MusicCard />
+            {/* "logo", hidden after 4 seconds */}
+            <h1 className="text-green-500 text-9xl font-bold italic" id="pipboy">Pip-Boy</h1>
+
+            {/* text wall, hidden until pastLogo */}
+            <p className="text-green-500 text-2xl max-w-10 flex-shrink-0" id="textwall">{text}</p>
+
+            {/* and the content :) */}
+            <div className="text-green-500 flicker max-w-1/2 hidden" id="mainelement">
+                <Header isNotHomePage={false} />
+                <div className="text-left">
+                    <p className="text-md">
+                        <span className="font-bold text-2xl">Hello traveller!</span>
+                    </p>
+                    <p>Welcome to my website! Feel free to explore & learn more about me :)</p>
                 </div>
+                <Footer />
             </div>
         </RootLayout>
     )
diff --git a/src/pages/links.tsx b/src/pages/links.tsx
index ee83c8e..e5153a7 100644
--- a/src/pages/links.tsx
+++ b/src/pages/links.tsx
@@ -1,61 +1,38 @@
-import SocialCard from '@/components/SocialCard'
-import Head from '@/components/Head';
-import { api } from "@/utils/api";
-import { useSession } from 'next-auth/react';
-import Image from 'next/image';
-import Link from 'next/link';
-
-export default function Links() {
-    const {status} = useSession();
-    
-    // trpc hooks
-    const { data: linkData } = api.links.getAll.useQuery()
-    const deleteMutation = api.links.delete.useMutation()
+import RootLayout from "@/components/RootLayout";
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+import Link from "next/link";
 
+export default function LinksPage() {
     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>
-            <div className="bg-zinc-900 p-10 rounded-sm">
-                <div className="pb-2 flex flex-col justify-center items-center">
-                    <Image className="rounded-lg" width="90" height="90" alt="Profile Picture" src="https://storage.thatalex.dev/content/pfp.png" />
-                    <div className="text-white text-center pt-2">
-                        <h1>Alex</h1>
-                        <p>I&apos;m Alex, a QA Engineer by day and developer by night</p>
-                        <hr className="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700" />
-                    </div>
-                </div>
-
+        <RootLayout>
+            <Header isNotHomePage={true} />
+            <div className="text-green-500 text-center">
+                <h1 className="font-bold text-3xl">My Links!</h1>
                 <div className="space-y-2">
-                    {
-                        linkData && linkData.length > 0 ?
-                            linkData.sort((a,b) => {
-                                if (a.orderNumber < b.orderNumber) {
-                                    return -1
-                                } else if (a.orderNumber > b.orderNumber) {
-                                    return 1
-                                }
-                        
-                                return 0
-                            }).map((v,k) => {
-                                return <SocialCard 
-                                    name={v.name}
-                                    key={k}
-                                    id={v.id}
-                                    url={v.url}
-                                    deleteCallback={() => {
-                                        deleteMutation.mutate(v.id);
-                                    }}
-                                    isAuthenticated={ status === "authenticated" }
-                                />
-                            })
-                        :
-                            <h1 className="text-center text-white font-bold">Uh oh, there are no links here!</h1>
-                    }
+                    <Link href="https://twitter.com/avvex__" target="_blank">
+                        <div className="hover:bg-green-500 hover:text-black">
+                            <h1 className="text-2xl mx-32">Twitter</h1>
+                        </div>
+                    </Link>
+                    <Link href="https://mast.thatalex.dev/@alex" target="_blank">
+                        <div className="hover:bg-green-500 hover:text-black">
+                            <h1 className="text-2xl mx-32">Mastodon</h1>
+                        </div>
+                    </Link>
+                    <Link href="https://linkedin.com/in/thatalex" target="_blank">
+                        <div className="hover:bg-green-500 hover:text-black">
+                            <h1 className="text-2xl mx-32">LinkedIn</h1>
+                        </div>
+                    </Link>
+                    <Link href="https://medal.tv/users/215577" target="_blank">
+                        <div className="hover:bg-green-500 hover:text-black">
+                            <h1 className="text-2xl mx-32">Medal.tv</h1>
+                        </div>
+                    </Link>
                 </div>
             </div>
-        </main>
+            <Footer />
+        </RootLayout>
     )
 }
\ No newline at end of file
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index f0cb506..d633466 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -1,69 +1,39 @@
-import ProjectCard from "@/components/ProjectsCard"
-import RootLayout from "@/components/RootLayout"
+import RootLayout from "@/components/RootLayout";
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+import Link from "next/link";
 
-export default function Projects() {
+export default function ProjectsPage() {
     return (
         <RootLayout>
-            <div className="text-white">
-                <div className="mb-4">
-                    <h1 className="font-bold text-2xl text-center">Projects</h1>
-                </div>
-
-                <div className="space-y-2 w-full flex flex-col justify-center items-center">
-                    <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",
-                                "Linux"
-                            ]
-                        }
-                    />
-                    <ProjectCard
-                        name="medaltv-wrapper"
-                        description="medaltv-wrapper is a Node.js wrapper for the Medal.tv Public API, allowing you to fetch clips from the platform and use the data in your code."
-                        urlTo="https://github.com/azpha/medaltv-wrapper"
-                        technologies={
-                            [
-                                "JavaScript"
-                            ]
-                        }
-                    />
-                    <ProjectCard
-                        name="mcsrvstat-wrapper"
-                        description="mcsrvstat-wrapper is a Node.js wrapper for MCSRVSTAT API, allowing you to fetch the status of Minecraft Java & Bedrock servers by running 1 method."
-                        urlTo="https://github.com/azpha/mcsrvstat-js"
-                        technologies={
-                            [
-                                "JavaScript"
-                            ]
-                        }
-                    />
-                    <ProjectCard
-                        name="PManager"
-                        description="PManager is a simple Express server that allows you to restart/stop/start your PM2 scripts easily remotely for uses like GitHub Actions."
-                        urlTo="https://github.com/azpha/pmanager"
-                        technologies={
-                            [
-                                "JavaScript"
-                            ]
-                        }
-                    />
-                    <ProjectCard
-                        name="Watchlist"
-                        description="Watchlist is a NextJS website built on the T3 Stack simply tracking my watch history, displaying stuff like my recently watched TV and Movies."
-                        urlTo="https://github.com/azpha/tv-watchlist"
-                        technologies={
-                            [
-                                "Typescript",
-                                "NextJS",
-                                "tRPC"
-                            ]
-                        }
-                    />
-                </div>
+            <Header isNotHomePage={true} />
+            <div className="space-y-2 text-center">
+                <Link href="https://github.com/azpha/splitstat" target="_blank">
+                    <div className="hover:bg-green-500 hover:text-black text-green-500">
+                        <h1 className=" text-2xl mx-32">SplitStat</h1>
+                    </div>
+                </Link>
+                <Link href="https://github.com/azpha/medaltv-wrapper" target="_blank">
+                    <div className="hover:bg-green-500 hover:text-black text-green-500">
+                        <h1 className=" text-2xl mx-32">Medal.tv Wrapper</h1>
+                    </div>
+                </Link>
+                <Link href="https://github.com/azpha/mcsrvstat-js" target="_blank">
+                    <div className="hover:bg-green-500 hover:text-black text-green-500">
+                        <h1 className=" text-2xl mx-32">MCSRVSTAT Wrapper</h1>
+                    </div>
+                </Link>
+                <Link href="https://github.com/azpha/pmanager" target="_blank">
+                    <div className="hover:bg-green-500 hover:text-black text-green-500">
+                        <h1 className=" text-2xl mx-32">PManager</h1>
+                    </div>
+                </Link>
+                <Link href="https://github.com/azpha/tv-watchlist" target="_blank">
+                    <div className="hover:bg-green-500 hover:text-black text-green-500">
+                        <h1 className=" text-2xl mx-32">Watchlist</h1>
+                    </div>
+                </Link>
+                <Footer />
             </div>
         </RootLayout>
     )
diff --git a/src/server/api/root.ts b/src/server/api/root.ts
index 58fbdd2..017bcae 100644
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -1,6 +1,6 @@
 import { postRouter } from "@/server/api/routers/post";
 import { linksRouter } from "./routers/links";
-import { miscRouter } from "./routers/misc";
+import { socialRouter } from "./routers/social";
 import { blogRouter } from "./routers/blog";
 import { createTRPCRouter } from "@/server/api/trpc";
 
@@ -12,7 +12,7 @@ import { createTRPCRouter } from "@/server/api/trpc";
 export const appRouter = createTRPCRouter({
   post: postRouter,
   links: linksRouter,
-  misc: miscRouter,
+  social: socialRouter,
   blog: blogRouter
 });
 
diff --git a/src/server/api/routers/misc.ts b/src/server/api/routers/misc.ts
deleted file mode 100644
index cd69eb2..0000000
--- a/src/server/api/routers/misc.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import axios from 'axios';
-
-import {
-    createTRPCRouter,
-    publicProcedure
-} from '@/server/api/trpc';
-
-type ImageListType = {
-    "size": string,
-    "#text": string
-}
-
-type TrackResponseType = {
-    status: number,
-    track: LastTrackType[]
-}
-
-type LastTrackType = {
-    "@attr": {
-        "nowplaying": string
-    },
-    "album": {
-        "mbid": string,
-        "#text": string
-    },
-    "artist": {
-        "mbid": string,
-        "#text": string,
-    },
-    "image": ImageListType[],
-    "mbid": string,
-    "name": string,
-    "streamable": number,
-    "url": string
-}
-
-export const miscRouter = createTRPCRouter({
-    song: publicProcedure
-    .query(async () => {
-        const response = await axios.get<TrackResponseType>("https://api.thatalex.dev/v3/music/last-track")
-        return response.data
-    }),
-})
\ No newline at end of file
diff --git a/src/server/api/routers/social.ts b/src/server/api/routers/social.ts
new file mode 100644
index 0000000..874937a
--- /dev/null
+++ b/src/server/api/routers/social.ts
@@ -0,0 +1,31 @@
+import {z} from 'zod';
+import axios from 'axios';
+
+import {
+    createTRPCRouter,
+    publicProcedure
+} from '@/server/api/trpc';
+import type {
+    MedalApiObject,
+    MusicApiObject,
+    SteamApiObject
+} from '@/utils/types'
+
+const base_url = "https://api.thatalex.dev/v4/social/"
+export const socialRouter = createTRPCRouter({
+    getMedalData: publicProcedure
+        .query(async ({input}) => {
+            const response = await axios.get(base_url + "medal")
+            return response.data as MedalApiObject
+        }),
+    getSteamData: publicProcedure
+        .query(async ({input}) => {
+            const response = await axios.get(base_url + "steam")
+            return response.data as SteamApiObject
+        }),
+    getMusicData: publicProcedure
+        .query(async ({input}) => {
+            const response = await axios.get(base_url + "music")
+            return response.data as MusicApiObject
+        })
+})
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7885528..b1327d9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,5 +3,23 @@
 @tailwind utilities;
 
 body {
-    font-family: 'Poppins', sans-serif;
-}
\ No newline at end of file
+    font-family: "VT323", monospace;
+    font-weight: 400;
+    font-style: normal;
+}
+
+@keyframes flicker {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  .flicker {
+    animation: flicker 0.5s alternate;
+  }
\ No newline at end of file