diff --git a/assets/IMG_20251122_230414.jpg b/assets/IMG_20251122_230414.jpg
new file mode 100644
index 0000000..d41de07
Binary files /dev/null and b/assets/IMG_20251122_230414.jpg differ
diff --git a/but_img/anilist.jpg b/but_img/anilist.jpg
deleted file mode 100644
index 1fea32d..0000000
Binary files a/but_img/anilist.jpg and /dev/null differ
diff --git a/but_img/facebook.jpg b/but_img/facebook.jpg
deleted file mode 100644
index 4a0bf5c..0000000
Binary files a/but_img/facebook.jpg and /dev/null differ
diff --git a/but_img/telegram.jpg b/but_img/telegram.jpg
deleted file mode 100644
index f35f6aa..0000000
Binary files a/but_img/telegram.jpg and /dev/null differ
diff --git a/but_img/twitter.jpg b/but_img/twitter.jpg
deleted file mode 100644
index d9af09e..0000000
Binary files a/but_img/twitter.jpg and /dev/null differ
diff --git a/index.html b/index.html
index cc23349..0f2b9e5 100644
--- a/index.html
+++ b/index.html
@@ -1,692 +1,672 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Maher • Inception</title>
-  <meta name="description" content="J">
-  <meta property="og:image" content="https://raw.githubusercontent.com/MaxHazzan/Page/main/assets/thumb.jpg">
-  <meta name="twitter:image" content="https://raw.githubusercontent.com/MaxHazzan/Page/main/assets/thumb.jpg">
-  <meta name="keywords" content="Maher, portfolio, links, projects">
-  <meta name="author" content="Maher">
-  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <style>
-    html, body {
-      height: 100%;
-      margin: 0;
-      scroll-behavior: smooth;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    body {
-font-family: 'Roboto', 'Courier New', Courier, monospace;
-      background-image: url('assets/gb.jpg');
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-attachment: fixed;
-      transition: background-color 0.5s ease, color 0.5s ease;
-      overflow-x: hidden;
-    }
-
-    body.light-mode {
-      color: #374151;
-    }
-    body.dark-mode {
-      background-image: url('assets/gb-dark.jpg');
-      color: #D1D5DB;
-    }
-
-    body.dark-mode .section-card,
-    body.dark-mode header,
-    body.dark-mode footer {
-      background-color: rgba(17, 24, 39, 0.85);
-      border-color: rgba(55, 65, 81, 0.7);
-    }
-    body.dark-mode .fancy-text {
-      color: #F3F4F6;
-    }
-    body.dark-mode .nav-link {
-      color: #9CA3AF;
-    }
-    body.dark-mode .nav-link:hover {
-      color: #E5E7EB;
-    }
-    body.dark-mode .nav-link::after {
-      background-color: #60A5FA;
-    }
-    body.dark-mode .text-muted {
-        color: #9CA3AF;
-    }
-    body.dark-mode .contact-link {
-        color: #93C5FD;
-    }
-    body.dark-mode .project-card {
-        background-color: rgba(31, 41, 55, 0.9);
-        border-color: rgba(55, 65, 81, 0.5);
-    }
-     body.dark-mode .project-card:hover {
-        border-color: rgba(75, 85, 99, 0.7);
-    }
-    body.dark-mode .blog-card {
-        background-color: rgba(31, 41, 55, 0.9);
-        border-color: rgba(55, 65, 81, 0.5);
-    }
-    body.dark-mode .blog-card:hover {
-        border-color: rgba(75, 85, 99, 0.7);
-    }
-
-
-    .text-muted {
-        color: #6B7280;
-    }
-
-    main {
-      flex: 1;
-    }
-
-    .fancy-text {
-      font-family: 'Playfair Display', serif;
-      font-weight: 700;
-      color: #1F2937;
-    }
-
-    .section-card {
-      background-color: rgba(255, 255, 255, 0.88);
-      backdrop-filter: blur(12px) saturate(150%);
-      border-radius: 0.75rem;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-      transition: background-color 0.5s ease, color 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
-      border: 1px solid rgba(229, 231, 235, 0.6);
-    }
-    .section-card:hover {
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.20);
-    }
-
-    .btn-img-link {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      border-radius: 0.5rem;
-      transition: transform 0.3s ease, box-shadow 0.3s ease;
-      padding: 1.5rem;
-      text-align: center;
-      min-height: 100px;
-    }
-    .btn-img-link::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      filter: brightness(0.45) saturate(0.8) opacity(0.9);
-      transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
-      z-index: 0;
-    }
-    .btn-img-link .btn-text-content {
-      position: relative;
-      z-index: 1;
-      color: white;
-      font-weight: 500;
-      font-size: 1.125rem;
-      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
-      transition: transform 0.3s ease;
-    }
-    .btn-img-link:hover {
-      transform: translateY(-6px);
-      box-shadow: 0 12px 24px rgba(0,0,0,0.25);
-    }
-    .btn-img-link:hover::before {
-      transform: scale(1.08);
-      filter: brightness(0.6) saturate(1) opacity(1);
-    }
-    .btn-img-link:hover .btn-text-content {
-        transform: scale(1.03);
-    }
-
-    .btn-twitter::before { background-image: url('but_img/twitter.jpg'); }
-    .btn-facebook::before { background-image: url('but_img/facebook.jpg'); }
-    .btn-telegram::before { background-image: url('but_img/telegram.jpg'); }
-    .btn-anilist::before { background-image: url('but_img/anilist.jpg'); }
-
-    .nav-link {
-      position: relative;
-      padding-bottom: 6px;
-      transition: color 0.3s ease;
-      color: #4B5563;
-      font-weight: 500;
-    }
-    .nav-link::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 0;
-      height: 2px;
-      background-color: #3B82F6;
-      transition: width 0.3s ease-out, background-color 0.3s ease;
-    }
-    .nav-link:hover { color: #1D4ED8; }
-    .nav-link:hover::after { width: 100%; }
-
-    #loading-overlay {
-      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-      background: #111827;
-      display: flex; flex-direction: column; align-items: center; justify-content: center;
-      z-index: 9999; color: #E5E7EB; font-size: 1.25rem;
-    }
-    .loader-text { font-family: 'Playfair Display', serif; font-size: 1.75rem; margin-bottom: 1.25rem; }
-    .spinner {
-      border: 4px solid rgba(229, 231, 235, 0.2); border-left-color: #3B82F6;
-      border-radius: 50%; width: 44px; height: 44px; animation: spin 1s linear infinite;
-    }
-    @keyframes spin { to { transform: rotate(360deg); } }
-
-    #siteContent { display: none; min-height: 100vh; display: flex; flex-direction: column; }
-    .centered-text { text-align: center; display: block; }
-
-    .contact-link {
-        color: #2563EB;
-        font-weight: 500;
-        transition: color 0.3s ease;
-    }
-    .contact-link:hover {
-        color: #1D4ED8;
-    }
-
-    .project-card, .blog-card {
-        background-color: rgba(249, 250, 251, 0.95);
-        border: 1px solid rgba(229, 231, 235, 0.8);
-        border-radius: 0.5rem;
-        padding: 1.5rem;
-        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
-        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-    }
-    .project-card:hover, .blog-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
-        border-color: rgba(209, 213, 219, 1);
-    }
-    .prose-custom p { margin-bottom: 1em; }
-    .prose-custom { max-width: 65ch; margin-left:auto; margin-right:auto; }
-
-
-    ::-webkit-scrollbar { width: 10px; }
-    ::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
-    ::-webkit-scrollbar-thumb { background: #A0AEC0; border-radius: 5px; }
-    ::-webkit-scrollbar-thumb:hover { background: #718096; }
-    body.dark-mode ::-webkit-scrollbar-thumb { background: #4A5568; }
-    body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #2D3748; }
-
-  </style>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Insert • MAHER SYSTEM_V3</title>
+
+    <!-- Description -->
+    <meta name="description" content="Official Page Of Maher Hassan" />
+
+    <meta property="og:title" content="Maher • IO">
+    <meta property="og:description" content="Official Page Of Maher Hassan">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="https://raw.githubusercontent.com/SatoX69/Intro/refs/heads/main/assets/IMG_20251122_230414.jpg">
+    <meta property="og:url" content="https://satox69.github.io/Intro">
+<link rel="icon" href="https://img.icons8.com/?size=100&id=NyuxPErq0tu2&format=png&color=000000" media="(prefers-color-scheme: light)">
+    <link rel="icon" href="https://img.icons8.com/?size=100&id=NyuxPErq0tu2&format=png&color=000000" media="(prefers-color-scheme: dark)">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=JetBrains+Mono:wght@300;500;700&family=Syncopate:wght@400;700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+
+     <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        display: ['Syncopate', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        bg: '#030303',
+                        panel: '#0a0a0a',
+                        primary: '#6366f1',
+                        primaryDim: 'rgba(99, 102, 241, 0.1)',
+                        accent: '#a5b4fc',
+                        border: 'rgba(255, 255, 255, 0.08)',
+                    },
+                    backgroundImage: {
+                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+                    },
+                    animation: {
+                        scan: 'scan 3s linear infinite',
+                        'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    },
+                    keyframes: {
+                        scan: {
+                            '0%': { backgroundPosition: '0 0' },
+                            '100%': { backgroundPosition: '0 100%' },
+                        },
+                    },
+                },
+            },
+        }
+    </script>
+
+    <style>
+        :root { --cursor-size: 8px; }
+
+        body {
+            background-color: #030303; 
+            color: #e5e5e5;
+            cursor: none;
+            overflow-x: hidden;
+        }
+
+
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #030303; }
+        ::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #6366f1; }
+
+        #cursor {
+            position: fixed; top: 0; left: 0;
+            width: var(--cursor-size); height: var(--cursor-size);
+            background: white; border-radius: 50%;
+            pointer-events: none; z-index: 9999;
+            mix-blend-mode: difference;
+            transition: transform 0.1s, width .3s, height .3s;
+            transform: translate(-50%, -50%);
+        }
+
+        #cursor-ring {
+            position: fixed; top: 0; left: 0;
+            width: 40px; height: 40px;
+            border: 1px solid rgba(255,255,255,0.2);
+            border-radius: 50%;
+            pointer-events: none; z-index: 9998;
+            transition: transform .15s ease-out, border-color .3s;
+            transform: translate(-50%, -50%);
+        }
+
+        body:hover #cursor-ring { border-color: rgba(99,102,241,0.5); }
+
+        a:hover ~ #cursor, button:hover ~ #cursor {
+            transform: translate(-50%, -50%) scale(0.5);
+        }
+
+        a:hover ~ #cursor-ring, button:hover ~ #cursor-ring {
+            transform: translate(-50%, -50%) scale(1.5);
+            background: rgba(99,102,241,0.05);
+            border-color: #6366f1;
+        }
+
+        .glass {
+            background: rgba(15, 15, 15, 0.6);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255,255,255,0.08);
+        }
+
+        .scanline {
+            position: fixed; inset: 0; 
+            background: linear-gradient(to bottom,
+                rgba(255,255,255,0) 0%,
+                rgba(255,255,255,0) 50%,
+                rgba(0,0,0,0.1) 50%,
+                rgba(0,0,0,0.1) 100%
+            );
+            background-size: 100% 4px;
+            pointer-events: none;
+            z-index: 50;
+            opacity: .7;
+        }
+
+        .noise {
+            position: fixed; inset: 0;
+            width: 100%; height: 100%;
+            pointer-events: none;
+            z-index: 49;
+            opacity: .04;
+            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
+        }
+
+        html.lenis { height: auto; }
+        .lenis.lenis-smooth { scroll-behavior: auto !important; }
+        .lenis.lenis-stopped { overflow: hidden; }
+        .lenis.lenis-scrolling iframe { pointer-events: none; }
+    </style>
 </head>
 
