updated website
This commit is contained in:
@@ -1,20 +0,0 @@
|
||||
import { type Session } from "next-auth";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { type AppType } from "next/app";
|
||||
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
import "@/styles/globals.css";
|
||||
|
||||
const MyApp: AppType<{ session: Session | null }> = ({
|
||||
Component,
|
||||
pageProps: { session, ...pageProps },
|
||||
}) => {
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<Component {...pageProps} />
|
||||
</SessionProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default api.withTRPC(MyApp);
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<RootLayout isHomePage={false} showHeader={true}>
|
||||
<div className="text-center text-green-500">
|
||||
<h1 className="font-bold text-2xl">About this website</h1>
|
||||
<p className="max-w-10">This is just a hobby project I thought was cool!<br /> I plan to play with it a bit to grasp more CSS, but so far, pretty cool right?</p>
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import NextAuth from "next-auth";
|
||||
|
||||
import { authOptions } from "@/server/auth";
|
||||
|
||||
export default NextAuth(authOptions);
|
||||
@@ -1,19 +0,0 @@
|
||||
import { createNextApiHandler } from "@trpc/server/adapters/next";
|
||||
|
||||
import { env } from "@/env.mjs";
|
||||
import { appRouter } from "@/server/api/root";
|
||||
import { createTRPCContext } from "@/server/api/trpc";
|
||||
|
||||
// export API handler
|
||||
export default createNextApiHandler({
|
||||
router: appRouter,
|
||||
createContext: createTRPCContext,
|
||||
onError:
|
||||
env.NODE_ENV === "development"
|
||||
? ({ path, error }) => {
|
||||
console.error(
|
||||
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
@@ -1,91 +0,0 @@
|
||||
import RootLayout from '@/components/RootLayout';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function Home() {
|
||||
const [doAnimation, setDoAnimation] = useState<boolean>(false);
|
||||
const [pastLogo, setPastLogo] = useState<boolean>(false);
|
||||
const [pastAnim, setPastAnim] = 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")) {
|
||||
setPastAnim(true)
|
||||
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) {
|
||||
setPastAnim(true)
|
||||
textElement.style.display = "none"
|
||||
mainElement.style.display = "block"
|
||||
}
|
||||
}, 5000)
|
||||
}
|
||||
}, [pastLogo, doAnimation])
|
||||
|
||||
return (
|
||||
<RootLayout isHomePage={true} showHeader={pastAnim}>
|
||||
{/* "logo", hidden after 4 seconds */}
|
||||
<h1 className="text-green-500 text-9xl font-bold italic select-none" id="pipboy">Pip-Boy</h1>
|
||||
|
||||
{/* text wall, hidden until pastLogo */}
|
||||
<p className="text-green-500 text-2xl max-w-10 flex-shrink-0 select-none" id="textwall">{text}</p>
|
||||
|
||||
{/* and the content :) */}
|
||||
<div className="text-green-500 flicker max-w-1/2 hidden" id="mainelement">
|
||||
<div className="text-center">
|
||||
<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>
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LinksPage() {
|
||||
return (
|
||||
<RootLayout showHeader={true} isHomePage={false}>
|
||||
<div className="text-green-500">
|
||||
<h1 className="text-3xl font-bold">
|
||||
My Links!
|
||||
</h1>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Link
|
||||
href="https://twitter.com/avvex__"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="hover:bg-green-500 hover:text-black">
|
||||
<h1 className="text-2xl text-center">Twitter</h1>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://mast.thatalex.dev/@alex"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="hover:bg-green-500 hover:text-black">
|
||||
<h1 className="text-2xl text-center">Mastodon</h1>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<RootLayout showHeader={true} isHomePage={false}>
|
||||
<div className="space-y-2 text-center">
|
||||
<Link href="https://github.com/azpha/splitstat" target="_blank">
|
||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
||||
<h1 className=" text-2xl mx-32">SplitStat</h1>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="https://github.com/azpha/mcsrvstat-js" target="_blank">
|
||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
||||
<h1 className=" text-2xl mx-32">MCSRVSTAT Wrapper</h1>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="https://github.com/azpha/pmanager" target="_blank">
|
||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
||||
<h1 className=" text-2xl mx-32">PManager</h1>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="https://github.com/azpha/tv-watchlist" target="_blank">
|
||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
||||
<h1 className=" text-2xl mx-32">Watchlist</h1>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
// next components
|
||||
import Link from 'next/link';
|
||||
import Image from "next/image";
|
||||
|
||||
export default function MusicPage() {
|
||||
const { data: musicData, fetchStatus} = api.misc.song.useQuery();
|
||||
|
||||
return (
|
||||
<RootLayout showHeader={true} isHomePage={false}>
|
||||
<div className="text-green-500 flicker max-w-1/2">
|
||||
<div className="float-left mr-10">
|
||||
{
|
||||
fetchStatus === "idle" ?
|
||||
musicData?.data.tracks.map((v,k) => {
|
||||
return <div key={k}>
|
||||
<div className={`text-lg ${k === 0 ? "bg-green-500 text-black" : "hover:bg-green-500 hover:text-black"}`}>
|
||||
<Link href={v.url} target="_blank">
|
||||
<h1 className="ml-2 mr-10 truncate max-w-10">{k === 0 && "■"} {v.name}</h1>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
: <h1 className="font-bold text-green-500">Fetching..</h1>
|
||||
}
|
||||
<Link
|
||||
href="https://last.fm/user/lulawex"
|
||||
target="_blank"
|
||||
className="hover:underline"
|
||||
>
|
||||
<p>Powered by Last.fm</p>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
{
|
||||
fetchStatus === "idle" &&
|
||||
<Image
|
||||
src={musicData?.data.tracks[0]?.image[2]?.["#text"] ?? "https://storage.thatalex.dev"}
|
||||
alt="Cover Art"
|
||||
width="160"
|
||||
height="160"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user