Spaces:

AIencoder
/

portfolio

Running

App Files Files Community

AIencoder commited on 9 days ago

Commit

bce9cc3

verified ·

1 Parent(s): 43ed820

Update index.html

Browse files

Files changed (1) hide show

index.html +265 -264

index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,6 +10,7 @@
 <body>
 <div class="mesh-bg"></div>
 <div class="grid-bg"></div>
 <!-- SVG SPRITES -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
@@ -27,7 +28,6 @@
 <symbol id="i-book" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></symbol>
 <symbol id="i-pin" viewBox="0 0 24 24"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></symbol>
 <symbol id="i-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></symbol>
-<symbol id="i-alert" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></symbol>
 <symbol id="i-brain" viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/></symbol>
 <symbol id="i-db" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></symbol>
 <symbol id="i-layout" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></symbol>
@@ -37,6 +37,18 @@
 <symbol id="i-cloud" viewBox="0 0 24 24"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></symbol>
 <symbol id="i-download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></symbol>
 <symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
 </svg>
 <!-- NAV -->
@@ -48,18 +60,28 @@
         </a>
         <div class="flex items-center gap-1 md-hide" id="nav-links">
             <a href="#home" class="nav-link">Home</a>
-            <a href="#huggingface" class="nav-link">Hugging Face</a>
             <a href="#github" class="nav-link">GitHub</a>
             <a href="#contact" class="nav-link">Contact</a>
         </div>
-        <button id="menu-btn" class="md-show" style="display:none;padding:.5rem">
-            <svg class="icon icon-md"><use href="#i-menu"/></svg>
-        </button>
     </div>
     <div id="mobile-menu" class="mobile-menu hidden glass">
         <a href="#home">Home</a>
         <a href="#huggingface">Hugging Face</a>
         <a href="#github">GitHub</a>
         <a href="#contact">Contact</a>
     </div>
 </nav>
@@ -68,16 +90,16 @@
 <section id="home" style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding-top:80px">
     <div class="container text-center">
         <div class="fade-up" style="animation-delay:.1s">
-            <span style="display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;border:1px solid rgba(74,222,128,.2);font-size:.875rem;color:#d1d5db;background:rgba(255,255,255,.03);margin-bottom:2rem">
                 <span class="pulse" style="width:8px;height:8px;background:#4ade80;border-radius:50%;display:inline-block"></span>
                 Available for Collaboration
             </span>
         </div>
         <h1 class="fade-up" style="animation-delay:.2s">
-            <span class="hero-title" style="display:block;font-size:clamp(2.5rem,8vw,5rem);font-weight:800;color:#e5e5e5;letter-spacing:-.02em">Hello, I'm</span>
             <span class="hero-sub mono cursor gradient-text" id="typewriter" style="display:block;font-size:clamp(2rem,6vw,4rem);font-weight:700;margin-top:.25rem"></span>
         </h1>
-        <p class="fade-up" style="animation-delay:.35s;font-size:clamp(1rem,2vw,1.25rem);color:#6b7280;max-width:600px;margin:2rem auto 3rem;line-height:1.7">
             Building the future with AI and code. Passionate about machine learning, open-source, and creating impactful solutions.
         </p>
         <div class="flex flex-wrap justify-center gap-3 fade-up" style="animation-delay:.5s">
@@ -88,28 +110,11 @@
                 <svg class="icon"><use href="#i-github"/></svg> GitHub
             </a>
         </div>
         <div class="grid grid-4 gap-3 fade-up" style="animation-delay:.65s;max-width:700px;margin:5rem auto 0">
-            <div class="card glow-card stat">
-                <div class="stat-icon" style="color:#c084fc"><svg class="icon icon-lg"><use href="#i-cpu"/></svg></div>
-                <div class="stat-num">15+</div>
-                <div class="stat-label">AI Models</div>
-            </div>
-            <div class="card glow-card stat">
-                <div class="stat-icon" style="color:#60a5fa"><svg class="icon icon-lg"><use href="#i-branch"/></svg></div>
-                <div class="stat-num" id="s-repos">5+</div>
-                <div class="stat-label">Repositories</div>
-            </div>
-            <div class="card glow-card stat">
-                <div class="stat-icon" style="color:#34d399"><svg class="icon icon-lg"><use href="#i-code"/></svg></div>
-                <div class="stat-num">10K+</div>
-                <div class="stat-label">Lines of Code</div>
-            </div>
-            <div class="card glow-card stat">
-                <div class="stat-icon" style="color:#f472b6"><svg class="icon icon-lg"><use href="#i-heart"/></svg></div>
-                <div class="stat-num">500+</div>
-                <div class="stat-label">Contributions</div>
-            </div>
         </div>
     </div>
 </section>
@@ -117,12 +122,12 @@
 <!-- CODE SHOWCASE -->
 <section class="section">
     <div class="container-sm">
-        <div class="code-win" style="box-shadow:0 24px 48px rgba(168,85,247,.05)">
             <div class="code-head">
                 <div class="code-dot" style="background:rgba(239,68,68,.8)"></div>
                 <div class="code-dot" style="background:rgba(234,179,8,.8)"></div>
                 <div class="code-dot" style="background:rgba(34,197,94,.8)"></div>
-                <span class="mono" style="margin-left:1rem;color:#6b7280;font-size:.75rem">developer_profile.py</span>
             </div>
             <div class="code-body">
                 <div class="c-gray2"># Define the developer profile</div>
@@ -130,47 +135,45 @@
                 <div style="padding-left:1.5rem"><span class="c-purple">def</span> <span class="c-blue">__init__</span><span class="c-gray">(</span><span class="c-orange">self</span><span class="c-gray">):</span></div>
                 <div style="padding-left:2.5rem"><span class="c-orange">self</span><span class="c-gray">.</span>name <span class="c-gray">=</span> <span class="c-green">"AIencoder"</span></div>
                 <div style="padding-left:2.5rem"><span class="c-orange">self</span><span class="c-gray">.</span>role <span class="c-gray">=</span> <span class="c-green">"AI/ML Engineer &amp; Developer"</span></div>
-                <div style="padding-left:2.5rem"><span class="c-orange">self</span><span class="c-gray">.</span>platforms <span class="c-gray">=</span> <span class="c-gray">{</span></div>
-                <div style="padding-left:3.5rem"><span class="c-green">"huggingface"</span><span class="c-gray">:</span> <span class="c-green">"huggingface.co/AIencoder"</span><span class="c-gray">,</span></div>
-                <div style="padding-left:3.5rem"><span class="c-green">"github"</span><span class="c-gray">:</span> <span class="c-green">"github.com/Ary5272"</span></div>
-                <div style="padding-left:2.5rem"><span class="c-gray">}</span></div>
                 <div style="padding-left:1.5rem;margin-top:.75rem"><span class="c-purple">def</span> <span class="c-blue">create_impact</span><span class="c-gray">(</span><span class="c-orange">self</span><span class="c-gray">):</span></div>
                 <div style="padding-left:2.5rem"><span class="c-purple">return</span> <span class="c-green">"Transforming ideas into reality"</span></div>
-                <div style="margin-top:1rem" class="c-gray2"># Initialize and run</div>
-                <div><span class="c-white">dev</span> <span class="c-gray">=</span> <span class="c-amber">Developer</span><span class="c-gray">()</span></div>
-                <div><span class="c-white">dev</span><span class="c-gray">.</span><span class="c-blue">create_impact</span><span class="c-gray">()</span></div>
-                <div style="margin-top:.5rem"><span class="c-gray">>>> </span><span class="c-green">"Transforming ideas into reality"</span></div>
             </div>
         </div>
     </div>
 </section>
 <!-- HUGGING FACE -->
 <section id="huggingface" class="section">
     <div class="container">
-        <div class="flex items-center justify-between" style="margin-bottom:3rem">
             <div class="flex items-center gap-3">
-                <div class="section-icon" style="background:rgba(245,158,11,.1);color:#f59e0b">
-                    <svg class="icon icon-md"><use href="#i-smile"/></svg>
-                </div>
-                <div>
-                    <h2 class="section-title">Hugging Face</h2>
-                    <p style="color:#6b7280;font-size:.875rem;margin-top:.25rem">AI models, spaces, and datasets for the community</p>
-                </div>
             </div>