-<body class="light-mode">
+<body class="antialiased selection:bg-primary selection:text-white">
+
+    <div id="cursor"></div>
+    <div id="cursor-ring"></div>
+    <div class="noise"></div>
+    <div class="scanline"></div>
+    <canvas id="particle-canvas" class="fixed inset-0 -z-10 opacity-40"></canvas>
 
-  <div id="loading-overlay">
-    <div class="loader-text">
-      re:Inception
+    <div id="loader" class="fixed inset-0 bg-[#030303] z-[100] flex flex-col items-center justify-center font-mono">
+        <div class="w-64">
+            <div class="flex justify-between text-xs text-primary mb-2">
+                <span>SYSTEM_BOOT_SEQUENCE</span>
+                <span id="loader-count">0%</span>
+            </div>
+            <div class="h-[2px] w-full bg-gray-900 relative overflow-hidden">
+                <div id="loader-bar" class="absolute top-0 left-0 h-full bg-primary w-0 shadow-[0_0_15px_#6366f1]"></div>
+            </div>
+            <div class="mt-2 text-[10px] text-gray-500" id="loader-msg">
+                > Initializing Kernel...
+            </div>
+        </div>
     </div>
-    <div class="spinner"></div>
-  </div>
-
-  <div id="siteContent">
-    <header class="fixed top-0 left-0 w-full z-50 shadow-md transition-colors duration-500 backdrop-filter backdrop-blur-xl bg-opacity-80 bg-white">
-      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex items-center justify-between h-20">
-          <div class="flex items-center space-x-4">
-            <img class="h-12 w-12 rounded-full shadow-avatar" src="assets/gb_new_un.jpg" alt="Maher's profile picture">
-            <span class="fancy-text text-2xl tracking-tight" id="typed-name"></span>
-          </div>
-          <nav class="hidden md:flex items-center space-x-8">
-            <a href="#about" class="nav-link">About</a>
-            <a href="#links" class="nav-link">Links</a>
-            <a href="#projects" class="nav-link">Projects</a>
-            <a href="#contact" class="nav-link">Contact</a>
-            <a href="#blogs" class="nav-link">Blogs</a>            <a href="#entryAnilistContainer" class="nav-link">Recent Activity</a>
-          </nav>
-          <div class="flex items-center">
-           <!-- <button id="theme-toggle" class="focus:outline-none p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
-              <span id="theme-icon-container" class="text-gray-600 dark:text-gray-300"></span>
-            </button> -->
-            <div class="md:hidden ml-3">
-              <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
-                <span class="sr-only">Open main menu</span>
-                <svg class="h-6 w-6 block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" id="menu-open-icon">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
-                </svg>
-                 <svg class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" id="menu-close-icon">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
+
+    <header class="fixed top-0 w-full z-40 py-6 transition-all duration-300" id="navbar">
+        <div class="container mx-auto px-6 max-w-7xl">
+            <div class="glass rounded-full px-6 py-3 flex justify-between items-center">
+                <a href="#" class="font-display font-bold text-lg tracking-tighter group flex items-center gap-2">
+                    <span class="w-2 h-2 bg-primary rounded-full animate-pulse-fast"></span>
+                    MAHER<span class="text-primary group-hover:text-white transition-colors">.DEV</span>
+                </a>
+
+                <nav class="hidden md:flex gap-8 text-[11px] font-mono tracking-widest text-gray-400">
+                    <a href="#profile" class="hover:text-primary transition-colors hover:scale-105">/// PROFILE</a>
+                    <a href="#work" class="hover:text-primary transition-colors hover:scale-105">/// WORK</a>
+                    <a href="#terminal" class="hover:text-primary transition-colors hover:scale-105">/// TERMINAL</a>
+                </nav>
+
+                <div class="flex items-center gap-4">
+                    <div class="hidden md:block text-[10px] font-mono text-gray-500 text-right leading-tight">
+                        <span id="clock">00:00:00 UTC</span><br>
+                        <span class="text-primary">ONLINE</span>
+                    </div>
+                    <button id="menu-btn" class="md:hidden text-white hover:text-primary transition-colors">
+                        <i class="fa-solid fa-bars-staggered"></i>
+                    </button>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-      <div id="mobile-menu" class="md:hidden hidden bg-white dark:bg-gray-800 bg-opacity-95 dark:bg-opacity-95 backdrop-blur-md py-2 shadow-lg">
-        <a href="#about" class="block px-5 py-3 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">About</a>
-        <a href="#links" class="block px-5 py-3 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Links</a>
-        <a href="#projects" class="block px-5 py-3 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Projects</a>
-        <a href="#contact" class="block px-5 py-3 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Contact</a>
-        <a href="#blogs" class="block px-5 py-3 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Blogs</a>
-        <a href="#entryAnilistContainer" class="block px-5 py-3 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Recent Activity</a>
-      </div>
     </header>
 
