{"id":164,"date":"2026-02-12T07:19:30","date_gmt":"2026-02-12T07:19:30","guid":{"rendered":"https:\/\/nafiz.ami.bd\/?page_id=164"},"modified":"2026-02-12T23:30:18","modified_gmt":"2026-02-12T17:30:18","slug":"home-2","status":"publish","type":"page","link":"https:\/\/nafiz.ami.bd\/","title":{"rendered":"Home 2"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Mashariar Rahman | Tech Explorer<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700;900&family=Fira+Code:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --emerald-primary: #10b981;\r\n --emerald-dark: #064e3b;\r\n }\r\n body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; overflow-x: hidden; font-size: 13px; }\r\n .font-serif { font-family: 'Playfair Display', serif; }\r\n .font-mono { font-family: 'Fira Code', monospace; }\r\n .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); }\r\n .glass-dark { background: rgba(6, 78, 59, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); }\r\n .tech-grid {\r\n background-image: \r\n linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);\r\n background-size: 25px 25px;\r\n }\r\n .glow-emerald { box-shadow: 0 0 15px rgba(16, 185, 129, 0.15); }\r\n @keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }\r\n .animate-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }\r\n @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }\r\n .animate-float { animation: float 4s ease-in-out infinite; }\r\n .custom-scrollbar::-webkit-scrollbar { width: 4px; }\r\n .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }\r\n .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--emerald-primary); border-radius: 10px; }\r\n .page-section { display: none; }\r\n .page-section.active { display: block; }\r\n .modal { display: none; position: fixed; inset: 0; z-index: 100; background: white; overflow-y: auto; }\r\n .modal.active { display: block; }\r\n \r\n .section-padding { padding-top: 4rem; padding-bottom: 4rem; }\r\n h1 { font-size: 3.5rem; line-height: 1; }\r\n h2 { font-size: 0.7rem; }\r\n h3 { font-size: 2rem; }\r\n p { font-size: 0.85rem; line-height: 1.5; }\r\n .btn-compact { padding: 0.6rem 1.4rem; font-size: 0.8rem; }\r\n \r\n @media (min-width: 768px) {\r\n h1 { font-size: 4.5rem; }\r\n }\r\n \r\n .skill-tag { \r\n background: white; \r\n border: 1px solid #e2e8f0; \r\n padding: 4px 10px; \r\n border-radius: 8px; \r\n font-size: 10px; \r\n font-weight: 700;\r\n color: #334155;\r\n transition: all 0.3s;\r\n }\r\n .skill-tag:hover { border-color: var(--emerald-primary); color: var(--emerald-primary); transform: translateY(-2px); }\r\n \r\n \/* Project Detail Specific Styles *\/\r\n .metric-card {\r\n background: #f8fafc;\r\n border: 1px solid #e2e8f0;\r\n padding: 1rem;\r\n border-radius: 1.25rem;\r\n text-align: center;\r\n }\r\n .step-node {\r\n position: relative;\r\n padding-left: 2.5rem;\r\n padding-bottom: 2rem;\r\n }\r\n .step-node::before {\r\n content: '';\r\n position: absolute;\r\n left: 0.6rem;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background: #e2e8f0;\r\n }\r\n .step-node:last-child::before { display: none; }\r\n .step-circle {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n border-radius: 50%;\r\n background: var(--emerald-primary);\r\n border: 4px solid white;\r\n box-shadow: 0 0 0 1px #e2e8f0;\r\n }\r\n <\/style>\r\n <script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"@google\/genai\": \"https:\/\/esm.sh\/@google\/genai@^1.41.0\",\r\n \"react\": \"https:\/\/esm.sh\/react@^19.2.4\",\r\n \"react\/\": \"https:\/\/esm.sh\/react@^19.2.4\/\"\r\n }\r\n}\r\n<\/script>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-900 custom-scrollbar tech-grid\">\r\n\r\n <!-- Navigation -->\r\n <nav id=\"navbar\" class=\"fixed w-full z-50 transition-all duration-300 py-3\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between items-center\">\r\n <div class=\"flex-shrink-0 cursor-pointer\" onclick=\"navigateTo('home')\">\r\n <span class=\"text-xl font-serif font-bold text-emerald-900\">\r\n Mashariar<span class=\"text-emerald-500\">.<\/span>\r\n <\/span>\r\n <\/div>\r\n <div class=\"hidden md:block\">\r\n <div class=\"flex items-center space-x-6\">\r\n <button onclick=\"navigateTo('home')\" class=\"nav-btn text-[12px] font-semibold text-emerald-600\" data-page=\"home\">Home<\/button>\r\n <button onclick=\"navigateTo('about')\" class=\"nav-btn text-[12px] font-semibold text-slate-600 hover:text-emerald-600\" data-page=\"about\">About<\/button>\r\n <button onclick=\"navigateTo('projects')\" class=\"nav-btn text-[12px] font-semibold text-slate-600 hover:text-emerald-600\" data-page=\"projects\">Projects<\/button>\r\n <button onclick=\"navigateTo('contact')\" class=\"nav-btn text-[12px] font-semibold text-slate-600 hover:text-emerald-600\" data-page=\"contact\">Contact<\/button>\r\n <a href=\"https:\/\/www.facebook.com\/mashariar.rahman\" target=\"_blank\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-1.5 rounded-full text-[11px] font-bold transition-all shadow-md\">Follow Me<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"md:hidden\">\r\n <button onclick=\"toggleMobileMenu()\" class=\"text-slate-700\"><i class=\"fas fa-bars text-lg\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"mobile-menu\" class=\"hidden md:hidden glass absolute w-full shadow-lg p-4 animate-fade-in-up\">\r\n <button onclick=\"navigateTo('home')\" class=\"w-full text-left block py-3 text-sm font-medium\">Home<\/button>\r\n <button onclick=\"navigateTo('about')\" class=\"w-full text-left block py-3 text-sm font-medium\">About<\/button>\r\n <button onclick=\"navigateTo('projects')\" class=\"w-full text-left block py-3 text-sm font-medium\">Projects<\/button>\r\n <button onclick=\"navigateTo('contact')\" class=\"w-full text-left block py-3 text-sm font-medium\">Contact<\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- HOME PAGE -->\r\n <main id=\"home-page\" class=\"page-section active animate-fade-in-up\">\r\n <!-- Hero -->\r\n <section class=\"relative min-h-[80vh] flex items-center pt-16 overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div>\r\n <div class=\"flex items-center space-x-2 mb-4 bg-emerald-100\/50 w-fit px-3 py-1 rounded-full border border-emerald-200\">\r\n <span class=\"relative flex h-1.5 w-1.5\"><span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75\"><\/span><span class=\"relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500\"><\/span><\/span>\r\n <span class=\"text-emerald-700 font-black uppercase tracking-[0.2em] text-[7px]\">IoT \/ AI \/ Networking Explorer<\/span>\r\n <\/div>\r\n <h1 class=\"font-serif text-slate-900 mb-4 font-black leading-tight\">Mashariar <br\/> <span class=\"text-emerald-600 italic\">Rahman<\/span><\/h1>\r\n <p class=\"text-slate-600 mb-8 max-w-sm font-medium\">A Grade 10 science student from <strong>Chandpur, Bangladesh<\/strong> passionate about building real-world solutions by combining high-performance hardware with intelligent AI systems.\r\n<\/p>\r\n <div class=\"flex flex-wrap gap-3\">\r\n <button onclick=\"navigateTo('projects')\" class=\"btn-compact bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-black transition-all flex items-center glow-emerald\">EXPLORE PROJECTS <i class=\"fas fa-arrow-right ml-2 text-[10px]\"><\/i><\/button>\r\n <a href=\"mailto:mashariarrahman@gmail.com\" class=\"btn-compact bg-white border border-emerald-100 text-emerald-900 rounded-xl font-black hover:bg-emerald-50 transition-all\">CONNECT<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hidden md:flex justify-center relative\">\r\n <div class=\"relative\">\r\n <div class=\"absolute -top-3 -left-3 z-20 glass-dark p-3 rounded-lg shadow-xl animate-float\"><p class=\"text-[7px] text-white\/50 uppercase font-bold tracking-widest\">Live Node<\/p><p class=\"text-white font-mono text-[9px]\">Agro_Guard_v11.5.py<\/p><\/div>\r\n <div class=\"absolute inset-0 bg-emerald-600 rounded-[2rem] transform rotate-3 scale-95 opacity-20\"><\/div>\r\n <div class=\"relative z-10 overflow-hidden rounded-[2.5rem] shadow-2xl border-[6px] border-white\/90\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550745165-9bc0b252726f?q=80&w=350&h=450&auto=format&fit=crop\" class=\"w-full max-w-xs grayscale-[5%] hover:grayscale-0 transition-all duration-700\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Project Highlight -->\r\n <section class=\"section-padding max-w-7xl mx-auto px-4\">\r\n <div class=\"flex justify-between items-end mb-8\">\r\n <div>\r\n <h2 class=\"text-emerald-600 font-black uppercase tracking-[0.4em] mb-1\">Elite Projects<\/h2>\r\n <h3 class=\"font-serif text-slate-900\">Featured Innovation<\/h3>\r\n <\/div>\r\n <button onclick=\"navigateTo('projects')\" class=\"text-emerald-600 text-[10px] font-bold flex items-center hover:translate-x-1 transition-transform\">VIEW REPOS <i class=\"fas fa-arrow-right ml-2 text-[8px]\"><\/i><\/button>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-5\">\r\n <div onclick=\"openModal(1)\" class=\"lg:col-span-8 group relative bg-emerald-950 rounded-[2rem] overflow-hidden shadow-xl cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1560493676-04071c5f467b?q=80&w=1000&h=500&auto=format&fit=crop\" class=\"absolute inset-0 w-full h-full object-cover opacity-20 group-hover:scale-105 transition-transform duration-1000\">\r\n <div class=\"relative z-10 p-8 flex flex-col justify-end min-h-[350px] text-white\">\r\n <div class=\"flex gap-2 mb-3\">\r\n <span class=\"bg-emerald-500 text-[7px] font-black px-2 py-0.5 rounded-full uppercase\">Stable v11.5<\/span>\r\n <span class=\"bg-white\/10 text-[7px] font-black px-2 py-0.5 rounded-full uppercase\">AI Integrated<\/span>\r\n <\/div>\r\n <h class=\"text-3xl font-serif mb-2\">Smart AI Agro Guard<\/h>\r\n <p class=\"max-w-md text-emerald-100\/70 text-[12px] mb-5\">An intelligent IoT-powered agricultural monitoring system that combines ESP32 sensor networks with AI-driven soil analysis for data-backed farming decisions.\r\n<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-6 h-6 rounded-lg bg-emerald-500\/20 flex items-center justify-center border border-emerald-500\/50\"><i class=\"fas fa-microchip text-emerald-400 text-[10px]\"><\/i><\/div>\r\n <span class=\"text-[8px] font-bold uppercase tracking-widest text-emerald-300\">ESP32<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-6 h-6 rounded-lg bg-emerald-500\/20 flex items-center justify-center border border-emerald-500\/50\"><i class=\"fas fa-brain text-emerald-400 text-[10px]\"><\/i><\/div>\r\n <span class=\"text-[8px] font-bold uppercase tracking-widest text-emerald-300\">Gemini<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lg:col-span-4 grid grid-cols-1 gap-5\">\r\n <div onclick=\"openModal(2)\" class=\"group p-5 bg-white border border-slate-100 rounded-2xl hover:border-emerald-200 transition-all cursor-pointer shadow-sm\">\r\n <div class=\"w-8 h-8 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center mb-3\"><i class=\"fas fa-server text-sm\"><\/i><\/div>\r\n <h5 class=\"text-base font-serif mb-1 group-hover:text-emerald-600\">NovaStream<\/h5>\r\n <p class=\"text-[10px] text-slate-500 line-clamp-2\">NovaStream is a private, high-performance media streaming architecture designed to transform local media storage into a secure, Netflix-grade streaming experience. Built with modern web technologies and optimized delivery pipelines, it prioritizes speed, privacy, and scalability.\r\n<\/p>\r\n <\/div>\r\n <div onclick=\"openModal(3)\" class=\"group p-5 bg-white border border-slate-100 rounded-2xl hover:border-emerald-200 transition-all cursor-pointer shadow-sm\">\r\n <div class=\"w-8 h-8 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center mb-3\"><i class=\"fas fa-tv text-sm\"><\/i><\/div>\r\n <h5 class=\"text-base font-serif mb-1 group-hover:text-emerald-600\">Anime CMS<\/h5>\r\n <p class=\"text-[10px] text-slate-500 line-clamp-2\">Anime Fan Central CMS is a performance-optimized community platform designed for high-resolution media delivery. By leveraging Redis caching and CDN-based asset distribution, it ensures fast load times and a smooth browsing experience for anime enthusiasts.\r\n<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <!-- ABOUT PAGE -->\r\n<main id=\"about-page\" class=\"page-section pt-24 pb-16 animate-fade-in-up\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10\">\r\n <div class=\"lg:col-span-7 space-y-8\">\r\n <div>\r\n <h2 class=\"text-emerald-600 font-black uppercase tracking-[0.4em] mb-2\">Technical Persona<\/h2>\r\n <h3 class=\"font-serif text-slate-900 mb-6 leading-tight\">Decoding Life through <span class=\"text-emerald-600 italic\">Code & Hardware.<\/span><\/h3>\r\n \r\n <div class=\"text-slate-600 space-y-4 text-[13px] font-medium leading-relaxed\">\r\n<p>\r\n My name is <strong>Mashariar Rahman Nafiz<\/strong>, a <strong>science student<\/strong> currently studying at\r\n <strong>secondary level<\/strong> in <strong>Hajiganj, Chandpur<\/strong>.\r\n From an early age, I\u2019ve been deeply curious about how <strong>technology works beneath the surface<\/strong> \u2014\r\n not just <strong>using systems<\/strong>, but <strong>understanding their internal logic<\/strong>.\r\n<\/p>\r\n\r\n<p>\r\n My core interests lie in the intersection of\r\n <strong>Internet of Things (IoT)<\/strong> and\r\n <strong>Artificial Intelligence (AI)<\/strong>.\r\n I strongly believe that <strong>real innovation<\/strong> happens when\r\n <strong>software intelligence meets physical hardware<\/strong>.\r\n This philosophy drives my projects, including\r\n <strong>Smart AI Agro Guard<\/strong>, an\r\n <strong>intelligent agricultural system<\/strong> that analyzes\r\n <strong>real-time soil data<\/strong> and delivers\r\n <strong>expert-level insights<\/strong> to farmers using AI.\r\n<\/p>\r\n\r\n<p>\r\n Beyond academics, I actively explore\r\n <strong>Linux ecosystems<\/strong> such as\r\n <strong>Arch Linux<\/strong> and <strong>Linux Mint<\/strong>.\r\n I also enjoy <strong>managing game servers<\/strong>,\r\n experimenting with <strong>3D rendering in Blender<\/strong>,\r\n and designing visual assets using <strong>Photoshop<\/strong>.\r\n These <strong>hands-on experiences<\/strong> continuously sharpen my\r\n <strong>technical<\/strong> and <strong>creative problem-solving skills<\/strong>.\r\n<\/p>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div class=\"p-5 bg-white rounded-2xl border border-slate-100 shadow-sm\">\r\n <h4 class=\"font-serif text-slate-900 mb-3 flex items-center text-sm\"><i class=\"fas fa-terminal text-emerald-600 mr-2\"><\/i> OS & Environment<\/h4>\r\n <div class=\"flex flex-wrap gap-1.5\">\r\n <span class=\"skill-tag\">Windows 11<\/span>\r\n <span class=\"skill-tag\">Opera GX<\/span>\r\n <span class=\"skill-tag\">VS Code<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-5 bg-white rounded-2xl border border-slate-100 shadow-sm\">\r\n <h4 class=\"font-serif text-slate-900 mb-3 flex items-center text-sm\"><i class=\"fas fa-bolt text-emerald-600 mr-2\"><\/i> Specialized In<\/h4>\r\n <div class=\"flex flex-wrap gap-1.5\">\r\n <span class=\"skill-tag\">Premiere Pro<\/span>\r\n <span class=\"skill-tag\">WordPress<\/span>\r\n <span class=\"skill-tag\">Photoshop<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lg:col-span-5\">\r\n <br>\r\n <br>\r\n <br>\r\n <div class=\"bg-emerald-950 rounded-3xl p-8 text-white shadow-xl relative overflow-hidden group\">\r\n <div class=\"absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity\">\r\n <i class=\"fas fa-code text-9xl\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-2xl font-serif mb-2\">Mashariar Rahman<\/h4>\r\n <p class=\"text-[10px] text-emerald-400 uppercase tracking-[0.3em] font-black mb-6\">Secondary School | Science Stream<\/p>\r\n \r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-8 h-8 rounded-full bg-emerald-500\/20 flex items-center justify-center border border-emerald-500\/30\">\r\n <i class=\"fas fa-map-marker-alt text-xs text-emerald-400\"><\/i>\r\n <\/div>\r\n <p class=\"text-xs text-emerald-100\/80\">Chandpur, Bangladesh<\/p>\r\n <\/div>\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-8 h-8 rounded-full bg-emerald-500\/20 flex items-center justify-center border border-emerald-500\/30\">\r\n <i class=\"fas fa-envelope text-xs text-emerald-400\"><\/i>\r\n <\/div>\r\n <p class=\"text-xs text-emerald-100\/80\">mashariarrahman@mail.com<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-8 pt-6 border-t border-white\/10\">\r\n <p class=\"text-[11px] italic text-emerald-200\/60 leading-relaxed\">\r\n \"\u09aa\u09cd\u09b0\u09af\u09c1\u0995\u09cd\u09a4\u09bf\u09b0 \u09ae\u09be\u09a7\u09cd\u09af\u09ae\u09c7 \u09a8\u09a4\u09c1\u09a8 \u0995\u09bf\u099b\u09c1 \u09b8\u09c3\u09b7\u09cd\u099f\u09bf \u0995\u09b0\u09be\u0987 \u0986\u09ae\u09be\u09b0 \u09b2\u0995\u09cd\u09b7\u09cd\u09af\u0964\"\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/main>\r\n\r\n <!-- PROJECTS PAGE -->\r\n <main id=\"projects-page\" class=\"page-section pt-24 pb-16 animate-fade-in-up\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"mb-12 text-center\">\r\n <h2 class=\"text-emerald-600 font-black uppercase tracking-[0.4em] mb-3\">Project Lab Archive<\/h2>\r\n <h3 class=\"font-serif text-slate-900 mb-3\">Engineering Showcase<\/h3>\r\n <\/div>\r\n <div id=\"projects-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"><\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- CONTACT PAGE -->\r\n <main id=\"contact-page\" class=\"page-section pt-24 pb-16 animate-fade-in-up\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 items-start\">\r\n \r\n <div class=\"lg:col-span-5 space-y-8\">\r\n <div>\r\n <h2 class=\"text-emerald-600 font-black uppercase tracking-[0.4em] mb-3\">Let\u2019s Build Something Meaningful<\/h2>\r\n <h3 class=\"text-4xl font-serif text-slate-900 mb-6 leading-tight\">\u09a8\u09a4\u09c1\u09a8 \u0995\u09cb\u09a8\u09cb \u0986\u0987\u09a1\u09bf\u09af\u09bc\u09be \u09a5\u09be\u0995\u09b2\u09c7 <span class=\"text-emerald-600\">\u09a8\u09bf\u09b0\u09cd\u09a6\u09cd\u09ac\u09bf\u09a7\u09be\u09af\u09bc \u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u0995\u09b0\u09cb\u0964<\/span><\/h3>\r\n <p class=\"text-slate-600 text-sm font-medium\">I\u2019m always open to discussing new ideas, collaborations, or technical challenges \u2014 especially related to IoT, AI, Linux, or system architecture.\r\n<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-100 shadow-sm\">\r\n <div class=\"w-10 h-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center\">\r\n <i class=\"fas fa-map-marker-alt\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"text-[10px] uppercase font-black text-slate-400 tracking-widest\">Location<\/p>\r\n <p class=\"text-sm font-bold text-slate-800\">Hajigonj, Chandpur, Bangladesh<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"mailto:hello@shariar.me\" class=\"flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-100 shadow-sm hover:border-emerald-200 transition-all group\">\r\n <div class=\"w-10 h-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center group-hover:bg-emerald-600 group-hover:text-white transition-colors\">\r\n <i class=\"fas fa-envelope\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"text-[10px] uppercase font-black text-slate-400 tracking-widest\">Email<\/p>\r\n <p class=\"text-sm font-bold text-slate-800\">mashariarrahman@gmail.com<\/p>\r\n <\/div>\r\n <\/a>\r\n\r\n <div class=\"flex gap-3 pt-4\">\r\n <a href=\"https:\/\/www.facebook.com\/mashariar.rahman\" target=\"_blank\" class=\"w-12 h-12 bg-slate-900 text-white rounded-2xl flex items-center justify-center hover:bg-emerald-600 hover:-translate-y-1 transition-all\">\r\n <i class=\"fab fa-facebook-f\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-12 h-12 bg-slate-900 text-white rounded-2xl flex items-center justify-center hover:bg-emerald-600 hover:-translate-y-1 transition-all\">\r\n <i class=\"fab fa-github\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-12 h-12 bg-slate-900 text-white rounded-2xl flex items-center justify-center hover:bg-emerald-600 hover:-translate-y-1 transition-all\">\r\n <i class=\"fab fa-discord\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lg:col-span-7\">\r\n <div class=\"glass p-8 rounded-[2.5rem] shadow-xl border border-white\/50 relative overflow-hidden\">\r\n <div class=\"absolute -top-10 -right-10 w-40 h-40 bg-emerald-100 rounded-full blur-3xl opacity-50\"><\/div>\r\n \r\n <form class=\"relative z-10 space-y-5\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div class=\"space-y-2\">\r\n <label class=\"text-[10px] font-black uppercase text-slate-400 ml-2\">Your Name<\/label>\r\n <input type=\"text\" placeholder=\"Nafiz Rahman\" class=\"w-full px-5 py-3 rounded-xl bg-slate-50 border border-slate-100 focus:border-emerald-500 outline-none text-xs font-medium transition-all\">\r\n <\/div>\r\n <div class=\"space-y-2\">\r\n <label class=\"text-[10px] font-black uppercase text-slate-400 ml-2\">Email Address<\/label>\r\n <input type=\"email\" placeholder=\"example@mail.com\" class=\"w-full px-5 py-3 rounded-xl bg-slate-50 border border-slate-100 focus:border-emerald-500 outline-none text-xs font-medium transition-all\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-2\">\r\n <label class=\"text-[10px] font-black uppercase text-slate-400 ml-2\">Subject<\/label>\r\n <input type=\"text\" placeholder=\"IoT Project Collaboration\" class=\"w-full px-5 py-3 rounded-xl bg-slate-50 border border-slate-100 focus:border-emerald-500 outline-none text-xs font-medium transition-all\">\r\n <\/div>\r\n <div class=\"space-y-2\">\r\n <label class=\"text-[10px] font-black uppercase text-slate-400 ml-2\">Message<\/label>\r\n <textarea rows=\"4\" placeholder=\"How can I help you?\" class=\"w-full px-5 py-3 rounded-xl bg-slate-50 border border-slate-100 focus:border-emerald-500 outline-none text-xs font-medium transition-all resize-none\"><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"w-full py-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-[11px] font-black uppercase tracking-widest transition-all shadow-lg flex items-center justify-center gap-2\">\r\n Send Message <i class=\"fas fa-paper-plane\"><\/i>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/main>\r\n\r\n <!-- Project Detail Modal -->\r\n <div id=\"project-modal\" class=\"modal custom-scrollbar\">\r\n <button onclick=\"closeModal()\" class=\"fixed top-6 right-6 z-[110] bg-emerald-900 text-white w-10 h-10 rounded-full flex items-center justify-center hover:scale-110 transition-transform\"><i class=\"fas fa-times text-xs\"><\/i><\/button>\r\n <div id=\"modal-content\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\"><\/div>\r\n <\/div>\r\n\r\n <footer class=\"py-12 bg-slate-950 text-white border-t border-white\/5 text-center\">\r\n <p class=\"text-[10px] text-slate-500 uppercase font-black tracking-widest\">© 2026 Mashariar Rahman \u2014 Built with curiosity, code, and creativity.<\/p>\r\n <\/footer>\r\n\r\n <script type=\"module\">\r\n import { GoogleGenAI } from \"@google\/genai\";\r\n const ai = new GoogleGenAI({ apiKey: 'API_KEY_PLACEHOLDER' });\r\n\r\n const projects = [\r\n {\r\n id: 1,\r\n title: \"Smart AI Agro Guard (v11.5)\",\r\n subtitle: \"IoT & AI Based Agricultural Support System\",\r\n description: \"Smart AI Agro Guard is an advanced IoT and AI-powered agricultural assistance system designed to analyze real-time soil and environmental data. By leveraging intelligent sensor networks and AI models, the system delivers actionable insights similar to a professional agronomist.<br>The platform helps farmers make informed decisions regarding irrigation, nutrient management, and crop health \u2014 reducing guesswork and improving yield efficiency.\",\r\n tags: [\"IoT\", \"AI\", \"Arduino\", \"Python\"],\r\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1560493676-04071c5f467b?q=80&w=1200&h=600&auto=format&fit=crop\",\r\n vision: \"\u09ac\u09be\u0982\u09b2\u09be\u09a6\u09c7\u09b6\u09c7\u09b0 \u0995\u09c3\u09b7\u09bf\u0995\u09c7 \u09b8\u09cd\u09ae\u09be\u09b0\u09cd\u099f \u0993 \u09aa\u09cd\u09b0\u09af\u09c1\u0995\u09cd\u09a4\u09bf\u09a8\u09bf\u09b0\u09cd\u09ad\u09b0 \u0995\u09b0\u09be\u0987 \u098f\u0987 \u09aa\u09cd\u09b0\u0995\u09b2\u09cd\u09aa\u09c7\u09b0 \u09ae\u09c2\u09b2 \u09b2\u0995\u09cd\u09b7\u09cd\u09af\u0964\",\r\n metrics: [\r\n { label: \"Accuracy\", value: \"98.5%\", icon: \"fa-bullseye\" },\r\n { label: \"Sensors\", value: \"5 Units\", icon: \"fa-microchip\" },\r\n { label: \"Latency\", value: \"< 2s\", icon: \"fa-bolt\" },\r\n { label: \"AI Model\", value: \"Gemini 3 Pro\", icon: \"fa-brain\" }\r\n ],\r\n hardwareList: [\r\n { name: \"ESP32 Controller\", type: \"Core Brain\", icon: \"fa-cpu\" },\r\n { name: \"Soil Moisture Sensor\", type: \"Capacitive\", icon: \"fa-droplet\" },\r\n { name: \"DHT22 Sensor\", type: \"Temp & Humidity\", icon: \"fa-temperature-half\" },\r\n { name: \"TDS Sensor\", type: \"Water Quality\", icon: \"fa-vial\" },\r\n { name: \"Solar Power Unit\", type: \"Energy Grid\", icon: \"fa-sun\" }\r\n ],\r\n architecture: [\r\n { layer: \"\u09e7. IoT \u09b2\u09c7\u09af\u09bc\u09be\u09b0\", details: \"ESP32 \u09ae\u09be\u0987\u0995\u09cd\u09b0\u09cb\u0995\u09a8\u09cd\u099f\u09cd\u09b0\u09cb\u09b2\u09be\u09b0 \u098f\u09ac\u0982 \u09ac\u09bf\u09ad\u09bf\u09a8\u09cd\u09a8 \u09b8\u09c7\u09a8\u09cd\u09b8\u09b0 (Moisture, Temp, TDS, Humidity, Light) \u09af\u09be \u09b8\u09b0\u09be\u09b8\u09b0\u09bf \u09ae\u09be\u09a0 \u09a5\u09c7\u0995\u09c7 \u09a1\u09c7\u099f\u09be \u09b8\u0982\u0997\u09cd\u09b0\u09b9 \u0995\u09b0\u09c7\u0964\" },\r\n { layer: \"\u09e8. \u09ac\u09cd\u09af\u09be\u0995\u098f\u09a8\u09cd\u09a1 \u09b2\u09c7\u09af\u09bc\u09be\u09b0\", details: \"Python Flask \/ WordPress: \u09a1\u09c7\u099f\u09be \u09b0\u09bf\u09b8\u09bf\u09ad \u0995\u09b0\u09be \u098f\u09ac\u0982 \u098f\u0986\u0987 \u0987\u099e\u09cd\u099c\u09bf\u09a8\u09c7\u09b0 \u09b8\u09be\u09a5\u09c7 \u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09b8\u09cd\u09a5\u09be\u09aa\u09a8 \u0995\u09b0\u09be\u0964\" },\r\n { layer: \"\u09e9. \u098f\u0986\u0987 \u0987\u099e\u09cd\u099c\u09bf\u09a8\", details: \"Google Gemini \u098f\u09ac\u0982 OpenAI-\u098f\u09b0 API \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u09a1\u09c7\u099f\u09be\u09b0 \u0997\u09ad\u09c0\u09b0 \u09ac\u09bf\u09b6\u09cd\u09b2\u09c7\u09b7\u09a3\u0964\" },\r\n { layer: \"\u09ea. \u0987\u0989\u099c\u09be\u09b0 \u0987\u09a8\u09cd\u099f\u09be\u09b0\u09ab\u09c7\u09b8\", details: \"\u0993\u09af\u09bc\u09be\u09b0\u09cd\u09a1\u09aa\u09cd\u09b0\u09c7\u09b8 \u09ad\u09bf\u09a4\u09cd\u09a4\u09bf\u0995 \u098f\u0995\u099f\u09bf \u09ae\u09a1\u09be\u09b0\u09cd\u09a8 \u09a1\u09cd\u09af\u09be\u09b6\u09ac\u09cb\u09b0\u09cd\u09a1 \u09af\u09c7\u0996\u09be\u09a8\u09c7 \u0997\u09cd\u09b0\u09be\u09ab \u098f\u09ac\u0982 \u098f\u0986\u0987 \u09b0\u09bf\u09aa\u09cb\u09b0\u09cd\u099f \u09a6\u09c7\u0996\u09be \u09af\u09be\u09af\u09bc\u0964\" }\r\n ],\r\n features: [\r\n \"\u09b8\u09cd\u09ae\u09be\u09b0\u09cd\u099f \u09b2\u09be\u0987\u09ad \u09ae\u09a8\u09bf\u099f\u09b0\u09bf\u0982: \u09a4\u09be\u09aa\u09ae\u09be\u09a4\u09cd\u09b0\u09be \u0993 \u09aa\u09c1\u09b7\u09cd\u099f\u09bf\u09ae\u09be\u09a8\u09c7\u09b0 \u09b2\u09be\u0987\u09ad \u0986\u09aa\u09a1\u09c7\u099f\u0964\",\r\n \"\u09b8\u09bf\u09a8\u09bf\u09af\u09bc\u09b0 \u098f\u0997\u09cd\u09b0\u09cb\u09a8\u09ae\u09bf\u09b8\u09cd\u099f \u098f\u0986\u0987: \u09ae\u09be\u09b8\u09cd\u099f\u09be\u09b0 \u09aa\u09cd\u09b0\u09ae\u09cd\u09aa\u099f \u09a6\u09bf\u09af\u09bc\u09c7 \u09ac\u09c8\u099c\u09cd\u099e\u09be\u09a8\u09bf\u0995 \u09ac\u09bf\u09b6\u09cd\u09b2\u09c7\u09b7\u09a3\u0964\",\r\n \"\u09ae\u09be\u09b2\u09cd\u099f\u09bf-\u098f\u0986\u0987 \u0987\u09a8\u09cd\u099f\u09bf\u0997\u09cd\u09b0\u09c7\u09b6\u09a8: Gemini, OpenAI \u098f\u09ac\u0982 OpenRouter \u09b8\u09be\u09aa\u09cb\u09b0\u09cd\u099f\u0964\",\r\n \"\u0985\u099f\u09cb-\u09ab\u09b2\u09ac\u09cd\u09af\u09be\u0995 \u09b8\u09bf\u09b8\u09cd\u099f\u09c7\u09ae: \u098f\u0995\u099f\u09bf \u098f\u0986\u0987 \u09ab\u09c7\u0987\u09b2 \u0995\u09b0\u09b2\u09c7 \u0985\u099f\u09cb\u09ae\u09c7\u099f\u09bf\u0995 \u0985\u09a8\u09cd\u09af\u099f\u09bf \u09a6\u09bf\u09af\u09bc\u09c7 \u0995\u09be\u099c \u099a\u09be\u09b2\u09be\u09a8\u09cb\u0964\"\r\n ],\r\n roadmap: [\r\n { phase: \"Phase 1\", title: \"Hardware Build\", desc: \"\u09b9\u09be\u09b0\u09cd\u09a1\u0993\u09af\u09bc\u09cd\u09af\u09be\u09b0 \u0987\u09ae\u09aa\u09cd\u09b2\u09bf\u09ae\u09c7\u09a8\u09cd\u099f\u09c7\u09b6\u09a8 \u0993 \u09b8\u09cb\u09b2\u09be\u09b0 \u09aa\u09be\u0993\u09af\u09bc\u09be\u09b0 \u09b8\u09c7\u099f\u0986\u09aa\u0964\" },\r\n { phase: \"Phase 2\", title: \"Cloud Sync\", desc: \"\u0995\u09cd\u09b2\u09be\u0989\u09a1 \u09a1\u09be\u099f\u09be\u09ac\u09c7\u09b8 \u0993 \u09b9\u09bf\u09b8\u09cd\u099f\u09cb\u09b0\u09bf\u0995\u09be\u09b2 \u099a\u09be\u09b0\u09cd\u099f\u09bf\u0982 \u0987\u09a8\u09cd\u099f\u09bf\u0997\u09cd\u09b0\u09c7\u09b6\u09a8\u0964\" },\r\n { phase: \"Phase 3\", title: \"AI Training\", desc: \"Gemini API-\u098f\u09b0 \u09ae\u09be\u09a7\u09cd\u09af\u09ae\u09c7 \u09ac\u09be\u0982\u09b2\u09be \u09ad\u09be\u09b7\u09be \u0993 \u0995\u09c3\u09b7\u09bf \u09a4\u09a5\u09cd\u09af\u09c7\u09b0 \u099f\u09cd\u09b0\u09c7\u09a8\u09bf\u0982\u0964\" },\r\n { phase: \"Phase 4\", title: \"Mobile App\", desc: \"Leaf Disease Detection \u0993 \u09ae\u09cb\u09ac\u09be\u0987\u09b2 \u09a8\u09cb\u099f\u09bf\u09ab\u09bf\u0995\u09c7\u09b6\u09a8 \u09b8\u09bf\u09b8\u09cd\u099f\u09c7\u09ae\u0964\" }\r\n ],\r\n techStack: [\r\n { category: \"Languages\", items: [\"Python\", \"PHP\", \"JavaScript\", \"C++ (Arduino)\"] },\r\n { category: \"Web Tools\", items: [\"Flask\", \"WordPress\", \"Tailwind CSS\", \"Chart.js\"] },\r\n { category: \"Cloud & AI\", items: [\"Google Gemini\", \"OpenRouter\", \"Firebase\", \"LiteSpeed Server\"] }\r\n ],\r\n conclusion: \"\u09aa\u09cd\u09b0\u099c\u09c7\u0995\u09cd\u099f\u099f\u09bf \u09ac\u09b0\u09cd\u09a4\u09ae\u09be\u09a8\u09c7 \u09b8\u09ab\u099f\u0993\u09af\u09bc\u09cd\u09af\u09be\u09b0 \u098f\u09ac\u0982 \u098f\u0986\u0987 \u09b2\u099c\u09bf\u0995\u09c7\u09b0 \u09a6\u09bf\u0995 \u09a5\u09c7\u0995\u09c7 \u09e7\u09e6\u09e6% \u09b8\u09ab\u09b2 \u098f\u09ac\u0982 \u098f\u099f\u09bf \u09ae\u09be\u09a0 \u09aa\u09b0\u09cd\u09af\u09be\u09af\u09bc\u09c7 \u0995\u09c3\u09b7\u09bf \u09ac\u09bf\u09aa\u09cd\u09b2\u09ac \u0998\u099f\u09be\u09a4\u09c7 \u09b8\u0995\u09cd\u09b7\u09ae\u0964\"\r\n },\r\n {\r\n id: 2,\r\n title: \"NovaStream Architecture\",\r\n subtitle: \"Enterprise Private Media Server Solution\",\r\n description: \"NovaStream \u098f\u0995\u099f\u09bf \u09b9\u09be\u0987-\u09aa\u09be\u09b0\u09ab\u09b0\u09ae\u09cd\u09af\u09be\u09a8\u09cd\u09b8 \u09ae\u09bf\u09a1\u09bf\u09af\u09bc\u09be \u09b8\u09cd\u099f\u09cd\u09b0\u09bf\u09ae\u09bf\u0982 \u0986\u09b0\u09cd\u0995\u09bf\u099f\u09c7\u0995\u099a\u09be\u09b0\u0964 \u098f\u099f\u09bf \u09b2\u09cb\u0995\u09be\u09b2 \u09b8\u09cd\u099f\u09cb\u09b0\u09c7\u099c\u0995\u09c7 \u098f\u0995\u099f\u09bf \u09b8\u09bf\u0995\u09bf\u0989\u09b0 \u0995\u09cd\u09b2\u09be\u0989\u09a1 \u099a\u09cd\u09af\u09be\u09a8\u09c7\u09b2\u09c7\u09b0 \u09ae\u09be\u09a7\u09cd\u09af\u09ae\u09c7 \u0997\u09cd\u09b2\u09cb\u09ac\u09be\u09b2 'Netflix-grade' \u0987\u09a8\u09cd\u099f\u09be\u09b0\u09ab\u09c7\u09b8\u09c7 \u09b0\u09c2\u09aa\u09be\u09a8\u09cd\u09a4\u09b0 \u0995\u09b0\u09c7\u0964\",\r\n tags: [\"React 19\", \"HLS\", \"Cloudflare\"],\r\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1574375927938-d5a98e8ffe85?q=80&w=1200&h=600&auto=format&fit=crop\",\r\n vision: \"\u09ac\u09cd\u09af\u0995\u09cd\u09a4\u09bf\u0997\u09a4 \u09ae\u09c1\u09ad\u09bf \u0995\u09be\u09b2\u09c7\u0995\u09b6\u09a8\u0995\u09c7 \u098f\u0995\u099f\u09bf \u09aa\u09cd\u09b0\u09ab\u09c7\u09b6\u09a8\u09be\u09b2 \u098f\u09a8\u09cd\u099f\u09be\u09b0\u09aa\u09cd\u09b0\u09be\u0987\u099c \u0997\u09cd\u09b0\u09c7\u09a1 \u09b8\u09cd\u099f\u09cd\u09b0\u09bf\u09ae\u09bf\u0982 \u09b8\u09be\u09b0\u09cd\u09ad\u09be\u09b0\u09c7 \u09b0\u09c2\u09aa\u09be\u09a8\u09cd\u09a4\u09b0 \u0995\u09b0\u09be\u0964\",\r\n metrics: [\r\n { label: \"UX Grade\", value: \"Premium\", icon: \"fa-star\" },\r\n { label: \"Streaming\", value: \"HLS \/ 4K\", icon: \"fa-play\" },\r\n { label: \"Profiles\", value: \"Unlimited\", icon: \"fa-users\" },\r\n { label: \"Security\", value: \"AES-256\", icon: \"fa-lock\" }\r\n ],\r\n hardwareList: [\r\n { name: \"Media Server Node\", type: \"Windows\/Linux\", icon: \"fa-server\" },\r\n { name: \"Cloudflare Tunnel\", type: \"Gateway\", icon: \"fa-bridge\" },\r\n { name: \"NAS Storage\", type: \"RAID Setup\", icon: \"fa-database\" }\r\n ],\r\n architecture: [\r\n { layer: \"\u09e7. \u09b8\u09cd\u099f\u09cb\u09b0\u09c7\u099c \u0987\u099e\u09cd\u099c\u09bf\u09a8\", details: \"\u09b9\u09be\u0987\u09ac\u09cd\u09b0\u09bf\u09a1 \u09b2\u09cb\u0995\u09be\u09b2 \u098f\u09ac\u0982 \u09a1\u09cd\u09b0\u09be\u0987\u09ad \u09b8\u09cd\u099f\u09cb\u09b0\u09c7\u099c \u09b8\u09bf\u0999\u09cd\u0995\u09cd\u09b0\u09cb\u09a8\u09be\u0987\u099c\u09c7\u09b6\u09a8\u0964\" },\r\n { layer: \"\u09e8. \u0987\u0989\u099c\u09be\u09b0 \u0987\u09a8\u09cd\u099f\u09be\u09b0\u09ab\u09c7\u09b8\", details: \"React 19 \u098f\u09ac\u0982 Tailwind \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u09a4\u09c8\u09b0\u09bf \u09ae\u09a1\u09be\u09b0\u09cd\u09a8 \u0987\u0989\u0986\u0987\u0964\" }\r\n ],\r\n roadmap: [\r\n { phase: \"Phase 1\", title: \"HLS Logic\", desc: \"\u09ac\u09be\u09ab\u09be\u09b0\u09bf\u0982 \u0995\u09ae\u09be\u09a4\u09c7 \u09b9\u09be\u0987-\u09b8\u09cd\u09aa\u09bf\u09a1 \u09b8\u09cd\u099f\u09cd\u09b0\u09bf\u09ae\u09bf\u0982 \u09aa\u09cd\u09b0\u099f\u09cb\u0995\u09b2 \u0987\u09ae\u09aa\u09cd\u09b2\u09bf\u09ae\u09c7\u09a8\u09cd\u099f\u09c7\u09b6\u09a8\u0964\" },\r\n { phase: \"Phase 2\", title: \"Auth System\", desc: \"JWT \u098f\u09ac\u0982 \u09ae\u09be\u09b2\u09cd\u099f\u09bf-\u09aa\u09cd\u09b0\u09cb\u09ab\u09be\u0987\u09b2 \u0987\u0989\u099c\u09be\u09b0 \u0986\u0987\u09b8\u09cb\u09b2\u09c7\u09b6\u09a8\u0964\" }\r\n ],\r\n conclusion: \"\u09ac\u09cd\u09af\u0995\u09cd\u09a4\u09bf\u0997\u09a4 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0\u09c7\u09b0 \u099c\u09a8\u09cd\u09af \u098f\u099f\u09bf \u098f\u0995\u099f\u09bf \u09b8\u09ae\u09cd\u09aa\u09c2\u09b0\u09cd\u09a3 \u098f\u09ac\u0982 \u09a8\u09bf\u09b0\u09be\u09aa\u09a6 \u09ae\u09bf\u09a1\u09bf\u09af\u09bc\u09be \u09b8\u09b2\u09bf\u0989\u09b6\u09a8\u0964\"\r\n },\r\n {\r\n id: 3,\r\n title: \"Anime Fan Central CMS\",\r\n subtitle: \"Performance-Tuned Community Platform\",\r\n description: \"Anime Fan Central CMS \u09b9\u09b2\u09cb \u098f\u0995\u099f\u09bf \u0989\u099a\u09cd\u099a-\u09ae\u09be\u09a8\u09c7\u09b0 \u09ae\u09bf\u09a1\u09bf\u09af\u09bc\u09be \u09a1\u09c7\u09b2\u09bf\u09ad\u09be\u09b0\u09bf \u09b8\u09bf\u09b8\u09cd\u099f\u09c7\u09ae \u09af\u09be \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7 \u09aa\u09cd\u09b0\u09c7\u09ae\u09c0\u09a6\u09c7\u09b0 \u099c\u09a8\u09cd\u09af \u0985\u09aa\u09cd\u099f\u09bf\u09ae\u09be\u0987\u099c\u09a1 \u0995\u09b0\u09be\u0964 \u098f\u099f\u09bf \u09b9\u09be\u0987-\u09b0\u09c7\u099c\u09cb\u09b2\u09bf\u0989\u09b6\u09a8 \u0987\u09ae\u09c7\u099c \u098f\u09ac\u0982 \u09ad\u09bf\u09a1\u09bf\u0993 \u09b2\u09cb\u09a1\u09bf\u0982 \u09b8\u09cd\u09aa\u09bf\u09a1 \u09a8\u09bf\u09b6\u09cd\u099a\u09bf\u09a4 \u0995\u09b0\u09a4\u09c7 \u09b0\u09c7\u09a1\u09bf\u09b8 \u098f\u09ac\u0982 \u09b8\u09bf\u09a1\u09bf\u098f\u09a8 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7\u0964\",\r\n tags: [\"Web\", \"WordPress\"],\r\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1578632292335-df3abbb0d586?q=80&w=800&h=600&auto=format&fit=crop\",\r\n vision: \"\u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7 \u09aa\u09cd\u09b0\u09c7\u09ae\u09c0\u09a6\u09c7\u09b0 \u099c\u09a8\u09cd\u09af \u098f\u0995\u099f\u09bf \u09ab\u09be\u09b8\u09cd\u099f \u098f\u09ac\u0982 \u0986\u09b2\u09cd\u099f\u09cd\u09b0\u09be-\u09b0\u09c7\u09b8\u09aa\u09a8\u09b8\u09bf\u09ad \u0995\u09ae\u09bf\u0989\u09a8\u09bf\u099f\u09bf \u09b9\u09be\u09ac \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09be\u0964\",\r\n metrics: [\r\n { label: \"Page Speed\", value: \"99\/100\", icon: \"fa-bolt\" },\r\n { label: \"Caching\", value: \"Redis\", icon: \"fa-database\" },\r\n { label: \"Asset CDN\", value: \"Global\", icon: \"fa-globe\" },\r\n { label: \"SEO Score\", value: \"Elite\", icon: \"fa-search\" }\r\n ],\r\n hardwareList: [\r\n { name: \"Web Server\", type: \"LiteSpeed Node\", icon: \"fa-server\" },\r\n { name: \"Database Node\", type: \"MariaDB \/ Redis\", icon: \"fa-cloud-meatball\" },\r\n { name: \"Asset Server\", type: \"CDN Edge\", icon: \"fa-satellite\" }\r\n ],\r\n architecture: [\r\n { layer: \"\u09e7. \u09b8\u09bf\u098f\u09ae\u098f\u09b8 \u0995\u09cb\u09b0\", details: \"\u0995\u09be\u09b8\u09cd\u099f\u09ae \u0993\u09af\u09bc\u09be\u09b0\u09cd\u09a1\u09aa\u09cd\u09b0\u09c7\u09b8 \u0986\u09b0\u09cd\u0995\u09bf\u099f\u09c7\u0995\u099a\u09be\u09b0 \u09af\u09be \u09ae\u09bf\u09a1\u09bf\u09af\u09bc\u09be \u09ab\u09be\u0987\u09b2 \u09ae\u09cd\u09af\u09be\u09a8\u09c7\u099c\u09ae\u09c7\u09a8\u09cd\u099f\u09c7\u09b0 \u099c\u09a8\u09cd\u09af \u0985\u09aa\u09cd\u099f\u09bf\u09ae\u09be\u0987\u099c\u09a1\u0964\" },\r\n { layer: \"\u09e8. \u0995\u09cd\u09af\u09be\u09b6\u09bf\u0982 \u0987\u099e\u09cd\u099c\u09bf\u09a8\", details: \"\u09b2\u09c1\u09ac-\u0995\u09cd\u09af\u09be\u09b6 \u098f\u09ac\u0982 \u09b0\u09c7\u09a1\u09bf\u09b8 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u09b8\u09be\u09b0\u09cd\u09ad\u09be\u09b0 \u09b0\u09c7\u09b8\u09aa\u09a8\u09cd\u09b8 \u099f\u09be\u0987\u09ae \u09e6.\u09eb \u09b8\u09c7\u0995\u09c7\u09a8\u09cd\u09a1\u09c7 \u09a8\u09be\u09ae\u09bf\u09af\u09bc\u09c7 \u0986\u09a8\u09be \u09b9\u09af\u09bc\u09c7\u099b\u09c7\u0964\" },\r\n { layer: \"\u09e9. \u0987\u0989\u0986\u0987 \u0985\u09aa\u09cd\u099f\u09bf\u09ae\u09be\u0987\u099c\u09c7\u09b6\u09a8\", details: \"Tailwind CSS \u098f\u09ac\u0982 \u0985\u09b2\u09b8 \u09b2\u09cb\u09a1\u09bf\u0982 (Lazy Loading) \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u09a1\u09c7\u099f\u09be \u09b8\u09be\u09b6\u09cd\u09b0\u09af\u09bc\u09c0 \u0987\u09a8\u09cd\u099f\u09be\u09b0\u09ab\u09c7\u09b8\u0964\" }\r\n ],\r\n roadmap: [\r\n { phase: \"Phase 1\", title: \"Core Architecture\", desc: \"\u09b8\u09be\u09b0\u09cd\u09ad\u09be\u09b0 \u0995\u09a8\u09ab\u09bf\u0997\u09be\u09b0\u09c7\u09b6\u09a8 \u098f\u09ac\u0982 \u09ac\u09c7\u09b8 \u09a5\u09bf\u09ae \u09a1\u09c7\u09ad\u09c7\u09b2\u09aa\u09ae\u09c7\u09a8\u09cd\u099f\u0964\" },\r\n { phase: \"Phase 2\", title: \"Caching Strategy\", desc: \"\u09b0\u09c7\u09a1\u09bf\u09b8 \u098f\u09ac\u0982 \u098f\u09b2\u098f\u09b8-\u0995\u09cd\u09af\u09be\u09b6 \u098f\u09b0 \u09ae\u09be\u09a7\u09cd\u09af\u09ae\u09c7 \u09b8\u09cd\u09aa\u09bf\u09a1 \u09ac\u09c1\u09b8\u09cd\u099f\u09bf\u0982\u0964\" },\r\n { phase: \"Phase 3\", title: \"Community Hub\", desc: \"\u0987\u0989\u099c\u09be\u09b0 \u0987\u09a8\u09cd\u099f\u09be\u09b0\u0985\u09cd\u09af\u09be\u0995\u09b6\u09a8 \u098f\u09ac\u0982 \u0985\u09cd\u09af\u09be\u09a8\u09bf\u09ae\u09c7 \u09b2\u09be\u0987\u09ac\u09cd\u09b0\u09c7\u09b0\u09bf \u0987\u09a8\u09cd\u099f\u09bf\u0997\u09cd\u09b0\u09c7\u09b6\u09a8\u0964\" }\r\n ],\r\n conclusion: \"\u09b8\u09bf\u098f\u09ae\u098f\u09b8\u099f\u09bf \u09ac\u09b0\u09cd\u09a4\u09ae\u09be\u09a8\u09c7 \u09b2\u09be\u0987\u09ad \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0\u09c7\u09b0 \u099c\u09a8\u09cd\u09af \u09b8\u09ae\u09cd\u09aa\u09c2\u09b0\u09cd\u09a3\u09ad\u09be\u09ac\u09c7 \u09aa\u09cd\u09b0\u09b8\u09cd\u09a4\u09c1\u09a4 \u098f\u09ac\u0982 \u098f\u099f\u09bf \u09af\u09c7\u0995\u09cb\u09a8\u09cb \u09ae\u09bf\u09a1\u09bf\u09af\u09bc\u09be \u09aa\u09cb\u09b0\u09cd\u099f\u09be\u09b2\u09c7\u09b0 \u099c\u09a8\u09cd\u09af \u098f\u0995\u099f\u09bf \u0986\u09a6\u09b0\u09cd\u09b6 \u09ae\u09a1\u09c7\u09b2\u0964\"\r\n }\r\n ];\r\n\r\n window.navigateTo = (pageId) => {\r\n document.querySelectorAll('.page-section').forEach(p => p.classList.remove('active'));\r\n document.getElementById(pageId + '-page').classList.add('active');\r\n document.querySelectorAll('.nav-btn').forEach(btn => {\r\n btn.classList.remove('text-emerald-600');\r\n if(btn.dataset.page === pageId) btn.classList.add('text-emerald-600');\r\n });\r\n window.scrollTo(0, 0);\r\n };\r\n\r\n window.openModal = (id) => {\r\n const p = projects.find(item => item.id === id);\r\n const modal = document.getElementById('project-modal');\r\n const content = document.getElementById('modal-content');\r\n \r\n if (id === 1) {\r\n \/\/ High-detail Agro Guard template\r\n content.innerHTML = `\r\n <div class=\"animate-fade-in-up\">\r\n <!-- Header Section -->\r\n <div class=\"mb-12\">\r\n <h2 class=\"text-emerald-600 font-black uppercase tracking-[0.4em] mb-2 text-xs\">Research & Development Case Study<\/h2>\r\n <h1 class=\"text-4xl md:text-5xl font-serif text-slate-900 mb-4\">${p.title}<\/h1>\r\n <p class=\"text-slate-500 font-medium mb-6\">${p.subtitle}<\/p>\r\n \r\n <!-- Buttons -->\r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"https:\/\/nafiz.ami.bd\/index.php\/home\/\" target=\"_blank\" class=\"px-5 py-2.5 bg-emerald-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg hover:bg-emerald-700 hover:-translate-y-1 transition-all flex items-center gap-2\">\r\n <i class=\"fas fa-home\"><\/i> Web Home\r\n <\/a>\r\n <a href=\"https:\/\/nafiz.ami.bd\/index.php\/71-2\/\" target=\"_blank\" class=\"px-5 py-2.5 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg hover:bg-black hover:-translate-y-1 transition-all flex items-center gap-2\">\r\n <i class=\"fas fa-user-shield\"><\/i> Project Admin\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10\">\r\n <!-- Left Column: Visuals & Components -->\r\n <div class=\"lg:col-span-4 space-y-6\">\r\n <div class=\"rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-100\">\r\n <img decoding=\"async\" src=\"${p.imageUrl}\" class=\"w-full h-auto\">\r\n <\/div>\r\n \r\n <!-- Metrics Grid -->\r\n <div class=\"grid grid-cols-2 gap-3\">\r\n ${p.metrics.map(m => `\r\n <div class=\"metric-card\">\r\n <i class=\"fas ${m.icon} text-emerald-500 mb-2\"><\/i>\r\n <p class=\"text-lg font-bold text-slate-900\">${m.value}<\/p>\r\n <p class=\"text-[8px] font-black uppercase text-slate-400 tracking-widest\">${m.label}<\/p>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n\r\n <!-- Hardware List -->\r\n <div class=\"bg-slate-900 rounded-3xl p-6 text-white shadow-xl\">\r\n <h3 class=\"text-sm font-black uppercase tracking-widest text-emerald-400 mb-4\">Hardware BOM<\/h3>\r\n <div class=\"space-y-4\">\r\n ${p.hardwareList.map(h => `\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-8 h-8 rounded-lg bg-white\/5 flex items-center justify-center text-emerald-400\"><i class=\"fas ${h.icon} text-xs\"><\/i><\/div>\r\n <div><p class=\"text-[11px] font-bold\">${h.name}<\/p><p class=\"text-[8px] text-white\/40 uppercase tracking-tighter\">${h.type}<\/p><\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right Column: Full Documentation -->\r\n <div class=\"lg:col-span-8 space-y-10\">\r\n <!-- Vision -->\r\n <section>\r\n <h3 class=\"text-xl font-serif text-slate-900 mb-4 flex items-center gap-2\"><i class=\"fas fa-eye text-emerald-600\"><\/i> Project Vision<\/h3>\r\n <div class=\"bg-emerald-50 p-6 rounded-2xl border-l-4 border-emerald-500 font-medium italic text-emerald-900 leading-relaxed\">\r\n \"${p.vision}\"\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Core Description -->\r\n <section>\r\n <h3 class=\"text-xl font-serif text-slate-900 mb-4 flex items-center gap-2\"><i class=\"fas fa-file-lines text-emerald-600\"><\/i> \u09ac\u09bf\u09b8\u09cd\u09a4\u09be\u09b0\u09bf\u09a4 \u09ac\u09bf\u09ac\u09b0\u09a3<\/h3>\r\n <p class=\"text-sm text-slate-600 leading-relaxed font-medium bg-white p-6 rounded-2xl border border-slate-100 shadow-sm\">\r\n ${p.description}\r\n <\/p>\r\n <\/section>\r\n\r\n <!-- System Architecture -->\r\n <section>\r\n <h3 class=\"text-xl font-serif text-slate-900 mb-6 flex items-center gap-2\"><i class=\"fas fa-sitemap text-emerald-600\"><\/i> Architecture<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n ${p.architecture.map(a => `\r\n <div class=\"p-5 bg-slate-50 rounded-2xl border border-slate-200 hover:border-emerald-300 transition-colors\">\r\n <h4 class=\"text-xs font-black text-emerald-700 uppercase mb-2 tracking-widest\">${a.layer}<\/h4>\r\n <p class=\"text-[11px] text-slate-600 font-medium leading-relaxed\">${a.details}<\/p>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Roadmap (Visual) -->\r\n <section>\r\n <h3 class=\"text-xl font-serif text-slate-900 mb-6 flex items-center gap-2\"><i class=\"fas fa-route text-emerald-600\"><\/i> Development Roadmap<\/h3>\r\n <div class=\"ml-4\">\r\n ${p.roadmap.map(r => `\r\n <div class=\"step-node\">\r\n <div class=\"step-circle\"><\/div>\r\n <h4 class=\"text-xs font-black uppercase text-slate-400 mb-1\">${r.phase}<\/h4>\r\n <h5 class=\"text-sm font-bold text-slate-900\">${r.title}<\/h5>\r\n <p class=\"text-[11px] text-slate-500 mt-1\">${r.desc}<\/p>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Conclusion -->\r\n <div class=\"pt-6 border-t border-slate-100 text-center\">\r\n <p class=\"text-[10px] font-black uppercase text-emerald-600 tracking-widest mb-3\">Project Status: Verified<\/p>\r\n <p class=\"text-sm font-serif italic text-slate-700 bg-white shadow-sm p-4 rounded-xl border border-slate-100\">\"${p.conclusion}\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n } else if (id === 2) {\r\n \/\/ High-detail NovaStream template\r\n content.innerHTML = `\r\n <div class=\"animate-fade-in-up\">\r\n <div class=\"mb-12\">\r\n <h2 class=\"text-emerald-600 font-black uppercase tracking-[0.4em] mb-2 text-xs\">Media Architecture Spec<\/h2>\r\n <h1 class=\"text-4xl md:text-5xl font-serif text-slate-900 mb-4\">${p.title}<\/h1>\r\n <p class=\"text-slate-500 font-medium mb-6\">${p.subtitle}<\/p>\r\n\r\n <!-- Visit Button -->\r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"https:\/\/nafiz.ami.bd\/media\/\" target=\"_blank\" class=\"px-8 py-3 bg-emerald-600 text-white rounded-xl text-[11px] font-black uppercase tracking-widest shadow-lg hover:bg-emerald-700 hover:scale-105 transition-all flex items-center gap-3\">\r\n <i class=\"fas fa-play-circle text-lg\"><\/i> Visit NovaStream Node\r\n <\/a>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10\">\r\n <div class=\"lg:col-span-4 space-y-6\">\r\n <div class=\"rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-100\"><img decoding=\"async\" src=\"${p.imageUrl}\" class=\"w-full\"><\/div>\r\n <div class=\"grid grid-cols-2 gap-3\">\r\n ${p.metrics.map(m => `<div class=\"metric-card\"><i class=\"fas ${m.icon} text-emerald-500 mb-2\"><\/i><p class=\"text-lg font-bold text-slate-900\">${m.value}<\/p><p class=\"text-[8px] font-black uppercase text-slate-400 tracking-widest\">${m.label}<\/p><\/div>`).join('')}\r\n <\/div>\r\n <div class=\"bg-slate-900 rounded-3xl p-6 text-white shadow-xl\">\r\n <h3 class=\"text-sm font-black uppercase tracking-widest text-emerald-400 mb-4\">Core Components<\/h3>\r\n <div class=\"space-y-4\">\r\n ${p.hardwareList.map(h => `\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-8 h-8 rounded-lg bg-white\/5 flex items-center justify-center text-emerald-400\"><i class=\"fas ${h.icon} text-xs\"><\/i><\/div>\r\n <div><p class=\"text-[11px] font-bold\">${h.name}<\/p><p class=\"text-[8px] text-white\/40 uppercase tracking-tighter\">${h.type}<\/p><\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-8 space-y-10\">\r\n <section><h3 class=\"text-xl font-serif text-slate-900 mb-4 flex items-center gap-2\"><i class=\"fas fa-bullseye text-emerald-600\"><\/i> Mission<\/h3><div class=\"bg-emerald-50 p-6 rounded-2xl border-l-4 border-emerald-500 font-medium italic text-emerald-900 leading-relaxed\">\"${p.vision}\"<\/div><\/section>\r\n <section><h3 class=\"text-xl font-serif text-slate-900 mb-4 flex items-center gap-2\"><i class=\"fas fa-layer-group text-emerald-600\"><\/i> Tech Spec<\/h3><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">${p.architecture.map(a => `<div class=\"p-5 bg-slate-50 rounded-2xl border border-slate-200 hover:border-emerald-300 transition-colors\"><h4 class=\"text-xs font-black text-emerald-700 uppercase mb-2 tracking-widest\">${a.layer}<\/h4><p class=\"text-[11px] text-slate-600 font-medium\">${a.details}<\/p><\/div>`).join('')}<\/div><\/section>\r\n <section><h3 class=\"text-xl font-serif text-slate-900 mb-6 flex items-center gap-2\"><i class=\"fas fa-route text-emerald-600\"><\/i> Roadmap<\/h3><div class=\"ml-4\">${p.roadmap.map(r => `<div class=\"step-node\"><div class=\"step-circle\"><\/div><h4 class=\"text-xs font-black uppercase text-slate-400 mb-1\">${r.phase}<\/h4><h5 class=\"text-sm font-bold text-slate-900\">${r.title}<\/h5><p class=\"text-[11px] text-slate-500 mt-1\">${r.desc}<\/p><\/div>`).join('')}<\/div><\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n } else if (id === 3) {\r\n \/\/ High-detail Anime CMS template\r\n content.innerHTML = `\r\n <div class=\"animate-fade-in-up\">\r\n <div class=\"mb-12\">\r\n <h2 class=\"text-emerald-600 font-black uppercase tracking-[0.4em] mb-2 text-xs\">High-Res Media Node Spec<\/h2>\r\n <h1 class=\"text-4xl md:text-5xl font-serif text-slate-900 mb-4\">${p.title}<\/h1>\r\n <p class=\"text-slate-500 font-medium mb-8\">${p.subtitle}<\/p>\r\n \r\n <!-- Buttons -->\r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"#\" class=\"px-6 py-2.5 bg-emerald-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg hover:bg-emerald-700 hover:-translate-y-1 transition-all flex items-center gap-2\">\r\n <i class=\"fas fa-globe\"><\/i> Visit Platform\r\n <\/a>\r\n <a href=\"#\" class=\"px-6 py-2.5 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg hover:bg-black hover:-translate-y-1 transition-all flex items-center gap-2\">\r\n <i class=\"fas fa-database\"><\/i> Redis Stats\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10\">\r\n <div class=\"lg:col-span-4 space-y-6\">\r\n <div class=\"rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-100\"><img decoding=\"async\" src=\"${p.imageUrl}\" class=\"w-full\"><\/div>\r\n <div class=\"grid grid-cols-2 gap-3\">\r\n ${p.metrics.map(m => `<div class=\"metric-card\"><i class=\"fas ${m.icon} text-emerald-500 mb-2\"><\/i><p class=\"text-lg font-bold text-slate-900\">${m.value}<\/p><p class=\"text-[8px] font-black uppercase text-slate-400 tracking-widest\">${m.label}<\/p><\/div>`).join('')}\r\n <\/div>\r\n <div class=\"bg-slate-900 rounded-3xl p-6 text-white shadow-xl\">\r\n <h3 class=\"text-sm font-black uppercase tracking-widest text-emerald-400 mb-4\">Infrastructure List<\/h3>\r\n <div class=\"space-y-4\">\r\n ${p.hardwareList.map(h => `\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-8 h-8 rounded-lg bg-white\/5 flex items-center justify-center text-emerald-400\"><i class=\"fas ${h.icon} text-xs\"><\/i><\/div>\r\n <div><p class=\"text-[11px] font-bold\">${h.name}<\/p><p class=\"text-[8px] text-white\/40 uppercase tracking-tighter\">${h.type}<\/p><\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-8 space-y-10\">\r\n <section><h3 class=\"text-xl font-serif text-slate-900 mb-4 flex items-center gap-2\"><i class=\"fas fa-eye text-emerald-600\"><\/i> Project Vision<\/h3><div class=\"bg-emerald-50 p-6 rounded-2xl border-l-4 border-emerald-500 font-medium italic text-emerald-900 leading-relaxed\">\"${p.vision}\"<\/div><\/section>\r\n <section><h3 class=\"text-xl font-serif text-slate-900 mb-4 flex items-center gap-2\"><i class=\"fas fa-sitemap text-emerald-600\"><\/i> Architecture<\/h3><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">${p.architecture.map(a => `<div class=\"p-5 bg-slate-50 rounded-2xl border border-slate-200 hover:border-emerald-300 transition-colors\"><h4 class=\"text-xs font-black text-emerald-700 uppercase mb-2 tracking-widest\">${a.layer}<\/h4><p class=\"text-[11px] text-slate-600 font-medium\">${a.details}<\/p><\/div>`).join('')}<\/div><\/section>\r\n <section><h3 class=\"text-xl font-serif text-slate-900 mb-6 flex items-center gap-2\"><i class=\"fas fa-route text-emerald-600\"><\/i> Implementation Roadmap<\/h3><div class=\"ml-4\">${p.roadmap.map(r => `<div class=\"step-node\"><div class=\"step-circle\"><\/div><h4 class=\"text-xs font-black uppercase text-slate-400 mb-1\">${r.phase}<\/h4><h5 class=\"text-sm font-bold text-slate-900\">${r.title}<\/h5><p class=\"text-[11px] text-slate-500 mt-1\">${r.desc}<\/p><\/div>`).join('')}<\/div><\/section>\r\n <div class=\"pt-6 border-t border-slate-100 text-center\">\r\n <p class=\"text-[10px] font-black uppercase text-emerald-600 tracking-widest mb-3\">Status: Fully Operational<\/p>\r\n <p class=\"text-sm font-serif italic text-slate-700 bg-white shadow-sm p-4 rounded-xl border border-slate-100\">\"${p.conclusion}\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n } else {\r\n \/\/ Standard template for other projects\r\n content.innerHTML = `\r\n <div class=\"animate-fade-in-up\">\r\n <h1 class=\"text-3xl font-serif text-slate-900 mb-6\">${p.title}<\/h1>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-10\">\r\n <div class=\"overflow-hidden rounded-3xl shadow-xl\">\r\n <img decoding=\"async\" src=\"${p.imageUrl}\" class=\"w-full h-auto\">\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <p class=\"text-sm text-slate-600 leading-relaxed\">${p.description || ''}<\/p>\r\n <div class=\"flex flex-wrap gap-2\">${p.tags.map(t => `<span class=\"skill-tag\">${t}<\/span>`).join('')}<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n };\r\n\r\n window.closeModal = () => {\r\n document.getElementById('project-modal').classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n };\r\n\r\n \/\/ Project Grid Renderer\r\n const grid = document.getElementById('projects-grid');\r\n grid.innerHTML = projects.map(p => `\r\n <div onclick=\"openModal(${p.id})\" class=\"group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all cursor-pointer flex flex-col h-full hover:-translate-y-1 border border-slate-50\">\r\n <div class=\"relative overflow-hidden aspect-[16\/9]\">\r\n <img decoding=\"async\" src=\"${p.imageUrl}\" class=\"w-full h-full object-cover transition-transform group-hover:scale-105 duration-500\">\r\n <\/div>\r\n <div class=\"p-5 flex-grow flex flex-col\">\r\n <div class=\"flex flex-wrap gap-1 mb-2\">${p.tags.map(t => `<span class=\"text-[6px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded uppercase\">${t}<\/span>`).join('')}<\/div>\r\n <h3 class=\"text-base font-serif text-slate-900 group-hover:text-emerald-600 transition-colors\">${p.title}<\/h3>\r\n <p class=\"text-slate-500 text-[9px] mt-2 line-clamp-2\">${p.description || ''}<\/p>\r\n <div class=\"mt-auto pt-4 text-[8px] font-bold text-emerald-600 uppercase tracking-widest\">Architectural Spec <i class=\"fas fa-arrow-right ml-1\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Global Scroll Listener\r\n window.addEventListener('scroll', () => {\r\n const nav = document.getElementById('navbar');\r\n if(window.scrollY > 20) nav.classList.add('glass', 'shadow-md');\r\n else nav.classList.remove('glass', 'shadow-md');\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Mashariar Rahman | Tech Explorer Mashariar. Home About Projects Contact Follow Me Home About Projects Contact IoT \/ AI \/ Networking Explorer Mashariar Rahman A Grade 10 science student from Chandpur, Bangladesh passionate about building real-world solutions by combining high-performance hardware with intelligent AI systems. EXPLORE PROJECTS CONNECT Live Node Agro_Guard_v11.5.py Elite Projects Featured Innovation […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-164","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/pages\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":43,"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions"}],"predecessor-version":[{"id":220,"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions\/220"}],"wp:attachment":[{"href":"https:\/\/nafiz.ami.bd\/index.php\/wp-json\/wp\/v2\/media?parent=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}