From a3511b4c75fdc9ca529684b52c248eb7c4e63a55 Mon Sep 17 00:00:00 2001
From: Yelsin Sepulveda <yelsinsepulveda@gmail.com>
Date: Sun, 18 Jan 2026 22:48:58 -0500
Subject: [PATCH 1/2] create portfolio page and restructure project

Signed-off-by: Yelsin Sepulveda <yelsinsepulveda@gmail.com>
---
 .gitignore                                    |  2 +
 src/components/Menu.astro                     | 17 ++++---
 src/components/ProjectEntryCard.astro         | 44 +++++++++++++++++++
 src/{pages => components}/SideNav.astro       |  2 +-
 src/content.config.ts                         |  2 +-
 .../project/0.kwin-project-intro/index.md     | 13 ++++--
 .../project/1.kwin-project-week-1-2/index.md  | 11 ++++-
 .../project/2.kwin-project-week-3-4/index.md  | 11 ++++-
 .../project/3.kwin-project-week-5-6/index.md  | 11 ++++-
 src/layouts/Home.astro                        | 43 ++++++++++++++----
 src/layouts/{main.astro => Project.astro}     | 15 ++++++-
 src/layouts/Projects.astro                    | 42 ++++++++++++++----
 src/layouts/SideNav.astro                     |  4 +-
 src/pages/Home.astro                          | 36 ---------------
 src/pages/Projects.astro                      | 25 ++++++-----
 src/pages/index.astro                         | 37 +++++++++++++---
 src/pages/project/[slug].astro                | 38 ++++++++++++++++
 17 files changed, 263 insertions(+), 90 deletions(-)
 create mode 100644 src/components/ProjectEntryCard.astro
 rename src/{pages => components}/SideNav.astro (97%)
 rename src/layouts/{main.astro => Project.astro} (52%)
 delete mode 100644 src/pages/Home.astro
 create mode 100644 src/pages/project/[slug].astro

diff --git a/.gitignore b/.gitignore
index 1bd5e34..0943b27 100644
--- 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
index cb34828..2c294bf 100644
--- 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
new file mode 100644
index 0000000..fbc10c9
--- /dev/null
+++ 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 b/src/components/SideNav.astro
similarity index 97%
rename from src/pages/SideNav.astro
rename to src/components/SideNav.astro
index cf47b02..94f876e 100644
--- a/src/pages/SideNav.astro
+++ b/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
index abb203c..97b8d88 100644
--- 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
index a748ca1..c9e8d60 100644
--- 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
index 2e2896e..238e664 100644
--- 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
index 2ce50f0..b05217a 100644
--- 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
index 0cb4faa..d058f9d 100644
--- 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/Home.astro b/src/layouts/Home.astro
index 898ae42..bef1127 100644
--- 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" 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>
+        </div>
+    </body>
+</html>
diff --git a/src/layouts/main.astro b/src/layouts/Project.astro
similarity index 52%
rename from src/layouts/main.astro
rename to src/layouts/Project.astro
index b03fc15..1e4d976 100644
--- a/src/layouts/main.astro
+++ b/src/layouts/Project.astro
@@ -1,6 +1,8 @@
 ---
 import '../styles/global.css';
 
+import SideNav from '../pages/SideNav.astro';
+
 const props = Astro.props;
 ---
 
@@ -19,8 +21,17 @@ const props = Astro.props;
     </head>
     <body>
         <div class="flex h-screen bg-sidebar">
-            <slot name="side-panel"/>
-            <slot name="main"/>
+            <!-- <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
index a2ec731..9680694 100644
--- 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
index 8781854..9e5b2ad 100644
--- 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
deleted file mode 100644
index fc32003..0000000
--- a/src/pages/Home.astro
+++ /dev/null
@@ -1,36 +0,0 @@
----
-import Home from "../layouts/Home.astro"
-import BlogPostCard from "../components/BlogPostCard.astro"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-
-import { getCollection } from "astro:content";
-// This looks into src/content/blog/
-const posts = await getCollection('blog');
----
-
-<Home>
-    <pre slot="welcome_msg" class="text-3xl font-semibold">
-<span class="text-blue-500">do</span> {'{'}
-  <span class="text-[#4EC9B0]">Yorisoft</span>::<span class="text-[#DCDCAA]">things</span>();
-{'};'}
-    </pre>
-    {posts.reverse().map((post) => {
-        const pubDate = post.data.date
-          .toISOString()
-          .split("T")[0]; 
-
-          return (
-            <BlogPostCard slot="blog-posts" 
-                title={post.data.title}
-                authors={post.data.authors}
-                pubDate={pubDate}
-                description={post.data.description}
-                url={`/blog/${post.id.split('/')[0]}`}
-                thumbnail={post.data.thumbnail}
-            />
-          )
-    })}
-</Home>
diff --git a/src/pages/Projects.astro b/src/pages/Projects.astro
index 8468e65..c35da9b 100644
--- a/src/pages/Projects.astro
+++ b/src/pages/Projects.astro
@@ -1,19 +1,22 @@
 ---