-    <main class="pt-28 pb-16">
-      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-20 md:space-y-24">
-
-        <section id="about" class="section-card p-8 md:p-10" data-aos="fade-up">
-          <h2 class="fancy-text text-3xl md:text-4xl text-center mb-8">About Me</h2>
-          <div class="prose-custom text-lg leading-relaxed text-gray-700 dark:text-gray-300">
-            <p>
-              Hi, I'm Maher. I'm <span id="currentAge" class="font-semibold"></span> years old.
-I'm an introverted person who knows a lot but tends to keep it to myself.
-You'll usually find me quietly focused, doing my own thing with full commitment.
-I don’t really play games — I prefer diving into literature and occasionally writing code.
-            </p>
-            <p>I got married in September of 2025</p>
-            <p>
-            I enjoy watching action anime and reading man(ga,hwa,hua) and novels.
-            I really love Bad Apple (The song), especially the saymaxwell version.
-            I also have a deep interest in AI and its applications.
-            I primarily consume English content.
-            </p>
-            <p>
-            One of my favorite anime series is "Re:Zero"
-            </p><p>My favorite manga is "Origin"
-            </p>
-            <p>You can check my manga/anilist activity below, I track them on AniList and MAL</p>
-          </div>
-        </section>
+    <div id="mobile-menu" class="fixed inset-0 bg-black/95 backdrop-blur-xl z-30 flex flex-col items-center justify-center gap-8 opacity-0 pointer-events-none transition-all duration-500">
+        <a href="#profile" class="text-4xl font-display text-white hover:text-primary nav-link">PROFILE</a>
+        <a href="#work" class="text-4xl font-display text-white hover:text-primary nav-link">WORK</a>
+        <a href="#terminal" class="text-4xl font-display text-white hover:text-primary nav-link">TERMINAL</a>
+        <div class="absolute bottom-10 text-xs font-mono text-gray-600">SYSTEM V3.0 // ACCESS GRANTED</div>
+    </div>
 
-        <section id="links" class="section-card p-8 md:p-10" data-aos="fade-up" data-aos-delay="100">
-          <h2 class="fancy-text text-3xl md:text-4xl text-center mb-8">My Socials</h2>
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-8"></div>
+    <main>
+        <section id="profile" class="min-h-screen flex items-center justify-center pt-20">
+            <div class="container mx-auto px-6 max-w-7xl grid lg:grid-cols-12 gap-12 items-center">
+                
+                <div class="lg:col-span-7 space-y-8 order-2 lg:order-1">
+                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primaryDim border border-primary/20 text-primary text-[10px] font-mono tracking-widest uppercase">
+                        <i class="fa-solid fa-wifi text-[8px]"></i> Signal Strong
+                    </div>
+                    
+                    <h1 class="text-5xl md:text-7xl font-display font-bold leading-[0.9] tracking-tighter">
+                        DIGITAL<br>
+                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-400 via-white to-gray-400">ARCHITECT</span>
+                    </h1>
+                    
+                    <div class="glass p-6 border-l-4 border-primary rounded-r-xl max-w-xl">
+                        <p class="text-gray-400 text-sm md:text-base font-light leading-relaxed">
+                            I like turning ideas into simple, clean code, and I read a lot because it keeps my mind curious. I’m a developer who enjoys building automation tools, designing smooth and reliable APIs, and finding neat solutions to messy problems. I’m always learning, experimenting, and trying to make things work just a little better than before.
+                            <br><br>
+                            <span class="font-mono text-xs text-primary">
+                                > STATUS: MARRIED (2025) | AGE: <span id="age-display">--</span>
+                            </span>
+                        </p>
+                    </div>
+
+                    <div class="flex flex-wrap gap-4 pt-2">
+                        <a href="#work" class="px-8 py-4 bg-white text-black font-display font-bold text-sm tracking-widest rounded hover:bg-primary hover:text-white transition-all duration-300 shadow-[0_0_20px_rgba(255,255,255,0.2)]">
+                            VIEW PROJECTS
+                        </a>
+                        <div class="flex gap-4" id="socials-container">
+                            </div>
+                    </div>
+                </div>
+
+                <div class="lg:col-span-5 order-1 lg:order-2 flex justify-center lg:justify-end relative">
+                    <div class="relative w-[300px] md:w-[400px] aspect-[4/5] rounded-2xl overflow-hidden border border-white/10 group shadow-2xl shadow-primary/10">
+                        <div class="absolute inset-0 bg-primary/20 mix-blend-overlay z-10 group-hover:opacity-0 transition-opacity duration-500"></div>
+                        <img id="hero-img" src="" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-105 group-hover:scale-100">
+                        
+                        <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/90 to-transparent z-20">
+                            <h3 class="font-display text-xl text-white">JSUX / MAHER</h3>
+                            <p class="text-[10px] font-mono text-primary">ID: 6482498 (ANILIST)</p>
+                        </div>
+                    </div>
+                    <div class="absolute -inset-10 bg-primary/20 blur-[80px] -z-10 rounded-full pointer-events-none"></div>
+                </div>
+            </div>
         </section>
 
