Portfolio/case.html at main · AyushCodes160/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!doctype html>
<html lang="en" data-theme="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>Case — Ayush Kumar</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Poetsen+One&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css?v=7" />
  <script>
    (function(){
      var t = localStorage.getItem("theme") || "light";
      document.documentElement.setAttribute("data-theme", t);
    })();
  </script>
</head>
<body>

  <div class="sky" aria-hidden="true">
    <div class="sun"></div>
    <div class="cloud-layer cloud-layer--back"></div>
    <div class="cloud-layer cloud-layer--mid"></div>
    <div class="cloud-layer cloud-layer--front"></div>
    <div class="plane"><img src="img/pixel/plane.png" alt=""></div>
    <div class="mountains"></div>
  </div>

  <div class="page">

  <header class="nav">
    <a href="index.html" class="nav__brand" data-magnet data-page-link>
      <span class="nav__mark"><img src="img/pixel/avatar.png" alt=""></span>
      <span>Ayush Kumar</span>
    </a>
    <nav class="nav__links">
      <a href="index.html#work" data-magnet data-page-link>Work</a>
      <a href="index.html#about" data-magnet data-page-link>About</a>
      <a href="index.html#stack" data-magnet data-page-link>Stack</a>
      <a href="index.html#contact" data-magnet data-page-link>Contact</a>
    </nav>
    <div class="nav__meta">
      <button class="theme-toggle" data-theme-toggle aria-label="Toggle theme">
        <svg class="theme-toggle__sun" viewBox="0 0 24 24" width="14" height="14"><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
        <svg class="theme-toggle__moon" viewBox="0 0 24 24" width="14" height="14"><path d="M20 14.5A8 8 0 119.5 4a6.5 6.5 0 0010.5 10.5z" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
      </button>
      <span data-clock>—</span>
    </div>
  </header>

  <main class="case">
    <a href="index.html" class="case__back" data-magnet data-page-link>← Index</a>

    <h1 class="case__title" data-case-title>AskMySource</h1>
    <p class="case__sub" data-case-sub>A multimodal RAG system that ingests Git repos, PDFs, and URLs, then answers questions over them with secure on-device LLM inference.</p>

    <a class="case__repo" data-case-repo href="#" target="_blank" rel="noopener">View source on GitHub ↗</a>

    <ul class="case__meta">
      <li><span>Role</span><b data-case-role>Design, full-stack, retrieval</b></li>
      <li><span>Year</span><b data-case-year>2026</b></li>
      <li><span>Stack</span><b data-case-stack>FastAPI · Streamlit · PyTorch · FAISS</b></li>
      <li><span>Status</span><b data-case-status>Built</b></li>
    </ul>

    <div class="case__hero" data-case-hero style="background-image:url('https://picsum.photos/seed/askmysource/1600/900')"></div>

    <section class="case__body">
      <h3>The problem</h3>
      <div>
        <p data-case-p1>Most RAG demos eat one type of source and call it a system. I wanted a single tool that could chew Git repositories, long PDFs, and arbitrary URLs — and answer with sources, locally, without an API key.</p>
      </div>
    </section>

    <section class="case__body">
      <h3>The approach</h3>
      <div>
        <p data-case-p2>FastAPI for the ingest pipeline, semantic chunking tuned per source-type, FAISS for similarity search, and TinyLlama running locally for the generation step. A Streamlit front-end keeps the UX honest while I iterate on retrieval quality.</p>
      </div>
    </section>

    <div class="case__gallery">
      <div class="g" data-case-g1 style="background-image:url('https://picsum.photos/seed/askmysource-1/1600/900')"></div>
      <div class="g" data-case-g2 style="background-image:url('https://picsum.photos/seed/askmysource-2/900/1200')"></div>
      <div class="g" data-case-g3 style="background-image:url('https://picsum.photos/seed/askmysource-3/1200/900')"></div>
      <div class="g" data-case-g4 style="background-image:url('https://picsum.photos/seed/askmysource-4/1200/900')"></div>
    </div>

    <section class="case__body">
      <h3>The outcome</h3>
      <div>
        <p data-case-p3>Useful enough that I now reach for it on every doc-heavy side-project. Working notes: chunking strategy matters more than the model, and a fast UI matters more than either.</p>
      </div>
    </section>

    <div class="case__next">
      <div>
        <span class="case__next-label">Next case</span>
        <a href="case.html?p=pokedex" data-page-link><span class="case__next-title" data-case-next>Pokedex →</span></a>
      </div>
      <a href="index.html#contact" data-page-link>Work with me ↗</a>
    </div>
  </main>

  </div><!-- /.page -->

  <footer class="foot">
    <span>© 2026 — Ayush Kumar</span>
    <span>NST · ADYPU Pune · <a href="https://github.com/AyushCodes160" target="_blank" rel="noopener">GitHub</a></span>
    <span data-clock>—</span>
  </footer>

  <script>
    const params = new URLSearchParams(location.search);
    const slug = params.get("p") || "askmysource";
    const cases = {
      "askmysource": {
        t: "AskMySource",
        s: "A multimodal RAG system that ingests Git repos, PDFs, and URLs, then answers questions over them with secure on-device LLM inference.",
        role: "Design, full-stack, retrieval",
        year: "April 2026",
        stack: "FastAPI · Streamlit · PyTorch · FAISS",
        hero: "img/AskMySource1.png",
        gallery: ["img/AskMySource2.png", "img/AskMySource3.png", "img/AskMySource4.png", "img/AskMySource1.png"],
        repo: "https://github.com/AyushCodes160/AskMySource",
        p1: "Most RAG demos eat one type of source and call it a system. I wanted a single tool that could chew Git repositories, long PDFs, and arbitrary URLs — and answer with sources, locally, without an API key.",
        p2: "FastAPI for the ingest pipeline, semantic chunking tuned per source-type, FAISS for similarity search, and TinyLlama running locally for the generation step. A Streamlit front-end keeps the UX honest while I iterate on retrieval quality.",
        p3: "Useful enough that I now reach for it on every doc-heavy side-project. Working notes: chunking strategy matters more than the model, and a fast UI matters more than either.",
        next: "Pokedex →", nextSlug: "pokedex"
      },
      "pokedex": {
        t: "Pokedex",
        s: "A full-stack Pokédex with a turn-based battle simulator — type effectiveness, status effects, JWT auth, persistent teams, and a responsive shadcn/ui front-end.",
        role: "Design, full-stack, game-state",
        year: "March 2026",
        stack: "React 18 · TypeScript · Express · MongoDB · Prisma",
        hero: "img/pokedex1.png",
        gallery: ["img/pokedex2.png", "img/pokedex3.png", "img/pokedex4.png", "img/pokedex5.png"],
        repo: "https://github.com/AyushCodes160/pokedex",
        p1: "Most Pokédex projects stop at a list view. I wanted to build the bit that actually feels like the game — turn-based battles, type matchups, status effects, and the small dopamine hit of saving a team you put together.",
        p2: "React 18 + TypeScript on the front, Node/Express + MongoDB Atlas (via Prisma) on the back. The battle engine is a small state machine in TS, with the opponent driven by the PokéAPI. JWT auth handles users; shadcn/ui + Tailwind handle the rest.",
        p3: "It taught me more about state-machine design and game-loop pacing than any course. The UI is fast, the battles feel fair, and the codebase is small enough to keep extending on weekends.",
        next: "Voice AI Agent →", nextSlug: "voice-agent"
      },
      "voice-agent": {
        t: "Voice AI Agent",
        s: "A real-time, multilingual voice agent with sub-second reasoning, audio barge-in, and a streaming Vosk-STT + Edge-TTS pipeline running over WebSockets.",
        role: "Design, full-stack, audio pipeline",
        year: "March 2026",
        stack: "React · FastAPI · WebSockets · Redis · SQLite · Groq",
        hero: "img/voiceagent1.png",
        gallery: ["img/voiceagent2.png", "img/voiceagent3.png", "img/voiceagent1.png", "img/voiceagent2.png"],
        repo: "https://github.com/AyushCodes160/Real-Time-Multilingual-Voice-AI-Agent",
        p1: "Most voice agents feel like SMS with a microphone in front. I wanted one that listens while you’re talking, replies in under a second, and survives interruption gracefully — across languages.",
        p2: "Vosk STT streams audio chunks over WebSockets, Groq handles sub-second reasoning, and Edge-TTS streams audio back in parallel. Redis tracks per-session state; SQLite stores call history. Background campaigning runs out-of-band so the live conversation stays responsive.",
        p3: "The barge-in detection (cutting the TTS the moment the user starts speaking) is the single feature that made it feel real instead of demo-grade.",
        next: "Watch Party →", nextSlug: "watch-party"
      },
      "watch-party": {
        t: "YouTube Watch Party",
        s: "A real-time collaborative video viewer — synchronised playback, room management, live chat, and Google OAuth — built for friends across timezones.",
        role: "Design, full-stack, real-time",
        year: "March 2026",
        stack: "React · Express · Socket.io · MongoDB · Tailwind",
        hero: "img/watchparty1.png",
        gallery: ["img/watchparty2.png", "img/watchparty3.png", "img/watchparty4.png", "img/watchparty1.png"],
        repo: "https://github.com/AyushCodes160/YouTube-Watch-Party-System",
        p1: "Watching a video together over a call always devolves into someone counting down from three. I wanted that to be a button.",
        p2: "Socket.io syncs playback state across every client in a room — play, pause, seek, rate changes. Rooms persist; Google OAuth handles identity; the chat lane sits next to the player without stealing focus.",
        p3: "The fun part wasn’t the sync (Socket.io makes that almost free) — it was making sure the host’s buffering didn’t make everyone else lag, and that the chat input never stole the keyboard from the player.",
        next: "AskMySource →", nextSlug: "askmysource"
      }
    };
    const d = cases[slug] || cases["askmysource"];
    document.title = d.t + " — Ayush Kumar";
    document.querySelector("[data-case-title]").textContent = d.t;
    document.querySelector("[data-case-sub]").textContent = d.s;
    document.querySelector("[data-case-role]").textContent = d.role;
    document.querySelector("[data-case-year]").textContent = d.year;
    document.querySelector("[data-case-stack]").textContent = d.stack;
    document.querySelector("[data-case-hero]").style.backgroundImage = `url('${d.hero}')`;
    document.querySelector("[data-case-g1]").style.backgroundImage = `url('${d.gallery[0]}')`;
    document.querySelector("[data-case-g2]").style.backgroundImage = `url('${d.gallery[1]}')`;
    document.querySelector("[data-case-g3]").style.backgroundImage = `url('${d.gallery[2]}')`;
    document.querySelector("[data-case-g4]").style.backgroundImage = `url('${d.gallery[3]}')`;
    document.querySelector("[data-case-repo]").setAttribute("href", d.repo);
    document.querySelector("[data-case-p1]").textContent = d.p1;
    document.querySelector("[data-case-p2]").textContent = d.p2;
    document.querySelector("[data-case-p3]").textContent = d.p3;
    const nextA = document.querySelector("[data-case-next]");
    nextA.textContent = d.next;
    nextA.parentElement.setAttribute("href", `case.html?p=${d.nextSlug}`);
  </script>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js"></script>
  <script type="importmap">
    { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }
  </script>
  <script type="module" src="script.js"></script>
</body>
</html>