add make os project page

Author: nk4dev

src/layout/main.tsx

@@ -37,46 +37,62 @@ export default function Layout({ children }) {
         <div
           className={css({
             display: "flex",
+            flexDirection: "column",
             justifyContent: "center",
             padding: "10px",
             borderBottom: "1px solid #f0d0ff",
           })}
         >
-          <Link
-            href={"/blog"}
-            className={css({
-              textShadow: "0 10px 30px #aa00ff",
-              borderRadius: "5px",
-              color: "#f0d0ff",
-              margin: "0 5px",
-            })}
-          >
-            Blog
-          </Link>
+          <div className={css({ width: "100%", display: "flex", justifyContent: "center" })} >
+            <Link
+              href={"/blog"}
+              className={css({
+                textShadow: "0 10px 30px #aa00ff",
+                borderRadius: "5px",
+                color: "#f0d0ff",
+                margin: "0 5px",
+              })}
+            >
+              Blog
+            </Link>
 
-          <Link
-            href={"/apps"}
-            className={css({
-              textShadow: "0 10px 30px #aa00ff",
-              borderRadius: "5px",
-              color: "#f0d0ff",
-              margin: "0 5px",
-            })}
-          >
-            Apps
-          </Link>
+            <Link
+              href={"/dev"}
+              className={css({
+                textShadow: "0 10px 30px #aa00ff",
+                borderRadius: "5px",
+                color: "#f0d0ff",
+                margin: "0 5px",
+              })}
+            >
+              Dev Projects
+            </Link>
+          </div>
+          <div className={css({ width: "100%", display: "flex", justifyContent: "center" })} >
+            <Link
+              href={"/apps"}
+              className={css({
+                textShadow: "0 10px 30px #aa00ff",
+                borderRadius: "5px",
+                color: "#f0d0ff",
+                margin: "0 5px",
+              })}
+            >
+              Apps
+            </Link>
 
-          <Link
-            href={"/videos"}
-            className={css({
-              textShadow: "0 10px 30px #aa00ff",
-              borderRadius: "5px",
-              color: "#f0d0ff",
-              margin: "0 5px",
-            })}
-          >
-            Videos
-          </Link>
+            <Link
+              href={"/videos"}
+              className={css({
+                textShadow: "0 10px 30px #aa00ff",
+                borderRadius: "5px",
+                color: "#f0d0ff",
+                margin: "0 5px",
+              })}
+            >
+              Videos
+            </Link>
+          </div>
         </div>
         <main>{children}</main>
         <footer>

src/pages/dev/index.tsx

@@ -0,0 +1,34 @@
+import Layout from '../../layout/main'
+import { css } from '../../../styled-system/css'
+import Link from 'next/link'
+
+export default function DevProject() {
+    return (
+        <Layout>
+            <div className={css({ textAlign: "center" })}>
+                <h1 className={css({
+                    fontSize: "40px",
+                    margin: "4vh 0",
+                })}>
+                    Development <br />Projects
+                </h1>
+                <p>Welcome to the development projects page.</p>
+            </div>
+            <div className={css({
+                padding: "20px",
+                borderTop: "1px solid #f0d0ff",
+                textAlign: "center",
+            })}>
+                <h2 className={css({ fontSize: "30px", margin: "4vh 0" })}>Ongoing Projects</h2>
+                <ul>
+                    <Link target="_blank" href="/dev/vx3-mcp" className={css({ display: "block", margin: "10px 0", fontSize: "23px" })}>
+                        <li>VX3 MCP (Open Gitmcp website)</li>
+                    </Link>
+                    <Link href="/dev/make-a-os" className={css({ display: "block", margin: "10px 0", fontSize: "23px" })}>
+                        <li>Make OS with Rust</li>
+                    </Link>
+                </ul>
+            </div>
+        </Layout>
+    )
+}

src/pages/dev/make-a-os.tsx

@@ -0,0 +1,12 @@
+import Layout from "../../layout/main";
+
+const MakeAOS = () => {
+  return (
+    <Layout>
+      <h1>How to Make an Operating System</h1>
+      <p>Creating an operating system is a complex task that requires a deep understanding of computer science.</p>
+    </Layout>
+  );
+};
+
+export default MakeAOS;