-import Home from "../layouts/Projects.astro"
-import BlogPostCard from "../components/BlogPostCard.astro"
+import '../styles/global.css';
 
-import { Label } from "@/components/ui/label"
+// Component Imports
+import ProjectsLayout from "../layouts/Projects.astro"
+import ProjectEntryCard from "../components/ProjectEntryCard.astro"
 
 import { getCollection } from "astro:content";
-// This looks into src/content/blog/
 const projects = await getCollection('project');
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/basics/astro-components/
 ---
 
-<Home>
+<ProjectsLayout slot="main" >
     <pre slot="welcome_msg" class="text-3xl font-semibold">
-<span class="text-blue-500">do</span> {'{'}
-  <span class="text-[#4EC9B0]">Yorisoft</span>::<span class="text-[#DCDCAA]">things</span>();
-{'};'}
+        <span class="text-blue-500">do</span> {'{'}
+          <span class="text-[#4EC9B0]">Yorisoft</span>::<span class="text-[#DCDCAA]">things</span>();
+        {'};'}
     </pre>
     {projects.reverse().map((project) => {
         const pubDate = project.data.date
@@ -21,14 +24,14 @@ const projects = await getCollection('project');
           .split("T")[0]; 
 
           return (
-            <BlogPostCard slot="project-posts" 
+            <ProjectEntryCard slot="project-posts" 
                 title={project.data.title}
                 pubDate={pubDate}
                 description={project.data.description}
                 url={`/project/${project.id.split('/')[0]}`}
                 thumbnail={project.data.thumbnail}
-                techList={project.data.techList}
+                technologies={project.data.technologies}
             />
           )
     })}
-</Home>
+</ProjectsLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6f5d534..178aa81 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,15 +1,38 @@
 ---
 import '../styles/global.css';
 // Component Imports
-import MainLayout from '../layouts/main.astro';
-import Home from '../pages/Home.astro';
-import SideNav from '../pages/SideNav.astro';
+import HomeLayout from '../layouts/Home.astro';
+import BlogPostCard from "../components/BlogPostCard.astro"
+
+import { getCollection } from "astro:content";
+// This looks into src/content/blog/
+const posts = await getCollection('blog');
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/basics/astro-components/
 ---
 
-<MainLayout title="Yorisoft.dev">
-    <SideNav slot="side-panel" />
-    <Home slot="main" />
-</MainLayout>
+
+<HomeLayout slot="main" title="Yorisoft.dev">
+    <pre slot="welcome_msg" class="text-3xl font-semibold">
+        <span class="text-blue-500">do</span> {'{'}
+          <span class="text-[#4EC9B0]">Yorisoft</span>::<span class="text-[#DCDCAA]">things</span>();
+        {'};'}
+    </pre>
+    {posts.reverse().map((post) => {
+        const pubDate = post.data.date
+          .toISOString()
+          .split("T")[0]; 
+
+          return (
+            <BlogPostCard slot="blog-posts" 
+                title={post.data.title}
+                authors={post.data.authors}
+                pubDate={pubDate}
+                description={post.data.description}
+                url={`/blog/${post.id.split('/')[0]}`}
+                thumbnail={post.data.thumbnail}
+            />
+          )
+    })}
+</HomeLayout>
diff --git a/src/pages/project/[slug].astro b/src/pages/project/[slug].astro
new file mode 100644
index 0000000..3a476b3
--- /dev/null
+++ b/src/pages/project/[slug].astro
@@ -0,0 +1,38 @@
+---
+import ProjectLayout from "../../layouts/Project.astro"
+
+import { getCollection, getEntry } from "astro:content";
+
+// Required for static builds - tells Astro which pages to generate 
+export async function getStaticPaths() {
+    const projects = await getCollection("project");
+    return projects.map((proj) => {
+        // proj.id might be "1.kwin-project-week-1-2/index"
+        // Extract just the folder name
+        const slug = proj.id.split('/')[0];  // Astro 5.x uses 'id' not 'slug'
+        console.log(slug);
+        return { 
+            params: { slug },
+            props: { proj },  // Pass the post as a prop to avoid fetching again
+        };
+    });
+}
+
+// Get the slug from URL params 
+const { slug } = Astro.params;  // Fetch the entry using Astro 5.x API (not getEntryBySlug) 
+const { proj } = Astro.props;  // Handle case where post doesn't exist 
+
+if (!proj) {
+    return Astro.redirect("/404"); 
+}
+
+// Render the markdown content 
+const { Content } = await proj.render();
+
+const props = Astro.props;
+const title = props.title;
+---
+<ProjectLayout slot="main" >
+    <p slot="project-title">{proj.data.title}</p>
+    <Content slot="project" />
+</ProjectLayout> 