-            <a href="https://huggingface.co/AIencoder" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 md-hide" style="color:#f59e0b;font-size:.875rem;font-weight:500">
-                View Profile <svg class="icon icon-sm"><use href="#i-up-right"/></svg>
-            </a>
         </div>
-        <!-- HF Profile Card -->
-        <div class="card glow-card card-amber" style="padding:2rem;margin-bottom:2.5rem">
             <div class="flex gap-5 profile-wrap" style="align-items:center">
                 <img id="hf-avatar" src="https://huggingface.co/avatars/46a0d6090e169c088fc1a64d4b8d993c.svg" alt="" class="profile-avatar profile-avatar-hf" onerror="this.outerHTML='<div class=\'profile-avatar profile-avatar-hf profile-avatar-fallback hf\'>A</div>'">
                 <div style="flex:1;min-width:200px">
                     <h3 style="font-size:1.25rem;font-weight:700" id="hf-name">Aryan Nukala</h3>
-                    <p style="color:#6b7280;font-size:.875rem">@AIencoder</p>
-                    <p style="color:#9ca3af;font-size:.875rem;margin-top:.5rem">AI/ML Engineer building intelligent systems</p>
                 </div>
                 <div class="flex gap-2 flex-wrap profile-stats">
                     <div class="profile-stat amber"><div class="profile-stat-num" style="color:#f59e0b" id="hf-n-models">7</div><div class="profile-stat-label">Models</div></div>
@@ -180,56 +183,32 @@
                 </div>
             </div>
         </div>
-        <!-- Models -->
-        <h3 class="flex items-center gap-2 section-subtitle" style="color:#f59e0b">
-            <svg class="icon icon-sm"><use href="#i-brain"/></svg> Models
-        </h3>
-        <div class="grid grid-3 gap-4" style="margin-bottom:2.5rem" id="hf-models"></div>
-        <!-- Spaces -->
-        <h3 class="flex items-center gap-2 section-subtitle" style="color:#c084fc">
-            <svg class="icon icon-sm"><use href="#i-layout"/></svg> Spaces
-        </h3>
-        <div class="grid grid-3 gap-4" style="margin-bottom:2.5rem" id="hf-spaces"></div>
-        <!-- Datasets -->
-        <h3 class="flex items-center gap-2 section-subtitle" style="color:#34d399">
-            <svg class="icon icon-sm"><use href="#i-db"/></svg> Datasets
-        </h3>
-        <div class="grid grid-3 gap-4" id="hf-datasets"></div>
     </div>
 </section>
 <!-- GITHUB -->
-<section id="github" class="section" style="background:rgba(255,255,255,.01)">
     <div class="container">
-        <div class="flex items-center justify-between" style="margin-bottom:3rem">
             <div class="flex items-center gap-3">
-                <div class="section-icon" style="background:rgba(255,255,255,.05);color:#fff">
-                    <svg class="icon icon-md"><use href="#i-github"/></svg>
-                </div>
-                <div>
-                    <h2 class="section-title">GitHub</h2>
-                    <p style="color:#6b7280;font-size:.875rem;margin-top:.25rem">Open source projects and contributions</p>
-                </div>
             </div>
-            <a href="https://github.com/Ary5272" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 md-hide" style="color:#9ca3af;font-size:.875rem;font-weight:500">
-                View Profile <svg class="icon icon-sm"><use href="#i-up-right"/></svg>
-            </a>
         </div>
-        <!-- Profile Card -->
-        <div class="card glow-card" style="padding:2rem;margin-bottom:2rem">
             <div class="flex gap-5 profile-wrap" style="align-items:center">
                 <img id="gh-avatar" src="https://avatars.githubusercontent.com/u/215576213?v=4" alt="" class="profile-avatar profile-avatar-gh" onerror="this.outerHTML='<div class=\'profile-avatar profile-avatar-gh profile-avatar-fallback gh\'>A</div>'">
                 <div style="flex:1;min-width:200px">
                     <h3 style="font-size:1.25rem;font-weight:700" id="gh-name">Aryan Nukala</h3>
-                    <p style="color:#6b7280;font-size:.875rem" id="gh-user">@Ary5272</p>
-                    <p style="color:#9ca3af;font-size:.875rem;margin-top:.5rem" id="gh-bio">AI/ML Developer</p>
-                    <div class="flex flex-wrap gap-4" style="margin-top:.5rem;font-size:.75rem;color:#6b7280">
-                        <span class="flex items-center gap-1"><svg class="icon icon-sm"><use href="#i-pin"/></svg><span id="gh-loc">Remote</span></span>
-                    </div>
                 </div>
                 <div class="flex gap-2 profile-stats">
                     <div class="profile-stat"><div class="profile-stat-num" style="color:#c084fc" id="gh-repos-n">5</div><div class="profile-stat-label">Repos</div></div>
@@ -237,63 +216,69 @@
                 </div>
             </div>
         </div>
-        <!-- Repos -->
-        <h3 class="flex items-center gap-2 section-subtitle" style="color:#9ca3af">
-            <svg class="icon icon-sm"><use href="#i-book"/></svg> Latest Repositories
-        </h3>
-        <div class="grid grid-3 gap-4" id="gh-grid"></div>
     </div>
 </section>
 <!-- TECH STACK -->
-<section class="section">
     <div class="container-sm text-center">
-        <h2 class="section-title" style="margin-bottom:.75rem">Tech Stack</h2>
-        <p style="color:#6b7280;margin-bottom:3rem">Technologies I work with</p>
-        <div class="flex flex-wrap justify-center gap-2" id="tech-pills"></div>
     </div>
 </section>
 <!-- CONTACT -->
-<section id="contact" class="section" style="background:rgba(255,255,255,.01)">
     <div class="container-xs text-center">
-        <h2 class="section-title" style="margin-bottom:.75rem">Let's Connect</h2>
-        <p style="color:#6b7280;margin-bottom:3rem">Interested in collaborating or have a question? Let's chat!</p>
-        <div class="grid grid-2 gap-4" style="max-width:420px;margin:0 auto">
             <a href="https://huggingface.co/AIencoder" target="_blank" rel="noopener noreferrer" class="card glow-card card-amber text-center" style="padding:1.5rem">
-                <div style="width:48px;height:48px;background:rgba(245,158,11,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;color:#f59e0b;font-size:1.5rem">
-                    <svg class="icon icon-lg"><use href="#i-smile"/></svg>
-                </div>
                 <h3 style="font-weight:600;margin-bottom:.25rem">Hugging Face</h3>
-                <p style="color:#6b7280;font-size:.875rem">@AIencoder</p>
             </a>
             <a href="https://github.com/Ary5272" target="_blank" rel="noopener noreferrer" class="card glow-card text-center" style="padding:1.5rem">
-                <div style="width:48px;height:48px;background:rgba(255,255,255,.05);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;font-size:1.5rem">
-                    <svg class="icon icon-lg"><use href="#i-github"/></svg>
-                </div>
                 <h3 style="font-weight:600;margin-bottom:.25rem">GitHub</h3>
-                <p style="color:#6b7280;font-size:.875rem">@Ary5272</p>
             </a>
         </div>
     </div>
 </section>
 <!-- FOOTER -->
-<footer style="padding:2rem 0;border-top:1px solid rgba(255,255,255,.04)">
     <div class="container flex items-center justify-between" style="flex-wrap:wrap;gap:1rem">
         <div class="flex items-center gap-1">
             <svg class="icon" style="color:#c084fc"><use href="#i-terminal"/></svg>
             <span class="mono gradient-text" style="font-weight:700;font-size:.875rem">AIencoder</span>
         </div>
-        <p style="color:#4b5563;font-size:.75rem">Built with passion and code</p>
         <div class="flex gap-1">
-            <a href="https://huggingface.co/AIencoder" target="_blank" rel="noopener noreferrer" style="color:#4b5563;padding:.5rem;transition:color .2s" onmouseover="this.style.color='#f59e0b'" onmouseout="this.style.color='#4b5563'">
-                <svg class="icon"><use href="#i-smile"/></svg>
-            </a>
-            <a href="https://github.com/Ary5272" target="_blank" rel="noopener noreferrer" style="color:#4b5563;padding:.5rem;transition:color .2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#4b5563'">
-                <svg class="icon"><use href="#i-github"/></svg>
-            </a>
         </div>
     </div>
 </footer>
