Yorisoft · Yorisoft · Jan 19, 2026 · Jan 19, 2026 · Jan 19, 2026
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,5 @@ pnpm-debug.log*
 
 *.bak
 tree.txt
+
+App.tsx
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
@@ -1,9 +1,16 @@
 ---
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHouse, faUser, faBlog, faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { faHouse, faUser, faBlog, faEnvelope, faCode } from '@fortawesome/free-solid-svg-icons'
 ---
-<ul class="pl-14 text-md">
-    <li><FontAwesomeIcon icon={faHouse} /> Home </li>
-    <li><FontAwesomeIcon icon={faUser} /> About Me </li>
-    <li><FontAwesomeIcon icon={faEnvelope} /> Contact </li>
+<ul class="flex flex-col gap-4">
+    <li>
+        <a href="/" class="flex flex-row items-center gap-4">
+            <FontAwesomeIcon icon={faBlog} /> Blogs 
+        </a>
+    </li>
+    <li>
+        <a href="/Projects" class="flex flex-row gap-4 items-center">
+            <FontAwesomeIcon icon={faCode} /> Projects
+        </a>
+    </li>
 </ul>
diff --git a/src/components/ProjectEntryCard.astro b/src/components/ProjectEntryCard.astro
@@ -0,0 +1,44 @@
+---
+// import {
+//   Card,
+//   CardAction,
+//   CardContent,
+//   CardDescription,
+//   CardFooter,
+//   CardHeader,
+//   CardTitle,
+//   } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardDescription, CardTitle, CardFooter } from '@/components/ui/card'
+import { Button } from "@/components/ui/button";
+const { title, pubDate, description, url, thumbnail, technologies } = Astro.props;
+---
+<div class="flex items-center rounded-lg">
+  <img
+    src={thumbnail}
+    alt="Blog Image"
+    class="h-full w-50 object-cover rounded-none shrink-0 bg-destructive-foreground"
+  />
+
+  <Card className="flex-1 bg-card rounded-none border-0 shadow-none bg-card border-0 border-b-4 border-slate-600 shadow-xl shadow-black/20">
+    <CardHeader className="p-0 pl-4">
+      <CardTitle>{title}</CardTitle>
+      <CardDescription>{pubDate}</CardDescription>
+    </CardHeader>
+
+    <CardContent className="flex flex-col flex-1  border-0 shadow-none rounded-non">
+      <p>{description}</p>
+      <p class="text-xs text-muted-foreground pt-2">{technologies}</p>
+    </CardContent>
+
+    <CardFooter className="mt-auto gap-3">
+        <Button size="sm">
+            <a href={url}>Explore The Project</a>
+        </Button>
+
+        <Button size="sm" variant="outline">
+            <a href={url}>Read More</a>
+        </Button>
+    </CardFooter>
+  </Card>
+</div>
+
diff --git a/src/pages/SideNav.astro → src/components/SideNav.astro b/src/pages/SideNav.astro → src/components/SideNav.astro
@@ -22,7 +22,7 @@ import { Label } from "@/components/ui/label"
 
     <Socials slot="socials" />
 
-    <!-- <Menu slot="menu" /> -->
+    <Menu slot="menu" />
 
     <p slot="support-me-label" htmlFor="donation-links" class="mb-5 text-xl font-bold">
         Support Me

diff --git a/src/content.config.ts b/src/content.config.ts
@@ -20,7 +20,7 @@ const project = defineCollection({
     description: z.string(),
     url: z.string(),
     thumbnail: z.string(),
-    techList: z.string(),
+    technologies: z.string().array(),
   }),
 });
 

diff --git a/src/content/project/0.kwin-project-intro/index.md b/src/content/project/0.kwin-project-intro/index.md
@@ -3,9 +3,16 @@ title: GSoC 2025 Project Blog Intro - Improving Game Controller Support in KWin
 authors:
   -  yorisoft
 date: 2025-05-12
-thumbnail: https://community.kde.org/images.community/thumb/a/af/Mascot_konqi-base-plasma.png/250px-Mascot_konqi-base-plasma.png
-SPDX-License-Identifier: CC-BY-SA-4.0
-SPDX-FileCopyrightText: 2025 Yelsin Sepulveda <yelsin.sepulveda@kdemail.net>
+description: project description - foo
+url: https://foo.co
+thumbnail: https://foo.png
+technologies: 
+    - cpp
+    - java
+    - go
+    - python 
+    - qt
+    - cmake
 ---
 
 # Hello KDE Community! 

