init

2026-04-02 11:42:10 +02:00 · 2026-01-01 19:06:29 +01:00
commit 8a4ca97c40
48 changed files with 3519 additions and 0 deletions
--- a/src/components/BackToTop.astro
+++ b/src/components/BackToTop.astro
@@ -0,0 +1,36 @@
+---
+import { ArrowUp } from "lucide-astro";
+---
+
+<button
+  id="back-to-top"
+  class="btn btn-circle btn-primary fixed bottom-6 right-6 z-50 transition-opacity duration-300 opacity-0 invisible"
+  aria-label="Back to top"
+>
+  <ArrowUp />
+</button>
+
+<script>
+  const backToTopBtn = document.getElementById("back-to-top");
+
+  if (backToTopBtn) {
+    // Afficher/Masquer le bouton selon le scroll
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 300) {
+        backToTopBtn.classList.remove("opacity-0", "invisible");
+        backToTopBtn.classList.add("opacity-100", "visible");
+      } else {
+        backToTopBtn.classList.add("opacity-0", "invisible");
+        backToTopBtn.classList.remove("opacity-100", "visible");
+      }
+    });
+
+    // Action de retour en haut
+    backToTopBtn.addEventListener("click", () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    });
+  }
+</script>
--- a/src/components/Blog.astro
+++ b/src/components/Blog.astro
@@ -0,0 +1,38 @@
+---
+import { getCollection } from "astro:content";
+import BlogCard from "./BlogCard.astro";
+import { ArrowRight } from "@lucide/astro";
+
+const blogEntries = await getCollection("blog");
+
+// Sort by publish date, most recent first
+const sortedPosts = blogEntries.sort(
+  (a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime(),
+);
+
+// Get only the latest 3 posts
+const latestPosts = sortedPosts.slice(0, 3);
+---
+
+<section id="blog" class="py-20 px-4">
+  <div class="max-w-6xl mx-auto">
+    <div class="text-center mb-12">
+      <h2 class="text-4xl font-bold mb-4">Latest Blog Posts</h2>
+      <p class="text-lg text-base-content/70">
+        Thoughts, insights, and tutorials on cybersecurity, OSINT, and
+        technology.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {latestPosts.map((post) => <BlogCard post={post} />)}
+    </div>
+
+    <div class="text-center mt-12">
+      <a href="/blog" class="btn btn-ghost gap-2">
+        View All Posts
+        <ArrowRight class="size-4" />
+      </a>
+    </div>
+  </div>
+</section>
--- a/src/components/BlogCard.astro
+++ b/src/components/BlogCard.astro
@@ -0,0 +1,57 @@
+---
+import type { CollectionEntry } from "astro:content";
+import TagBadge from "./TagBadge.astro";
+import { Image } from "astro:assets";
+
+interface Props {
+  post: CollectionEntry<"blog">;
+}
+
+const { post } = Astro.props;
+
+function formatDate(date: Date) {
+  const options: Intl.DateTimeFormatOptions = {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  };
+  return date.toLocaleDateString("en-US", options);
+}
+---
+
+<article
+  class="card bg-base-100 shadow-xl border border-base-200 rounded-lg hover:shadow-2xl transition-shadow"
+>
+  <figure class="aspect-video">
+    <Image
+      src={post.data.image}
+      alt={post.data.title}
+      class="w-full h-full object-cover"
+      width={600}
+      height={400}
+    />
+  </figure>
+  <div class="card-body">
+    <time class="text-sm text-base-content/60">
+      {formatDate(post.data.publishDate)}
+    </time>
+    <h2 class="card-title hover:text-primary transition-colors">
+      <a href={`/blog/${post.id}`}>{post.data.title}</a>
+    </h2>
+    <p class="text-base-content/80">{post.data.description}</p>
+    {
+      post.data.tags && post.data.tags.length > 0 && (
+        <div class="flex flex-wrap gap-2 mt-2">
+          {post.data.tags.map((tag) => (
+            <TagBadge tag={tag} />
+          ))}
+        </div>
+      )
+    }
+    <div class="card-actions justify-end mt-4">
+      <a href={`/blog/${post.id}`} class="btn btn-primary btn-sm">
+        Read More
+      </a>
+    </div>
+  </div>
+</article>
--- a/src/components/Console.astro
+++ b/src/components/Console.astro
@@ -0,0 +1,15 @@
+---
+
+---
+
+<script>
+  function message() {
+    const url = window.location.href;
+    console.log(
+      "Hey!\nWant to chat? Send me a dm on bsky (hadi1842.bsky.social) or a mail to anotherhadi.clapped234[at]passmail.net and I'll respond whenever I can.\nUse my gpg key (" +
+        url +
+        "anotherhadi.asc) for secure communication.",
+    );
+  }
+  message();
+</script>
--- a/src/components/Contact.astro
+++ b/src/components/Contact.astro
@@ -0,0 +1,23 @@
+---
+import { Send } from "@lucide/astro";
+---
+
+<section id="contact" class="py-20 px-4">
+  <div class="max-w-6xl mx-auto">
+    <div class="text-center mb-12">
+      <h2 class="text-4xl font-bold mb-4 flex gap-5 justify-center m-auto">
+        Want to chat?
+      </h2>
+      <p class="text-lg text-base-content/70 max-w-2xl m-auto">
+        Send me a dm on <a
+          class="text-primary"
+          href="https://bsky.app/profile/hadi1842.bsky.social">bsky</a
+        > or a mail to <span class="text-primary"
+          >anotherhadi.clapped234[at]passmail.net</span
+        > and I'll respond whenever I can.
+        <br />Use my <a class="text-primary" href="/anotherhadi.asc">gpg key</a>
+        for secure communication.
+      </p>
+    </div>
+  </div>
+</section>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -0,0 +1,237 @@
+---
+import { ArrowRight, Coffee, FolderCode, Key, Newspaper } from "@lucide/astro";
+import { Image } from "astro:assets";
+
+interface Props {
+  name: string;
+  title: string;
+  description: string;
+  avatar: any;
+  location?: string;
+  socialLinks?: {
+    github?: string;
+    linkedin?: string;
+    twitter?: string;
+    bluesky?: string;
+    instagram?: string;
+    youTube?: string;
+    medium?: string;
+    kofi?: string;
+    codetips?: string;
+  };
+  gpgKey?: string;
+}
+
+const { name, title, description, avatar, location, socialLinks, gpgKey } =
+  Astro.props;
+---
+
+<section class="hero min-h-[65vh]">
+  <div class="hero-content flex-col lg:flex-row-reverse max-w-7xl gap-8">
+    <div class="avatar">
+      <div
+        class="w-48 ring-primary ring-offset-base-100 rounded-full ring-2 ring-offset-2"
+      >
+        <Image src={avatar} alt={name} />
+      </div>
+    </div>
+    <div class="max-w-2xl">
+      <h1 class="text-5xl font-bold mb-4">
+        Hi, I'm {name}
+      </h1>
+      <p class="text-xl text-base-content/80 mb-2">{title}</p>
+      {location && <p class="text-base-content/60 mb-4">{location}</p>}
+      <p class="text-lg leading-relaxed mb-6">
+        {description}
+      </p>
+      {
+        socialLinks && (
+          <div class="flex gap-4">
+            {socialLinks.github && (
+              <div class="tooltip" data-tip="Github">
+                <a
+                  href={socialLinks.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="btn btn-circle btn-ghost"
+                  aria-label="GitHub"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                  </svg>
+                </a>
+              </div>
+            )}
+            {socialLinks.linkedin && (
+              <div class="tooltip" data-tip="Linkedin">
+                <a
+                  href={socialLinks.linkedin}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="btn btn-circle btn-ghost"
+                  aria-label="LinkedIn"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+                  </svg>
+                </a>
+              </div>
+            )}
+            {socialLinks.twitter && (
+              <div class="tooltip" data-tip="Twitter/X">
+                <a
+                  href={socialLinks.twitter}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="btn btn-circle btn-ghost"
+                  aria-label="X (Twitter)"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 32 32"
+                    fill="currentColor"
+                  >
+                    <path d="M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z" />
+                  </svg>
+                </a>
+              </div>
+            )}
+            {socialLinks.bluesky && (
+              <div class="tooltip" data-tip="Bluesky">
+                <a
+                  href={socialLinks.bluesky}
+                  class="btn btn-circle btn-ghost"
+                  aria-label="Bluesky"
+                  target="_blank"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 32 32"
+                    fill="currentColor"
+                  >
+                    <path d="M23.931,5.298c-3.21,2.418-6.663,7.32-7.931,9.951-1.267-2.631-4.721-7.533-7.931-9.951-2.316-1.744-6.069-3.094-6.069,1.201,0,.857,.49,7.206,.778,8.237,.999,3.583,4.641,4.497,7.881,3.944-5.663,.967-7.103,4.169-3.992,7.372,5.908,6.083,8.492-1.526,9.154-3.476,.123-.36,.179-.527,.179-.379,0-.148,.057,.019,.179,.379,.662,1.949,3.245,9.558,9.154,3.476,3.111-3.203,1.671-6.405-3.992-7.372,3.24,.553,6.882-.361,7.881-3.944,.288-1.031,.778-7.38,.778-8.237,0-4.295-3.753-2.945-6.069-1.201Z" />
+                  </svg>
+                </a>
+              </div>
+            )}
+            {socialLinks.instagram && (
+              <div class="tooltip" data-tip="Instagram">
+                <a
+                  href={`${socialLinks.instagram}`}
+                  class="btn btn-circle btn-ghost"
+                  aria-label="Instagram"
+                  target="_blank"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                  >
+                    <path d="M10.202,2.098c-1.49,.07-2.507,.308-3.396,.657-.92,.359-1.7,.84-2.477,1.619-.776,.779-1.254,1.56-1.61,2.481-.345,.891-.578,1.909-.644,3.4-.066,1.49-.08,1.97-.073,5.771s.024,4.278,.096,5.772c.071,1.489,.308,2.506,.657,3.396,.359,.92,.84,1.7,1.619,2.477,.779,.776,1.559,1.253,2.483,1.61,.89,.344,1.909,.579,3.399,.644,1.49,.065,1.97,.08,5.771,.073,3.801-.007,4.279-.024,5.773-.095s2.505-.309,3.395-.657c.92-.36,1.701-.84,2.477-1.62s1.254-1.561,1.609-2.483c.345-.89,.579-1.909,.644-3.398,.065-1.494,.081-1.971,.073-5.773s-.024-4.278-.095-5.771-.308-2.507-.657-3.397c-.36-.92-.84-1.7-1.619-2.477s-1.561-1.254-2.483-1.609c-.891-.345-1.909-.58-3.399-.644s-1.97-.081-5.772-.074-4.278,.024-5.771,.096m.164,25.309c-1.365-.059-2.106-.286-2.6-.476-.654-.252-1.12-.557-1.612-1.044s-.795-.955-1.05-1.608c-.192-.494-.423-1.234-.487-2.599-.069-1.475-.084-1.918-.092-5.656s.006-4.18,.071-5.656c.058-1.364,.286-2.106,.476-2.6,.252-.655,.556-1.12,1.044-1.612s.955-.795,1.608-1.05c.493-.193,1.234-.422,2.598-.487,1.476-.07,1.919-.084,5.656-.092,3.737-.008,4.181,.006,5.658,.071,1.364,.059,2.106,.285,2.599,.476,.654,.252,1.12,.555,1.612,1.044s.795,.954,1.051,1.609c.193,.492,.422,1.232,.486,2.597,.07,1.476,.086,1.919,.093,5.656,.007,3.737-.006,4.181-.071,5.656-.06,1.365-.286,2.106-.476,2.601-.252,.654-.556,1.12-1.045,1.612s-.955,.795-1.608,1.05c-.493,.192-1.234,.422-2.597,.487-1.476,.069-1.919,.084-5.657,.092s-4.18-.007-5.656-.071M21.779,8.517c.002,.928,.755,1.679,1.683,1.677s1.679-.755,1.677-1.683c-.002-.928-.755-1.679-1.683-1.677,0,0,0,0,0,0-.928,.002-1.678,.755-1.677,1.683m-12.967,7.496c.008,3.97,3.232,7.182,7.202,7.174s7.183-3.232,7.176-7.202c-.008-3.97-3.233-7.183-7.203-7.175s-7.182,3.233-7.174,7.203m2.522-.005c-.005-2.577,2.08-4.671,4.658-4.676,2.577-.005,4.671,2.08,4.676,4.658,.005,2.577-2.08,4.671-4.658,4.676-2.577,.005-4.671-2.079-4.676-4.656h0" />
+                  </svg>
+                </a>
+              </div>
+            )}
+            {socialLinks.youTube && (
+              <div class="tooltip" data-tip="Youtube">
+                <a
+                  href={socialLinks.youTube}
+                  class="btn btn-circle btn-ghost"
+                  aria-label="YouTube"
+                  target="_blank"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 32 32"
+                    fill="currentColor"
+                  >
+                    <path d="M31.331,8.248c-.368-1.386-1.452-2.477-2.829-2.848-2.496-.673-12.502-.673-12.502-.673,0,0-10.007,0-12.502,.673-1.377,.37-2.461,1.462-2.829,2.848-.669,2.512-.669,7.752-.669,7.752,0,0,0,5.241,.669,7.752,.368,1.386,1.452,2.477,2.829,2.847,2.496,.673,12.502,.673,12.502,.673,0,0,10.007,0,12.502-.673,1.377-.37,2.461-1.462,2.829-2.847,.669-2.512,.669-7.752,.669-7.752,0,0,0-5.24-.669-7.752ZM12.727,20.758V11.242l8.364,4.758-8.364,4.758Z" />
+                  </svg>
+                </a>
+              </div>
+            )}
+            {socialLinks.medium && (
+              <div class="tooltip" data-tip="Medium">
+                <a
+                  href={socialLinks.medium}
+                  class="btn btn-circle btn-ghost"
+                  aria-label="Medium"
+                  target="_blank"
+                >
+                  <Newspaper />
+                </a>
+              </div>
+            )}
+            {socialLinks.kofi && (
+              <div class="tooltip" data-tip="Ko-fi">
+                <a
+                  href={socialLinks.kofi}
+                  class="btn btn-circle btn-ghost"
+                  aria-label="Ko-fi"
+                  target="_blank"
+                >
+                  <Coffee />
+                </a>
+              </div>
+            )}
+            {socialLinks.codetips && (
+              <div class="tooltip" data-tip="Codetips">
+                <a
+                  href={socialLinks.codetips}
+                  class="btn btn-circle btn-ghost"
+                  aria-label="CodeTips"
+                  target="_blank"
+                >
+                  <FolderCode class="size-6" />
+                </a>
+              </div>
+            )}
+            {gpgKey && (
+              <div class="tooltip" data-tip="Gpg key">
+                <a
+                  href={gpgKey}
+                  class="btn btn-circle btn-ghost"
+                  aria-label="Gpg Key"
+                  target="_blank"
+                >
+                  <Key class="size-6" />
+                </a>
+              </div>
+            )}
+          </div>
+        )
+      }
+
+      <div class="mt-12 flex gap-5">
+        <a href="/blog" class="btn btn-ghost gap-2">
+          Blog
+          <ArrowRight class="size-4" />
+        </a>
+        <a href="/projects" class="btn btn-ghost gap-2">
+          Projects
+          <ArrowRight class="size-4" />
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
--- a/src/components/Oneko.astro
+++ b/src/components/Oneko.astro
@@ -0,0 +1,22 @@
+---
+
+---
+
+<script is:inline>
+  function initOneko() {
+    if (!document.getElementById("oneko")) {
+      const script = document.createElement("script");
+      script.src = "/scripts/oneko.js";
+      script.id = "oneko-script";
+      document.body.appendChild(script);
+    }
+  }
+  document.addEventListener("astro:page-load", initOneko);
+</script>
+
+<style is:global>
+  #oneko {
+    z-index: 999;
+    pointer-events: none;
+  }
+</style>
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -0,0 +1,95 @@
+---
+import { Image } from "astro:assets";
+import TagBadge from "./TagBadge.astro";
+import { ExternalLink, Eye } from "@lucide/astro";
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  project: CollectionEntry<"projects">;
+}
+
+const { project } = Astro.props;
+---
+
+<article
+  class="card bg-base-100 shadow-xl border border-base-200 rounded-lg hover:shadow-2xl transition-shadow"
+>
+  <figure class="aspect-video">
+    <Image
+      src={project.data.image}
+      alt={project.data.title}
+      class="w-full h-full object-cover"
+      width={600}
+      height={400}
+    />
+  </figure>
+  <div class="card-body">
+    <h2 class="card-title hover:text-primary transition-colors">
+      <a href={`/projects/${project.id}`}>{project.data.title}</a>
+    </h2>
+    <p class="text-base-content/80">{project.data.description}</p>
+    {
+      project.data.tags && project.data.tags.length > 0 && (
+        <div class="flex flex-wrap gap-2 mt-2">
+          {project.data.tags.map((tag) => (
+            <TagBadge tag={tag} />
+          ))}
+        </div>
+      )
+    }
+    <div class="card-actions justify-end mt-4 gap-2">
+      {
+        project.data.demoLink && (
+          <a
+            href={project.data.demoLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-sm btn-ghost gap-1"
+          >
+            <ExternalLink class="size-4" />
+            Demo
+          </a>
+        )
+      }
+      {
+        project.data.url && (
+          <a
+            href={project.data.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-sm btn-ghost gap-1"
+          >
+            <ExternalLink class="size-4" />
+            Website
+          </a>
+        )
+      }
+      {
+        project.data.sourceLink && (
+          <a
+            href={project.data.sourceLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-sm btn-ghost gap-1"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+            >
+              <path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z" />
+            </svg>
+            Source
+          </a>
+        )
+      }
+      <div class="tooltip" data-tip="View project details">
+        <a href={`/projects/${project.id}`} class="btn btn-sm btn-primary">
+          <Eye class="size-4" />
+        </a>
+      </div>
+    </div>
+  </div>
+</article>
--- a/src/components/Projects.astro
+++ b/src/components/Projects.astro
@@ -0,0 +1,35 @@
+---
+import { getCollection } from "astro:content";
+import ProjectCard from "./ProjectCard.astro";
+import { ArrowRight } from "@lucide/astro";
+
+const projectEntries = await getCollection("projects");
+---
+
+<section id="projects" class="py-20 px-4">
+  <div class="max-w-6xl mx-auto">
+    <div class="text-center mb-12">
+      <h2 class="text-4xl font-bold mb-4">Check out my latest work</h2>
+      <p class="text-lg text-base-content/70">
+        I enjoy the challenge of reimagining existing programs & scripts in my
+        own unique way. By creating these projects from scratch, I can ensure
+        complete control over every aspect of their design and functionality.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {projectEntries.map((project) => <ProjectCard project={project} />)}
+    </div>
+
+    <div class="text-center mt-12">
+      <a
+        href="https://github.com/anotherhadi"
+        target="_blank"
+        class="btn btn-ghost gap-2"
+      >
+        View All Projects
+        <ArrowRight class="size-4" />
+      </a>
+    </div>
+  </div>
+</section>
--- a/src/components/TagBadge.astro
+++ b/src/components/TagBadge.astro
@@ -0,0 +1,9 @@
+---
+interface Props {
+  tag: string;
+}
+
+const { tag } = Astro.props;
+---
+
+<span class="badge badge-sm rounded-sm badge-soft badge-accent">{tag}</span>
--- a/src/config.ts
+++ b/src/config.ts
@@ -0,0 +1,48 @@
+/**
+ * Social media links configuration
+ */
+export interface SocialLinks {
+  github?: string;
+  linkedin?: string;
+  twitter?: string;
+  bluesky?: string;
+  instagram?: string;
+  youTube?: string;
+  codetips?: string;
+  kofi?: string;
+  medium?: string;
+}
+
+/**
+ * Main site configuration interface
+ */
+export interface SiteConfig {
+  name: string;
+  title: string;
+  description: string;
+  avatar: string;
+  location: string;
+  socialLinks: SocialLinks;
+  gpgKey?: string;
+}
+
+/**
+ * Site configuration object
+ * Update these values to customize your portfolio
+ */
+export const siteConfig: SiteConfig = {
+  name: "Hadi",
+  title: "Infosec engineer.",
+  description:
+    "Infosec engineer passionate about Linux/NixOS, blockchains, OSINT & FOSS. Hacking with Go, exploring open tech, and contributing whenever I can 🐧",
+  avatar: "/avatar.png",
+  location: "🇫🇷 France",
+  socialLinks: {
+    github: "https://github.com/anotherhadi",
+    twitter: "https://x.com/anotherhadi",
+    bluesky: "https://bsky.app/profile/hadi1842.bsky.social",
+    kofi: "https://ko-fi.com/anotherhadi",
+    medium: "https://medium.com/anotherhadi",
+  },
+  gpgKey: "/anotherhadi.asc",
+};
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -0,0 +1,34 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const projects = defineCollection({
+  loader: glob({ pattern: "**/*.md", base: "./src/content/projects" }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      description: z.string(),
+      image: image(),
+      tags: z.array(z.string()),
+      demoLink: z.string().url().optional(),
+      url: z.string().url().optional(),
+      sourceLink: z.string().url().optional(),
+    }),
+});
+
+const blog = defineCollection({
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/blog" }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      description: z.string(),
+      image: image(),
+      publishDate: z.coerce.date(),
+      updatedDate: z.coerce.date().optional(),
+      tags: z.array(z.string()).optional(),
+    }),
+});
+
+export const collections = {
+  projects,
+  blog,
+};
--- a/src/content/blog/github-users-osint.md
+++ b/src/content/blog/github-users-osint.md
@@ -0,0 +1,114 @@
+---
+title: "Unmasking Github Users: How to Identify the Person Behind Any Github Profile"
+description: "Ever wondered who is behind a specific Github username? This guide covers advanced OSINT techniques to deanonymize users, find hidden email addresses, and link Github accounts to real-world identities."
+image: "../../../public/images/blog/github-osint-users.png"
+tags: ["osint", "github", "cybersecurity", "profile"]
+publishDate: "2026-01-01"
+---
+
+In the world of Open-Source Intelligence (OSINT), we often focus on social media platforms like Twitter or LinkedIn. However, developers frequently leave behind much more detailed personal information on **GitHub**.
+
+Whether you are a recruiter, a security researcher, or a digital investigator, GitHub is a goldmine. Why? Because while a user might choose a cryptic handle like `anotherhadi`, their Git configuration often reveals their real name and email address.
+
+## Level 1: The Low-Hanging Fruit
+
+Before diving into technical exploits, start with the obvious. Many users forget how much they have shared in their profile settings.
+
+- **The Bio & Location**: Even a vague location like "Montpellier, France," combined with a niche tech stack (e.g., "COBOL expert"), significantly narrows down the search.
+- **External Links**: Check the personal website or blog link. Run a WHOIS lookup on that domain to find registration details. Use other OSINT tools and techniques on those websites to pivot further.
+- **The Profile Picture**: Right-click the avatar and use Google Reverse Image Search, Yandex, or other reverse image engines. Developers often use the same professional headshot on GitHub as they do on LinkedIn.
+
+## Level 2: Digging into Commits
+
+This is the most **powerful technique in GitHub OSINT**. When a developer commits code, Git attaches an author name and an email address to that commit. GitHub hides these in the UI, but they remain embedded in the metadata.
+
+### The `.patch` Method
+
+Find a repository where the target has contributed. Open any commit they made, and simply add `.patch` to the end of the URL.
+
+- **URL**: `https://github.com/{username}/{repo}/commit/{commit_hash}.patch`
+- Look at the `From:` line. It should look like this: `From: John Doe <j.doe@company.com>`
+
+For example, check: `https://github.com/anotherhadi/nixy/commit/e6873e8caae491073d8ab7daad9d2e50a04490ce.patch`
+
+### The API Events Method
+
+If you cannot find a recent commit, check their **public activity** stream via the GitHub API.
+
+- **Go to**: `https://api.github.com/users/{target_username}/events/public`
+- Search (Ctrl+F) for the word `email`. You will often find the **email address** associated with their `PushEvent` headers, even if they have "Keep my email addresses private" enabled in their current settings.
+
+### The Email Spoofing Method
+
+While the previous methods help you find an email _from_ a profile, this technique does the opposite: it identifies which GitHub account is linked to a specific email address.
+
+**How it works:**
+GitHub attributes commits based on the email address found in the Git metadata. If you push a commit using a specific email, GitHub will automatically link that commit to the account associated with that address as its **primary email**.
+
+**The Process:**
+
+1. **Initialize a local repo:** `git init investigation`
+2. **Configure the target email:** `git config user.email "target@example.com"` and `git config user.name "A Username"`
+3. **Create a dummy commit:** `echo "test" > probe.txt && git add . && git commit -m "Probe"`
+4. **Push to a repo you own:** Create a new empty repository on your GitHub account and push the code there.
+5. **Observe the result:** Go to the commit history on the GitHub web interface. The avatar and username of the account linked to that email will appear as the author of the commit.
+
+> **Note:** This method only works if the target email is set as the **Primary Email** on the user's account. It is a foolproof way to confirm if an email address you found elsewhere belongs to a specific GitHub user.
+
+## Level 3: Technical Metadata
+
+If the email is masked or missing, we can look at the **cryptographic keys** the user uses to communicate with GitHub.
+
+### SSH Keys
+
+Every user’s public **SSH keys are public**.
+
+- **URL**: `https://github.com/{username}.keys`
+- **The Pivot**: You can take the key string and search for it on platforms like **Censys** or **Shodan**. If that same key is authorized on a specific server IP, you have successfully located the user’s infrastructure.
+
+### GPG Keys
+
+If a user signs their commits, their **GPG key** is available at:
+
+- **URL**: `https://github.com/{username}.gpg`
+- **The Reveal**: Import this key into your local GPG tool (`gpg --import`). It will often reveal the **Verified Identity** and the primary email address linked to the encryption key.
+
+## Level 4: Connecting the Dots
+
+Once you have a **name**, an **email**, or a **unique username**, it’s time to _pivot_.
+
+- **Username Pivoting**: Use tools like [Sherlock](https://github.com/sherlock-project/sherlock) or [Maigret](https://github.com/soxoj/maigret/) to search for the same username across hundreds of other platforms. Developers are creatures of habit; they likely use the same handle on Stack Overflow, Reddit, or even old gaming forums.
+- **Email Pivoting**: Use tools like [holehe](https://github.com/megadose/holehe) to find other accounts registered with the email addresses you just uncovered.
+
+## Automating the Hunt: Github-Recon
+
+If you want to move from manual investigation to automated intelligence, check out [Github-Recon](https://github.com/anotherhadi/github-recon).
+Written in Go, this powerful CLI tool aggregates public OSINT data by automating the techniques mentioned above and more. Whether you start with a username or a single email address, it can retrieve SSH/GPG keys, enumerate social accounts, and find "close friends" based on interactions.
+Its standout features include a **Deep Scan** mode-which clones repositories to perform regex searches and TruffleHog secret detection—and an automated **Email Spoofing** engine that instantly identifies the account linked to any primary email address.
+
+## Conclusion and Protection: How to Stay Anonymous
+
+If you are a developer reading this, you might be feeling exposed.
+Understanding what information about you is publicly visible is the first step to managing your online presence. This guide and tools like [github-recon](https://github.com/anotherhadi/github-recon) can help you identify your own publicly available data on Github. Here’s how you can take steps to protect your privacy and security:
+
+- **Review your public profile**: Regularly check your Github profile and
+  repositories to ensure that you are not unintentionally exposing sensitive
+  information.
+- **Manage email exposure**: Use Github's settings to control which email
+  addresses are visible on your profile and in commit history. You can also use
+  a no-reply email address for commits, and an
+  [alias email](https://proton.me/support/addresses-and-aliases) for your
+  account. Delete/modify any sensitive information in your commit history.
+- **Be Mindful of Repository Content**: Avoid including sensitive information in
+  your repositories, such as API keys, passwords, emails or personal data. Use
+  `.gitignore` to exclude files that contain sensitive information.
+
+You can also use a tool like [TruffleHog](github.com/trufflesecurity/trufflehog)
+to scan your repositories specifically for exposed secrets and tokens.
+
+**Useful links:**
+
+- [Blocking command line pushes that expose your personal email address](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/blocking-command-line-pushes-that-expose-your-personal-email-address)
+- [No-reply email address](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/setting-your-commit-email-address)
+
+In OSINT, the best hidden secrets are the ones we forget we ever shared. Happy hunting!
--- a/src/content/projects/github-recon.md
+++ b/src/content/projects/github-recon.md
@@ -0,0 +1,223 @@
+---
+title: "Github Recon"
+description: "Retrieves and aggregates public OSINT data about a GitHub user using Go and the GitHub API. Finds hidden emails in commit history, previous usernames, friends, other GitHub accounts, and more."
+image: "../../../public/images/projects/github-recon.png"
+tags: ["osint", "github", "cybersecurity"]
+sourceLink: "https://github.com/anotherhadi/github-recon"
+---
+
+<p>
+    <a href="https://github.com/anotherhadi/github-recon/releases"><img src="https://img.shields.io/github/release/anotherhadi/github-recon.svg" alt="Latest Release"></a>
+    <a href="https://pkg.go.dev/github.com/anotherhadi/github-recon?tab=doc"><img src="https://godoc.org/github.com/anotherhadi/github-recon?status.svg" alt="GoDoc"></a>
+    <a href="https://goreportcard.com/report/github.com/anotherhadi/github-recon"><img src="https://goreportcard.com/badge/github.com/anotherhadi/github-recon" alt="GoReportCard"></a>
+</p>
+
+- [🧾 Project Overview](#-project-overview)
+- [🚀 Features](#-features)
+- [⚠️ Disclaimer](#%EF%B8%8F-disclaimer)
+- [📦 Installation](#-installation)
+  - [With Go](#with-go)
+  - [With Nix/NixOS](#with-nixnixos)
+- [🧪 Usage](#-usage)
+  - [Flags](#flags)
+  - [Token](#token)
+  - [How does the email spoofing work?](#how-does-the-email-spoofing-work)
+- [💡 Examples](#-examples)
+- [🕵️‍♂️ Cover your tracks](#%EF%B8%8F%EF%B8%8F-cover-your-tracks)
+- [🤝 Contributing](#-contributing)
+- [🙏 Credits](#-credits)
+
+## 🧾 Project Overview
+
+Retrieves and aggregates public OSINT data about a GitHub user using Go and the
+GitHub API. Finds hidden emails in commit history, previous usernames, friends,
+other GitHub accounts, and more.
+
+<details>
+<summary>Screenshot</summary>
+<img src="https://raw.githubusercontent.com/anotherhadi/github-recon/main/.github/assets/example.png" alt="example screenshot">
+</details>
+
+## 🚀 Features
+
+- Export results to JSON
+
+**From usernames:**
+
+- Retrieve basic user profile information (username, ID, avatar, bio, creation
+  date)
+- Display avatars directly in the terminal
+- List organizations and roles
+- Fetch SSH and GPG keys
+- Enumerate social accounts
+- Extract unique commit authors (name + email)
+- Find close friends
+- Deep scan option (clone repositories, run regex searches, analyze licenses,
+  etc.)
+- Use Levenshtein distance for matching usernames and emails
+- TruffleHog integration to find secrets
+
+**From emails:**
+
+- Search for a specific email across all GitHub commits
+- Spoof an email to discover the associated user account
+
+## ⚠️ Disclaimer
+
+This tool is intended for educational purposes only. Use responsibly and ensure
+you have permission to access the data you are querying.
+
+## 📦 Installation
+
+### With Go
+
+```bash
+go install github.com/anotherhadi/github-recon@latest
+```
+
+### With Nix/NixOS
+
+<details>
+<summary>Click to expand</summary>
+
+**From anywhere (using the repo URL):**
+
+```bash
+nix run github:anotherhadi/github-recon -- [--flags value] target_username_or_email
+```
+
+**Permanent Installation:**
+
+```bash
+# add the flake to your flake.nix
+{
+  inputs = {
+    github-recon.url = "github:anotherhadi/github-recon";
+  };
+}
+
+# then add it to your packages
+environment.systemPackages = with pkgs; [ # or home.packages
+  inputs.github-recon.defaultPackage.${pkgs.system}
+];
+```
+
+</details>
+
+## 🧪 Usage
+
+```bash
+github-recon [--flags value] target_username_or_email
+```
+
+### Flags
+
+```txt
+-t, --token string           Github personal access token (e.g. ghp_aaa...). Can also be set via GITHUB_RECON_TOKEN environment variable. You also need to set the token in $HOME/.config/github-recon/env file if you want to use this tool without passing the token every time. (default "null")
+-d, --deepscan               Enable deep scan (clone repos, regex search, analyse licenses, etc.)
+    --max-size int           Limit the size of repositories to scan (in MB) (only for deep scan) (default 150)
+-e, --exclude-repo strings   Exclude repos from deep scan (comma-separated list, only for deep scan)
+-r, --refresh                Refresh the cache (only for deep scan)
+-s, --show-source            Show where the information (authors, emails, etc) were found (only for deep scan)
+-m, --max-distance int       Maximum Levenshtein distance for matching usernames & emails (only for deep scan) (default 20)
+    --trufflehog             Run trufflehog on cloned repositories (only for deep scan) (default true)
+-S, --silent                 Suppress all non-essential output
+    --spoof-email            Spoof email (only for email mode) (default true)
+-a, --print-avatar           Show the avatar in the output
+-j, --json string            Write results to specified JSON file
+```
+
+### Token
+
+For the best experience, provide a **GitHub Personal Access Token**. Without a
+token, you will quickly hit the **rate limit** and have to wait.
+
+- For **basic usage**, you can create a token **without any permissions**.
+- For the **email spoofing feature**, you need to add the **`repo`** and
+  **`delete_repo`** permissions.
+
+You can set the token in multiple ways:
+
+- **Command-line flag**:
+
+  ```bash
+  github-recon -t "ghp_xxx..."
+  ```
+
+- **Environment variable**:
+
+  ```bash
+  export GITHUB_RECON_TOKEN=ghp_xxx...
+  ```
+
+- **Config file**: Create the file `~/.config/github-recon/env` and add:
+
+  ```env
+  GITHUB_RECON_TOKEN=ghp_xxx...
+  ```
+
+> For safety, it is recommended to create the Personal Access Token on a
+> **separate GitHub account** rather than your main account. This way, if
+> anything goes wrong, your primary account remains safe.
+
+### How does the email spoofing work?
+
+Here’s the process:
+
+1. Create a new repository.
+2. Make a commit using the **target's email** as the author.
+3. Push the commit to GitHub.
+4. Observe which GitHub account the commit is linked to. This method **always
+   works**, but it only reveals the account if the email is set as the user’s
+   **primary email**.
+
+All of these steps are handled **automatically by the tool**, so you just need
+to provide the target email.
+
+## 💡 Examples
+
+```bash
+github-recon anotherhadi --token ghp_ABC123...
+github-recon myemail@gmail.com # Find github accounts by email
+github-recon anotherhadi --json output.json --deepscan # Clone the repo and search for leaked email
+```
+
+## 🕵️‍♂️ Cover your tracks
+
+Understanding what information about you is publicly visible is the first step
+to managing your online presence. github-recon can help you identify your own
+publicly available data on GitHub. Here’s how you can take steps to protect your
+privacy and security:
+
+- **Review your public profile**: Regularly check your GitHub profile and
+  repositories to ensure that you are not unintentionally exposing sensitive
+  information.
+- **Manage email exposure**: Use GitHub's settings to control which email
+  addresses are visible on your profile and in commit history. You can also use
+  a no-reply email address for commits, and an
+  [alias email](https://proton.me/support/addresses-and-aliases) for your
+  account. Delete/modify any sensitive information in your commit history.
+- **Be Mindful of Repository Content**: Avoid including sensitive information in
+  your repositories, such as API keys, passwords, emails or personal data. Use
+  `.gitignore` to exclude files that contain sensitive information.
+
+You can also use a tool like [TruffleHog](github.com/trufflesecurity/trufflehog)
+to scan your repositories specifically for exposed secrets and tokens.
+
+**Useful links:**
+
+- [Blocking command line pushes that expose your personal email address](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/blocking-command-line-pushes-that-expose-your-personal-email-address)
+- [No-reply email address](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/setting-your-commit-email-address)
+
+## 🤝 Contributing
+
+Feel free to contribute! See [CONTRIBUTING.md](https://github.com/anotherhadi/github-recon/blob/main/CONTRIBUTING.md) for details.
+
+## 🙏 Credits
+
+Some features and ideas in this project were inspired by the following tools:
+
+- [gitrecon](https://github.com/GONZOsint/gitrecon) by GONZOsint
+- [gitfive](https://github.com/mxrch/gitfive) by mxrch
+
+Big thanks to their authors for sharing their work with the community.
--- a/src/content/projects/n4c.md
+++ b/src/content/projects/n4c.md
@@ -0,0 +1,63 @@
+---
+title: "Nix 4 cyber"
+description: "A modular, open‑source toolkit & knowledge-base for cyber‑security professionals built with nix & markdown, for CTF, OSINT or Pentest."
+image: "../../../public/images/projects/n4c.png"
+tags: ["nix", "ctf", "cybersecurity", "cheatsheets"]
+url: "https://n4c.hadi.diy"
+sourceLink: "https://github.com/nix4cyber/n4c"
+---
+
+A modular, open‑source toolkit for cyber‑security professionals built with nix & markdown
+
+![Hugo](https://img.shields.io/badge/Hugo-FF4088?style=for-the-badge&logo=hugo&logoColor=white)
+![MIT License](https://img.shields.io/badge/MIT-green?style=for-the-badge)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/36717393-ff25-4e1f-b33a-8f5f2ed4c0e6/deploy-status)](https://app.netlify.com/projects/nix4cyber/deploys)
+
+## Overview
+
+N4C (**nix4cyber**) is a personal knowledge-base and toolbox for CTF (capture the flag) & OSINT
+
+It combines three core components:
+
+- [Nix-based shells](https://n4c.hadi.diy/shells): pre-configured environments for specific security domains (web, cracking, networking, forensic, ...).
+- [Cheat‑sheets](https://n4c.hadi.diy/cheatsheets/cheatsheets): quick reference guides organized by category.
+- [CTF write‑ups](https://n4c.hadi.diy/writeups): markdown-formatted reports of challenges we've solved.
+
+All content is served through a static website built with [Hugo](https://gohugo.io/) and the [Doks](https://github.com/DELIGHT-LABS/hugo-theme-doks) (<3) theme, hosted on Netlify. The project is fully open‑source under the MIT license and lives on GitHub.
+
+## Usage
+
+To use nix4cyber, you need to have [Nix](https://nixos.org/) installed on your system.
+You can then start a shell with the following command:
+
+```sh
+nix develop github:nix4cyber/n4c#<toolkit>
+```
+
+You could also install the alias `n4c` ([see here](https://n4c.hadi.diy/shells#alias)) and only type `n4c <toolkit>`
+
+More informations about shells & toolkits [here](https://n4c.hadi.diy/shells)
+
+### Example
+
+```sh
+# Example: Launch the web pentesting toolkit
+nix develop github:nix4cyber/n4c#web
+
+# Inside the shell
+nmap -A target.com
+```
+
+## Disclaimer
+
+Nix4cyber is intended solely for lawful, ethical, and educational purposes.
+It is designed to assist cybersecurity professionals, researchers, and students in conducting authorized security assessments, penetration testing, and digital forensics within environments where they have explicit permission to operate.
+
+By using this project, you agree to comply with all applicable laws and regulations. The maintainers of Nix 4 Cyber are not responsible for any misuse of the tools or scripts provided. Unauthorized or malicious use of this project is strictly prohibited and may violate local, national, or international laws.
+
+Use responsibly. Always obtain proper authorization before conducting any security testing.
+
+## Contributing
+
+Contributions are welcome!  
+Feel free to open issues, propose new toolkits, or share CTF write-ups via pull requests.
--- a/src/content/projects/nixy.md
+++ b/src/content/projects/nixy.md
@@ -0,0 +1,80 @@
+---
+title: "Nixy"
+description: "Nixy simplifies and unifies the Hyprland ecosystem with a modular, easily customizable setup. It provides a structured way to manage your system configuration and dotfiles with minimal effort."
+image: "../../../public/images/projects/nixy.png"
+tags: ["dotfiles", "nixos", "hyprland", "rice"]
+demoLink: "https://github.com/anotherhadi/nixy#screenshots"
+sourceLink: "https://github.com/anotherhadi/nixy"
+---
+
+<a href="https://github.com/anotherhadi/nixy/stargazers">
+    <img src="https://img.shields.io/github/stars/anotherhadi/nixy?color=A89AD1&labelColor=0b0b0b&style=for-the-badge&logo=starship&logoColor=A89AD1">
+</a>
+<a href="https://github.com/anotherhadi/nixy/">
+    <img src="https://img.shields.io/github/repo-size/anotherhadi/nixy?color=A89AD1&labelColor=0b0b0b&style=for-the-badge&logo=github&logoColor=A89AD1">
+</a>
+<a href="https://nixos.org">
+    <img src="https://img.shields.io/badge/NixOS-unstable-blue.svg?style=for-the-badge&labelColor=0b0b0b&logo=NixOS&logoColor=A89AD1&color=A89AD1">
+</a>
+<a href="https://github.com/anotherhadi/nixy/blob/main/LICENSE">
+    <img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&colorA=0b0b0b&colorB=A89AD1&logo=unlicense&logoColor=A89AD1"/>
+</a>
+
+**Nixy simplifies and unifies** the Hyprland ecosystem with a modular, easily
+customizable setup. It provides a structured way to manage your system
+configuration and dotfiles with minimal effort. It includes _home-manager_,
+_secrets_, and _custom theming_ all in one place.
+
+**Features:**
+
+- 💻 Hyprland & Caelestia: Preconfigured Hyprland ecosystem with Caelestia-shell (Ty to both projects!)
+- 🎨 Consistent Theming: Base16 & Stylix-powered themes
+- ⌨️ Vim-like Everywhere: Unified keybindings (Hyprland, nvim, vimium, etc.)
+
+## Table of Content
+
+- [Table of Content](#table-of-content)
+- [Installation](#installation)
+- [Documentation](#documentation)
+
+## Installation
+
+1. [Fork](https://github.com/anotherhadi/nixy/fork) this repo and clone it to
+   your system:
+
+```sh
+git clone https://github.com/anotherhadi/nixy ~/.config/nixos
+```
+
+2. Copy the `hosts/laptop` folder, rename it to match your system’s hostname,
+   and update `variables.nix` with your machine’s settings.
+3. Copy your `hardware-configuration.nix` into your new host's folder to ensure
+   proper hardware support.
+4. Register your new host in `flake.nix` by adding it under nixosConfigurations.
+
+> `# CHANGEME` comments are placed throughout the config to
+> indicate necessary modifications. Use the following command to quickly locate
+> them:
+>
+> ```sh
+> rg "CHANGEME" ~/.config/nixos
+> ```
+
+> When you add new files, don't forget to run `git add .` to add them to the git
+> repository
+
+5. Build the system
+
+```sh
+sudo nixos-rebuild switch --flake ~/.config/nixos#yourhostname
+```
+
+## Documentation
+
+- [SERVER](https://github.com/anotherhadi/nixy/blob/main/docs/SERVER.md): Check out the server documentation
+- [THEMES](https://github.com/anotherhadi/nixy/blob/main/docs/THEMES.md): How themes work and how to create your own
+- [WALLPAPERS](https://github.com/anotherhadi/awesome-wallpapers): An awesome
+  collection of wallpapers
+
+- [CONTRIBUTING](https://github.com/anotherhadi/nixy/blob/main/docs/CONTRIBUTING.md): How to contribute
+- [LICENSE](https://github.com/anotherhadi/nixy/blob/main/LICENSE): MIT License
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -0,0 +1,179 @@
+---
+import Layout from "./Layout.astro";
+import { Image } from "astro:assets";
+import TagBadge from "../components/TagBadge.astro";
+import BackToTop from "../components/BackToTop.astro";
+import { ChevronLeft } from "@lucide/astro";
+import { parse } from "node-html-parser";
+
+interface Props {
+  title: string;
+  description: string;
+  publishDate: Date;
+  updatedDate?: Date;
+  image: any;
+  tags?: string[];
+}
+
+const { title, description, publishDate, updatedDate, image, tags } =
+  Astro.props;
+
+function formatDate(date: Date) {
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+// Calculate reading time (rough estimate based on word count)
+const content = await Astro.slots.render("default");
+const wordCount = content.split(/\s+/).length;
+const readingTime = Math.ceil(wordCount / 200); // Average reading speed: 200 words/min
+
+const root = parse(content);
+const headers = root.querySelectorAll("h1, h2, h3");
+
+const toc = headers.map((header) => ({
+  depth: parseInt(header.tagName.replace("H", "")),
+  text: header.innerText.trim(),
+  slug: header.getAttribute("id"), // Astro génère l'id automatiquement
+}));
+---
+
+<Layout title={`${title} - Another Hadi`} description={description}>
+  <article class="max-w-4xl mx-auto px-4 py-20">
+    <BackToTop />
+    <!-- Back button -->
+    <div class="mb-8">
+      <a href="/blog" class="btn btn-ghost btn-sm">
+        <ChevronLeft size={18} />
+        Back to Blog
+      </a>
+    </div>
+
+    <!-- Featured Image -->
+    {
+      image && (
+        <figure class="mb-8 rounded-2xl overflow-hidden">
+          <Image
+            src={image}
+            alt={title}
+            class="w-full aspect-video object-cover"
+            width={1200}
+            height={630}
+          />
+        </figure>
+      )
+    }
+
+    <!-- Post Header -->
+    <header class="mb-8">
+      <h1 class="text-5xl font-bold mb-4">{title}</h1>
+      <p class="text-xl text-base-content/70 mb-4">{description}</p>
+
+      <div
+        class="flex flex-wrap items-center gap-4 text-sm text-base-content/60"
+      >
+        <time datetime={publishDate.toISOString()}>
+          {formatDate(publishDate)}
+        </time>
+        <span>•</span>
+        <span>{readingTime} min read</span>
+        {
+          updatedDate && (
+            <>
+              <span>•</span>
+              <span>Updated: {formatDate(updatedDate)}</span>
+            </>
+          )
+        }
+      </div>
+
+      {
+        tags && tags.length > 0 && (
+          <div class="flex flex-wrap gap-2 mt-4">
+            {tags.map((tag) => (
+              <TagBadge tag={tag} />
+            ))}
+          </div>
+        )
+      }
+    </header>
+
+    <!-- Divider -->
+    <div class="divider"></div>
+
+    <!-- TOC -->
+    {
+    toc.length > 0 && (
+    <div class="collapse bg-base-200/50 rounded-xl mb-8 border border-base-300">
+      <input type="checkbox" />
+
+      <p class="collapse-title font-bold uppercase text-xs tracking-widest opacity-60">
+        Table of Contents
+      </p>
+      <div class="collapse-content text-sm">
+        <ul class="space-y-3">
+          {toc.map((item) => (
+          <li
+            class={`list-none ${item.depth === 3 ? "ml-6 text-sm" : "font-medium"}`}
+          >
+            <a
+              href={`#${item.slug}`}
+              class="hover:link transition-all flex items-center gap-2"
+            >
+              <span class="text-primary/40">{"#".repeat(item.depth)}</span>
+              {item.text}
+            </a>
+          </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+    <nav class="bg-base-200/50 ">
+    </nav>
+    )
+    }
+
+    <!-- Post Content -->
+    <div
+      class="max-w-none leading-7
+      [&_h1]:text-4xl [&_h1]:font-bold [&_h1]:mt-8 [&_h1]:mb-4
+      [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:mt-8 [&_h2]:mb-4
+      [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:mt-8 [&_h3]:mb-4
+      [&_h4]:text-xl [&_h4]:font-bold [&_h4]:mt-8 [&_h4]:mb-4
+      [&_h5]:text-lg [&_h5]:font-bold [&_h5]:mt-8 [&_h5]:mb-4
+      [&_h6]:text-base [&_h6]:font-bold [&_h6]:mt-8 [&_h6]:mb-4
+      [&_p]:mb-4
+      [&_a]:underline [&_a]:link
+      [&_ul]:mb-4 [&_ul]:ml-6 [&_ul]:list-disc [&_ul]:list-outside
+      [&_ol]:mb-4 [&_ol]:ml-6 [&_ol]:list-decimal [&_ol]:list-outside
+      [&_li]:mb-2
+      [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm [&_code]:font-mono [&_code]:bg-base-200
+      [&_pre]:p-4 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_pre]:mb-4 [&_pre]:bg-base-200
+      [&_pre_code]:bg-transparent [&_pre_code]:p-0
+      [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:my-4
+      [&_img]:rounded-lg [&_img]:my-6"
+    >
+      <slot />
+    </div>
+
+    <!-- Divider -->
+    <div class="divider mt-12"></div>
+
+    <!-- Back to blog link -->
+    <div class="text-center mt-8">
+      <a href="/blog" class="btn btn-primary"> View All Posts </a>
+    </div>
+      <div class="flex justify-center gap-2 mt-12">
+        <div class="flex gap-3 justify-center flex-wrap text-sm">
+          <a href="/blog" class="link link-hover">View All Posts</a>
+          <span class="text-base-content/30">•</span>
+          <a href="/#contact" class="link link-hover">Contact me</a>
+          <span class="text-base-content/30">•</span>
+        <a href="https://ko-fi.com/anotherhadi" class="link link-hover">Support me</a>
+        </div>
+      </div>
+  </article>
+</Layout>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,120 @@
+---
+import "../styles/global.css";
+import { ClientRouter } from "astro:transitions";
+import Oneko from "../components/Oneko.astro";
+import Console from "../components/Console.astro";
+
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {
+  title = "Another Hadi",
+  description = "Infosec engineer passionate about Linux/NixOS, blockchains, OSINT & FOSS. Hacking with Go, exploring open tech, and contributing whenever I can 🐧",
+} = Astro.props;
+
+// Custom blur-fade animation configuration
+const blurFadeAnimation = {
+  old: {
+    name: "blurFadeOut",
+    duration: "0.3s",
+    easing: "ease-in-out",
+    fillMode: "forwards",
+  },
+  new: {
+    name: "blurFadeIn",
+    duration: "0.3s",
+    easing: "ease-in-out",
+    fillMode: "backwards",
+  },
+};
+
+const pageTransition = {
+  forwards: blurFadeAnimation,
+  backwards: blurFadeAnimation,
+};
+
+const origin = Astro.url.origin;
+---
+
+<!doctype html>
+<html lang="en" transition:animate={pageTransition} data-theme="hadi">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+
+    <!-- View Transitions -->
+    <ClientRouter />
+
+    <!-- Open Graph / Social Media -->
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={origin} />
+    <meta property="og:image" content={`${origin}/images/og_home.png`} />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={`${origin}/images/og_home.png`} />
+  </head>
+  <body class="min-h-screen">
+    <slot />
+
+    <Oneko />
+    <Console />
+
+    <!-- Smooth Scroll -->
+    <style is:global>
+      html {
+        scroll-behavior: smooth;
+      }
+
+      /* Initial Page Load Blur-Fade Animation */
+      @keyframes pageLoadBlurFade {
+        0% {
+          opacity: 0;
+          filter: blur(8px);
+        }
+        100% {
+          opacity: 1;
+          filter: blur(0px);
+        }
+      }
+
+      html {
+        animation: pageLoadBlurFade 0.3s ease-in-out;
+        animation-fill-mode: both;
+      }
+
+      /* Blur Fade View Transitions (for page-to-page navigation) */
+      @keyframes blurFadeIn {
+        0% {
+          opacity: 0;
+          filter: blur(10px);
+        }
+        100% {
+          opacity: 1;
+          filter: blur(0px);
+        }
+      }
+
+      @keyframes blurFadeOut {
+        0% {
+          opacity: 1;
+          filter: blur(0px);
+        }
+        100% {
+          opacity: 0;
+          filter: blur(10px);
+        }
+      }
+    </style>
+  </body>
+</html>
--- a/src/layouts/ProjectLayout.astro
+++ b/src/layouts/ProjectLayout.astro
@@ -0,0 +1,221 @@
+---
+import Layout from "./Layout.astro";
+import { Image } from "astro:assets";
+import TagBadge from "../components/TagBadge.astro";
+import { ChevronLeft, ExternalLink } from "@lucide/astro";
+
+interface Props {
+  title: string;
+  description: string;
+  image: any;
+  tags: string[];
+  demoLink?: string;
+  url?: string;
+  sourceLink?: string;
+}
+
+const { title, description, image, tags, demoLink, url, sourceLink } =
+  Astro.props;
+---
+
+<Layout title={`${title} - Another Hadi`} description={description}>
+  <article class="max-w-4xl mx-auto px-4 py-20">
+    <!-- Back button -->
+    <div class="mb-8">
+      <a href="/projects" class="btn btn-ghost btn-sm">
+        <ChevronLeft size={18} />
+        Back to Projects
+      </a>
+    </div>
+
+    <!-- Featured Image -->
+    <!-- TODO: Future Enhancement - Support multiple images/project gallery -->
+    {
+      image && (
+        <figure class="mb-8 rounded-2xl overflow-hidden">
+          <Image
+            src={image}
+            alt={title}
+            class="w-full aspect-video object-cover"
+            width={1200}
+            height={630}
+          />
+        </figure>
+      )
+    }
+
+    <!-- Project Header -->
+    <header class="mb-8">
+      <h1 class="text-5xl font-bold mb-4">{title}</h1>
+      <p class="text-xl text-base-content/70 mb-6">{description}</p>
+
+      <!-- Prominent Action Buttons -->
+      {
+        (demoLink || sourceLink) && (
+          <div class="flex flex-wrap gap-3 mb-6">
+            {demoLink && (
+              <a
+                href={demoLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="btn btn-primary gap-2"
+              >
+                <ExternalLink class="size-5" />
+                Live Demo
+              </a>
+            )}
+            {url && (
+              <a
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="btn btn-soft gap-2"
+              >
+                <ExternalLink class="size-4" />
+                Website
+              </a>
+            )}
+            {sourceLink && (
+              <a
+                href={sourceLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="btn btn-soft gap-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 32 32"
+                  fill="currentColor"
+                >
+                  <path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z" />
+                </svg>
+                View Source
+              </a>
+            )}
+          </div>
+        )
+      }
+    </header>
+
+    <!-- Tags -->
+    {
+      tags && tags.length > 0 && (
+        <div class="flex flex-wrap gap-2 mt-4">
+          {tags.map((tag) => (
+            <TagBadge tag={tag} />
+          ))}
+        </div>
+      )
+    }
+
+    <!-- Divider -->
+    <div class="divider"></div>
+
+    <!-- Project Content -->
+    <div class="prose-content max-w-none">
+      <slot />
+    </div>
+
+    <!-- Divider -->
+    <div class="divider mt-12"></div>
+
+    <!-- Back to projects link -->
+    <div class="text-center mt-8">
+      <a href="/projects" class="btn btn-primary"> View All Projects </a>
+    </div>
+  </article>
+</Layout>
+
+<style is:global>
+  .prose-content {
+    color: inherit;
+    line-height: 1.75;
+  }
+
+  .prose-content h1,
+  .prose-content h2,
+  .prose-content h3,
+  .prose-content h4,
+  .prose-content h5,
+  .prose-content h6 {
+    font-weight: 700;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  .prose-content h1 {
+    font-size: 2.25rem;
+  }
+
+  .prose-content h2 {
+    font-size: 1.875rem;
+  }
+
+  .prose-content h3 {
+    font-size: 1.5rem;
+  }
+
+  .prose-content p {
+    margin-bottom: 1rem;
+  }
+
+  .prose-content a {
+    text-decoration: underline;
+  }
+
+  .prose-content ul,
+  .prose-content ol {
+    margin-bottom: 1rem;
+    margin-left: 1.5rem;
+    list-style-position: outside;
+  }
+
+  .prose-content ul {
+    list-style-type: disc;
+  }
+
+  .prose-content ol {
+    list-style-type: decimal;
+  }
+
+  .prose-content li {
+    margin-bottom: 0.5rem;
+  }
+
+  .prose-content code {
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-family: ui-monospace, monospace;
+  }
+
+  .prose-content pre {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin-bottom: 1rem;
+  }
+
+  .prose-content pre code {
+    background: transparent;
+    padding: 0;
+  }
+
+  .prose-content blockquote {
+    border-left-width: 4px;
+    padding-left: 1rem;
+    font-style: italic;
+    margin: 1rem 0;
+  }
+
+  .prose-content img {
+    border-radius: 0.5rem;
+    margin: 1.5rem 0;
+  }
+
+  .prose-content strong {
+    font-weight: 600;
+  }
+</style>
--- a/src/pages/403.astro
+++ b/src/pages/403.astro
@@ -0,0 +1,52 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { House, FolderOpen } from "@lucide/astro";
+---
+
+<Layout
+  title="403 - Forbidden | Another Hadi"
+  description="You don't have permission to access this page."
+>
+  <div class="min-h-screen flex items-center justify-center px-4 py-20">
+    <div class="text-center max-w-2xl mx-auto">
+      <!-- Large 403 Number -->
+      <h1 class="text-9xl font-bold text-primary mb-4 animate-pulse">403</h1>
+
+      <!-- Error Title -->
+      <h2 class="text-4xl font-bold mb-4">🥀 Forbidden</h2>
+
+      <!-- Error Description -->
+      <p class="text-xl mb-8 text-base-content/70">
+        Oops! You don't have permission to access this page. Let's get you back
+        on track.
+      </p>
+
+      <!-- Divider -->
+      <div class="divider"></div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-4 justify-center flex-wrap mt-8">
+        <a href="/" class="btn btn-primary gap-2">
+          <House class="size-5" />
+          Go Home
+        </a>
+        <a href="/#projects" class="btn btn-outline gap-2">
+          <FolderOpen class="size-5" />
+          View Projects
+        </a>
+      </div>
+
+      <!-- Helpful Links -->
+      <div class="flex justify-center gap-2 mt-12">
+        <p class="text-sm text-base-content/60 mb-4">
+          You might be looking for:
+        </p>
+        <div class="flex gap-3 justify-center flex-wrap text-sm">
+          <a href="/blog" class="link link-hover">Blog</a>
+          <span class="text-base-content/30">•</span>
+          <a href="/#about" class="link link-hover">About</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -0,0 +1,52 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { House, FolderOpen } from "@lucide/astro";
+---
+
+<Layout
+  title="404 - Page Not Found | Another Hadi"
+  description="The page you're looking for doesn't exist."
+>
+  <div class="min-h-screen flex items-center justify-center px-4 py-20">
+    <div class="text-center max-w-2xl mx-auto">
+      <!-- Large 404 Number -->
+      <h1 class="text-9xl font-bold text-primary mb-4 animate-pulse">404</h1>
+
+      <!-- Error Title -->
+      <h2 class="text-4xl font-bold mb-4">🥀 Page Not Found</h2>
+
+      <!-- Error Description -->
+      <p class="text-xl mb-8 text-base-content/70">
+        Oops! The page you're looking for doesn't exist or has been moved. Let's
+        get you back on track.
+      </p>
+
+      <!-- Divider -->
+      <div class="divider"></div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-4 justify-center flex-wrap mt-8">
+        <a href="/" class="btn btn-primary gap-2">
+          <House class="size-5" />
+          Go Home
+        </a>
+        <a href="/#projects" class="btn btn-outline gap-2">
+          <FolderOpen class="size-5" />
+          View Projects
+        </a>
+      </div>
+
+      <!-- Helpful Links -->
+      <div class="flex justify-center gap-2 mt-12">
+        <p class="text-sm text-base-content/60 mb-4">
+          You might be looking for:
+        </p>
+        <div class="flex gap-3 justify-center flex-wrap text-sm">
+          <a href="/blog" class="link link-hover">Blog</a>
+          <span class="text-base-content/30">•</span>
+          <a href="/#about" class="link link-hover">About</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
--- a/src/pages/500.astro
+++ b/src/pages/500.astro
@@ -0,0 +1,75 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { House, ArrowLeft } from "@lucide/astro";
+
+interface Props {
+  error?: unknown;
+}
+
+const { error } = Astro.props;
+
+// Sanitize error for display - NEVER expose sensitive server details in production
+const displayMessage =
+  "An unexpected error occurred while processing your request.";
+
+// Log full error server-side for debugging (only visible in server logs)
+if (error instanceof Error) {
+  console.error("500 Server Error:", {
+    message: error.message,
+    stack: error.stack,
+    timestamp: new Date().toISOString(),
+  });
+}
+---
+
+<Layout
+  title="500 - Server Error | Another Hadi"
+  description="An error occurred while processing your request."
+>
+  <div class="min-h-screen flex items-center justify-center px-4 py-20">
+    <div class="text-center max-w-2xl mx-auto">
+      <!-- Large 500 Number -->
+      <h1 class="text-9xl font-bold text-error mb-4 animate-pulse">500</h1>
+
+      <!-- Error Title -->
+      <h2 class="text-4xl font-bold mb-4">Server Error</h2>
+
+      <!-- Error Description -->
+      <p class="text-xl mb-8 text-base-content/70">
+        {displayMessage}
+        <br />
+        Please try again later or contact me if the problem persists.
+      </p>
+
+      <!-- Divider -->
+      <div class="divider"></div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-4 justify-center flex-wrap mt-8">
+        <a href="/" class="btn btn-primary gap-2">
+          <House class="size-5" />
+          Go Home
+        </a>
+        <button onclick="history.back()" class="btn btn-outline gap-2">
+          <ArrowLeft class="size-5" />
+          Go Back
+        </button>
+      </div>
+
+      <!-- Helpful Links -->
+      <div class="mt-8">
+        <p class="text-sm text-base-content/60 mb-4">Need help?</p>
+        <div class="flex gap-3 justify-center flex-wrap text-sm">
+          <a href="/#contact" class="link link-hover">Contact</a>
+          <span class="text-base-content/30">•</span>
+          <a
+            href="https://github.com/anotherhadi/blog/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link link-hover">Report Issue</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
--- a/src/pages/503.astro
+++ b/src/pages/503.astro
@@ -0,0 +1,75 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { House, ArrowLeft } from "@lucide/astro";
+
+interface Props {
+  error?: unknown;
+}
+
+const { error } = Astro.props;
+
+// Sanitize error for display - NEVER expose sensitive server details in production
+const displayMessage =
+  "An unexpected error occurred while processing your request.";
+
+// Log full error server-side for debugging (only visible in server logs)
+if (error instanceof Error) {
+  console.error("503 Service Unavaiable:", {
+    message: error.message,
+    stack: error.stack,
+    timestamp: new Date().toISOString(),
+  });
+}
+---
+
+<Layout
+  title="503 - Service Unavaiable | Another Hadi"
+  description="An error occurred while processing your request."
+>
+  <div class="min-h-screen flex items-center justify-center px-4 py-20">
+    <div class="text-center max-w-2xl mx-auto">
+      <!-- Large 503 Number -->
+      <h1 class="text-9xl font-bold text-error mb-4 animate-pulse">503</h1>
+
+      <!-- Error Title -->
+      <h2 class="text-4xl font-bold mb-4">Service Unavailable</h2>
+
+      <!-- Error Description -->
+      <p class="text-xl mb-8 text-base-content/70">
+        {displayMessage}
+        <br />
+        Please try again later or contact me if the problem persists.
+      </p>
+
+      <!-- Divider -->
+      <div class="divider"></div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-4 justify-center flex-wrap mt-8">
+        <a href="/" class="btn btn-primary gap-2">
+          <House class="size-5" />
+          Go Home
+        </a>
+        <button onclick="history.back()" class="btn btn-outline gap-2">
+          <ArrowLeft class="size-5" />
+          Go Back
+        </button>
+      </div>
+
+      <!-- Helpful Links -->
+      <div class="mt-8">
+        <p class="text-sm text-base-content/60 mb-4">Need help?</p>
+        <div class="flex gap-3 justify-center flex-wrap text-sm">
+          <a href="/#contact" class="link link-hover">Contact</a>
+          <span class="text-base-content/30">•</span>
+          <a
+            href="https://github.com/anotherhadi/blog/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link link-hover">Report Issue</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -0,0 +1,27 @@
+---
+import { getCollection, render } from "astro:content";
+import BlogLayout from "../../layouts/BlogLayout.astro";
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection("blog");
+
+  return blogEntries.map((entry) => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+---
+
+<BlogLayout
+  title={entry.data.title}
+  description={entry.data.description}
+  publishDate={entry.data.publishDate}
+  updatedDate={entry.data.updatedDate}
+  image={entry.data.image}
+  tags={entry.data.tags}
+>
+  <Content />
+</BlogLayout>
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,64 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import { Image } from "astro:assets";
+import TagBadge from "../../components/TagBadge.astro";
+import { ChevronLeft } from "@lucide/astro";
+import BlogCard from "../../components/BlogCard.astro";
+
+const blogPosts = await getCollection("blog");
+
+// Sort by publish date, most recent first
+const sortedPosts = blogPosts.sort(
+  (a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime(),
+);
+
+function formatDate(date: Date) {
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+---
+
+<Layout
+  title="Blog - Another Hadi"
+  description="Read my latest blog posts and articles about cybersecurity, OSINT and technology."
+>
+  <main class="max-w-6xl mx-auto px-4 py-20">
+    <!-- Header -->
+    <div class="text-center mb-16">
+      <h1 class="text-5xl font-bold mb-4">Blog</h1>
+      <p class="text-xl text-base-content/70">
+        Thoughts, insights, and tutorials on cybersecurity, OSINT, and
+        technology.
+      </p>
+    </div>
+
+    <!-- Back to Home -->
+    <div class="mb-8">
+      <a href="/" class="btn btn-ghost btn-sm">
+        <ChevronLeft size={18} />
+        Back to Home
+      </a>
+    </div>
+
+    <!-- Blog Posts Grid -->
+    {
+      sortedPosts.length === 0 ? (
+        <div class="text-center py-20">
+          <p class="text-2xl text-base-content/60">
+            No blog posts yet. Check back soon!
+          </p>
+        </div>
+      ) : (
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {sortedPosts.map((post) => (
+            <BlogCard post={post} />
+          ))}
+        </div>
+      )
+    }
+  </main>
+</Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,27 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Hero from "../components/Hero.astro";
+import Projects from "../components/Projects.astro";
+import Blog from "../components/Blog.astro";
+import Contact from "../components/Contact.astro";
+import { siteConfig } from "../config";
+import avatar from "../../public/avatar.jpg";
+---
+
+<Layout title={`Another Hadi`} description={siteConfig.description}>
+  <main>
+    <Hero
+      name={siteConfig.name}
+      title={siteConfig.title}
+      description={siteConfig.description}
+      avatar={avatar}
+      location={siteConfig.location}
+      socialLinks={siteConfig.socialLinks}
+      gpgKey={siteConfig.gpgKey}
+    />
+
+    <Blog />
+    <Projects />
+    <Contact />
+  </main>
+</Layout>
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -0,0 +1,28 @@
+---
+import { getCollection, render } from "astro:content";
+import ProjectLayout from "../../layouts/ProjectLayout.astro";
+
+export async function getStaticPaths() {
+  const projectEntries = await getCollection("projects");
+
+  return projectEntries.map((entry) => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+---
+
+<ProjectLayout
+  title={entry.data.title}
+  description={entry.data.description}
+  image={entry.data.image}
+  tags={entry.data.tags}
+  demoLink={entry.data.demoLink}
+  url={entry.data.url}
+  sourceLink={entry.data.sourceLink}
+>
+  <Content />
+</ProjectLayout>
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -0,0 +1,62 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import ProjectCard from "../../components/ProjectCard.astro";
+import { ChevronLeft } from "@lucide/astro";
+import { ArrowRight } from "lucide-astro";
+
+const projects = await getCollection("projects");
+---
+
+<Layout
+  title="Projects - Another Hadi"
+  description="Explore my latest projects and work"
+>
+  <main class="max-w-6xl mx-auto px-4 py-20">
+    <!-- Header -->
+    <div class="text-center mb-16">
+      <h1 class="text-5xl font-bold mb-4">Projects</h1>
+      <p class="text-xl text-base-content/70">
+        I enjoy the challenge of reimagining existing programs & scripts in my
+        own unique way. By creating these projects from scratch, I can ensure
+        complete control over every aspect of their design and functionality.
+      </p>
+    </div>
+
+    <!-- Back to Home -->
+    <div class="mb-8">
+      <a href="/" class="btn btn-ghost btn-sm">
+        <ChevronLeft size={18} />
+        Back to Home
+      </a>
+    </div>
+
+    <!-- Projects Grid -->
+    {
+      projects.length === 0 ? (
+        <div class="text-center py-20">
+          <p class="text-2xl text-base-content/60">
+            No projects yet. Check back soon!
+          </p>
+        </div>
+      ) : (
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {projects.map((project) => (
+            <ProjectCard project={project} />
+          ))}
+        </div>
+      )
+    }
+
+    <div class="text-center mt-12">
+      <a
+        href="https://github.com/anotherhadi"
+        target="_blank"
+        class="btn btn-ghost gap-2"
+      >
+        View All Projects
+        <ArrowRight class="size-4" />
+      </a>
+    </div>
+  </main>
+</Layout>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,41 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+@plugin "daisyui/theme" {
+  name: "hadi";
+  default: true;
+  prefersdark: false;
+  color-scheme: dark;
+  --color-base-100: oklch(0% 0 0);
+  --color-base-200: oklch(19% 0 0);
+  --color-base-300: oklch(22% 0 0);
+  --color-base-content: oklch(87.609% 0 0);
+  --color-primary: oklch(71% 0.0863 296.59);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(35% 0 0);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(35% 0 0);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(35% 0 0);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(45.201% 0.313 264.052);
+  --color-info-content: oklch(89.04% 0.062 264.052);
+  --color-success: oklch(51.975% 0.176 142.495);
+  --color-success-content: oklch(90.395% 0.035 142.495);
+  --color-warning: oklch(96.798% 0.211 109.769);
+  --color-warning-content: oklch(19.359% 0.042 109.769);
+  --color-error: oklch(62.795% 0.257 29.233);
+  --color-error-content: oklch(12.559% 0.051 29.233);
+  --radius-selector: 0rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+.btn:not(.btn-circle):not(.btn-square) {
+  @apply rounded-lg;
+}