@@ -303,178 +288,194 @@
 const words=['AIencoder','A Developer','An ML Engineer','A Builder'];
 let wi=0,ci=0,del=false;
 const tw=document.getElementById('typewriter');
-function type(){
-    const w=words[wi];
-    tw.textContent=del?w.substring(0,--ci):w.substring(0,++ci);
-    let s=del?40:80;
-    if(!del&&ci===w.length){s=2500;del=true}
-    else if(del&&ci===0){del=false;wi=(wi+1)%words.length;s=400}
-    setTimeout(type,s);
-}
 type();
-// ===== HARDCODED FALLBACK DATA =====
-const FALLBACK_HF_MODELS=[
-    {id:'AIencoder/Logic-Coder-7B',downloads:95,likes:1},
-    {id:'AIencoder/Hermes-2-Pro-Mistral-7B-GodCoder',downloads:15,likes:1},
-    {id:'AIencoder/Logic-Coder-7B-Q4_K_M-GGUF',downloads:52,likes:0},
-    {id:'AIencoder/HermesMath-7B-TIES',downloads:17,likes:1},
-    {id:'AIencoder/Llama3-CodeInstruct-8B',downloads:11,likes:0},
-    {id:'AIencoder/Axon26-Coder',downloads:23,likes:0},
-];
-const FALLBACK_HF_SPACES=[
-    {id:'AIencoder/AXON-TRINITY',sdk:'Gradio',likes:0},
-    {id:'AIencoder/Axon',sdk:'Docker',likes:3},
-    {id:'AIencoder/llama-wheel-factory',sdk:'Docker',likes:0},
-    {id:'AIencoder/merge-config-generator',sdk:'Gradio',likes:0},
-    {id:'AIencoder/Prompt-Template-Tester',sdk:'Gradio',likes:0},
-    {id:'AIencoder/Axon-Llama-GUI',sdk:'Docker',likes:0},
-];
-const FALLBACK_HF_DATASETS=[
-    {id:'AIencoder/llama-cpp-wheels',downloads:153,likes:1},
 ];
-const FALLBACK_GH_REPOS=[
-    {name:'llama-cpp-python',desc:'Python bindings for llama.cpp',lang:'Python',stars:0,url:'https://github.com/Ary5272/llama-cpp-python',date:'Jan 25'},
-    {name:'llama.cpp',desc:'LLM inference in C/C++',lang:'C++',stars:0,url:'https://github.com/Ary5272/llama.cpp',date:'Jan 25'},
-    {name:'llama.cpp-Dockerfile',desc:'Dockerfile for llama.cpp',lang:'Dockerfile',stars:0,url:'https://github.com/Ary5272/llama.cpp-Dockerfile',date:'Jan 25'},
-    {name:'Ary5272',desc:'Config files for my GitHub profile.',lang:'',stars:1,url:'https://github.com/Ary5272/Ary5272',date:'Jan 24'},
-    {name:'tutor-app-final',desc:'Tutor application',lang:'HTML',stars:1,url:'https://github.com/Ary5272/tutor-app-final',date:'Jan 21'},
 ];
-// ===== RENDER FUNCTIONS =====
 const LANG_COLORS={Python:'#3572A5','C++':'#f34b7d',Dockerfile:'#384d54',HTML:'#e34c26',JavaScript:'#f1e05a'};
 function renderHfCards(items,containerId,type,icon,color){
     const grid=document.getElementById(containerId);
     const base=type==='model'?'https://huggingface.co/':type==='space'?'https://huggingface.co/spaces/':'https://huggingface.co/datasets/';
-    items.forEach(m=>{
-        const name=m.id.split('/')[1];
-        const el=document.createElement('a');
-        el.href=base+m.id;el.target='_blank';el.rel='noopener noreferrer';
-        el.className='card glow-card card-amber';
-        el.innerHTML=`
-            <div class="flex items-center justify-between" style="margin-bottom:.75rem">
-                <div style="width:40px;height:40px;background:${color}15;border-radius:12px;display:flex;align-items:center;justify-content:center;color:${color};font-size:1.25rem">
-                    <svg class="icon icon-md"><use href="#i-${icon}"/></svg>
-                </div>
-                <div class="flex items-center gap-3" style="font-size:.75rem;color:#6b7280">
-                    ${m.downloads!==undefined?`<span class="flex items-center gap-1"><svg class="icon icon-sm"><use href="#i-download"/></svg> ${m.downloads}</span>`:''}
-                    ${m.sdk?`<span style="background:rgba(255,255,255,.05);padding:.125rem .5rem;border-radius:9999px;font-size:.625rem">${m.sdk}</span>`:''}
-                    <span class="flex items-center gap-1"><svg class="icon icon-sm"><use href="#i-heart"/></svg> ${m.likes}</span>
-                </div>
-            </div>
-            <h4 style="font-weight:600;font-size:.875rem;margin-bottom:.25rem" class="truncate">${name}</h4>
-            <div style="margin-top:.75rem;display:flex;align-items:center;gap:.375rem;color:${color};font-size:.75rem;font-weight:500">
-                Explore <svg class="icon icon-sm"><use href="#i-right"/></svg>
-            </div>`;
-        grid.appendChild(el);
-    });
 }
 function renderGhRepos(repos){
-    const grid=document.getElementById('gh-grid');
-    grid.innerHTML='';
-    repos.forEach(r=>{
-        const el=document.createElement('a');
-        el.href=r.url;el.target='_blank';el.rel='noopener noreferrer';
-        el.className='card glow-card card-purple';
-        const lc=LANG_COLORS[r.lang]||'#8b8b8b';
-        el.innerHTML=`
-            <div class="flex items-center justify-between" style="margin-bottom:.75rem">
-                <div class="flex items-center gap-2" style="min-width:0">
-                    <svg class="icon icon-sm" style="color:#6b7280;flex-shrink:0"><use href="#i-book"/></svg>
-                    <h4 style="font-weight:600;font-size:.875rem" class="truncate">${r.name}</h4>
-                </div>
-                <svg class="icon icon-sm" style="color:#4b5563;flex-shrink:0"><use href="#i-up-right"/></svg>
-            </div>
-            <p class="repo-desc">${r.desc||'No description'}</p>
-            <div class="flex items-center justify-between" style="font-size:.75rem">
-                <div class="flex items-center gap-3">
-                    ${r.lang?`<span class="flex items-center gap-1"><span class="lang-dot" style="background:${lc}"></span><span style="color:#9ca3af">${r.lang}</span></span>`:''}
-                    <span class="flex items-center gap-1" style="color:#6b7280"><svg class="icon icon-sm"><use href="#i-star"/></svg> ${r.stars}</span>
-                </div>
-                <span style="color:#4b5563">${r.date}</span>
-            </div>`;
-        grid.appendChild(el);
-    });
 }
 // ===== TECH STACK =====
-const techs=[
-    {name:'Machine Learning',icon:'brain',color:'#f59e0b'},
-    {name:'Python',icon:'file',color:'#60a5fa'},
-    {name:'PyTorch',icon:'flame',color:'#f97316'},
-    {name:'TensorFlow',icon:'layout',color:'#34d399'},
-    {name:'HF Transformers',icon:'db',color:'#c084fc'},
-    {name:'Git',icon:'branch',color:'#22d3ee'},
-    {name:'Docker',icon:'box',color:'#f472b6'},
-    {name:'Cloud Services',icon:'cloud',color:'#818cf8'},
-];
 const tp=document.getElementById('tech-pills');
-techs.forEach(t=>{
-    const el=document.createElement('div');
-    el.className='pill';
-    el.onmouseover=function(){this.style.borderColor=t.color+'50'};
-    el.onmouseout=function(){this.style.borderColor='rgba(255,255,255,.06)'};
-    el.innerHTML=`<svg class="icon" style="color:${t.color}"><use href="#i-${t.icon}"/></svg><span>${t.name}</span>`;
-    tp.appendChild(el);
-});
-// ===== RENDER HARDCODED DATA FIRST (instant) =====
 renderHfCards(FALLBACK_HF_MODELS,'hf-models','model','brain','#f59e0b');
 renderHfCards(FALLBACK_HF_SPACES,'hf-spaces','space','layout','#c084fc');
 renderHfCards(FALLBACK_HF_DATASETS,'hf-datasets','dataset','db','#34d399');
 renderGhRepos(FALLBACK_GH_REPOS);