diff --git a/src/content/project/1.kwin-project-week-1-2/index.md b/src/content/project/1.kwin-project-week-1-2/index.md
@@ -3,9 +3,16 @@ title: "GSoC'25 Kwin Project Blog Post: Week 1-2"
 authors:
   -  yorisoft
 date: 2025-06-24
+description: project description foo
+url: https://foo.co
 thumbnail: /images/games.svg
-SPDX-License-Identifier: CC-BY-SA-4.0
-SPDX-FileCopyrightText: 2025 Yelsin Sepulveda <yelsinsepulveda@gmail.com>
+technologies: 
+    - cpp
+    - java
+    - go
+    - python 
+    - qt
+    - cmake
 ---
 
 These past few week’s my focus was on exploring input device detection and event handling mechanisms in Linux, with a particular emphasis on game controllers and their potential integration into KWin. 

diff --git a/src/content/project/2.kwin-project-week-3-4/index.md b/src/content/project/2.kwin-project-week-3-4/index.md
@@ -4,9 +4,16 @@ discourse: yorisoft
 authors:
   -  yorisoft
 date: 2025-09-15
+description: project description foo
+url: https://foo.co
 thumbnail: /images/kwin_plugin_gamepad_architecture_diagram_3.png
-SPDX-License-Identifier: CC-BY-SA-4.0
-SPDX-FileCopyrightText: 2025 Yelsin Sepulveda <yelsin.sepulveda@kdemail.net>
+technologies: 
+    - cpp
+    - java
+    - go
+    - python 
+    - qt
+    - cmake
 ---
 
 # KWin::Plugin::GamePadManager

diff --git a/src/content/project/3.kwin-project-week-5-6/index.md b/src/content/project/3.kwin-project-week-5-6/index.md
@@ -4,9 +4,16 @@ discourse: yorisoft
 authors:
   -  yorisoft
 date: 2025-10-03
+description: project description foo
+url: https://foo.co
 thumbnail: /images/kwin_plugin_gamepad_kcm.png
-SPDX-License-Identifier: CC-BY-SA-4.0
-SPDX-FileCopyrightText: 2025 Yelsin Sepulveda <yelsin.sepulveda@kdemail.net>
+technologies: 
+    - cpp
+    - java
+    - go
+    - python 
+    - qt
+    - cmake
 ---
 
 It's been another few weeks of progress on the KWin GameController Plugin and I've got a lot to share! After spending the previous weeks setting up the foundation, I've progressed things forward by improving the logic a bit more, creating a few integration tests, integrating it into System Settings, and making sure it runs well on real hardware like the steamdeck.

diff --git a/src/layouts/main.astro → src/layouts/Blog.astro b/src/layouts/main.astro → src/layouts/Blog.astro
@@ -1,6 +1,8 @@
 ---
 import '../styles/global.css';
 
+import SideNav from '../components/SideNav.astro';
+
 const props = Astro.props;
 ---
 
@@ -19,8 +21,16 @@ const props = Astro.props;
     </head>
     <body>
         <div class="flex h-screen bg-sidebar">
-            <slot name="side-panel"/>
-            <slot name="main"/>
+            <SideNav />
+            <!-- <slot name="main"/> -->
+            <div id="main-panel" class="flex flex-col items-center w-full h-full overflow-auto max-w-none prose prose-lg prose-neutral dark:prose-invert bg-background">
+                <div class="flex justify-center w-full text-5xl font-semibold gap-2 bg-destructive-foreground">
+                    <slot name="blog-title" />
+                </div>
+            	<div class="flex flex-col w-3/5 pt-8 mb-50 max-w-350" >
+                    <slot name="blog" />
+                </div>
+            </div>
         </div>
     </body>
 </html>
diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
@@ -1,10 +1,37 @@
 ---
+import '../styles/global.css';
+
+import SideNav from '../components/SideNav.astro';
+
+const props = Astro.props;
 ---