From 3035d8b7936421b169f7f8fc90c2075cc8811ef7 Mon Sep 17 00:00:00 2001
From: Yelsin Sepulveda <yelsinsepulveda@gmail.com>
Date: Sun, 18 Jan 2026 23:05:18 -0500
Subject: [PATCH 2/2] restructure blog post page

Signed-off-by: Yelsin Sepulveda <yelsinsepulveda@gmail.com>
---
 src/layouts/Blog.astro      | 36 ++++++++++++++++++++++++++++++++++++
 src/layouts/Home.astro      |  2 +-
 src/layouts/Post.astro      | 10 ----------
 src/layouts/Project.astro   |  2 +-
 src/pages/Projects.astro    |  2 +-
 src/pages/blog/[slug].astro | 15 ++++++---------
 src/pages/index.astro       |  2 +-
 7 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 src/layouts/Blog.astro
 delete mode 100644 src/layouts/Post.astro

diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
new file mode 100644
index 0000000..9cea7f3
--- /dev/null
+++ b/src/layouts/Blog.astro
@@ -0,0 +1,36 @@
+---
+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">
+            <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
index bef1127..435193f 100644
--- a/src/layouts/Home.astro
+++ b/src/layouts/Home.astro
@@ -26,7 +26,7 @@ const props = Astro.props;
             <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" class="-translate-x-20"/>
+                    <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" />
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
deleted file mode 100644
index 05502fc..0000000
--- a/src/layouts/Post.astro
+++ /dev/null
@@ -1,10 +0,0 @@
----
----
-<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>
diff --git a/src/layouts/Project.astro b/src/layouts/Project.astro
index 1e4d976..2a3abdc 100644
--- a/src/layouts/Project.astro
+++ b/src/layouts/Project.astro
@@ -1,7 +1,7 @@
 ---
 import '../styles/global.css';
 
-import SideNav from '../pages/SideNav.astro';
+import SideNav from '../components/SideNav.astro';
 
 const props = Astro.props;
 ---
diff --git a/src/pages/Projects.astro b/src/pages/Projects.astro
index c35da9b..c83722c 100644
--- a/src/pages/Projects.astro
+++ b/src/pages/Projects.astro
@@ -13,7 +13,7 @@ const projects = await getCollection('project');
 ---
 
 <ProjectsLayout slot="main" >
-    <pre slot="welcome_msg" class="text-3xl font-semibold">
+    <pre slot="welcome_msg" class="text-3xl font-semibold -translate-x-25">
         <span class="text-blue-500">do</span> {'{'}
           <span class="text-[#4EC9B0]">Yorisoft</span>::<span class="text-[#DCDCAA]">things</span>();
         {'};'}
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 4dfb47c..6c825b0 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -1,7 +1,7 @@
 ---
-import MainLayout from '../../layouts/main.astro';
+import BlogLayout from '../../layouts/Blog.astro';
 import Post from "../../layouts/Post.astro"
-import SideNav from "../SideNav.astro"
+import SideNav from "../../components/SideNav.astro"
 
 import { getCollection, getEntry } from "astro:content";
 
@@ -34,10 +34,7 @@ const { Content } = await post.render();
 const props = Astro.props;
 const title = props.title;
 ---
-<MainLayout title= {`Yorisoft.dev - ${post.data.title}`}>
-    <SideNav slot="side-panel" />
-    <Post slot="main" >
-        <p slot="blog-title">{post.data.title}</p>
-        <Content slot="blog" />
-    </Post> 
-</MainLayout>
+<BlogLayout title= {`Yorisoft.dev - ${post.data.title}`}>
+    <p slot="blog-title">{post.data.title}</p>
+    <Content slot="blog" />
+</BlogLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 178aa81..e2735ad 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,7 +14,7 @@ const posts = await getCollection('blog');
 
 
 <HomeLayout slot="main" title="Yorisoft.dev">
-    <pre slot="welcome_msg" class="text-3xl font-semibold">
+    <pre slot="welcome_msg" class="text-3xl font-semibold -translate-x-25">
         <span class="text-blue-500">do</span> {'{'}
           <span class="text-[#4EC9B0]">Yorisoft</span>::<span class="text-[#DCDCAA]">things</span>();
         {'};'}