-// ===== LIVE FETCH UPGRADES (when hosted on HF Space, these will work) =====
 (async()=>{
-    try{
-        const r=await fetch('https://api.github.com/users/Ary5272');
-        if(!r.ok)return;
-        const u=await r.json();
-        if(u.name)document.getElementById('gh-name').textContent=u.name;
-        if(u.bio)document.getElementById('gh-bio').textContent=u.bio;
-        if(u.location)document.getElementById('gh-loc').textContent=u.location;
-        if(u.public_repos){document.getElementById('gh-repos-n').textContent=u.public_repos;document.getElementById('s-repos').textContent=u.public_repos+'+';}
-        if(u.followers)document.getElementById('gh-followers-n').textContent=u.followers;
-        if(u.avatar_url){const img=document.getElementById('gh-avatar');if(img)img.src=u.avatar_url;}
-    }catch(e){}
-    try{
-        const r=await fetch('https://api.github.com/users/Ary5272/repos?sort=updated&per_page=6');
-        if(!r.ok)return;
-        const repos=await r.json();
-        renderGhRepos(repos.map(r=>({name:r.name,desc:r.description||'',lang:r.language||'',stars:r.stargazers_count,url:r.html_url,date:new Date(r.updated_at).toLocaleDateString('en-US',{month:'short',day:'numeric'})})));
-    }catch(e){}
-    try{
-        const r=await fetch('https://huggingface.co/api/users/AIencoder/overview');
-        if(!r.ok)return;
-        const u=await r.json();
-        if(u.fullname)document.getElementById('hf-name').textContent=u.fullname;
-        if(u.numModels)document.getElementById('hf-n-models').textContent=u.numModels;
-        if(u.numSpaces)document.getElementById('hf-n-spaces').textContent=u.numSpaces;
-        if(u.numDatasets)document.getElementById('hf-n-datasets').textContent=u.numDatasets;
-        if(u.numFollowers)document.getElementById('hf-n-followers').textContent=u.numFollowers;
-        if(u.avatarUrl){const img=document.getElementById('hf-avatar');if(img)img.src='https://huggingface.co'+u.avatarUrl;}
-    }catch(e){}
 })();
 // ===== MOBILE MENU =====
 document.getElementById('menu-btn').addEventListener('click',()=>document.getElementById('mobile-menu').classList.toggle('hidden'));
 // ===== SMOOTH SCROLL =====
-document.querySelectorAll('a[href^="#"]').forEach(a=>a.addEventListener('click',function(e){
-    e.preventDefault();
-    const t=document.querySelector(this.getAttribute('href'));
-    if(t){t.scrollIntoView({behavior:'smooth',block:'start'});document.getElementById('mobile-menu').classList.add('hidden')}
-}));
 // ===== RESPONSIVE NAV =====
-function checkNav(){
-    const w=window.innerWidth;
-    document.getElementById('nav-links').style.display=w>=768?'flex':'none';
-    document.getElementById('menu-btn').style.display=w<768?'block':'none';
-    if(w>=768)document.getElementById('mobile-menu').classList.add('hidden');
-}
 window.addEventListener('resize',checkNav);checkNav();
 </script>
 </body>

 <!DOCTYPE html>
+<html lang="en" data-theme="dark">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <body>
 <div class="mesh-bg"></div>
 <div class="grid-bg"></div>
+<div class="particles" id="particles"></div>
 <!-- SVG SPRITES -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
 <symbol id="i-book" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></symbol>
 <symbol id="i-pin" viewBox="0 0 24 24"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></symbol>
 <symbol id="i-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></symbol>
 <symbol id="i-brain" viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/></symbol>
 <symbol id="i-db" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></symbol>
 <symbol id="i-layout" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></symbol>
 <symbol id="i-cloud" viewBox="0 0 24 24"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></symbol>
 <symbol id="i-download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></symbol>
 <symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
+<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></symbol>
+<symbol id="i-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></symbol>
+<symbol id="i-rocket" viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></symbol>
+<symbol id="i-zap" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></symbol>
+<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></symbol>
+<symbol id="i-activity" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></symbol>
+<symbol id="i-tool" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></symbol>
+<symbol id="i-merge" viewBox="0 0 24 24"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/></symbol>
+<symbol id="i-pen" viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></symbol>
+<symbol id="i-calendar" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="4" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></symbol>
+<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></symbol>
+<symbol id="i-eye" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></symbol>
 </svg>
 <!-- NAV -->
         </a>
         <div class="flex items-center gap-1 md-hide" id="nav-links">
             <a href="#home" class="nav-link">Home</a>
+            <a href="#projects" class="nav-link">Projects</a>
+            <a href="#huggingface" class="nav-link">HF</a>
             <a href="#github" class="nav-link">GitHub</a>
+            <a href="#blog" class="nav-link">Blog</a>
             <a href="#contact" class="nav-link">Contact</a>
         </div>
+        <div class="flex items-center gap-1">
+            <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
+                <svg class="icon icon-md" id="theme-icon-sun" style="display:none"><use href="#i-sun"/></svg>
+                <svg class="icon icon-md" id="theme-icon-moon"><use href="#i-moon"/></svg>
+            </button>
+            <button id="menu-btn" class="md-show" style="display:none;padding:.5rem">
+                <svg class="icon icon-md"><use href="#i-menu"/></svg>
+            </button>
+        </div>
     </div>
     <div id="mobile-menu" class="mobile-menu hidden glass">
         <a href="#home">Home</a>
+        <a href="#projects">Projects</a>
         <a href="#huggingface">Hugging Face</a>
         <a href="#github">GitHub</a>
+        <a href="#blog">Blog</a>
         <a href="#contact">Contact</a>
     </div>
 </nav>
 <section id="home" style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding-top:80px">
     <div class="container text-center">
         <div class="fade-up" style="animation-delay:.1s">
+            <span style="display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;border:1px solid rgba(74,222,128,.2);font-size:.875rem;color:var(--text-muted);background:var(--bg-card);margin-bottom:2rem">
                 <span class="pulse" style="width:8px;height:8px;background:#4ade80;border-radius:50%;display:inline-block"></span>
                 Available for Collaboration
             </span>
         </div>
         <h1 class="fade-up" style="animation-delay:.2s">
+            <span class="hero-title" style="display:block;font-size:clamp(2.5rem,8vw,5rem);font-weight:800;letter-spacing:-.02em">Hello, I'm</span>
             <span class="hero-sub mono cursor gradient-text" id="typewriter" style="display:block;font-size:clamp(2rem,6vw,4rem);font-weight:700;margin-top:.25rem"></span>
         </h1>
+        <p class="fade-up" style="animation-delay:.35s;font-size:clamp(1rem,2vw,1.25rem);color:var(--text-dim);max-width:600px;margin:2rem auto 3rem;line-height:1.7">
             Building the future with AI and code. Passionate about machine learning, open-source, and creating impactful solutions.
         </p>
         <div class="flex flex-wrap justify-center gap-3 fade-up" style="animation-delay:.5s">
                 <svg class="icon"><use href="#i-github"/></svg> GitHub
             </a>
         </div>
         <div class="grid grid-4 gap-3 fade-up" style="animation-delay:.65s;max-width:700px;margin:5rem auto 0">
+            <div class="card glow-card stat"><div class="stat-icon" style="color:#c084fc"><svg class="icon icon-lg"><use href="#i-cpu"/></svg></div><div class="stat-num">15+</div><div class="stat-label">AI Models</div></div>
+            <div class="card glow-card stat"><div class="stat-icon" style="color:#60a5fa"><svg class="icon icon-lg"><use href="#i-branch"/></svg></div><div class="stat-num" id="s-repos">5+</div><div class="stat-label">Repositories</div></div>
+            <div class="card glow-card stat"><div class="stat-icon" style="color:#34d399"><svg class="icon icon-lg"><use href="#i-code"/></svg></div><div class="stat-num">10K+</div><div class="stat-label">Lines of Code</div></div>
+            <div class="card glow-card stat"><div class="stat-icon" style="color:#f472b6"><svg class="icon icon-lg"><use href="#i-heart"/></svg></div><div class="stat-num">500+</div><div class="stat-label">Contributions</div></div>
         </div>
     </div>
 </section>
 <!-- CODE SHOWCASE -->
 <section class="section">
     <div class="container-sm">
