started coding the docs

src/components/Navbar.astro

@@ -17,7 +17,6 @@ import "../styles/navbar.scss";
                 const isActive =
                     (Astro.url.pathname.startsWith(path) && path !== "/") ||
                     Astro.url.pathname === path;
-
                 return (
                     <div class="navbar-entry">
                         <a href={path} class={isActive ? "active" : ""}>

src/layouts/DocsLayout.astro

@@ -0,0 +1,12 @@
+---
+const { frontmatter } = Astro.props;
+import Layout from "../layouts/Layout.astro";
+const title = "Docs | " + frontmatter.title;
+---
+
+<Layout
+    title={title}
+    description="This is my personal website with my projects, docs and other useful stuff."
+>
+    <div class="content"><slot /></div>
+</Layout>

src/pages/docs.astro

@@ -1,5 +1,10 @@
 ---
+import { date } from "astro/zod";
 import Layout from "../layouts/Layout.astro";
+const allDocs = await Astro.glob("./docs/*.mdx");
+const fileteredDocs = allDocs.sort(
+    (a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date),
+);
 ---
 
 <Layout

src/styles/home.scss

@@ -1,5 +1,7 @@
 main {
     background-image: url("/diagonal_lines_home.png");
+    background-size: cover, contain;
+    margin-inline: -.6vw;
     padding-inline: 10vw;
 
     .home-main-box {