new site
This commit is contained in:
+136
-31
@@ -1,48 +1,153 @@
|
||||
import { useState } from "react";
|
||||
import Layout from "../components/Layout";
|
||||
import Overlay from "../components/Overlay";
|
||||
import GameComponent from "../components/info/GameComponent";
|
||||
import PictureCarousel from "../components/modules/PictureCarousel";
|
||||
import InfoModule from "../components/modules/InfoModule";
|
||||
import WelcomeModule from "../components/modules/WelcomeModule";
|
||||
import ScoreModule from "../components/modules/ScoreModule";
|
||||
import StatModule from "../components/modules/StatModule";
|
||||
import FantasyStatus from "../components/FantasyStatus";
|
||||
import Clock from "../components/modules/Clock";
|
||||
import MusicComponent from "../components/info/MusicComponent";
|
||||
|
||||
export default function App() {
|
||||
const [selectedImage, setSelectedImage] = useState<string>("");
|
||||
const [tab, setTab] = useState<string>("home");
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{selectedImage !== "" && (
|
||||
<Overlay onClose={() => setSelectedImage("")}>
|
||||
<div className="flex justify-center items-center w-full h-full">
|
||||
<div className="min-h-screen flex justify-center items-center">
|
||||
<div className="border-3 bg-[#ebebeb] border-black w-full sm:w-[500px]">
|
||||
<div className="] text-black">
|
||||
<div className="bg-black w-full text-white">
|
||||
<div className="grid grid-cols-3 gap-2 p-2 text-2xl">
|
||||
<h1 className="font-semibold">welcome</h1>
|
||||
<Clock />
|
||||
<h1 className="text-right">let it rip</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
draggable={false}
|
||||
className="select-none"
|
||||
width="400"
|
||||
height="400"
|
||||
src={selectedImage}
|
||||
className="h-[100px] object-[25%_75%] w-full object-cover"
|
||||
src="https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg"
|
||||
/>
|
||||
<hr className="border-black" />
|
||||
<div className="p-2">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<img
|
||||
className="h-40 w-50 object-cover object-top"
|
||||
src="https://storage.alexav.gg/content/f49b355a-25cd-48ba-8421-da702620fcc6.jpeg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">hi, i'm alex!</h1>
|
||||
<p className="text-lg">
|
||||
i do QA stuff at{" "}
|
||||
<a
|
||||
className="underline"
|
||||
href="https://medal.tv/u/alexav"
|
||||
target="_blank"
|
||||
>
|
||||
Medal.tv{" "}
|
||||
</a>
|
||||
and write mediocre code sometimes
|
||||
</p>
|
||||
<p className="text-sm space-x-1">
|
||||
<a
|
||||
href="https://twitter.com/lostinmyyabyss_"
|
||||
className="hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
twt
|
||||
</a>
|
||||
<span>•</span>
|
||||
<a
|
||||
className="hover:underline"
|
||||
href="https://instagram.com/alexfrantz07"
|
||||
target="_blank"
|
||||
>
|
||||
instagram
|
||||
</a>
|
||||
<span>•</span>
|
||||
<a
|
||||
className="hover:underline"
|
||||
href="https://tiktok.com/@lostinherabyss_"
|
||||
target="_blank"
|
||||
>
|
||||
tiktok
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-2xl">
|
||||
<div>
|
||||
{" "}
|
||||
<span className="bg-black text-white px-1">shows</span>{" "}
|
||||
dexter, the pitt, tlou, twd
|
||||
</div>
|
||||
<div>
|
||||
<span className="bg-black text-white px-1">music</span> ptv,
|
||||
treaty oak, zach top, she wants revenge
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="border-black" />
|
||||
<div className="px-2">
|
||||
<div className="grid grid-cols-2">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">about me</h1>
|
||||
<p>
|
||||
born & raised western new yorker. i've been doing QA work
|
||||
for the past 4 years and learning software engineering in
|
||||
between. i also play acoustic guitar, am really into gaming
|
||||
and love travelling to NYC. i am also incredibly awkward,
|
||||
but that's besides the point
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto">
|
||||
<div className="p-2">
|
||||
<div className="mb-2">
|
||||
<MusicComponent />
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<StatModule />
|
||||
</div>
|
||||
<div>
|
||||
<GameComponent />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 text-center border-b">
|
||||
<h1
|
||||
onClick={() => setTab("home")}
|
||||
className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "home" && "underline"}`}
|
||||
>
|
||||
home
|
||||
</h1>
|
||||
<h1
|
||||
onClick={() => setTab("fantasy")}
|
||||
className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "fantasy" && "underline"}`}
|
||||
>
|
||||
fantasy
|
||||
</h1>
|
||||
<h1
|
||||
onClick={() => setTab("pictures")}
|
||||
className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "pictures" && "underline"}`}
|
||||
>
|
||||
pictures
|
||||
</h1>
|
||||
<h1
|
||||
onClick={() => setTab("scores")}
|
||||
className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "scores" && "underline"}`}
|
||||
>
|
||||
scores
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</Overlay>
|
||||
)}
|
||||
|
||||
<div className="my-2 mx-auto w-full sm:w-[500px]">
|
||||
<div className="space-y-4">
|
||||
<img
|
||||
className="rounded-lg"
|
||||
src={
|
||||
"https://storage.alexav.gg/content/55f3eca0-a5a9-4c71-9d92-ba5d669a7a0c.jpg"
|
||||
}
|
||||
/>
|
||||
|
||||
<WelcomeModule />
|
||||
<InfoModule />
|
||||
<StatModule />
|
||||
<PictureCarousel onClick={(url) => setSelectedImage(url)} />
|
||||
<GameComponent />
|
||||
<ScoreModule type={"sabres"} />
|
||||
{/* <FantasyStatus /> */}
|
||||
{tab === "fantasy" && <FantasyStatus />}
|
||||
{tab === "pictures" && <PictureCarousel />}
|
||||
{tab === "scores" && <ScoreModule type="sabres" />}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user