+        <div class="code-win reveal" style="box-shadow:0 24px 48px rgba(168,85,247,.05)">
             <div class="code-head">
                 <div class="code-dot" style="background:rgba(239,68,68,.8)"></div>
                 <div class="code-dot" style="background:rgba(234,179,8,.8)"></div>
                 <div class="code-dot" style="background:rgba(34,197,94,.8)"></div>
+                <span class="mono" style="margin-left:1rem;color:var(--text-dim);font-size:.75rem">developer_profile.py</span>
             </div>
             <div class="code-body">
                 <div class="c-gray2"># Define the developer profile</div>
                 <div style="padding-left:1.5rem"><span class="c-purple">def</span> <span class="c-blue">__init__</span><span class="c-gray">(</span><span class="c-orange">self</span><span class="c-gray">):</span></div>
                 <div style="padding-left:2.5rem"><span class="c-orange">self</span><span class="c-gray">.</span>name <span class="c-gray">=</span> <span class="c-green">"AIencoder"</span></div>
                 <div style="padding-left:2.5rem"><span class="c-orange">self</span><span class="c-gray">.</span>role <span class="c-gray">=</span> <span class="c-green">"AI/ML Engineer &amp; Developer"</span></div>
+                <div style="padding-left:2.5rem"><span class="c-orange">self</span><span class="c-gray">.</span>passion <span class="c-gray">=</span> <span class="c-green">"Building tools that matter"</span></div>
                 <div style="padding-left:1.5rem;margin-top:.75rem"><span class="c-purple">def</span> <span class="c-blue">create_impact</span><span class="c-gray">(</span><span class="c-orange">self</span><span class="c-gray">):</span></div>
                 <div style="padding-left:2.5rem"><span class="c-purple">return</span> <span class="c-green">"Transforming ideas into reality"</span></div>
             </div>
         </div>
     </div>
 </section>
+<!-- PROJECTS -->
+<section id="projects" class="section section-alt">
+    <div class="container">
+        <div class="text-center reveal" style="margin-bottom:4rem">
+            <h2 class="section-title" style="margin-bottom:.75rem">Featured Projects</h2>
+            <p style="color:var(--text-dim);max-width:500px;margin:0 auto">Flagship projects I've built — from AI coding assistants to medical imaging tools</p>
+        </div>
+        <div style="display:flex;flex-direction:column;gap:2rem" id="projects-grid">
+            <!-- Rendered by JS -->
+        </div>
+    </div>
+</section>
 <!-- HUGGING FACE -->
 <section id="huggingface" class="section">
     <div class="container">
+        <div class="flex items-center justify-between reveal" style="margin-bottom:3rem">
             <div class="flex items-center gap-3">
+                <div class="section-icon" style="background:rgba(245,158,11,.1);color:#f59e0b"><svg class="icon icon-md"><use href="#i-smile"/></svg></div>
+                <div><h2 class="section-title">Hugging Face</h2><p style="color:var(--text-dim);font-size:.875rem;margin-top:.25rem">AI models, spaces, and datasets</p></div>
             </div>
+            <a href="https://huggingface.co/AIencoder" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 md-hide" style="color:#f59e0b;font-size:.875rem;font-weight:500">View Profile <svg class="icon icon-sm"><use href="#i-up-right"/></svg></a>
         </div>
+        <!-- HF Profile -->
+        <div class="card glow-card card-amber reveal" style="padding:2rem;margin-bottom:2.5rem">
             <div class="flex gap-5 profile-wrap" style="align-items:center">
                 <img id="hf-avatar" src="https://huggingface.co/avatars/46a0d6090e169c088fc1a64d4b8d993c.svg" alt="" class="profile-avatar profile-avatar-hf" onerror="this.outerHTML='<div class=\'profile-avatar profile-avatar-hf profile-avatar-fallback hf\'>A</div>'">
                 <div style="flex:1;min-width:200px">
                     <h3 style="font-size:1.25rem;font-weight:700" id="hf-name">Aryan Nukala</h3>
+                    <p style="color:var(--text-dim);font-size:.875rem">@AIencoder</p>
+                    <p style="color:var(--text-muted);font-size:.875rem;margin-top:.5rem">AI/ML Engineer building intelligent systems</p>
                 </div>
                 <div class="flex gap-2 flex-wrap profile-stats">
                     <div class="profile-stat amber"><div class="profile-stat-num" style="color:#f59e0b" id="hf-n-models">7</div><div class="profile-stat-label">Models</div></div>
                 </div>
             </div>
         </div>
+        <h3 class="flex items-center gap-2 section-subtitle reveal" style="color:#f59e0b"><svg class="icon icon-sm"><use href="#i-brain"/></svg> Models</h3>
+        <div class="grid grid-3 gap-4 reveal" style="margin-bottom:2.5rem" id="hf-models"></div>
+        <h3 class="flex items-center gap-2 section-subtitle reveal" style="color:#c084fc"><svg class="icon icon-sm"><use href="#i-layout"/></svg> Spaces</h3>
+        <div class="grid grid-3 gap-4 reveal" style="margin-bottom:2.5rem" id="hf-spaces"></div>
+        <h3 class="flex items-center gap-2 section-subtitle reveal" style="color:#34d399"><svg class="icon icon-sm"><use href="#i-db"/></svg> Datasets</h3>
+        <div class="grid grid-3 gap-4 reveal" id="hf-datasets"></div>
     </div>
 </section>
 <!-- GITHUB -->
+<section id="github" class="section section-alt">
     <div class="container">
+        <div class="flex items-center justify-between reveal" style="margin-bottom:3rem">
             <div class="flex items-center gap-3">
+                <div class="section-icon" style="background:rgba(255,255,255,.05);color:var(--text)"><svg class="icon icon-md"><use href="#i-github"/></svg></div>
+                <div><h2 class="section-title">GitHub</h2><p style="color:var(--text-dim);font-size:.875rem;margin-top:.25rem">Open source projects and contributions</p></div>
             </div>
+            <a href="https://github.com/Ary5272" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 md-hide" style="color:var(--text-muted);font-size:.875rem;font-weight:500">View Profile <svg class="icon icon-sm"><use href="#i-up-right"/></svg></a>
         </div>
+        <div class="card glow-card reveal" style="padding:2rem;margin-bottom:2rem">
             <div class="flex gap-5 profile-wrap" style="align-items:center">
                 <img id="gh-avatar" src="https://avatars.githubusercontent.com/u/215576213?v=4" alt="" class="profile-avatar profile-avatar-gh" onerror="this.outerHTML='<div class=\'profile-avatar profile-avatar-gh profile-avatar-fallback gh\'>A</div>'">
                 <div style="flex:1;min-width:200px">
                     <h3 style="font-size:1.25rem;font-weight:700" id="gh-name">Aryan Nukala</h3>
+                    <p style="color:var(--text-dim);font-size:.875rem" id="gh-user">@Ary5272</p>
+                    <p style="color:var(--text-muted);font-size:.875rem;margin-top:.5rem" id="gh-bio">AI/ML Developer</p>
                 </div>
                 <div class="flex gap-2 profile-stats">
                     <div class="profile-stat"><div class="profile-stat-num" style="color:#c084fc" id="gh-repos-n">5</div><div class="profile-stat-label">Repos</div></div>
                 </div>
             </div>
         </div>
+        <h3 class="flex items-center gap-2 section-subtitle reveal" style="color:var(--text-muted)"><svg class="icon icon-sm"><use href="#i-book"/></svg> Latest Repositories</h3>
+        <div class="grid grid-3 gap-4 reveal" id="gh-grid"></div>
+    </div>
+</section>
+<!-- BLOG -->
+<section id="blog" class="section">
+    <div class="container">
+        <div class="text-center reveal" style="margin-bottom:4rem">
+            <h2 class="section-title" style="margin-bottom:.75rem">Blog & Insights</h2>
+            <p style="color:var(--text-dim);max-width:500px;margin:0 auto">Thoughts on AI development, model optimization, and open-source tooling</p>
+        </div>
+        <div class="grid grid-3 gap-4" id="blog-grid"></div>
     </div>
 </section>
 <!-- TECH STACK -->
