pip :)
This commit is contained in:
Alex Frantz
+83
-53
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user