From fd3563d1249e1924569e1f75ab3eb91e4f369375 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 14:14:33 +0300
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=96=20feat(BlogPost):=20Add=20link?=
 =?UTF-8?q?=20to=20blog=20post=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a link to each blog post tag, allowing users to navigate to a
page that displays all posts with the selected tag. This improves the
user experience by providing an easy way to explore related content.
---
 components/blogpost.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index 281f5dd..47b5e1d 100644
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -3,6 +3,7 @@
 import tagsPic from '../public/tags.svg';
 import calendarPic from '../public/calendar.svg'
 
+import Link from 'next/link';
 import AnimatedLink from '../components/animatedLink';
 import Image from 'next/image';
 
@@ -11,7 +12,7 @@ interface BlogPost {
     body: string;
     publish: string;
     get_absolute_url: string;
-    tags: string[]; 
+    tags: string[];
 }
 
 interface BlogAreaProps {
@@ -46,7 +47,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                             <ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
                                 <li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
                                 {blogpost.tags.map((tag, index) => (
-                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li>
+                                    <li key={`${tag}-${index}`} className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base"><Link href="#">{tag}</Link></li>
                                 ))}
                             </ul>
                             <div className="blogpost-description text-base mb-4">
@@ -54,7 +55,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                             </div>
                             <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
                                 <ul className="text-base inline-flex justify-end items-center">
-                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
+                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert" /></li>
                                     <li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
                                 </ul>
 

From 0ade5e6e9c053ccb0b298d99ee5dc3c769979b62 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 14:17:58 +0300
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=8E=A8=20feat(layout):=20Reorganize?=
 =?UTF-8?q?=20page=20structure=20and=20add=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/layout.tsx | 85 ++++++++++++++++++++++++++++++++++++++++++++++++-
 app/page.tsx   | 86 ++------------------------------------------------
 2 files changed, 87 insertions(+), 84 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index b259189..421d99b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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`}
       >
-        {children}
+
+        <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>
   );
diff --git a/app/page.tsx b/app/page.tsx
index c034f6f..fd11444 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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>
+    <main>
+      <BlogArea blogposts={blogposts} />
+    </main>
   );
 }

From c89df4cf2f7ffa987cc3fb9734b8e9b4e15aff2b Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 15:38:02 +0300
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20feat(footer):=20Add=20new=20?=
 =?UTF-8?q?footer=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The changes in this commit introduce a new footer component to the application. The footer includes the following sections:

- Socials: Links to the user's social media profiles (Instagram, Mastodon, GitHub, Steam)
- Games: A link to the "Robot Fire" game
- Other Projects: Links to the "cloudberrygames" and "northfamily" projects

The footer is designed to be responsive, with a different layout for larger and smaller screens. The icons in the footer are also inverted to match the overall color scheme of the application.
---
 app/layout.tsx             | 80 +------------------------------------
 components/footer/main.tsx | 81 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 78 deletions(-)
 create mode 100644 components/footer/main.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 421d99b..c0945a8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,8 @@
 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";
-
+import MainFooter from "@/components/footer/main";
 
 export const metadata: Metadata = {
   title: 'AderKI Blog',
@@ -50,71 +38,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <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>
+          <MainFooter />
         </div>
       </body>
     </html>
diff --git a/components/footer/main.tsx b/components/footer/main.tsx
new file mode 100644
index 0000000..8201046
--- /dev/null
+++ b/components/footer/main.tsx
@@ -0,0 +1,81 @@
+
+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';
+
+export default function MainFooter() {
+    return (
+        <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>
+    );
+}
\ No newline at end of file