+<section class="section section-alt">
     <div class="container-sm text-center">
+        <h2 class="section-title reveal" style="margin-bottom:.75rem">Tech Stack</h2>
+        <p class="reveal" style="color:var(--text-dim);margin-bottom:3rem">Technologies I work with</p>
+        <div class="flex flex-wrap justify-center gap-2 reveal" id="tech-pills"></div>
     </div>
 </section>
 <!-- CONTACT -->
+<section id="contact" class="section">
     <div class="container-xs text-center">
+        <h2 class="section-title reveal" style="margin-bottom:.75rem">Let's Connect</h2>
+        <p class="reveal" style="color:var(--text-dim);margin-bottom:3rem">Interested in collaborating or have a question? Let's chat!</p>
+        <div class="grid grid-2 gap-4 reveal" style="max-width:420px;margin:0 auto">
             <a href="https://huggingface.co/AIencoder" target="_blank" rel="noopener noreferrer" class="card glow-card card-amber text-center" style="padding:1.5rem">
+                <div style="width:48px;height:48px;background:rgba(245,158,11,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;color:#f59e0b;font-size:1.5rem"><svg class="icon icon-lg"><use href="#i-smile"/></svg></div>
                 <h3 style="font-weight:600;margin-bottom:.25rem">Hugging Face</h3>
+                <p style="color:var(--text-dim);font-size:.875rem">@AIencoder</p>
             </a>
             <a href="https://github.com/Ary5272" target="_blank" rel="noopener noreferrer" class="card glow-card text-center" style="padding:1.5rem">
+                <div style="width:48px;height:48px;background:var(--bg-card-hover);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;font-size:1.5rem"><svg class="icon icon-lg"><use href="#i-github"/></svg></div>
                 <h3 style="font-weight:600;margin-bottom:.25rem">GitHub</h3>
+                <p style="color:var(--text-dim);font-size:.875rem">@Ary5272</p>
             </a>
         </div>
     </div>
 </section>
 <!-- FOOTER -->
+<footer style="padding:2rem 0;border-top:1px solid var(--border)">
     <div class="container flex items-center justify-between" style="flex-wrap:wrap;gap:1rem">
         <div class="flex items-center gap-1">
             <svg class="icon" style="color:#c084fc"><use href="#i-terminal"/></svg>
             <span class="mono gradient-text" style="font-weight:700;font-size:.875rem">AIencoder</span>
         </div>
+        <div class="flex items-center gap-3">
+            <div class="visitor-badge">
+                <span class="visitor-dot"></span>
+                <svg class="icon icon-sm"><use href="#i-eye"/></svg>
+                <span id="visitor-count">—</span> visits
+            </div>
+            <p style="color:var(--text-faint);font-size:.75rem">Built with passion and code</p>
+        </div>
         <div class="flex gap-1">
+            <a href="https://huggingface.co/AIencoder" target="_blank" rel="noopener noreferrer" style="color:var(--text-faint);padding:.5rem;transition:color .2s" onmouseover="this.style.color='#f59e0b'" onmouseout="this.style.color=''"><svg class="icon"><use href="#i-smile"/></svg></a>
+            <a href="https://github.com/Ary5272" target="_blank" rel="noopener noreferrer" style="color:var(--text-faint);padding:.5rem;transition:color .2s" onmouseover="this.style.color='#c084fc'" onmouseout="this.style.color=''"><svg class="icon"><use href="#i-github"/></svg></a>
         </div>
     </div>
 </footer>
 const words=['AIencoder','A Developer','An ML Engineer','A Builder'];
 let wi=0,ci=0,del=false;
 const tw=document.getElementById('typewriter');
+function type(){const w=words[wi];tw.textContent=del?w.substring(0,--ci):w.substring(0,++ci);let s=del?40:80;if(!del&&ci===w.length){s=2500;del=true}else if(del&&ci===0){del=false;wi=(wi+1)%words.length;s=400}setTimeout(type,s)}
 type();
