Spaces:

AIencoder
/

portfolio

Running

App Files Files Community

AIencoder commited on Feb 13

Commit

b0179f3

verified ·

1 Parent(s): 256dd21

Update index.html

Browse files

Files changed (1) hide show

index.html +481 -1

index.html CHANGED Viewed

	@@ -1 +1,481 @@
1	- ~~AIencoder~~

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AIencoder | Developer Portfolio</title>
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="mesh-bg"></div>
+<div class="grid-bg"></div>
+<!-- SVG SPRITES -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+<symbol id="i-terminal" viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></symbol>
+<symbol id="i-menu" viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="18" x2="20" y2="18"/></symbol>
+<symbol id="i-smile" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></symbol>
+<symbol id="i-github" viewBox="0 0 24 24"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></symbol>
+<symbol id="i-up-right" viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></symbol>
+<symbol id="i-right" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></symbol>
+<symbol id="i-cpu" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2"/></symbol>
+<symbol id="i-branch" viewBox="0 0 24 24"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></symbol>
+<symbol id="i-code" viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></symbol>
+<symbol id="i-heart" viewBox="0 0 24 24"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></symbol>
+<symbol id="i-star" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></symbol>
+<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>
+<symbol id="i-file" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="m10 13-2 2 2 2"/><path d="m14 17 2-2-2-2"/></symbol>
+<symbol id="i-flame" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></symbol>
+<symbol id="i-box" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="5" rx="2"/><path d="M2 10h20"/></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>
+</svg>
+<!-- NAV -->
+<nav class="nav">
+    <div class="container flex items-center justify-between nav-inner">
+        <a href="#home" class="flex items-center gap-1">
+            <svg class="icon icon-md" style="color:#c084fc"><use href="#i-terminal"/></svg>
+            <span class="mono gradient-text" style="font-weight:700;font-size:1.1rem">AIencoder</span>
+        </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>
+<!-- HERO -->
+<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">
+            <a href="https://huggingface.co/AIencoder" target="_blank" rel="noopener noreferrer" class="btn btn-amber">
+                <svg class="icon"><use href="#i-smile"/></svg> Hugging Face
+            </a>
+            <a href="https://github.com/Ary5272" target="_blank" rel="noopener noreferrer" class="btn btn-ghost">
+                <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" 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>
+                <div><span class="c-purple">class</span> <span class="c-amber">Developer</span><span class="c-gray">:</span></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>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>
+                    <div class="profile-stat amber"><div class="profile-stat-num" style="color:#f59e0b" id="hf-n-spaces">7</div><div class="profile-stat-label">Spaces</div></div>
+                    <div class="profile-stat amber"><div class="profile-stat-num" style="color:#f59e0b" id="hf-n-datasets">1</div><div class="profile-stat-label">Dataset</div></div>
+                    <div class="profile-stat amber"><div class="profile-stat-num" style="color:#f59e0b" id="hf-n-followers">2</div><div class="profile-stat-label">Followers</div></div>
+                </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>
+                    <div class="profile-stat"><div class="profile-stat-num" style="color:#60a5fa" id="gh-followers-n">0</div><div class="profile-stat-label">Followers</div></div>
+                </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>
+<script>
+// ===== TYPEWRITER =====
+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>
+</html>