AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 feat(layout): Reorganize page structure and add footer

Browse Source 
This commit reorganizes the page structure by moving the main content area and the footer into the layout component. The main content area now only contains the BlogArea component, while the footer has been expanded to include social links, game links, and other project links.

The changes were made to improve the overall structure and organization of the application, making it easier to maintain and extend in the future.
This commit is contained in:
AderKonstantin
2025-03-26 14:17:58 +03:00
parent fd3563d124
commit 0ade5e6e9c
2 changed files with 87 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
app/layout.tsx
View File

@@ -1,6 +1,20 @@
import type { Metadata } from "next";
import "./globals.css";
import mastodonPic from '../public/mastodon.svg';
import githubPic from '../public/github.svg';
import instagramPic from '../public/instagram.svg';
import steamPic from '../public/steam.svg';
import gamePic from '../public/gamepad.svg';
import projectPic from '../public/project.svg';
import Image from "next/image";
import Link from "next/link";
import AnimatedLink from '../components/animatedLink';
import MainHeader from "@/components/header/main";
export const metadata: Metadata = {
title: 'AderKI Blog',
@@ -32,7 +46,76 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body
className={`bg-black text-white font-sans`}
>
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
<MainHeader />
{children}
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3>Socials</h3></li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://www.instagram.com/aderkitty/">
<Image
src={instagramPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://mastodon.social/@aderkonstantin">
<Image
src={mastodonPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://github.com/AderKonstantin">
<Image
src={githubPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://steamcommunity.com/yourprofile">
<Image
src={steamPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">Robot Fire</AnimatedLink>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">cloudberrygames</AnimatedLink>
</li>
<li className="text-xl">
<AnimatedLink href="#">northfamily</AnimatedLink>
</li>
</ul>
</footer>
</div>
</body>
</html>
);

80
app/page.tsx
View File

@@ -1,17 +1,6 @@
import mastodonPic from '../public/mastodon.svg';
import githubPic from '../public/github.svg';
import instagramPic from '../public/instagram.svg';
import steamPic from '../public/steam.svg';
import gamePic from '../public/gamepad.svg';
import projectPic from '../public/project.svg';
import Image from "next/image";
import Link from "next/link";
import AnimatedLink from '../components/animatedLink';
import BlogArea from "../components/blogpost";
import MainHeader from "@/components/header/main";
// Mock data for blog posts
const blogposts = [
@@ -47,77 +36,8 @@ const blogposts = [
export default function Home() {
return (
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
<MainHeader />
<main>
<BlogArea blogposts={blogposts} />
</main>
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3>Socials</h3></li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://www.instagram.com/aderkitty/">
<Image
src={instagramPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://mastodon.social/@aderkonstantin">
<Image
src={mastodonPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://github.com/AderKonstantin">
<Image
src={githubPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://steamcommunity.com/yourprofile">
<Image
src={steamPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">Robot Fire</AnimatedLink>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">cloudberrygames</AnimatedLink>
</li>
<li className="text-xl">
<AnimatedLink href="#">northfamily</AnimatedLink>
</li>
</ul>
</footer>
</div>
);
}