-<div id="main-panel" class="flex flex-col items-center w-full h-full overflow-auto bg-background">
-    <div class="flex justify-center w-full p-8 bg-destructive-foreground dark:prose-invert">
-        <slot name="welcome_msg" class="-translate-x-20"/>
-    </div>
-    <div class="flex flex-col w-3/5 pt-8 prose prose-lg prose-neutral dark:prose-invert max-w-350 gap-8 mb-50">
-        <slot name="blog-posts" />
-    </div>
-</div>
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/logoIcon.png" />
+        <link rel="alternate" type="application/rss+xml" title="Yorisoft.dev RSS Feed" href={new URL("rss.xml", Astro.site)} />
+        <meta name="generator" content={Astro.generator} />
+        <script is:inline>
+            // Runs before page renders to prevent flash
+            document.documentElement.classList.add("dark")
+        </script>
+        <title>{props.title}</title>
+    </head>
+    <body>
+        <div class="flex h-screen bg-sidebar">
+            <!-- <slot name="side-panel"/> -->
+            <!-- <slot name="main"/> -->
+            <SideNav slot="side-panel" />
+            <div id="main-panel" class="flex flex-col items-center w-full h-full overflow-auto bg-background">
+                <div class="flex justify-center w-full bg-destructive-foreground text-lg p-10">
+                    <slot name="welcome_msg"/>
+                </div>
+                <div class="flex flex-col w-3/5 pt-8 prose prose-lg prose-neutral dark:prose-invert max-w-350 gap-8 mb-50">
+                    <slot name="blog-posts" />
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
diff --git a/src/layouts/Project.astro b/src/layouts/Project.astro
@@ -0,0 +1,37 @@
+---
+import '../styles/global.css';
+
+import SideNav from '../components/SideNav.astro';
+
+const props = Astro.props;
+---
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/logoIcon.png" />
+        <link rel="alternate" type="application/rss+xml" title="Yorisoft.dev RSS Feed" href={new URL("rss.xml", Astro.site)} />
+        <meta name="generator" content={Astro.generator} />
+        <script is:inline>
+            // Runs before page renders to prevent flash
+            document.documentElement.classList.add("dark")
+        </script>
+        <title>{props.title}</title>
+    </head>
+    <body>
+        <div class="flex h-screen bg-sidebar">
+            <!-- <slot name="side-panel"/> -->
+            <!-- <slot name="main"/> -->
+            <SideNav />
+            <div id="main-panel" class="flex flex-col items-center w-full h-full overflow-auto max-w-none prose prose-lg prose-neutral dark:prose-invert bg-background">
+                <div class="flex justify-center w-full text-5xl font-semibold gap-2 bg-destructive-foreground">
+                    <slot name="project-title" />
+                </div>
+            	<div class="flex flex-col w-3/5 pt-8 mb-50 max-w-350" >
+                    <slot name="project" />
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/src/layouts/Projects.astro b/src/layouts/Projects.astro
@@ -1,11 +1,37 @@
 ---
+import '../styles/global.css';
+
+import SideNav from '../components/SideNav.astro';
+
+const props = Astro.props;
 ---
-<div id="main-panel" class="flex flex-col items-center w-full h-full overflow-auto bg-background">
-    <div class="flex justify-center w-full p-8 bg-destructive-foreground dark:prose-invert">
-        <slot name="welcome_msg" class="-translate-x-20"/>
-    </div>
-    <div class="flex flex-col w-3/5 pt-8 prose prose-lg prose-neutral dark:prose-invert max-w-350 gap-8 mb-50">
-        <slot name="project-posts" />
-    </div>
-</div>
 
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/logoIcon.png" />
+        <link rel="alternate" type="application/rss+xml" title="Yorisoft.dev RSS Feed" href={new URL("rss.xml", Astro.site)} />
+        <meta name="generator" content={Astro.generator} />
+        <script is:inline>
+            // Runs before page renders to prevent flash
+            document.documentElement.classList.add("dark")
+        </script>
+        <title>{props.title}</title>
+    </head>
+    <body>
+        <div class="flex h-screen bg-sidebar">
+            <!-- <slot name="side-panel"/> -->
+            <!-- <slot name="main"/> -->
+            <SideNav />
+            <div id="main-panel" class="flex flex-col w-full h-full overflow-auto bg-background">
+                <div class="flex justify-center w-full bg-destructive-foreground text-lg p-10">
+                    <slot name="welcome_msg" class="-translate-x-20"/>
+                </div>
+                <div class="mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 w-full max-w-11/12 pt-8 mb-40">
+                    <slot name="project-posts" />
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/src/layouts/SideNav.astro b/src/layouts/SideNav.astro
@@ -2,7 +2,7 @@
 import { Label } from "../components/ui/label"
 ---
 
-<div id="side-panel" class="flex flex-col items-center w-full h-screen overflow-auto max-w-65 bg-sidebar">
+<div id="side-panel" class="flex flex-col items-center w-full overflow-auto max-w-70 bg-sidebar">
     <div class="flex flex-col items-center py-2">
         <slot name="name" />
         <slot name="username" />
@@ -16,7 +16,7 @@ import { Label } from "../components/ui/label"
         <slot name="socials" />
     </div>
 
-    <div class="w-4/5 text-md">
+    <div class="w-4/5 pl-15 mt-10 text-lg">
         <slot name="menu" />
     </div>
 

diff --git a/src/pages/Home.astro b/src/pages/Home.astro
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,5 @@ pnpm-debug.log*

		*.bak
		tree.txt

		App.tsx