110 lines
4.8 KiB
TypeScript
110 lines
4.8 KiB
TypeScript
import Image from 'next/image';
|
|
import { Twitter, Bluesky, Medal, GitHub, LinkedIn } from '@/components/Icons'
|
|
import ProjectComponent from '@/components/ProjectComponent';
|
|
import ContactForm from '@/components/ContactForm';
|
|
|
|
// data components
|
|
import RecentWatch from "@/components/DataComponents/RecentWatch";
|
|
import RecentListen from "@/components/DataComponents/RecentListen";
|
|
import RecentGame from "@/components/DataComponents/RecentGame";
|
|
// import RecentClip from "@/components/DataComponents/RecentClip";
|
|
import RecentBook from "@/components/DataComponents/RecentBook";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="">
|
|
<section id="about">
|
|
<div className="mx-auto text-center p-10">
|
|
<div className="mx-auto grid gap-4 grid-cols-1 lg:grid-cols-2 lg:w-1/2">
|
|
<div className="flex justify-center">
|
|
<Image className="rounded-full" src={"https://storage.alexav.gg/content/picture.jpg"} alt="Profile Picture" width={250} height={250} />
|
|
</div>
|
|
<div className="text-center lg:text-left lg:my-10 w-full">
|
|
<h1 className="text-4xl font-bold">Hi, I'm Alex</h1>
|
|
<p>I'm a junior developer primarily working as QA, but sometimes writing questionable code at <a className="hover:underline text-yellow-400" href="https://medal.tv" target="_blank">Medal.tv</a></p>
|
|
|
|
<div className="block my-2 space-x-2">
|
|
<a href="https://twitter.com/carlgrimesdupe" target="_blank">
|
|
<Twitter />
|
|
</a>
|
|
<a href="https://bsky.app/profile/alexav.gg" target="_blank">
|
|
<Bluesky />
|
|
</a>
|
|
<a href="https://medal.tv/users/215577" target="_blank">
|
|
<Medal />
|
|
</a>
|
|
<a href="https://github.com/azpha/website" target="_blank">
|
|
<GitHub />
|
|
</a>
|
|
<a href="https://linkedin.com/in/thatalex" target="_blank">
|
|
<LinkedIn />
|
|
</a>
|
|
<a href="/links" className="opacity-40 text-sm">
|
|
<p className="underline">and more..</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects">
|
|
<div className="bg-zinc-900 py-8">
|
|
<h1 className="pb-8 text-3xl text-center font-bold">My Projects</h1>
|
|
|
|
<div className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full md:w-[70%] lg:w-[50%] mx-auto">
|
|
<ProjectComponent
|
|
name="medaltv-wrapper"
|
|
description="A JavaScript wrapper for the Medal.tv developer API"
|
|
urlTo="https://github.com/azpha/medaltv-wrapper"
|
|
tags={["JavaScript"]}
|
|
/>
|
|
<ProjectComponent
|
|
name="splitstat"
|
|
description="A Discord bot for SplitStat: Arena Warfare statistics"
|
|
urlTo="https://github.com/azpha/splitstat"
|
|
tags={["JavaScript", "DiscordJS"]}
|
|
/>
|
|
<ProjectComponent
|
|
name="steam-deck-file-sync"
|
|
description="Sync clips from Steam Deck"
|
|
urlTo="https://github.com/azpha/steam-deck-file-sync"
|
|
tags={["Python", "Flask"]}
|
|
/>
|
|
<ProjectComponent
|
|
name="subscription-tracker"
|
|
description="Track upcoming subscriptions"
|
|
urlTo="https://github.com/azpha/subscription-tracker"
|
|
tags={["JavaScript", "ReactJS", "Vite"]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="data">
|
|
<div className="py-8">
|
|
<h1 className="pb-8 text-3xl text-center font-bold">My Data</h1>
|
|
|
|
<div className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full md:w-[70%] lg:w-[50%] mx-auto">
|
|
<RecentWatch />
|
|
<RecentListen />
|
|
<RecentGame />
|
|
{/* <RecentClip /> */}
|
|
<RecentBook />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<div className="bg-zinc-900 py-8">
|
|
<ContactForm />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|