Skip to content

Commit 12b15f2

Browse files
foxeddevfoxeddev
committed
Refactor layout structure by adding components
1 parent ac6ae1d commit 12b15f2

File tree

6 files changed

+162
-117
lines changed

6 files changed

+162
-117
lines changed

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function RootLayout({
2626
return (
2727
<html lang="en">
2828
<body
29-
className={`${rubik.variable} ${spaceMono.variable} antialiased`}
29+
className={`${rubik.variable} ${spaceMono.variable} antialiased bg-[url(/img/background-arctic-fox.jpg)] bg-cover bg-fixed min-h-screen font-sans text-gray-800 scroll-smooth`}
3030
>
3131
{children}
3232
</body>

‎app/page.tsx‎

Lines changed: 111 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import Card from "@/components/Card";
77

88
import { SiGithub, SiDiscord } from "react-icons/si";
99
import { FaClock } from "react-icons/fa";
10+
import Header from "@/components/sections/Header";
11+
import Footer from "@/components/sections/Footer";
12+
import CardGrid from "@/components/sections/CardGrid";
1013
import Clock from "@/components/Clock";
1114

1215
export default function Home() {
@@ -19,126 +22,118 @@ export default function Home() {
1922
}
2023

2124
return (
22-
<div className="bg-[url(/img/background-arctic-fox.jpg)] bg-cover bg-fixed min-h-screen font-sans text-gray-800 scroll-smooth">
23-
<header className="flex flex-col justify-end items-center min-h-screen">
24-
<div className="flex flex-col items-center gap-16 bg-white/75 p-4 md:p-16 w-full max-w-4xl">
25-
<Image src={Logo} alt="" className="-mt-36"></Image>
26-
<div className="flex flex-col items-center gap-2 text-center">
27-
<p className="font-mono text-gray-500 text-4xl">Hi, I&apos;m</p>
28-
<h1 className="font-extrabold text-gray-800 text-8xl sm:text-9xl">
29-
FOXED
30-
</h1>
31-
<p className="font-mono text-gray-500 text-xl">
32-
I&apos;m a {now.getFullYear() - 2010} year old developer and
33-
designer from Germany.
34-
</p>
35-
</div>
25+
<>
26+
<Header>
27+
<Image src={Logo} alt="" className="-mt-36"></Image>
28+
<div className="flex flex-col items-center gap-2 text-center">
29+
<p className="font-mono text-gray-500 text-4xl">Hi, I&apos;m</p>
30+
<h1 className="font-extrabold text-gray-800 text-8xl sm:text-9xl">
31+
FOXED
32+
</h1>
33+
<p className="font-mono text-gray-500 text-xl">
34+
I&apos;m a {now.getFullYear() - 2010} year old developer and
35+
designer from Germany.
36+
</p>
3637
</div>
37-
</header>
38-
<main className="flex flex-col items-center">
39-
<div className="gap-8 grid grid-cols-2 bg-white/75 p-4 md:p-16 w-full max-w-4xl">
40-
<Card icon={SiGithub}>
41-
<h3 className="font-medium text-2xl">
42-
GitHub:{" "}
38+
</Header>
39+
<CardGrid>
40+
<Card icon={SiGithub}>
41+
<h3 className="font-medium text-2xl">
42+
GitHub:{" "}
43+
<Link
44+
href={"https://github.com/foxeddev"}
45+
target="_blank"
46+
className="text-indigo-600"
47+
>
48+
FoxedDev
49+
</Link>
50+
</h3>
51+
</Card>
52+
<Card icon={SiDiscord}>
53+
<h3 className="font-medium text-2xl">
54+
Discord:{" "}
55+
<span onClick={copy} className="text-indigo-600 cursor-pointer">
56+
FoxedDev
57+
</span>
58+
</h3>
59+
</Card>
60+
<Card cols={2} align="left">
61+
<div>
62+
<h3 className="font-medium text-2xl">Tech Stack or something</h3>
63+
<p className="font-mono text-gray-500">
64+
OS:{" "}
4365
<Link
44-
href={"https://github.com/foxeddev"}
66+
href="https://archlinux.org/"
4567
target="_blank"
46-
className="text-indigo-600"
68+
className="text-indigo-600 underline"
4769
>
48-
FoxedDev
70+
Arch Linux
4971
</Link>
50-
</h3>
51-
</Card>
52-
<Card icon={SiDiscord}>
53-
<h3 className="font-medium text-2xl">
54-
Discord:{" "}
55-
<span onClick={copy} className="text-indigo-600 cursor-pointer">
56-
FoxedDev
57-
</span>
58-
</h3>
59-
</Card>
60-
<Card cols={2} align="left">
61-
<div>
62-
<h3 className="font-medium text-2xl">Tech Stack or something</h3>
63-
<p className="font-mono text-gray-500">
64-
OS:{" "}
65-
<Link
66-
href="https://archlinux.org/"
67-
target="_blank"
68-
className="text-indigo-600 underline"
69-
>
70-
Arch Linux
71-
</Link>
72-
<br />
73-
WM:{" "}
74-
<Link
75-
href="https://hydeproject.pages.dev/"
76-
target="_blank"
77-
className="text-indigo-600 underline"
78-
>
79-
HyDE
80-
</Link>{" "}
81-
(
82-
<Link
83-
href="https://hypr.land/"
84-
target="_blank"
85-
className="text-indigo-600 underline"
86-
>
87-
Hyprland
88-
</Link>
89-
)
90-
<br />
91-
Browser:{" "}
92-
<Link
93-
href="https://zen-browser.app/"
94-
target="_blank"
95-
className="text-indigo-600 underline"
96-
>
97-
Zen Browser
98-
</Link>{" "}
99-
(
100-
<Link
101-
href="https://www.firefox.com/"
102-
target="_blank"
103-
className="text-indigo-600 underline"
104-
>
105-
Firefox
106-
</Link>{" "}
107-
based)
108-
<br />
109-
Editor:{" "}
110-
<Link
111-
href="https://code.visualstudio.com/"
112-
target="_blank"
113-
className="text-indigo-600 underline"
114-
>
115-
Visual Studio Code
116-
</Link>
117-
<br />
118-
Minecraft Launcher:{" "}
119-
<Link
120-
href="https://prismlauncher.org/"
121-
target="_blank"
122-
className="text-indigo-600 underline"
123-
>
124-
Prism Launcher
125-
</Link>
126-
</p>
127-
</div>
128-
</Card>
129-
<Card>
130-
<Clock hasSeconds showSubtext />
131-
</Card>
132-
<Card icon={FaClock}>
133-
<h3 className="font-medium text-2xl">More stuff coming soon!</h3>
134-
</Card>
135-
</div>
136-
</main>
137-
<header className="flex flex-col justify-start items-center">
138-
<div className="flex flex-col items-center gap-16 bg-white/75 p-4 md:p-16 w-full max-w-4xl">
139-
<p className="font-mono text-gray-500">Made with 💜 by Foxed</p>
140-
</div>
141-
</header>
142-
</div>
72+
<br />
73+
WM:{" "}
74+
<Link
75+
href="https://hydeproject.pages.dev/"
76+
target="_blank"
77+
className="text-indigo-600 underline"
78+
>
79+
HyDE
80+
</Link>{" "}
81+
(
82+
<Link
83+
href="https://hypr.land/"
84+
target="_blank"
85+
className="text-indigo-600 underline"
86+
>
87+
Hyprland
88+
</Link>
89+
)
90+
<br />
91+
Browser:{" "}
92+
<Link
93+
href="https://zen-browser.app/"
94+
target="_blank"
95+
className="text-indigo-600 underline"
96+
>
97+
Zen Browser
98+
</Link>{" "}
99+
(
100+
<Link
101+
href="https://www.firefox.com/"
102+
target="_blank"
103+
className="text-indigo-600 underline"
104+
>
105+
Firefox
106+
</Link>{" "}
107+
based)
108+
<br />
109+
Editor:{" "}
110+
<Link
111+
href="https://code.visualstudio.com/"
112+
target="_blank"
113+
className="text-indigo-600 underline"
114+
>
115+
Visual Studio Code
116+
</Link>
117+
<br />
118+
Minecraft Launcher:{" "}
119+
<Link
120+
href="https://prismlauncher.org/"
121+
target="_blank"
122+
className="text-indigo-600 underline"
123+
>
124+
Prism Launcher
125+
</Link>
126+
</p>
127+
</div>
128+
</Card>
129+
<Card>
130+
<Clock hasSeconds showSubtext />
131+
</Card>
132+
<Card icon={FaClock}>
133+
<h3 className="font-medium text-2xl">More stuff coming soon!</h3>
134+
</Card>
135+
</CardGrid>
136+
<Footer />
137+
</>
143138
);
144139
}

‎components/Section.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function Section({
2+
children,
3+
}: Readonly<{
4+
children: React.ReactNode;
5+
}>) {
6+
return (
7+
<div className="flex flex-col items-center">
8+
<div className="flex flex-col items-center gap-16 bg-white/75 p-4 md:p-16 w-full max-w-4xl">
9+
{children}
10+
</div>
11+
</div>
12+
);
13+
}

‎components/sections/CardGrid.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Section from "@/components/Section";
2+
3+
export default function CardGrid({
4+
children,
5+
}: Readonly<{
6+
children: React.ReactNode;
7+
}>) {
8+
return (
9+
<Section>
10+
<div className="gap-4 grid grid-cols-2">{children}</div>
11+
</Section>
12+
);
13+
}

‎components/sections/Footer.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Section from "@/components/Section";
2+
3+
export default function Footer() {
4+
return (
5+
<footer>
6+
<Section>
7+
<p className="font-mono text-gray-500">Made with 💜 by Foxed</p>
8+
</Section>
9+
</footer>
10+
);
11+
}

‎components/sections/Header.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Section from "@/components/Section";
2+
3+
export default function Header({
4+
children,
5+
}: Readonly<{
6+
children: React.ReactNode;
7+
}>) {
8+
return (
9+
<header className="flex flex-col justify-end min-h-screen">
10+
<Section>{children}</Section>
11+
</header>
12+
);
13+
}

0 commit comments

Comments
 (0)