-        <section id="projects" class="section-card p-8 md:p-10" data-aos="fade-up" data-aos-delay="200">
-          <h2 class="fancy-text text-3xl md:text-4xl text-center mb-8">Small Projects</h2>
-          <div class="space-y-6 project-list"></div>
+        <section class="py-10 border-y border-white/5 bg-panel overflow-hidden">
+            <div class="flex gap-12 items-center whitespace-nowrap" id="marquee-track">
+                </div>
         </section>
 
-        <section id="contact" class="section-card p-8 md:p-10" data-aos="fade-up" data-aos-delay="300">
-          <h2 class="fancy-text text-3xl md:text-4xl text-center mb-8">Get In Touch</h2>
-          <div class="prose-custom text-lg text-center leading-relaxed text-gray-700 dark:text-gray-300">
-            <p>
-              Feel free to reach out! You can contact me via email at
-              <a href="#" id="emailLink" class="contact-link">mdjsusbinsus@gmail.com</a>.
-            </p>
-          </div>
+        <section id="work" class="py-32 relative">
+            <div class="container mx-auto px-6 max-w-7xl">
+                <div class="flex flex-col md:flex-row justify-between items-end mb-16 border-b border-white/10 pb-6">
+                    <div>
+                        <h2 class="text-4xl md:text-5xl font-display font-bold text-white mb-2">DEPLOYMENTS</h2>
+                        <p class="font-mono text-xs text-primary">/// SELECTED WORKS 2023-2024</p>
+                    </div>
+                    <div class="hidden md:block text-right">
+                        <i class="fa-solid fa-database text-gray-600 text-2xl"></i>
+                    </div>
+                </div>
+
+                <div class="grid md:grid-cols-2 gap-8" id="projects-grid">
+                    </div>
+            </div>
         </section>
 
-        <section id="blogs" class="section-card p-8 md:p-10" data-aos="fade-up" data-aos-delay="400">
-          <h2 class="fancy-text text-3xl md:text-4xl text-center mb-8">Blogs</h2>
-          <div id="blogContainer" class="space-y-8"></div>
-        </section>
-        
-        <section id="readEntries" class="section-card p-8 md:p-10" data-aos="fade-up" data-aos-delay="400">
-          <h2 class="fancy-text text-3xl md:text-4xl text-center mb-8">Recent Activity</h2>
-          <div id="entryAnilistContainer" class="space-y-8"></div>
+        <section id="terminal" class="py-20 pb-40">
+            <div class="container mx-auto px-6 max-w-7xl">
+                <div class="glass rounded-xl overflow-hidden border border-white/10 shadow-[0_0_50px_rgba(0,0,0,0.5)]">
+                    
+                    <div class="bg-[#111] px-4 py-3 border-b border-white/5 flex items-center justify-between">
+                        <div class="flex gap-2">
+                            <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
+                            <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
+                            <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
+                        </div>
+                        <div class="font-mono text-[10px] text-gray-500 tracking-widest">maher@system:~</div>
+                        <div class="w-10"></div>
+                    </div>
+
+                    <div class="grid lg:grid-cols-3 min-h-[500px]">
+                        <div class="lg:col-span-1 bg-[#0a0a0a] p-6 border-r border-white/5 flex flex-col">
+                            <h3 class="font-mono text-[10px] text-primary mb-4 pb-2 border-b border-white/5 flex justify-between">
+                                <span>>> ACTIVITY_LOG</span>
+                                <span class="animate-pulse">●</span>
+                            </h3>
+                            <div class="flex-1 overflow-y-auto font-mono text-[11px] space-y-4 pr-2 custom-scroll" id="activity-log">
+                                <div class="text-gray-500">> Initializing GraphQL handshake...</div>
+                            </div>
+                        </div>
+
+                        <div class="lg:col-span-2 bg-[#050505] p-6 relative">
+                            <div class="flex justify-between items-center mb-6">
+                                <h3 class="font-mono text-[10px] text-white tracking-widest">>> CURRENT_CONSUMPTION</h3>
+                                <div class="flex gap-2 items-center text-[10px] font-mono text-gray-500">
+                                    <span>SOURCE: ANILIST</span>
+                                    <i class="fa-solid fa-satellite-dish text-primary"></i>
+                                </div>
+                            </div>
+                            <div class="grid sm:grid-cols-2 gap-4" id="media-grid">
+                                <div class="col-span-2 flex items-center justify-center h-40 text-gray-700 font-mono text-xs">[Awaiting Data Stream...]</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </section>
 
-      </div>
+        <footer class="border-t border-white/5 bg-panel py-20">
+            <div class="container mx-auto px-6 max-w-7xl text-center">
+                <h2 class="text-3xl font-display font-bold text-white mb-8">INITIATE PROTOCOL</h2>
+                
+                <div class="flex flex-col items-center gap-6">
+                    <button onclick="copyEmail()" class="group relative px-8 py-3 rounded-full border border-white/10 bg-white/5 hover:border-primary hover:bg-primary/10 transition-all overflow-hidden">
+                        <div class="absolute inset-0 bg-primary/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                        <span class="relative font-mono text-sm text-gray-300 group-hover:text-white transition-colors" id="email-text">mdjsusbinsus@gmail.com</span>
+                    </button>
+                    <p class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.2em]">
+                        &copy; <span id="year"></span> MAHER. END OF LINE.
+                    </p>
+                </div>
+            </div>
+        </footer>
     </main>
 
