diff --git a/build/data/about.json b/build/data/about.json
new file mode 100644
index 0000000..682aae0
--- /dev/null
+++ b/build/data/about.json
@@ -0,0 +1,9 @@
+{
+  "Introduction": "I'm Pixel, based in Blida, Algeria, studying electrical engineering. I've been programming for about 2 years now. Most of what I know didn't come from courses but from messing around, breaking things, and reading source code until I understood how they worked.",
+  "Skills & Languages": "Most of my work now is in C, especially for low-level and systems work involving <a href=\"https://en.wikipedia.org/wiki/X_Window_System\">X11</a> and <a href=\"https://wayland.freedesktop.org/\">Wayland</a>. I also use Rust and Python regularly. I'm B2 in English and currently learning Japanese through the <a href=\"https://genki3.japantimes.co.jp/en/\">Genki</a> textbooks.",
+  "My Work": "All my projects and configs are public on <a href=\"https://github.com/pixel2175\">GitHub</a> and <a href=\"https://codeberg.org/pi66\">Codeberg</a>. Some of it: <a href=\"https://github.com/Pixel2175/walrs\">walrs</a>, a Rust tool that pulls color schemes from wallpapers to theme your system, similar to <a href=\"https://github.com/dylanaraps/pywal\">Pywal</a>; <a href=\"https://codeberg.org/pi66/sta\">sta</a>, a minimal status monitoring app in C, similar to <a href=\"https://tools.suckless.org/slstatus/\">slstatus</a>; <a href=\"https://codeberg.org/pi66/dwl-patches\">dwl-patches</a>, my collection of patches for <a href=\"https://codeberg.org/dwl/dwl\">dwl</a>; <a href=\"https://codeberg.org/pi66/dots\">dots</a>, my dotfiles; and <a href=\"https://codeberg.org/pi66/merodi\">merodi</a>, a markdown-based static site generator.",
+  "My Setup": "I run <a href=\"https://voidlinux.org\">Void Linux</a>. I use <a href=\"https://codeberg.org/dwl/dwl\">dwl</a> and <a href=\"https://github.com/YaLTeR/niri\">niri</a> as my window managers, <a href=\"https://codeberg.org/adnano/wmenu\">wmenu</a> as a launcher, <a href=\"https://codeberg.org/dnkl/foot/\">foot</a> as my terminal, and <a href=\"https://neovim.io/\">Neovim</a> as my editor. I browse with <a href=\"https://librewolf.net\">LibreWolf</a>.",
+  "Server": "My site is hosted locally, with the domain <a href=\"https://pi66.xyz\">pi66.xyz</a> bought through <a href=\"https://porkbun.com\">Porkbun</a>. I generate it with <a href=\"https://codeberg.org/pi66/merodi\">merodi</a> and serve it with <a href=\"https://nginx.org\">nginx</a>. It's static only, no database, no heavy stuff, since the server isn't that good.",
+  "Philosophy": "<a href=\"https://en.wikipedia.org/wiki/KISS_principle\">KISS</a> and the <a href=\"https://en.wikipedia.org/wiki/Unix_philosophy\">Unix philosophy</a>: small tools that do one thing well and don't get in your way. I'd rather have something simple and understandable than something feature-heavy and bloated.",
+  "Learning": "I learn by building real things and reading other people's source code rather than studying theory first. If I want to understand how something works, I'd rather break it open and rebuild it than read about it."
+}
diff --git a/build/data/my_tools.json b/build/data/my_tools.json
new file mode 100644
index 0000000..f50abd3
--- /dev/null
+++ b/build/data/my_tools.json
@@ -0,0 +1,7 @@
+{
+  "Pino-rs": "A Rust-based notification app with minimal overhead",
+  "Walrs": "A Colorscheme generator from wallpaper for Linux",
+  "PAnime": "Anime data, episodes, and Arabic-subbed streaming access.",
+  "Sta": "minimal & simple status monitoring app.",
+  "Merodi": "A markdown-based static site generator."
+}
diff --git a/build/plugins.py b/build/plugins.py
new file mode 100644
index 0000000..e6f3592
--- /dev/null
+++ b/build/plugins.py
@@ -0,0 +1,5 @@
+from json import loads
+
+about = loads(open("/srv/www/pi66.xyz/build/data/about.json", "r").read())
+
+my_tools = loads(open("./build/data/my_tools.json", "r").read())
diff --git a/build/templates/layout.html b/build/templates/layout.html
new file mode 100644
index 0000000..74369dc
--- /dev/null
+++ b/build/templates/layout.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+       <meta charset="UTF-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+       <meta name="description" content=" {% block meta_description %} Pixel's personal site showcasing Rust-based Linux tools, retro aesthetics, and open-source projects. {%endblock%}">
+       <meta name="author" content="Pi66">
+       <meta name="theme-color" content="#000000">
+       <title>Pixel - {% block title %}Home{% endblock %}</title>
+       <link rel="icon" href={% block rel_icon %}"/static/favicon.ico"{% endblock %}>
+       <link rel="stylesheet" href="/static/css/style.css"/>
+       <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser"></script>
+
+   </head>
+   <body class="font-[Pixelify] w-screen h-dvh max-w-[1200px] mx-auto overflow-hidden bg-black p-5 pb-0 flex flex-col gap-3">
+       <header class="py-2.5 justify-between h-12 px-3 border-[#333333] border-1 flex items-center">
+           <div class="flex items-center">
+               <a href="/">
+                   <img
+                       src="/static/icons/lain.gif" 
+                       class="w-10 h-auto rounded-md object-contain saturate-150"
+                   />
+               </a>
+               <h1 class="pi66-title ml-4 text-green-700 font-bold !text-2xl">Pi66</h1>
+           </div>
+           <nav class="pr-4 flex items-center text-green-700 transition-colors duration-200 text-2xl font-bold max-md:hidden gap-4">
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/" class="nav-link">home</a>
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/tools" class="nav-link">tools</a>
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/about" class="nav-link">more</a>
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/gaza" class="nav-link">gaza</a>
+           </nav>
+       </header>
+
+       <div class="flex-1 flex flex-col gap-2 overflow-hidden">
+
+           <main class="flex-initial w-full box-border px-3 overflow-x-hidden py-2 border border-[#333] overflow-y-auto">
+               {% block content %}{% endblock %}
+           </main>
+
+           <footer class="mt-auto mb-2 h-10  flex flex-col justify-center items-center text-blockquote text-sm border-[#333]">
+               {% block footer %}
+                   <div>
+                       <p class="text-gray-300">// Created by <span class="font-bold text-green-500">Pi66</span></p>
+                       <p class="text-gray-300">// Copyright ©Pi66 2026</p>
+                   </div>
+               {% endblock %}
+           </footer>
+
+           <nav class="py-2 mb-2 flex justify-around border-1 border-[#333] items-center text-green-600 transition-colors duration-200 text-xl font-bold min-md:hidden gap-4">
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/" class="nav-link">home</a>
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/tools" class="nav-link">tools</a>
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/about" class="nav-link">more</a>
+               <a class="hover:text-green-400 transition-colors duration-200 " href="/gaza" class="nav-link">gaza</a>
+           </nav>
+       </div>
+   </body>
+   <script>
+        function typePerLetter(selector, speed = 100) {
+            const el = document.querySelector(selector);
+            if (!el) return;
+
+            const text = el.textContent;
+            el.textContent = "";
+            let i = 0;
+
+            const interval = setInterval(() => {
+                if (i >= text.length) {
+                    clearInterval(interval);
+                    return;
+                }
+
+                const char = text[i];
+                if (char === "\n") {
+                    el.appendChild(document.createElement("br"));
+                } else {
+                    el.append(char);
+                }
+                i++;
+            }, speed);
+        }
+
+        typePerLetter(".pi66-title", 120);
+        document.body.style.zoom = "100%";
+    </script>
+</html>
+
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..eca366b
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,22 @@
+[project]
+name        = "pi66.xyz"
+version     = "0.1.0"
+description = "my main website"
+
+[tree]
+markdown  = "md"
+
+static    = "static"
+dest      = "/srv/www/public/pi66.xyz"
+
+templates = "build/templates"
+plugins   = "build/plugins.py"
+
+
+[webview]
+host  = "localhost"
+html_path   = "/"
+static_path = "/static"
+
+[extras]
+highlight = "monokai"
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..d328586
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,350 @@
+@font-face {
+   font-family: 'Pixelify';
+   src: url('/static/fonts/PixelifySans-Regular.ttf') format('truetype');
+   font-weight: normal;
+}
+@font-face {
+   font-family: 'Pixelify';
+   src: url('/static/fonts/PixelifySans-Bold.ttf') format('truetype');
+   font-weight: bold;
+}
+
+:root {
+   --color-heading-h1: rgb(21, 128, 61);
+   --color-heading-h2: rgb(22, 163, 74);
+   --color-heading-h3: rgb(34, 197, 94);
+   --color-heading-h4: rgb(74, 222, 128);
+   --color-heading-h5: rgb(134, 239, 172);
+   --color-code-bg: #000;
+   --color-code-border: #444444;
+   --color-blockquote-border: rgb(21, 128, 61);
+
+   
+   --color-text: #ccc;
+   --color-text-muted: #ccc;
+   --color-link: #22c55e;
+   --color-link-hover: #86efac;
+   --color-blockquote: #6b7280;
+   --color-strong: #eed;
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+   color: var(--color-text);
+}
+
+
+.nav-link { position: relative; }
+.nav-link:hover::before {
+   content: ">";
+   position: absolute;
+   left: -12px;
+}
+
+
+.terminal-glow {
+   box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
+}
+
+
+.table-wrapper {
+   width: 100% !important;
+   display: flex !important;
+   justify-content: center !important;
+   align-items: center;
+   margin: 0 auto !important;
+}
+
+.table-wrapper table {
+   width: fit-content !important;
+   min-width: 300px !important;
+   max-width: 900px !important;
+   border-collapse: collapse !important;
+   border: none !important;
+   background: transparent !important;
+   font-size: 120% !important;
+}
+
+.table-wrapper tr,
+.table-wrapper tbody tr,
+.table-wrapper thead tr,
+.table-wrapper th,
+.table-wrapper td {
+   background: transparent !important;
+   border: none !important;
+}
+
+.table-wrapper th,
+.table-wrapper td {
+   padding: 0.4rem clamp(1rem, 15vw, 9rem) !important;
+   font-size: 1.3rem !important;
+   text-align: left !important;
+}
+
+.table-wrapper th {
+   font-size: 1.4rem !important;
+   font-weight: bold !important;
+}
+
+.table-wrapper td::before {
+   content: "▸ ";
+}
+
+
+main {
+   line-height: 1.5;
+}
+
+
+h1 {
+   margin-top: 0.5rem;
+   margin-bottom: 0.5rem;
+   font-size: 1.9rem;
+   color: var(--color-heading-h3);
+   font-weight: 900;
+}
+
+h2 {
+   margin-top: 1.5rem;
+   margin-bottom: 0.5rem;
+   font-size: 1.25rem;
+   line-height: 1.4rem;
+   color: var(--color-heading-h2);
+   font-weight: 700;
+}
+
+h3 {
+   margin-top: 1.1rem;
+   margin-bottom: 0.5rem;
+   font-size: 1.125rem;
+   color: var(--color-heading-h3);
+   font-weight: 700;
+}
+
+h4 {
+   margin-top: 1.0rem;
+   margin-bottom: 0.5rem;
+   font-size: 1rem;
+   color: var(--color-heading-h4);
+   font-weight: 700;
+}
+
+h5 {
+   margin-top: 1.9rem;
+   margin-bottom: 0.5rem;
+   font-size: 0.875rem;
+   color: var(--color-heading-h5);
+   font-weight: 600;
+   line-height: 1.4;
+   white-space: pre-line;
+   word-wrap: break-word;
+}
+
+
+p {
+   margin-left: 0.5rem;
+   color: var(--color-text);
+   line-height: 1.5;
+   font-size: 1.1rem;
+}
+
+
+a {
+   color: var(--color-heading-h1);
+   text-decoration: inherit;
+   transition: color 0.2s ease;
+}
+
+a:hover {
+   color: var(--color-link-hover);
+   text-decoration: underline;
+}
+
+
+ul {
+   list-style: none;
+   padding-left: 0;
+   margin-bottom: 1rem;
+}
+
+ul li {
+   color: var(--color-text);
+   margin-bottom: 0.5rem;
+   padding-left: 1rem;
+   position: relative;
+   line-height: 1.4;
+}
+
+ul li::before {
+   content: "▸";
+   position: absolute;
+   left: 0;
+   color: var(--color-heading-h3);
+   font-weight: bold;
+}
+
+
+blockquote {
+   border-left: 3px solid var(--color-blockquote-border);
+   color: var(--color-blockquote);
+   padding-left: 0.8rem;
+   margin: 1rem 0;
+   font-style: italic;
+}
+
+blockquote p {
+   color: inherit;
+}
+
+
+code {
+   background: var(--color-code-bg);
+   border: 1px solid var(--color-code-border);
+   padding: 0.15rem 0.35rem;
+   border-radius: 0px;
+   font-family: 'Courier New', monospace;
+   font-size: 0.8rem;
+   color: var(--color-text);
+}
+
+pre {
+   background: var(--color-code-bg);
+   border: 1px solid var(--color-code-border);
+   border-radius: 0px;
+   padding: 0.3rem;
+   overflow-x: auto;
+   margin:1rem !important;
+}
+
+pre code {
+   background: none;
+   border: none;
+   padding: 0;
+}
+
+
+div:has(> p:first-child + ul + p + ul) {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 1rem;
+   align-items: start;
+}
+
+
+hr {
+   border: none;
+   border-top: 1px solid var(--color-code-border);
+   margin: 1.5rem 0;
+}
+
+
+strong, b {
+   color: var(--color-strong);
+   text-decoration: underline;
+   text-decoration-color: var(--color-heading-h3);
+   font-weight: 900;
+}
+
+em, i {
+   font-style: italic;
+   color: var(--color-text-muted);
+}
+
+
+.citation {
+   color: var(--color-link);
+}
+
+.highlight {
+   margin: 0;
+   padding: 0;
+   background-color: transparent !important;
+}
+
+
+table {
+   width: 100%;
+   border-collapse: collapse;
+   margin: 1rem 0;
+   border: 1px solid var(--color-code-border);
+   color: var(--color-text);
+}
+
+th, td {
+   padding: 0.5rem 0.75rem;
+   text-align: left;
+   font-size: 90%;
+   color: var(--color-text);
+}
+
+th {
+   background-color: var(--color-code-bg);
+   color: var(--color-heading-h3);
+   font-weight: 900;
+}
+
+tr:nth-child(even) {
+   background-color: rgba(34, 197, 94, 0.05);
+}
+
+tr:hover {
+   background-color: rgba(34, 197, 94, 0.1);
+}
+
+@media (max-width: 768px) {
+   .title { font-size: 1rem; }
+   h1 { font-size: 1.2rem; }
+   h2 { font-size: 1.0rem; }
+   h3 { font-size: 0.9rem; }
+   h4 { font-size: 0.8rem; }
+   h5 { font-size: 0.7rem; }
+
+   p {
+       line-height: 1.0;
+       font-size: 0.8rem;
+   }
+
+   ul li {
+       line-height: 1.2;
+       font-size: 0.85rem;
+       padding-left: 0.8rem;
+   }
+
+   code {
+       font-size: 0.75rem;
+       padding: 0.1rem 0.25rem;
+   }
+
+   pre {
+       padding: 0.8rem;
+       font-size: 0.8rem;
+   }
+
+   .skills-container {
+       gap: 3.4rem;
+       font-size: 80%;
+   }
+   .skills-container h4 { font-size: 0.8rem; }
+
+   .table-wrapper th,
+   .table-wrapper td {
+       padding: 0.1rem clamp(1rem, 8vw, 7rem) !important;
+       font-size: 0.9rem !important;
+       text-align: left !important;
+   }
+
+   .table-wrapper table {
+   margin: 1rem 0;
+
+   }
+
+   .table-wrapper th {
+       font-size: 1.0rem !important;
+       font-weight: bold !important;
+   }
+
+   .table-wrapper td::before {
+       content: "▸ ";
+   }
+}
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..83f295e
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/fonts/PixelifySans-Bold.ttf b/static/fonts/PixelifySans-Bold.ttf
new file mode 100644
index 0000000..200d426
Binary files /dev/null and b/static/fonts/PixelifySans-Bold.ttf differ
diff --git a/static/fonts/PixelifySans-Regular.ttf b/static/fonts/PixelifySans-Regular.ttf
new file mode 100644
index 0000000..783cefa
Binary files /dev/null and b/static/fonts/PixelifySans-Regular.ttf differ
diff --git a/static/icons/lain.gif b/static/icons/lain.gif
new file mode 100644
index 0000000..d4574b6
Binary files /dev/null and b/static/icons/lain.gif differ