move header/footer to RootLayout
This commit is contained in:
Alex Frantz
+5
-9
@@ -1,16 +1,12 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import Footer from "@/components/footer";
|
||||
import Header from "@/components/header";
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<RootLayout>
|
||||
<Header isNotHomePage={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>
|
||||
<Footer />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
+5
-6
@@ -1,11 +1,10 @@
|
||||
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 [pastAnim, setPastAnim] = useState<boolean>(false);
|
||||
const [text, setText] = useState<string[]>([]);
|
||||
|
||||
const generateRandomTextString = () => {
|
||||
@@ -22,6 +21,7 @@ export default function Home() {
|
||||
|
||||
useEffect(() => {
|
||||
if (location.href.includes("?noAnimation")) {
|
||||
setPastAnim(true)
|
||||
const logoElement = document.getElementById("pipboy");
|
||||
const textElement = document.getElementById("textwall");
|
||||
const mainElement = document.getElementById("mainelement");
|
||||
@@ -61,6 +61,7 @@ export default function Home() {
|
||||
setTimeout(() => {
|
||||
clearInterval(interval)
|
||||
if (textElement && mainElement) {
|
||||
setPastAnim(true)
|
||||
textElement.style.display = "none"
|
||||
mainElement.style.display = "block"
|
||||
}
|
||||
@@ -69,7 +70,7 @@ export default function Home() {
|
||||
}, [pastLogo, doAnimation])
|
||||
|
||||
return (
|
||||
<RootLayout>
|
||||
<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>
|
||||
|
||||
@@ -78,14 +79,12 @@ export default function Home() {
|
||||
|
||||
{/* and the content :) */}
|
||||
<div className="text-green-500 flicker max-w-1/2 hidden" id="mainelement">
|
||||
<Header isNotHomePage={false} />
|
||||
<div className="text-left">
|
||||
<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>
|
||||
<Footer />
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
|
||||
+18
-46
@@ -1,61 +1,33 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import Footer from "@/components/footer";
|
||||
import Header from "@/components/header";
|
||||
import Link from "next/link";
|
||||
import {useState} from 'react';
|
||||
|
||||
// icons
|
||||
import {
|
||||
Twitter,
|
||||
MailOption,
|
||||
AddCircle
|
||||
} from 'grommet-icons'
|
||||
|
||||
export default function LinksPage() {
|
||||
const [icon, setIcon] = useState(<AddCircle size="large" />);
|
||||
|
||||
return (
|
||||
<RootLayout>
|
||||
<Header isNotHomePage={true} />
|
||||
<div className="text-green-500 max-h-96">
|
||||
<h1 className="font-bold text-3xl ml-2">My Links!</h1>
|
||||
<div className="space-y-2 float-left">
|
||||
<Link
|
||||
href="https://twitter.com/avvex__"
|
||||
target="_blank"
|
||||
onMouseOver={() => {
|
||||
setIcon(<Twitter size="large" />)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setIcon(<AddCircle size="large" />)
|
||||
}}
|
||||
>
|
||||
<div className="hover:bg-green-500 hover:text-black">
|
||||
<h1 className="text-2xl mr-32 ml-2">Twitter</h1>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://mast.thatalex.dev/@alex"
|
||||
<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"
|
||||
onMouseOver={() => {
|
||||
setIcon(<MailOption size="large" />)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setIcon(<AddCircle size="large" />)
|
||||
}}
|
||||
>
|
||||
<div className="hover:bg-green-500 hover:text-black">
|
||||
<h1 className="text-2xl mr-32 ml-2">Mastodon</h1>
|
||||
<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 className="float-right">
|
||||
{/* <Twitter size='xlarge' className="mr-24" /> */}
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,12 +1,9 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import Footer from "@/components/footer";
|
||||
import Header from "@/components/header";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<RootLayout>
|
||||
<Header isNotHomePage={true} />
|
||||
<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">
|
||||
@@ -28,7 +25,6 @@ export default function ProjectsPage() {
|
||||
<h1 className=" text-2xl mx-32">Watchlist</h1>
|
||||
</div>
|
||||
</Link>
|
||||
<Footer />
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
|
||||
+10
-7
@@ -1,6 +1,4 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import Footer from "@/components/footer";
|
||||
import Header from "@/components/header";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
// next components
|
||||
@@ -11,23 +9,29 @@ export default function MusicPage() {
|
||||
const { data: musicData, fetchStatus} = api.misc.song.useQuery();
|
||||
|
||||
return (
|
||||
<RootLayout>
|
||||
<Header isNotHomePage={true} />
|
||||
<RootLayout showHeader={true} isHomePage={false}>
|
||||
<div className="text-green-500 flicker max-w-1/2">
|
||||
<div className="float-left">
|
||||
<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-36 truncate max-w-10">{k === 0 && "■"} {v.name}</h1>
|
||||
<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">
|
||||
{
|
||||
@@ -41,7 +45,6 @@ export default function MusicPage() {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user