+// ===== THEME TOGGLE =====
+const html=document.documentElement;
+const themeBtn=document.getElementById('theme-toggle');
+const sunIcon=document.getElementById('theme-icon-sun');
+const moonIcon=document.getElementById('theme-icon-moon');
+function setTheme(t){html.setAttribute('data-theme',t);localStorage.setItem('theme',t);sunIcon.style.display=t==='light'?'none':'inline-block';moonIcon.style.display=t==='light'?'inline-block':'none'}
+themeBtn.addEventListener('click',()=>setTheme(html.getAttribute('data-theme')==='dark'?'light':'dark'));
+setTheme(localStorage.getItem('theme')||'dark');
+// ===== FLOATING PARTICLES =====
+const particleContainer=document.getElementById('particles');
+const colors=['#a855f7','#ec4899','#f59e0b','#60a5fa','#34d399'];
+for(let i=0;i<20;i++){const p=document.createElement('div');p.className='particle';const s=Math.random()*4+2;p.style.cssText=`width:${s}px;height:${s}px;left:${Math.random()*100}%;background:${colors[i%colors.length]};animation-duration:${Math.random()*20+15}s;animation-delay:${Math.random()*10}s;opacity:${Math.random()*.3+.1}`;particleContainer.appendChild(p)}
+// ===== SCROLL REVEAL =====
+const revealObserver=new IntersectionObserver((entries)=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');revealObserver.unobserve(e.target)}})},{threshold:.1,rootMargin:'0px 0px -50px 0px'});
+document.querySelectorAll('.reveal').forEach(el=>revealObserver.observe(el));
+// ===== VISITOR COUNTER (localStorage-based) =====
+let visits=parseInt(localStorage.getItem('portfolio_visits')||'0')+1;
+localStorage.setItem('portfolio_visits',visits);
+document.getElementById('visitor-count').textContent=visits.toLocaleString();
+// ===== PROJECTS =====
+const projects=[
+    {
+        name:'Axon',emoji:'🔥',
+        tagline:'Free AI Coding Assistant — 25 Tools, 100% Local',
+        desc:'A comprehensive AI coding assistant that runs entirely locally using llama.cpp. Features 5 optimized models (up to 30B parameters), 25 coding tools including code generation, debugging, security scanning, SQL/Shell/API builders, and voice input. Uses custom AVX2-optimized wheels for 2-3x faster inference.',
+        tags:['llama.cpp','Gradio','Docker','Python'],
+        color:'#f59e0b',bg:'linear-gradient(135deg,#1a1000,#2d1800)',
+        links:[{label:'Try it',url:'https://huggingface.co/spaces/AIencoder/Axon',icon:'i-rocket'},{label:'Code',url:'https://github.com/Ary5272/llama-cpp-python',icon:'i-github'}],
+        featured:true,
+        stats:['25 Tools','5 Models','100% Local']
+    },
+    {
+        name:'RadAssist-MedGemma',emoji:'🏥',
+        tagline:'AI Radiology Triage Assistant',
+        desc:'A 3-step agentic radiology pipeline built for the MedGemma Impact Challenge. Uses MedGemma 1.5 4B to classify chest X-ray severity, extract systematic findings using the ABCDE approach, and generate ACR-formatted radiology reports — all on a single GPU with 4-bit quantization.',
+        tags:['MedGemma','PyTorch','Medical AI','HuggingFace'],
+        color:'#60a5fa',bg:'linear-gradient(135deg,#001a2e,#002244)',
+        links:[{label:'Demo',url:'https://huggingface.co/spaces/AIencoder/RadAssist-MedGemma',icon:'i-layout'},{label:'Notebook',url:'https://www.kaggle.com/code/ary5272/radassist-medgemma-ai-radiology-triage-assistant',icon:'i-file'}],
+        featured:true,
+        stats:['3-Step Pipeline','4B Params','Edge AI']
+    },
+    {
+        name:'Wheel Factory',emoji:'🏭',
+        tagline:'Automated llama-cpp-python Wheel Builder',
+        desc:'A Gradio-based automation system for building llama-cpp-python wheels across multiple Python versions (3.10-3.13) with AVX2 optimization. Solves the pain of finding compatible pre-built wheels for Debian/Ubuntu deployments. Wheels published to a public HuggingFace dataset.',
+        tags:['Python','C++','CI/CD','HuggingFace'],
+        color:'#34d399',bg:'linear-gradient(135deg,#001a0f,#002a18)',
+        links:[{label:'Space',url:'https://huggingface.co/spaces/AIencoder/llama-wheel-factory',icon:'i-layout'},{label:'Wheels',url:'https://huggingface.co/datasets/AIencoder/llama-cpp-wheels',icon:'i-download'}],
+        stats:['4 Python Versions','AVX2 Optimized','153+ Downloads']
+    },
+    {
+        name:'Merge Config Generator',emoji:'🔀',
+        tagline:'Visual Model Merging Tool',
+        desc:'A web UI for creating LazyMergeKit merge configurations. Checks model architecture compatibility, supports DARE-TIES/SLERP/Linear methods, provides weight presets, and generates ready-to-use YAML configs for merging LLMs on Google Colab.',
+        tags:['Gradio','HuggingFace Hub','YAML','Model Merging'],
+        color:'#c084fc',bg:'linear-gradient(135deg,#1a0033,#2a0052)',
+        links:[{label:'Try it',url:'https://huggingface.co/spaces/AIencoder/merge-config-generator',icon:'i-rocket'}],
+        stats:['Arch Checking','Multiple Methods','1-Click Config']
+    }
 ];
+const projectsGrid=document.getElementById('projects-grid');
+projects.forEach(p=>{
+    const card=document.createElement('div');
+    card.className='project-card glow-card reveal';
+    card.innerHTML=`
+        <div class="project-card-inner" style="display:flex">
+            <div class="project-img" style="background:${p.bg}">
+                ${p.featured?'<span class="project-featured">Featured</span>':''}
+                <span style="position:relative;z-index:1">${p.emoji}</span>
+            </div>
+            <div class="project-body">
+                <h3 style="font-size:1.25rem;font-weight:700;margin-bottom:.25rem">${p.name}</h3>
+                <p style="color:${p.color};font-size:.875rem;font-weight:500;margin-bottom:.75rem">${p.tagline}</p>
+                <p style="color:var(--text-dim);font-size:.8125rem;line-height:1.7;margin-bottom:1rem">${p.desc}</p>
+                <div class="flex flex-wrap gap-1" style="margin-bottom:1rem">
+                    ${p.stats.map(s=>`<span style="padding:.25rem .75rem;border-radius:9999px;font-size:.625rem;font-weight:600;background:${p.color}15;color:${p.color};border:1px solid ${p.color}25">${s}</span>`).join('')}
+                </div>
+                <div class="flex flex-wrap gap-1" style="margin-bottom:1.25rem">
+                    ${p.tags.map(t=>`<span style="padding:.2rem .6rem;border-radius:9999px;font-size:.625rem;color:var(--text-dim);background:var(--bg-card);border:1px solid var(--border)">${t}</span>`).join('')}
+                </div>
+                <div class="flex gap-2">
+                    ${p.links.map(l=>`<a href="${l.url}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-ghost"><svg class="icon icon-sm"><use href="#${l.icon}"/></svg>${l.label}</a>`).join('')}
+                </div>
+            </div>
+        </div>`;
+    projectsGrid.appendChild(card);
+    revealObserver.observe(card);
+});
+// ===== BLOG POSTS =====
+const blogPosts=[
+    {
+        title:'Building a Local AI Coding Assistant from Scratch',
+        excerpt:'How I built Axon — a free, 100% local AI coding assistant with 25 tools and custom AVX2-optimized inference. The journey from broken wheels to 2-3x speedups.',
+        date:'Jan 2026',readTime:'8 min',
+        tags:['llama.cpp','Local AI','Tutorial'],
+        color:'#f59e0b',bg:'linear-gradient(135deg,#2d1800,#1a1000)',icon:'i-zap'
+    },
+    {
+        title:'Model Merging: Combining Coding & Math LLMs',
+        excerpt:'A deep dive into merging Qwen2.5-Coder and Qwen2.5-Math using DARE-TIES to create a model that excels at both — architecture compatibility, weight tuning, and results.',
+        date:'Feb 2026',readTime:'6 min',
+        tags:['Model Merging','DARE-TIES','Qwen'],
+        color:'#c084fc',bg:'linear-gradient(135deg,#1a0033,#2a0052)',icon:'i-merge'
+    },
+    {
+        title:'MedGemma for Radiology: Building an AI Triage Agent',
+        excerpt:'How I used MedGemma 1.5 4B to build a 3-step agentic pipeline for chest X-ray analysis — from severity classification to structured radiology reports.',
+        date:'Feb 2026',readTime:'10 min',
+        tags:['Medical AI','MedGemma','Agents'],
+        color:'#60a5fa',bg:'linear-gradient(135deg,#001a2e,#002244)',icon:'i-activity'
+    }
 ];
+const blogGrid=document.getElementById('blog-grid');
+blogPosts.forEach(post=>{
+    const el=document.createElement('div');
+    el.className='blog-card glow-card reveal';
+    el.innerHTML=`
+        <div class="blog-header" style="background:${post.bg}">
+            <svg class="icon" style="font-size:2.5rem;color:${post.color};position:relative;z-index:1;opacity:.8"><use href="#${post.icon}"/></svg>
+        </div>
+        <div class="blog-body">
+            <div class="blog-meta">
+                <span class="flex items-center gap-1"><svg class="icon icon-sm"><use href="#i-calendar"/></svg>${post.date}</span>
+                <span class="blog-dot"></span>
+                <span class="flex items-center gap-1"><svg class="icon icon-sm"><use href="#i-clock"/></svg>${post.readTime}</span>
+            </div>
+            <h3 style="font-size:1rem;font-weight:700;margin-bottom:.5rem;line-height:1.4">${post.title}</h3>
+            <p style="font-size:.8125rem;color:var(--text-dim);line-height:1.6;margin-bottom:1rem">${post.excerpt}</p>
+            <div class="flex flex-wrap gap-1">
+                ${post.tags.map(t=>`<span style="padding:.2rem .6rem;border-radius:9999px;font-size:.625rem;color:${post.color};background:${post.color}10;border:1px solid ${post.color}20">${t}</span>`).join('')}
+            </div>
+        </div>`;
+    blogGrid.appendChild(el);
+    revealObserver.observe(el);
+});
+// ===== HF DATA =====
+const FALLBACK_HF_MODELS=[{id:'AIencoder/Logic-Coder-7B',downloads:95,likes:1},{id:'AIencoder/Hermes-2-Pro-Mistral-7B-GodCoder',downloads:15,likes:1},{id:'AIencoder/Logic-Coder-7B-Q4_K_M-GGUF',downloads:52,likes:0},{id:'AIencoder/HermesMath-7B-TIES',downloads:17,likes:1},{id:'AIencoder/Llama3-CodeInstruct-8B',downloads:11,likes:0},{id:'AIencoder/Axon26-Coder',downloads:23,likes:0}];
+const FALLBACK_HF_SPACES=[{id:'AIencoder/AXON-TRINITY',sdk:'Gradio',likes:0},{id:'AIencoder/Axon',sdk:'Docker',likes:3},{id:'AIencoder/llama-wheel-factory',sdk:'Docker',likes:0},{id:'AIencoder/merge-config-generator',sdk:'Gradio',likes:0},{id:'AIencoder/Prompt-Template-Tester',sdk:'Gradio',likes:0},{id:'AIencoder/Axon-Llama-GUI',sdk:'Docker',likes:0}];
+const FALLBACK_HF_DATASETS=[{id:'AIencoder/llama-cpp-wheels',downloads:153,likes:1}];
+const FALLBACK_GH_REPOS=[{name:'llama-cpp-python',desc:'Python bindings for llama.cpp',lang:'Python',stars:0,url:'https://github.com/Ary5272/llama-cpp-python',date:'Jan 25'},{name:'llama.cpp',desc:'LLM inference in C/C++',lang:'C++',stars:0,url:'https://github.com/Ary5272/llama.cpp',date:'Jan 25'},{name:'llama.cpp-Dockerfile',desc:'Dockerfile for llama.cpp',lang:'Dockerfile',stars:0,url:'https://github.com/Ary5272/llama.cpp-Dockerfile',date:'Jan 25'},{name:'Ary5272',desc:'Config files for my GitHub profile.',lang:'',stars:1,url:'https://github.com/Ary5272/Ary5272',date:'Jan 24'},{name:'tutor-app-final',desc:'Tutor application',lang:'HTML',stars:1,url:'https://github.com/Ary5272/tutor-app-final',date:'Jan 21'}];
 const LANG_COLORS={Python:'#3572A5','C++':'#f34b7d',Dockerfile:'#384d54',HTML:'#e34c26',JavaScript:'#f1e05a'};
 function renderHfCards(items,containerId,type,icon,color){
     const grid=document.getElementById(containerId);
     const base=type==='model'?'https://huggingface.co/':type==='space'?'https://huggingface.co/spaces/':'https://huggingface.co/datasets/';
+    items.forEach(m=>{const name=m.id.split('/')[1];const el=document.createElement('a');el.href=base+m.id;el.target='_blank';el.rel='noopener noreferrer';el.className='card glow-card card-amber';el.innerHTML=`<div class="flex items-center justify-between" style="margin-bottom:.75rem"><div style="width:40px;height:40px;background:${color}15;border-radius:12px;display:flex;align-items:center;justify-content:center;color:${color};font-size:1.25rem"><svg class="icon icon-md"><use href="#i-${icon}"/></svg></div><div class="flex items-center gap-3" style="font-size:.75rem;color:var(--text-dim)">${m.downloads!==undefined?`<span class="flex items-center gap-1"><svg class="icon icon-sm"><use href="#i-download"/></svg> ${m.downloads}</span>`:''} ${m.sdk?`<span style="background:var(--bg-card-hover);padding:.125rem .5rem;border-radius:9999px;font-size:.625rem">${m.sdk}</span>`:''}<span class="flex items-center gap-1"><svg class="icon icon-sm"><use href="#i-heart"/></svg> ${m.likes}</span></div></div><h4 style="font-weight:600;font-size:.875rem;margin-bottom:.25rem" class="truncate">${name}</h4><div style="margin-top:.75rem;display:flex;align-items:center;gap:.375rem;color:${color};font-size:.75rem;font-weight:500">Explore <svg class="icon icon-sm"><use href="#i-right"/></svg></div>`;grid.appendChild(el)});
 }
 function renderGhRepos(repos){
+    const grid=document.getElementById('gh-grid');grid.innerHTML='';
+    repos.forEach(r=>{const el=document.createElement('a');el.href=r.url;el.target='_blank';el.rel='noopener noreferrer';el.className='card glow-card card-purple';const lc=LANG_COLORS[r.lang]||'#8b8b8b';el.innerHTML=`<div class="flex items-center justify-between" style="margin-bottom:.75rem"><div class="flex items-center gap-2" style="min-width:0"><svg class="icon icon-sm" style="color:var(--text-dim);flex-shrink:0"><use href="#i-book"/></svg><h4 style="font-weight:600;font-size:.875rem" class="truncate">${r.name}</h4></div><svg class="icon icon-sm" style="color:var(--text-faint);flex-shrink:0"><use href="#i-up-right"/></svg></div><p class="repo-desc">${r.desc||'No description'}</p><div class="flex items-center justify-between" style="font-size:.75rem"><div class="flex items-center gap-3">${r.lang?`<span class="flex items-center gap-1"><span class="lang-dot" style="background:${lc}"></span><span style="color:var(--text-muted)">${r.lang}</span></span>`:''}<span class="flex items-center gap-1" style="color:var(--text-dim)"><svg class="icon icon-sm"><use href="#i-star"/></svg> ${r.stars}</span></div><span style="color:var(--text-faint)">${r.date}</span></div>`;grid.appendChild(el)});
 }
 // ===== TECH STACK =====
+const techs=[{name:'Machine Learning',icon:'brain',color:'#f59e0b'},{name:'Python',icon:'file',color:'#60a5fa'},{name:'PyTorch',icon:'flame',color:'#f97316'},{name:'TensorFlow',icon:'layout',color:'#34d399'},{name:'HF Transformers',icon:'db',color:'#c084fc'},{name:'Git',icon:'branch',color:'#22d3ee'},{name:'Docker',icon:'box',color:'#f472b6'},{name:'Cloud Services',icon:'cloud',color:'#818cf8'}];
 const tp=document.getElementById('tech-pills');
+techs.forEach(t=>{const el=document.createElement('div');el.className='pill';el.onmouseover=function(){this.style.borderColor=t.color+'50'};el.onmouseout=function(){this.style.borderColor=''};el.innerHTML=`<svg class="icon" style="color:${t.color}"><use href="#i-${t.icon}"/></svg><span>${t.name}</span>`;tp.appendChild(el)});
+// ===== RENDER FALLBACK DATA =====
 renderHfCards(FALLBACK_HF_MODELS,'hf-models','model','brain','#f59e0b');
 renderHfCards(FALLBACK_HF_SPACES,'hf-spaces','space','layout','#c084fc');
 renderHfCards(FALLBACK_HF_DATASETS,'hf-datasets','dataset','db','#34d399');
 renderGhRepos(FALLBACK_GH_REPOS);
+// ===== LIVE FETCH UPGRADES =====
 (async()=>{
+    try{const r=await fetch('https://api.github.com/users/Ary5272');if(!r.ok)return;const u=await r.json();if(u.name)document.getElementById('gh-name').textContent=u.name;if(u.bio)document.getElementById('gh-bio').textContent=u.bio;if(u.public_repos){document.getElementById('gh-repos-n').textContent=u.public_repos;document.getElementById('s-repos').textContent=u.public_repos+'+'}if(u.followers)document.getElementById('gh-followers-n').textContent=u.followers;if(u.avatar_url){const img=document.getElementById('gh-avatar');if(img&&img.tagName==='IMG')img.src=u.avatar_url}}catch(e){}
+    try{const r=await fetch('https://api.github.com/users/Ary5272/repos?sort=updated&per_page=6');if(!r.ok)return;const repos=await r.json();renderGhRepos(repos.map(r=>({name:r.name,desc:r.description||'',lang:r.language||'',stars:r.stargazers_count,url:r.html_url,date:new Date(r.updated_at).toLocaleDateString('en-US',{month:'short',day:'numeric'})})))}catch(e){}
+    try{const r=await fetch('https://huggingface.co/api/users/AIencoder/overview');if(!r.ok)return;const u=await r.json();if(u.fullname)document.getElementById('hf-name').textContent=u.fullname;if(u.numModels)document.getElementById('hf-n-models').textContent=u.numModels;if(u.numSpaces)document.getElementById('hf-n-spaces').textContent=u.numSpaces;if(u.numDatasets)document.getElementById('hf-n-datasets').textContent=u.numDatasets;if(u.numFollowers)document.getElementById('hf-n-followers').textContent=u.numFollowers;if(u.avatarUrl){const img=document.getElementById('hf-avatar');if(img&&img.tagName==='IMG')img.src='https://huggingface.co'+u.avatarUrl}}catch(e){}
 })();
 // ===== MOBILE MENU =====
 document.getElementById('menu-btn').addEventListener('click',()=>document.getElementById('mobile-menu').classList.toggle('hidden'));
 // ===== SMOOTH SCROLL =====
+document.querySelectorAll('a[href^="#"]').forEach(a=>a.addEventListener('click',function(e){e.preventDefault();const t=document.querySelector(this.getAttribute('href'));if(t){t.scrollIntoView({behavior:'smooth',block:'start'});document.getElementById('mobile-menu').classList.add('hidden')}}));
 // ===== RESPONSIVE NAV =====
+function checkNav(){const w=window.innerWidth;document.getElementById('nav-links').style.display=w>=768?'flex':'none';document.getElementById('menu-btn').style.display=w<768?'block':'none';if(w>=768)document.getElementById('mobile-menu').classList.add('hidden')}
 window.addEventListener('resize',checkNav);checkNav();
 </script>
 </body>