alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

weeeee

Browse Source
This commit is contained in:
Alex Frantz
2024-06-17 21:18:06 -04:00
parent b6f483071d
commit fae0c95aa1
10 changed files with 246 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+40 -1
View File
@@ -10,7 +10,8 @@
"dependencies": { "dependencies": {
"grommet-icons": "^4.12.1", "grommet-icons": "^4.12.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
@@ -1073,6 +1074,14 @@
"node": ">=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": { "node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.17.2", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz", "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": ">=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": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
package.json
+2 -1
View File
@@ -12,7 +12,8 @@
"dependencies": { "dependencies": {
"grommet-icons": "^4.12.1", "grommet-icons": "^4.12.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
src/assets/main.css
-11
View File
@@ -1,14 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @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;
}
src/components/Footer.tsx
+45
View File
@@ -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>
)
}
src/components/Header.tsx
+14
View File
@@ -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>
)
}
src/components/Project.tsx
+51
View File
@@ -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>
)
}
src/components/SocialItem.tsx
-19
View File
@@ -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>
)
}
src/experience.tsx
+54
View File
@@ -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>
)
}
src/index.tsx
+21 -60
View File
@@ -1,72 +1,33 @@
import SocialItem from "./components/SocialItem" import Footer from "./components/Footer";
import { useState, useEffect } from "react" import Header from "./components/Header";
import Project from "./components/Project";
export default function Home() { export default function Home() {
const [copied, setCopied] = useState<boolean>(false);
useEffect(() => {
setTimeout(() => {
setCopied(false)
}, 5000)
}, [copied])
return ( return (
<div className="bg-black min-h-screen flex justify-center items-center text-white"> <div className="bg-black text-white min-h-screen">
<div className="inline-block"> <div className="lg:w-1/3 sm:w-full mx-auto">
<div className="space-x-2 mx-auto my-2 text-center"> <Header />
<SocialItem
urlTo="https://nobro.alexav.gg" <div className="space-y-2">
title="NoBro" <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 <Project
urlTo="https://blog.alexav.gg" name={"medaltv-wrapper"}
title="Blog" description={"A simple NodeJS wrapper for the Medal.tv Developer API"}
urlTo={"https://github.com/azpha/medaltv-wrapper"}
/> />
<SocialItem <Project
urlTo="#" name={"pmanager"}
title="Radio" description={"A simple self-hosted server to manage pm2 containers"}
/> urlTo={"https://github.com/azpha/pmanager"}
</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"
/> />
</div> </div>
</div> </div>
<div className="bottom-0 absolute my-6 text-zinc-700 font-bold"> <Footer />
{/* <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>
</div> </div>
) )
} }
src/main.tsx
+18 -1
View File
@@ -1,12 +1,29 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
import {
createBrowserRouter,
RouterProvider
} from 'react-router-dom'
import './assets/main.css' import './assets/main.css'
// pages // pages
import MainPage from './index'; 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( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>
<MainPage /> <RouterProvider router={router} />
</React.StrictMode>, </React.StrictMode>,
) )