-    <footer class="mt-auto backdrop-filter backdrop-blur-lg bg-opacity-75 bg-white dark:bg-gray-900 dark:bg-opacity-85 transition-colors duration-500 py-8">
-      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between text-sm text-gray-500 dark:text-gray-400">
-        <p class="mb-4 md:mb-0">
-          &copy; <span id="currentYearFooter"></span> Maher.
-          <span class="centered-text">All rights reserved.</span>
-        </p>
-        <div class="flex space-x-5 footer-social-links"></div>
-      </div>
-    </footer>
-  </div>
-
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
-  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-  <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
-
-  <script>
-    const config = {
-      name: "Maher",
-      birthMonth: 11,
-      birthDay: 16,
-      birthYear: 2006,
-      socialLinks: [
-        { name: "X (Twitter)", id: "twitter", url: "https://x.com/Jsux01", iconClass: "fab fa-twitter", btnClass: "btn-twitter" },
-        { name: "Facebook", id: "facebook", url: "https://www.facebook.com/profile.php?id=61578279761811", iconClass: "fab fa-facebook-f", btnClass: "btn-facebook" },
-        { name: "Telegram", id: "telegram", url: "https://t.me/Jsux1", iconClass: "fab fa-telegram-plane", btnClass: "btn-telegram" },
-        { name: "Anilist", id: "anilist", url: "https://anilist.co/user/Jsux", iconClass: "fas fa-ghost", btnClass: "btn-anilist" }
-      ],
-      contactEmail: "mdjsusbinsus@gmail.com",
-      projects: [
-        { name: "Maz", description: "A Suite of tools for creating bots (Private)", url: "https://youtu.be/7E7CH0xlYr4", aosDelay: "0" },
-        { name: "Tensor.fart", description: "A simple unofficial wrapper of tensor.art (Deprecated, Jul 23)", url: "https://github.com/SatoX69/Tensor.fart", aosDelay: "100" }
-      ],
-      anilistUserId: 6482498,
-      theme: {
-        sun: '<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 5c.552 0 1 .448 1 1v1c0 .552-.448 1-1 1s-1-.448-1-1V6c0-.552.448-1 1-1zm0 13c-.552 0-1-.448-1-1v-1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1zm8-9c.552 0 1 .448 1 1v0c0 .552-.448 1-1 1h-1c-.552 0-1-.448-1-1s.448-1 1-1h1zm-15 0c.552 0 1 .448 1 1v0c0 .552-.448 1-1 1h-1c-.552 0-1-.448-1-1s.448-1 1-1h1zm12.071-5.071c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-.707.707c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l.707-.707zm-11.314 11.314c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-.707.707c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l.707-.707zm0-11.314c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l.707.707c.391.391.391 1.023 0 1.414s-1.023.391-1.414 0l-.707-.707zm11.314 11.314c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l.707.707c.391.391.391 1.023 0 1.414s-1.023.391-1.414 0l-.707-.707zM12 9c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3z"/></svg>',
-        moon: '<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM12 17.25a.75.75 0 00.75.75h.008a.75.75 0 00.75-.75 5.25 5.25 0 00-1.5-.001H12zm0-14.25A6.75 6.75 0 005.25 12 6.75 6.75 0 0012 18.75a.75.75 0 010 1.5A8.25 8.25 0 013.75 12 8.25 8.25 0 0112 3.75a.75.75 0 010 1.5z"/></svg>'
-      }
-    };
-
-    document.addEventListener('DOMContentLoaded', function() {
-      AOS.init({
-        duration: 850,
-        easing: 'ease-out-cubic',
-        once: true,
-        offset: 70
-      });
-
-      const today = new Date();
-      const currentYear = today.getFullYear();
-      const currentMonth = today.getMonth() + 1;
-      const currentDay = today.getDate();
-      let age = currentYear - config.birthYear;
-      if (currentMonth < config.birthMonth || (currentMonth === config.birthMonth && currentDay < config.birthDay)) {
-        age--;
-      }
-      const ageEl = document.getElementById("currentAge");
-      if(ageEl) ageEl.textContent = age;
-      const currentYearFooterEl = document.getElementById("currentYearFooter");
-      if(currentYearFooterEl) currentYearFooterEl.textContent = currentYear;
-
-const goodfyAhhList = [
-  "Maher",
-  "Max",
-  "Maz",
-  "Misanthropist",
-  "sus",
-  "Jsux",
-  "Jsus",
-  "x"
-];
-
-      const typedNameEl = document.getElementById('typed-name');
-      if(typedNameEl) {
-        new Typed('#typed-name', {
-          strings: [config.name, ...goodfyAhhList],
-          typeSpeed: 75,
-          backSpeed: 35,
-          loop: true,
-          smartBackspace: true,
-          showCursor: true,
-          cursorChar: '_',
-          startDelay: 300
+    <script>
+         const config = {
+            user: {
+                anilistId: 6482498,
+                birthDate: new Date(2006, 10, 16), // Nov 16, 2006
+                locationOffset: 6
+            },
+            assets: {
+                hero: Math.random() > 0.5 ? "https://images.unsplash.com/photo-1605379399642-870262d3d051?q=80&w=2106&auto=format&fit=crop" : "https://raw.githubusercontent.com/SatoX69/Intro/refs/heads/main/assets/gb_new_un.jpg",
+                projects: [
+                    "https://i.ibb.co.com/ksgcCcyp/IMG-20251122-223733.jpg",
+                    "https://i.ibb.co.com/dsJ5yztG/1763829693198.png"
+                ]
+            },
+            projects: [
+                { 
+                    name: "MAZ BOT SUITE", 
+                    tag: "AUTOMATION", 
+                    desc: "Private modular automation toolset designed for a wide range of tasks.",
+                    url: "https://youtu.be/7E7CH0xlYr4"
+                },
+                { 
+                    name: "TENSOR.FART", 
+                    tag: "API WRAPPER", 
+                    desc: "Unofficial asynchronous Node.js wrapper for the Tensor.art API (Legacy).",
+                    url: "https://youtu.be/HGhjyd8ZE78"
+                }
+            ],
+            stack: ["NODE.JS", "PYTHON", "Android", "LINUX"]
+        };
+    document.addEventListener("DOMContentLoaded", () => {
+            const lenis = new Lenis({
+                duration: 1.2,
+                easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+                direction: 'vertical',
+                smooth: true
+            });
+
+            function raf(time) {
+                lenis.raf(time);
+                requestAnimationFrame(raf);
+            }
+            requestAnimationFrame(raf);
         });
-      }
-
-      const linksContainer = document.querySelector('#links .grid');
-      const footerLinksContainer = document.querySelector('.footer-social-links');
-      if(linksContainer && footerLinksContainer) {
-        config.socialLinks.forEach(link => {
-          const linkElement = document.createElement('a');
-          linkElement.href = link.url;
-          linkElement.target = "_blank";
-          linkElement.rel = "noopener noreferrer";
-          linkElement.className = `btn-img-link ${link.btnClass}`;
-          linkElement.setAttribute('data-aos', 'zoom-in');
-          linkElement.setAttribute('data-aos-duration', '500');
-          linkElement.innerHTML = `<span class="btn-text-content"><i class="${link.iconClass} mr-2 opacity-90"></i>${link.name}</span>`;
-          linksContainer.appendChild(linkElement);
-
-          const footerLink = document.createElement('a');
-          footerLink.href = link.url;
-          footerLink.target = "_blank";
-          footerLink.rel = "noopener noreferrer";
-          footerLink.className = "hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200";
-          footerLink.innerHTML = `<i class="${link.iconClass} fa-lg"></i><span class="sr-only">${link.name}</span>`;
-          footerLinksContainer.appendChild(footerLink);
+
+        gsap.registerPlugin(ScrollTrigger);
+
+        window.onload = () => {
+            const tl = gsap.timeline();
+            const count = { val: 0 };
+            
+            tl.to(count, {
+                val: 100,
+                duration: 3,
+                ease: "power2.inOut",
+                onUpdate: () => {
+                    document.getElementById('loader-count').innerText = Math.floor(count.val) + "%";
+                    document.getElementById('loader-bar').style.width = Math.floor(count.val) + "%";
+                }
+            })
+            .to("#loader", { yPercent: -100, duration: 1, ease: "expo.inOut", delay: 0.2 })
+            .from("#profile h1", { y: 100, opacity: 0, duration: 1, ease: "power4.out" }, "-=0.5")
+            .from(".glass", { y: 20, opacity: 0, duration: 0.8, stagger: 0.1 }, "-=0.8");
+
+             const marquee = document.getElementById('marquee-track');
+            const stackHTML = config.stack.map(s => `<span class="mx-8 text-2xl font-display font-bold text-white/5 hover:text-primary transition-colors cursor-default">${s}</span>`).join('');
+            marquee.innerHTML = stackHTML.repeat(4);
+
+            gsap.to(marquee, {
+                xPercent: -50,
+                repeat: -1,
+                duration: 30,
+                ease: "linear"
+            });
+        };
+
+        document.getElementById('hero-img').src = config.assets.hero;
+
+        document.getElementById('year').innerText = new Date().getFullYear();
+        const ageDiff = Date.now() - config.user.birthDate.getTime();
+        document.getElementById('age-display').innerText = Math.floor(ageDiff / (31557600000)); // 365.25 days
+
+        setInterval(() => {
+            const now = new Date();
+            const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
+            const bdTime = new Date(utc + (3600000 * config.user.locationOffset));
+            document.getElementById('clock').innerText = bdTime.toLocaleTimeString('en-GB') + " UTC+6";
+        }, 1000);
+
+        const socials = [
+            { i: "fa-solid fa-x", u: "https://x.com/Jsux01" },
+            { i: "fa-facebook-f", u: "https://www.facebook.com/profile.php?id=61578279761811" },
+            { i: "fa-telegram", u: "https://t.me/Jsux1" },
+            { i: "fa-github", u: "https://github.com/Jsux" },
+            { i: "fa-solid fa-a", u: "https://anilist.co/user/Jsux" }
+        ];
+        const socCont = document.getElementById('socials-container');
+        socials.forEach(s => {
+            socCont.innerHTML += `
+                <a href="${s.u}" target="_blank" class="w-12 h-12 flex items-center justify-center rounded-full border border-white/10 bg-white/5 hover:bg-primary hover:border-primary transition-all duration-300 group">
+                    <i class="fa-brands ${s.i} text-gray-400 group-hover:text-white"></i>
+                </a>`;
         });
-      }
-
-      const projectsList = document.querySelector('#projects .project-list');
-      if(projectsList) {
-        config.projects.forEach(project => {
-          const projectItem = document.createElement('div');
-          projectItem.className = "project-card";
-          projectItem.setAttribute('data-aos', 'fade-up');
-          projectItem.setAttribute('data-aos-delay', project.aosDelay);
-          projectItem.innerHTML = `
-            <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400 mb-2">${project.name}</h3>
-            <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm leading-relaxed">${project.description}</p>
-            <a href="${project.url}" class="text-sm font-medium text-blue-500 dark:text-blue-300 hover:underline" target="_blank" rel="noopener noreferrer">View Details &rarr;</a>
-          `;
-          projectsList.appendChild(projectItem);
+
+        const projGrid = document.getElementById('projects-grid');
+        config.projects.forEach((p, i) => {
+            const img = config.assets.projects[i % 2];
+            projGrid.innerHTML += `
+                <a href="${p.url}" target="_blank" class="group relative block h-full rounded-xl overflow-hidden border border-white/10 bg-panel hover:border-primary/50 transition-all">
+                    <div class="aspect-video overflow-hidden">
+                        <img src="${img}" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-110">
+                    </div>
+                    <div class="p-8">
+                        <div class="flex justify-between items-center mb-4">
+                            <span class="text-[10px] font-mono text-primary bg-primary/10 px-2 py-1 rounded">${p.tag}</span>
+                            <i class="fa-solid fa-arrow-right -rotate-45 text-gray-500 group-hover:text-white group-hover:rotate-0 transition-transform"></i>
+                        </div>
+                        <h3 class="text-2xl font-display font-bold text-white mb-2">${p.name}</h3>
+                        <p class="text-sm text-gray-400 font-light">${p.desc}</p>
+                    </div>
+                </a>`;
         });
-      }
-      
-      const emailLink = document.getElementById('emailLink');
-      if(emailLink) {
-        emailLink.href = `mailto:${config.contactEmail}`;
-        emailLink.textContent = config.contactEmail;
-      }
-
-      const body = document.body;
-
-      function setTheme(isDark) {
-        body.classList.toggle('dark-mode', isDark);
-        body.classList.toggle('light-mode', !isDark);
-        localStorage.setItem('theme', isDark ? 'dark' : 'light');
-      }
-
-      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const savedTheme = "light"
-      // hardcoded cuz idk how to design it properly
-      setTheme(savedTheme === 'dark' || (!savedTheme && prefersDark));
-
-      const anilistQuery = `
-        query ($userId: Int, $page: Int, $perPage: Int) {
-          Page(page: $page, perPage: $perPage) {
-            activities(userId: $userId, type: TEXT, sort: ID_DESC) {
-              ... on TextActivity { id text createdAt siteUrl }
+
+        async function fetchAniList() {
+            const query = `
+                query ($userId: Int) {
+                    Activity: Page(perPage: 4) {
+                        activities(userId: $userId, type: TEXT, sort: ID_DESC) {
+                            ... on TextActivity { id text createdAt siteUrl }
+                        }
+                    }
+                    Media: Page(perPage: 4) {
+                        mediaList(userId: $userId, sort: UPDATED_TIME_DESC, status_in: [CURRENT, REPEATING]) {
+                            media { title { english romaji } coverImage { large } siteUrl format type }
+                            progress status
+                        }
+                    }
+                }
+            `;
+
+            try {
+                const res = await fetch("https://graphql.anilist.co", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json", "Accept": "application/json" },
+                    body: JSON.stringify({ query, variables: { userId: config.user.anilistId } })
+                });
+                
+                if(!res.ok) throw new Error("API Error");
+                const data = await res.json();
+                const act = data.data.Activity.activities;
+                const media = data.data.Media.mediaList;
+
+                const logEl = document.getElementById('activity-log');
+                logEl.innerHTML = "";
+                if(act.length) {
+                    act.forEach(a => {    const seconds = Math.floor((new Date() - new Date(a.createdAt * 1000)) / 1000);
+                        let interval = Math.floor(seconds / 31536000);
+                        let timeStr = interval + "y ago";
+                        if (interval < 1) {
+                            interval = Math.floor(seconds / 2592000);
+                            if (interval >= 1) timeStr = interval + "mo ago";
+                            else {
+                                interval = Math.floor(seconds / 86400);
+                                if (interval >= 1) timeStr = interval + "d ago";
+                                else {
+                                    interval = Math.floor(seconds / 3600);
+                                    if (interval >= 1) timeStr = interval + "h ago";
+                                    else timeStr = "Just now";
+                                }
+                            }
+                        }
+
+                        let txt = marked.parseInline(a.text || "");
+                        if(txt.length > 120) txt = txt.substring(0, 120) + "...";
+
+                        logEl.innerHTML += `
+                            <div class="mb-4 pl-3 border-l border-white/10 hover:border-primary transition-colors">
+                                <div class="flex justify-between text-[10px] text-gray-500 font-mono mb-1">
+                                    <span>ID::${a.id}</span>
+                                    <span>${timeStr}</span>
+                                </div>
+                                <a href="${a.siteUrl}" target="_blank" class="text-gray-300 hover:text-white block text-xs leading-relaxed">${txt}</a>
+                            </div>`;
+                    });
+                } else {
+                    logEl.innerHTML = `<div class="text-gray-600 text-xs">> No public logs found.</div>`;
+                }
+
+                const gridEl = document.getElementById('media-grid');
+                gridEl.innerHTML = "";
+                if(media.length) {
+                    media.forEach(m => {
+                        let title = m.media.title.english || m.media.title.romaji;
+                        if (title.length > 45) title = "***"
+                        const prog = m.progress ? `EP ${m.progress}` : 'Reading';
+                        gridEl.innerHTML += `
+                            <a href="${m.media.siteUrl}" target="_blank" class="flex gap-3 bg-[#0a0a0a] border border-white/5 p-3 rounded hover:border-primary/50 transition-all group">
+                                <div class="w-12 h-16 shrink-0 bg-gray-800 rounded overflow-hidden">
+                                    <img src="${m.media.coverImage.large}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
+                                </div>
+                                <div class="flex flex-col justify-center min-w-0">
+                                    <h4 class="text-white font-bold text-xs truncate group-hover:text-primary transition-colors mb-1">${title}</h4>
+                                    <div class="flex gap-2">
+                                        <span class="text-[9px] font-mono bg-white/5 px-1 rounded text-gray-400">${m.media.type}</span>
+                                        <span class="text-[9px] font-mono text-green-500">${prog}</span>
+                                    </div>
+                                </div>
+                            </a>`;
+                    });
+                } else {
+                    gridEl.innerHTML = `<div class="col-span-2 text-center text-gray-600 font-mono text-xs py-10">> SYSTEM IDLE</div>`;
+                }
+
+            } catch (e) {
+                console.error(e);
+                document.getElementById('activity-log').innerHTML = `<div class="text-red-500 text-xs">> CONNECTION FAILED</div>`;
             }
-          }
-        }`;
-      
-            const fetchLogsAndEntries = async (userId, page = 1, perPage = 5) => {
-  const blogContainer = document.getElementById("blogContainer");
-  const entryContainer = document.getElementById("entryAnilistContainer");
-  if (!blogContainer || !entryContainer) return;
-
-  blogContainer.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-4">Loading activities...</p>';
-  entryContainer.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-4">Loading entries...</p>';
-
-  const activitiesQuery = `
-    query ($userId: Int, $page: Int, $perPage: Int) {
-      Page(page: $page, perPage: $perPage) {
-        activities(userId: $userId, type: TEXT) {
-          ... on TextActivity {
-            id
-            text
-            createdAt
-            siteUrl
-          }
         }
-      }
-    }
-  `;
-
-  const entriesQuery = `
-    query ($userId: Int, $page: Int, $perPage: Int) {
-      Page(page: $page, perPage: $perPage) {
-        mediaList(userId: $userId, sort: UPDATED_TIME_DESC, status_in: [CURRENT, COMPLETED]) {
-          media {
-            title {
-              romaji
-              english
+        fetchAniList();
+
+        const canvas = document.getElementById('particle-canvas');
+        const ctx = canvas.getContext('2d');
+        let w, h;
+        let mouse = { x: undefined, y: undefined };
+        const particles = [];
+
+        function initCanvas() {
+            w = canvas.width = window.innerWidth;
+            h = canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', initCanvas);
+        initCanvas();
+
+        window.addEventListener('mousemove', (e) => {
+            mouse.x = e.x;
+            mouse.y = e.y;
+        });
+
+        class Particle {
+            constructor() {
+                this.x = Math.random() * w;
+                this.y = Math.random() * h;
+                this.vx = (Math.random() - 0.5) * 0.5;
+                this.vy = (Math.random() - 0.5) * 0.5;
+                this.size = Math.random() * 1.5;
             }
-            coverImage {
-              large
+            update() {
+                this.x += this.vx;
+                this.y += this.vy;
+                if (this.x < 0 || this.x > w) this.vx *= -1;
+                if (this.y < 0 || this.y > h) this.vy *= -1;
+            }
+            draw() {
+                ctx.fillStyle = 'rgba(99, 102, 241, 0.5)';
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
             }
-            siteUrl
-            format
-            type
-          }
-          progress
-          updatedAt
-          status
-        }
-      }
-    }
-  `;
-
-  try {
-    const [activitiesRes, entriesRes] = await Promise.all([
-      fetch("https://graphql.anilist.co", {
-        method: "POST",
-        headers: { "Content-Type": "application/json", Accept: "application/json" },
-        body: JSON.stringify({ query: activitiesQuery, variables: { userId, page, perPage } }),
-      }),
-      fetch("https://graphql.anilist.co", {
-        method: "POST",
-        headers: { "Content-Type": "application/json", Accept: "application/json" },
-        body: JSON.stringify({ query: entriesQuery, variables: { userId, page, perPage } }),
-      }),
-    ]);
-
-    const activitiesData = await activitiesRes.json();
-    const entriesData = await entriesRes.json();
-
-    // --- Render Activity Logs ---
-    const activities = activitiesData?.data?.Page?.activities || [];
-    if (activities.length > 0) {
-      blogContainer.innerHTML = "";
-      activities.forEach((activity, index) => {
-        let titleText = activity.text?.trim() || "View Activity";
-        const firstNewLine = titleText.indexOf("\n");
-        if (firstNewLine > 0 && firstNewLine < 70) {
-          titleText = titleText.substring(0, firstNewLine).trim();
-        } else if (titleText.length > 70) {
-          titleText = titleText.substring(0, 70).trim() + "...";
         }
-        if (titleText.startsWith(">")) titleText = titleText.substring(1).trim();
-
-        const article = document.createElement("article");
-        article.className = "blog-card";
-        article.setAttribute("data-aos", "fade-up");
-        article.setAttribute("data-aos-delay", index * 100);
-// Fix
-
-        /*const markdownHtml = marked.parse(
-  (activity.text || "").replace(/\S{19,}/g, w => w.slice(0, 18) + "..."),
-  { breaks: true }
-);*/
-        const truncateLongWords = text =>
-  text.replace(/(?!https?:\/\/|www\.)\b(?![^<]*>)(\S{19,})\b/g, w => w.slice(0, 18) + "...");
-
-const markdownHtml = marked.parse(truncateLongWords(activity.text || ""), { breaks: true });
-
-        article.innerHTML = `
-          <h3 class="fancy-text text-lg md:text-xl font-semibold text-blue-600 dark:text-blue-400 mb-1">
-            <a href="${activity.siteUrl}" target="_blank" rel="noopener noreferrer" class="hover:underline">${titleText}</a>
-          </h3>
-          <p class="text-xs text-muted dark:text-gray-500 mb-2">Posted: ${new Date(activity.createdAt * 1000).toLocaleDateString()}</p>
-          <div class="prose prose-sm dark:prose-invert max-w-none">${markdownHtml}</div>
-          <a href="${activity.siteUrl}" class="text-blue-500 dark:text-blue-300 hover:underline text-sm mt-3 inline-block font-medium" target="_blank" rel="noopener noreferrer">Read More &rarr;</a>
-        `;
-
-        blogContainer.appendChild(article);
-      });
-    } else {
-      blogContainer.innerHTML = `<p class="text-center text-red-500 dark:text-red-400 py-4">No recent text activities found on AniList.</p>`;
-    }
-
-   
-   // --- Render Recent Entries ---
-    const entries = entriesData?.data?.Page?.mediaList || [];
-    if (entries.length > 0) {
-      entryContainer.innerHTML = "";
-      entries.forEach((entry, index) => {
-        const media = entry.media;
-        const title = media.title.english || media.title.romaji || "Untitled";
-        const typeLabel = media.type === "ANIME" ? "Episode" : "Chapter";
-
-        const card = document.createElement("article");
-        card.className = "entry-card flex gap-4";
-        card.setAttribute("data-aos", "fade-up");
-        card.setAttribute("data-aos-delay", index * 100);
-
-        card.innerHTML = `
-          <img src="${media.coverImage.large}" alt="${title}" class="w-20 h-28 object-cover rounded-lg shadow-md" loading="lazy">
-          <div>
-            <h4 class="text-lg font-semibold text-blue-600 dark:text-blue-400">${title}</h4>
-            <p class="text-sm text-muted dark:text-gray-400">${typeLabel} Progress: ${entry.progress}</p>
-            <p class="text-xs text-gray-500 dark:text-gray-500 mb-1">Updated: ${new Date(entry.updatedAt * 1000).toLocaleDateString()}</p>
-            <a href="${media.siteUrl}" target="_blank" rel="noopener noreferrer" class="text-sm text-blue-500 dark:text-blue-300 hover:underline">View on AniList →</a>
-          </div>
-        `;
-
-        entryContainer.appendChild(card);
-      });
-    } else {
-      entryContainer.innerHTML = `<p class="text-center text-red-500 dark:text-red-400 py-4">No recent entries found.</p>`;
-    }
-    
 
-  } catch (error) {
-    blogContainer.innerHTML = `<p class="text-center text-red-500 dark:text-red-400 py-4">Failed to load activities.</p>`;
-    entryContainer.innerHTML = `<p class="text-center text-red-500 dark:text-red-400 py-4">Failed to load entries.</p>`;
-  } finally {
-    if (!document.body.dataset.loaded) {
-      $('#loading-overlay').fadeOut(800, function () {
-        $(this).remove();
-        $('#siteContent').fadeIn(800, function () { AOS.refresh(); });
-      });
-      document.body.dataset.loaded = true;
-    }
-  }
-};
-
-fetchLogsAndEntries(config.anilistUserId);
-
-      gsap.from("header", { duration: 0.8, y: -80, opacity: 0, ease: "power2.out", delay: 0.2 });
-
-      const mobileMenuButton = document.getElementById('mobile-menu-button');
-      const mobileMenu = document.getElementById('mobile-menu');
-      const menuOpenIcon = document.getElementById('menu-open-icon');
-      const menuCloseIcon = document.getElementById('menu-close-icon');
-
-      if (mobileMenuButton && mobileMenu && menuOpenIcon && menuCloseIcon) {
-        mobileMenuButton.addEventListener('click', () => {
-          const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false;
-          mobileMenuButton.setAttribute('aria-expanded', !expanded);
-          mobileMenu.classList.toggle('hidden');
-          gsap.fromTo(mobileMenu, { opacity:0, y: -20 }, { opacity:1, y:0, duration: 0.3, ease:'power2.out' });
-          menuOpenIcon.classList.toggle('hidden');
-          menuOpenIcon.classList.toggle('block');
-          menuCloseIcon.classList.toggle('hidden');
-          menuCloseIcon.classList.toggle('block');
-        });
-        mobileMenu.querySelectorAll('a').forEach(link => {
-            link.addEventListener('click', () => {
-                mobileMenuButton.setAttribute('aria-expanded', 'false');
-                gsap.to(mobileMenu, { opacity:0, y:-20, duration: 0.2, onComplete: () => mobileMenu.classList.add('hidden') });
-                menuOpenIcon.classList.remove('hidden');
-                menuOpenIcon.classList.add('block');
-                menuCloseIcon.classList.add('hidden');
-                menuCloseIcon.classList.remove('block');
+        for (let i = 0; i < 60; i++) particles.push(new Particle());
+
+        function animate() {
+            ctx.clearRect(0, 0, w, h);
+            
+            particles.forEach(p => {
+                p.update();
+                p.draw();
+                
+                particles.forEach(p2 => {
+                    const dx = p.x - p2.x;
+                    const dy = p.y - p2.y;
+                    const dist = Math.sqrt(dx*dx + dy*dy);
+                    if (dist < 100) {
+                        ctx.strokeStyle = `rgba(255, 255, 255, ${0.05 - dist/2000})`;
+                        ctx.lineWidth = 0.5;
+                        ctx.beginPath();
+                        ctx.moveTo(p.x, p.y);
+                        ctx.lineTo(p2.x, p2.y);
+                        ctx.stroke();
+                    }
+                });
+
+                if(mouse.x) {
+                    const dx = p.x - mouse.x;
+                    const dy = p.y - mouse.y;
+                    const dist = Math.sqrt(dx*dx + dy*dy);
+                    if (dist < 150) {
+                        ctx.strokeStyle = `rgba(99, 102, 241, ${0.2 - dist/750})`;
+                        ctx.lineWidth = 1;
+                        ctx.beginPath();
+                        ctx.moveTo(p.x, p.y);
+                        ctx.lineTo(mouse.x, mouse.y);
+                        ctx.stroke();
+                    }
+                }
             });
+            requestAnimationFrame(animate);
+        }
+        animate();
+        
+     function copyEmail() {
+            navigator.clipboard.writeText("mdjsusbinsus@gmail.com");
+            const btn = document.getElementById('email-text');
+            const old = btn.innerText;
+            btn.innerText = "COPIED!";
+            btn.classList.add("text-primary");
+            setTimeout(() => {
+                btn.innerText = old;
+                btn.classList.remove("text-primary");
+            }, 2000);
+        }
+
+        const menuBtn = document.getElementById('menu-btn');
+        const mobMenu = document.getElementById('mobile-menu');
+        let isOpen = false;
+        menuBtn.addEventListener('click', () => {
+            isOpen = !isOpen;
+            mobMenu.style.opacity = isOpen ? '1' : '0';
+            mobMenu.style.pointerEvents = isOpen ? 'auto' : 'none';
+            menuBtn.innerHTML = isOpen ? '<i class="fa-solid fa-xmark"></i>' : '<i class="fa-solid fa-bars-staggered"></i>';
         });
-      }
-    });
-  </script>
+        document.querySelectorAll('.nav-link').forEach(l => l.addEventListener('click', () => {
+            isOpen = false;
+            mobMenu.style.opacity = '0';
+            mobMenu.style.pointerEvents = 'none';
+            menuBtn.innerHTML = '<i class="fa-solid fa-bars-staggered"></i>';
+        }));
+
+    </script>
 </body>
 </html>
-
