weeeee

2024-06-17 21:18:06 -04:00
parent b6f483071d
commit fae0c95aa1
10 changed files with 246 additions and 94 deletions
@@ -10,7 +10,8 @@
      "dependencies": {
        "grommet-icons": "^4.12.1",
        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.23.1"
      },
      "devDependencies": {
        "@types/react": "^18.2.66",
@@ -1073,6 +1074,14 @@
        "node": ">=14"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.17.2",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
@@ -3483,6 +3492,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -12,7 +12,8 @@
  "dependencies": {
    "grommet-icons": "^4.12.1",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
@@ -1,14 +1,3 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
-
-.crayon {
-    padding:0.5rem 0.5rem;
-    margin:0 0.5rem;
-    font-size:1rem;
-
-    border-top-left-radius: 255px 15px;
-    border-top-right-radius: 15px 225px;
-    border-bottom-right-radius: 225px 15px;
-    border-bottom-left-radius:15px 255px;
-}
+@tailwind utilities;
@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import {
+    Twitter,
+    Github,
+    Lastfm
+} from 'grommet-icons'
+
+export default function Footer() {
+    const [mailState, setMailState] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setMailState(false)
+        }, 3000)
+    }, [mailState])
+
+    return (
+        <div className="bg-zinc-600 text-center text-white absolute bottom-0 left-0 right-0 p-4 select-none">
+            <h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
+
+            {
+                mailState ? (
+                    <p className="font-bold hover:underline max-w-fit mx-auto">
+                        Copied!
+                    </p>
+                ) : (
+                    <button onClick={() => setMailState(true)} className="hover:underline">alex@alexav.gg</button>
+                )
+            }
+
+            <div className="block space-x-2">
+                {/* socials */}
+                <a href="https://twitter.com/avvex__" target="_blank">
+                    <Twitter color="black" size="medium" />
+                </a>
+                <a href="https://github.com/azpha" target="_blank">
+                    <Github color="black" size="medium" />
+                </a>
+                <a href="https://last.fm/user/lulawex" target="_blank">
+                    <Lastfm color="black" size="medium" />
+                </a>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,14 @@
+export default function Header() {
+    return (
+        <div className="text-white pt-4">
+            <h1 className="font-bold text-2xl">Alex Frantz</h1>
+            <p>Professional button clicker & word typer</p>
+            <div className="inline-block space-x-2">
+            <a className="font-bold hover:underline" href="/">Home</a>
+                <a className="font-bold hover:underline" href="experience">Experience</a>
+            </div>
+            
+            <hr className="my-4" />
+        </div>
+    )
+}
@@ -0,0 +1,51 @@
+export default function Project({
+    name,
+    description,
+    urlTo,
+    subtitle,
+    bullets
+}: {
+    name: string,
+    description: string,
+    urlTo?: string,
+    subtitle?: string,
+    bullets?: string[]
+}) {
+    const mapBullets = () => {
+        return bullets?.map((v,k) => {
+            return <li className="list-inside list-disc" key={k}>{v}</li>
+        })
+    }
+
+    return (
+        <div className="bg-white text-black p-2">
+            <div className="float-left">
+                <p className="pl-2 text-2xl font-bold">{name} 
+                    {
+                        urlTo ? (
+                            <a className="text-sm hover:underline pl-2" target="_blank" href={urlTo}>
+                                Project Website
+                            </a>
+                        ) : (
+                            <span className="text-base pl-2">
+                                {subtitle}
+                            </span>
+                        )
+
+                    }
+                </p>
+            </div>
+
+            <div className="clear-left text-left pl-2.5">
+                <p>{description}</p>
+                {
+                    bullets && (
+                        <ul>
+                            {mapBullets()}
+                        </ul>
+                    )
+                }
+            </div>
+        </div>
+    )
+}
@@ -1,19 +0,0 @@
-type SocialItemType = {
-    urlTo: string,
-    title: string
-}
-
-export default function SocialItem({
-    urlTo,
-    title
-}: SocialItemType) {
-    return (
-        <a 
-            href={urlTo} 
-            target="_blank"
-            className="hover:text-gray-500 hover:underline"
-        >
-            {title}
-        </a>
-    )
-}
@@ -0,0 +1,54 @@
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Project from "./components/Project";
+
+export default function Experience() {
+    return (
+        <div className="bg-black text-white min-h-screen">
+            <div className="lg:w-1/3 sm:w-full mx-auto">
+                <Header />
+
+                <h1 className="text-2xl font-bold my-4">Career</h1>
+                <div className="space-y-2">
+                    <Project 
+                        name={"Medal.tv"} 
+                        description={"I do QA at Medal, the largest game clipping platform."} 
+                        subtitle={"2022 - Present"}
+                        bullets={
+                            [
+                                "Test & ensure the product is as bug-free as humanly possible",
+                                "Helping write tests in code & automate tedious parts of QA testing"
+                            ]
+                        }
+                    />
+                </div>
+
+                <h1 className="text-2xl font-bold my-4">Education/Certification</h1>
+                <div className="space-y-2">
+                    <Project 
+                        name={"Pembroke CSD"} 
+                        description={"Skewl is kewl (jk it just rhymes)"} 
+                        subtitle={"2013 - 2021"}
+                    />
+                    <Project 
+                        name={"GVBOCES"} 
+                        description={"Skewl is kewl (jk it just rhymes)"} 
+                        subtitle={"2021 - 2022"}
+                    />
+                    <Project 
+                        name={"Acellus Academy"} 
+                        description={"Skewl is kewl (jk it just rhymes)"} 
+                        subtitle={"2022 - Present"}
+                    />
+                    <Project 
+                        name={"CS50"} 
+                        description={"Harvard CS50 Program"} 
+                        subtitle={"2023 - Present"}
+                    />
+                </div>
+            </div>
+
+            <Footer />
+        </div>
+    )
+}
@@ -1,72 +1,33 @@
-import SocialItem from "./components/SocialItem"
-import { useState, useEffect } from "react"
+import Footer from "./components/Footer";
+import Header from "./components/Header";
+import Project from "./components/Project";

 export default function Home() {
-    const [copied, setCopied] = useState<boolean>(false);
-
-    useEffect(() => {
-        setTimeout(() => {
-            setCopied(false)
-        }, 5000)
-    }, [copied])
-
    return (
-        <div className="bg-black min-h-screen flex justify-center items-center text-white">
-            <div className="inline-block">
-                <div className="space-x-2 mx-auto my-2 text-center">
-                    <SocialItem 
-                        urlTo="https://nobro.alexav.gg"
-                        title="NoBro" 
+        <div className="bg-black text-white min-h-screen">
+            <div className="lg:w-1/3 sm:w-full mx-auto">
+                <Header />
+
+                <div className="space-y-2">
+                    <Project 
+                        name={"SplitStat"} 
+                        description={"SplitStat was a Discord bot that allowed you to monitor your SplitGate stats, all from your Discord server."} 
+                        urlTo={"https://github.com/azpha/splitstat"} 
                    />
-                    <SocialItem 
-                        urlTo="https://blog.alexav.gg"
-                        title="Blog" 
+                    <Project 
+                        name={"medaltv-wrapper"} 
+                        description={"A simple NodeJS wrapper for the Medal.tv Developer API"} 
+                        urlTo={"https://github.com/azpha/medaltv-wrapper"} 
                    />
-                    <SocialItem 
-                        urlTo="#"
-                        title="Radio" 
-                    />
-                </div>
-                <div className="crayon border">
-                    <h1 className="text-2xl font-bold text-center">Alex</h1>
-                </div>
-                <div className="space-x-2 mx-auto my-2 text-center">
-                    <SocialItem 
-                        urlTo="https://twitter.com/avvex__"
-                        title="Twitter" 
-                    />
-                    <SocialItem 
-                        urlTo="https://mast.thatalex.dev"
-                        title="Mastodon" 
-                    />
-                    <SocialItem 
-                        urlTo="https://medal.tv/u/alexav"
-                        title="Medal"
+                    <Project 
+                        name={"pmanager"} 
+                        description={"A simple self-hosted server to manage pm2 containers"} 
+                        urlTo={"https://github.com/azpha/pmanager"} 
                    />
                </div>
            </div>

-            <div className="bottom-0 absolute my-6 text-zinc-700 font-bold">
-                {/* <button type="button" onClick={() => setCopied(true)} className="hover:underline">
-                    {
-                        copied ? "Copied!"
-                        : "alex@alexav.gg"
-                    }
-                </button> */}
-
-                {
-                    copied ? (
-                        <button type="button" className="underline">
-                            Copied!
-                        </button>
-                    ) : (
-                        <button type="button" onClick={() => setCopied(true)} className="hover:underline">
-                            alex@alexav.gg
-                        </button>
-                    )
-                }
-
-            </div>
+            <Footer />
        </div>
    )
 }
@@ -1,12 +1,29 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import {
+  createBrowserRouter,
+  RouterProvider
+} from 'react-router-dom'
 import './assets/main.css'

 // pages
 import MainPage from './index';
+import Experience from './experience';
+
+// router
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <MainPage />
+  },
+  {
+    path: "experience",
+    element: <Experience />
+  }
+])

 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
-    <MainPage />
+    <RouterProvider router={router} />
  </React.StrictMode>,
 )