|
|
<!DOCTYPE html> |
|
|
<html lang="en" data-theme="dark"> |
|
|
<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> |
|
|
<div class="particles" id="particles"></div> |
|
|
|
|
|
|
|
|
<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-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> |
|
|
<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 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="#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"> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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><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 & 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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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 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> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
<script> |
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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)} |
|
|
|
|
|
|
|
|
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)); |
|
|
|
|
|
|
|
|
let visits=parseInt(localStorage.getItem('portfolio_visits')||'0')+1; |
|
|
localStorage.setItem('portfolio_visits',visits); |
|
|
document.getElementById('visitor-count').textContent=visits.toLocaleString(); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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)}); |
|
|
} |
|
|
|
|
|
|
|
|
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)}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
(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){} |
|
|
})(); |
|
|
|
|
|
|
|
|
document.getElementById('menu-btn').addEventListener('click',()=>document.getElementById('mobile-menu').classList.toggle('hidden')); |
|
|
|
|
|
|
|
|
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')}})); |
|
|
|
|
|
|
|
|
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> |
