https://vihaanakshaay.github.io/dev-logs/

1<!DOCTYPE html> <html lang=" en "><head> <meta charset="utf-8"> <title>Dev Logs</title> <meta http-equip="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Dev Logs" /> <meta name="keywords" content="Dev Logs, Home, " /> <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml"> <meta content="" property="fb:app_id"> <meta content="Home" property="og:site_name"> <meta content="Dev Logs" property="og:title"> <meta content="article" property="og:type"> <meta content="Now where does this go?" property="og:description"> <meta content="/dev-logs/" property="og:url"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@"> <meta name="twitter:creator" content="@"> <meta name="twitter:title" content="Dev Logs"> <meta content="Home" property="og:site_name"> <meta name="twitter:url" content="/dev-logs/"> <meta name="twitter:description" content="Now where does this go?"> <link rel="stylesheet" href="/assets/css/main.css" /> <!-- <link rel="stylesheet" href="/assets/css/custom-style.css" /> --> <link rel="stylesheet" href="/assets/bower_components/lightgallery/dist/css/lightgallery.min.css"/> <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css"> <link rel="stylesheet" href="/assets/bower_components/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="/assets/bower_components/font-awesome/web-fonts-with-css/css/fontawesome-all.min.css" /> <link rel="stylesheet" href="/assets/bower_components/icono/dist/icono.min.css"/> <!-- Fonts--> <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet"> <!-- Favicon --> <link rel="icon" href="/assets/img/favicon.ico" type="image/gif" sizes="16x16"> <!-- Jquery --> 

1<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>

1 <!-- 

1<script src="/assets/bower_components/jquery/dist/jquery.min.js"></script>

1 --> 

1<script src="/assets/bower_components/jquery.easing/jquery.easing.min.js"></script>

1 

1<script src="/assets/bower_components/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

1 

1<script src="/assets/bower_components/jquery-mousewheel/jquery.mousewheel.min.js"></script>

1 

1<script src="/assets/bower_components/lightgallery/dist/js/lightgallery-all.min.js"></script>

1 

1<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>

1 

1<script src="/assets/bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>

1 

1<script src="/assets/bower_components/nanobar/nanobar.min.js"></script>

1 

1<script src="/assets/bower_components/typewrite/dist/typewrite.min.js"></script>

1 

1<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>

1 

1<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

1 <!-- Github Button --> 

1<script async defer src="https://buttons.github.io/buttons.js"></script>

1 

1<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

1 <!-- page-view + time-on-page tracker --> 

1<script> (function () { /* -------- stable session id -------- */ const sid = localStorage.getItem('session_id') || (() => { const id = (crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2)); localStorage.setItem('session_id', id); return id; })(); /* -------- immediate page-view -------- */ fetch("https://vihaan-chatbot-api.onrender.com/track" + "?page=" + encodeURIComponent(location.pathname) + "&sid=" + sid, { mode: "cors" }) .then(r => console.log("📡 /track →", r.status)) .catch(err => console.error("‼️ /track error", err)); /* -------- time-on-page (in its own try/catch) -------- */ try { let visStart = Date.now(); let total = 0; document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") { total += Date.now() - visStart; } else { visStart = Date.now(); } }); window.addEventListener("pagehide", () => { if (document.visibilityState !== "hidden") { total += Date.now() - visStart; } const body = new URLSearchParams({ page: location.pathname, sid: sid, started: new Date(visStart).toISOString(), ms: Math.round(total) }); const ok = navigator.sendBeacon( "https://vihaan-chatbot-api.onrender.com/track-time", body ); console.log("📡 /track-time beacon sent?", ok, "ms=", total); }); } catch (err) { console.error("‼️ time-tracker block failed:", err); } })(); </script>

1 </head><body><!-- shared site theme: constellation background + translucent dark/orange styling (all pages) --> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <canvas id="sp-constellation" aria-hidden="true"></canvas> <div id="sp-spotlight" aria-hidden="true"></div> <style> :root { --sp-orange:#ff7a18; --sp-green:#3ddc84; --sp-ink:#ececf1; --sp-mut:#8b8b96; } html, body { background:#060608 !important; } body { color:var(--sp-ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; } /* background sits behind all page content */ #sp-constellation, #sp-spotlight { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; } #sp-spotlight { background:radial-gradient(340px circle at var(--x,50%) var(--y,20%), rgba(255,122,24,0.10), transparent 70%); } h1, h2, h3, h4, h5 { font-family:'Space Grotesk','Quicksand',sans-serif; color:#fff; } a { color:var(--sp-orange); } a:hover { color:#ffa761; } /* nav + footer blend into the theme */ #topNav { background:rgba(8,8,10,0.72) !important; backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); border-bottom:1px solid rgba(255,255,255,0.07); } footer, #newsletter_footer { background:transparent !important; } /* translucent cards everywhere (devlopr cards, blog categories, post lists) */ .card, .category-card, .post-card { background:rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.10) !important; border-radius:16px !important; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 20px 50px rgba(0,0,0,0.35) !important; color:var(--sp-ink); transition:transform 0.25s ease, border-color 0.25s ease; } .category-card:hover, .post-card:hover { transform:translateY(-4px); border-color:rgba(255,122,24,0.45) !important; } .card-header { background:rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.08); color:#fff; font-family:'Space Grotesk','Quicksand',sans-serif; } .card-body, .card-body.text-dark, .card p, .card li { color:var(--sp-ink); } .card-body.text-dark a, .card li a { color:var(--sp-orange); } /* section intros / post meta */ .intro-text { color:var(--sp-mut); } .post-date, .post-excerpt, .card-subtitle, .card-description { color:var(--sp-mut); } .post-card { padding:22px 24px; margin-bottom:18px; border-bottom:none; } .post-card h2 a, .card-title { color:var(--sp-orange); } .read-more { color:var(--sp-orange); } /* blog post body */ #blog-post-container .card, #blog-post-container article { color:var(--sp-ink); } #blog-post-container p, #blog-post-container li { color:#c8c8d2; } #blog-post-container h1, #blog-post-container h2, #blog-post-container h3 { color:#fff; } blockquote { border-left:3px solid var(--sp-orange); color:var(--sp-mut); } code, pre { background:rgba(255,255,255,0.05); color:#e8e8ef; border-radius:6px; } </style> 

1<script> (function () { var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; var spot = document.getElementById('sp-spotlight'); if (spot && !reduce) { window.addEventListener('pointermove', function (e) { spot.style.setProperty('--x', e.clientX + 'px'); spot.style.setProperty('--y', e.clientY + 'px'); }, { passive: true }); } var canvas = document.getElementById('sp-constellation'); if (!canvas || reduce) return; var ctx = canvas.getContext('2d'), dpr = Math.min(window.devicePixelRatio || 1, 2); var pts = [], mouse = { x: -999, y: -999 }; function resize() { canvas.width = innerWidth * dpr; canvas.height = innerHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); canvas.style.width = innerWidth + 'px'; canvas.style.height = innerHeight + 'px'; var count = Math.min(90, Math.floor(innerWidth * innerHeight / 16000)); pts = []; for (var i = 0; i < count; i++) pts.push({ x: Math.random() * innerWidth, y: Math.random() * innerHeight, vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4 }); } window.addEventListener('pointermove', function (e) { mouse.x = e.clientX; mouse.y = e.clientY; }, { passive: true }); function draw() { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, innerWidth, innerHeight); for (var i = 0; i < pts.length; i++) { var p = pts[i]; p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > innerWidth) p.vx *= -1; if (p.y < 0 || p.y > innerHeight) p.vy *= -1; ctx.beginPath(); ctx.arc(p.x, p.y, 1.4, 0, 7); ctx.fillStyle = 'rgba(255,122,24,0.5)'; ctx.fill(); for (var j = i + 1; j < pts.length; j++) { var q = pts[j], dx = p.x - q.x, dy = p.y - q.y, d = dx * dx + dy * dy; if (d < 15000) { ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.strokeStyle = 'rgba(255,255,255,' + (0.08 * (1 - d / 15000)) + ')'; ctx.stroke(); } } var mdx = p.x - mouse.x, mdy = p.y - mouse.y, md = mdx * mdx + mdy * mdy; if (md < 26000) { ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(mouse.x, mouse.y); ctx.strokeStyle = 'rgba(255,122,24,' + (0.35 * (1 - md / 26000)) + ')'; ctx.stroke(); } } requestAnimationFrame(draw); } resize(); window.addEventListener('resize', resize); draw(); })(); </script>

1 <nav class="navbar navbar-expand-lg fixed-top navbar-dark" id="topNav"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="icono-hamburger" id="navbar-hamburger"> </span> </button> <a class="navbar-brand" href="/">Home</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/blog" >Blog</a > </li> </ul> </div> </nav> <div class="col-lg-12"> <div class="container"> <div class="row"> <div class="col-lg-8 offset-md-2"> <p class="intro-text"> I build stuff but I'm not your typical high performance dev. I'm more of a random engineer who's done random things all over. Regarding dev, I like making things that make my life easier. People are more alike than we think (- Random movie?) so I guess these might be useful to you too!</p> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 offset-md-2"> <div class="posts-list"> <div class="post-card"> <h2><a href="/notes/2025/05/06/Ask-About-Vihaan-Personal-Chatbot/">Build a Personal Chatbot to Answer Questions About Yourself</a></h2> <p class="post-date">May 6, 2025</p> <p class="post-excerpt">Chatter: I guess this is going to be one of my first as well as entry level NLP projects. So, I’ll keep it SUPER short and to the point. Collect a bunch of pdfs you want the model to use, </p> <a href="/notes/2025/05/06/Ask-About-Vihaan-Personal-Chatbot/" class="read-more">Read More →</a> </div> <div class="post-card"> <h2><a href="/beginner/2020/08/03/How-do-I-start-building-robots/"> "How do I start building robots?" </a></h2> <p class="post-date">August 3, 2020</p> <p class="post-excerpt">Robots are everywhere! </p> <a href="/beginner/2020/08/03/How-do-I-start-building-robots/" class="read-more">Read More →</a> </div> </div> </div> </div> </div> <style> :root { --orange-primary: #ff8c00; --orange-light: #ffa533; --orange-dark: #ff6b00; --text-light: #ffffff; --text-muted: #cccccc; --text-dark: #f0f0f0; } .intro-text { font-size: 1.4rem; color: var(--text-light); font-style: italic; margin: 2rem 0 3rem; line-height: 1.6; text-align: center; font-weight: 500; } .post-card { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 2px solid var(--orange-primary); } .post-card:last-child { border-bottom: none; } .post-card h2 { margin-bottom: 0.5rem; } .post-card h2 a { color: var(--orange-primary); text-decoration: none; font-weight: 700; font-size: 1.8rem; } .post-card h2 a:hover { text-decoration: underline; } .post-date { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 1rem; } .post-excerpt { color: var(--text-light); font-size: 1.1rem; margin-bottom: 1rem; line-height: 1.6; } .read-more { color: var(--orange-primary); text-decoration: none; font-weight: 600; font-size: 1.1rem; } .read-more:hover { text-decoration: underline; } @media (max-width: 768px) { .intro-text { font-size: 1.2rem; margin: 1.5rem 0 2rem; } .post-card h2 a { font-size: 1.5rem; } .post-date, .post-excerpt { font-size: 1rem; } } </style> </div> <div class="col-lg-12" id="newsletter_footer"></div><footer> <p> Would love to talk tech over a glass of ice-cream milkshake! <a href="mailto:[email protected]">Hit me up!</a>. Please check out my <a href="https://vihaanakshaay.github.io/about#/"> Profile </a> for my professional work. Some of my blogs (Academic/Personal) are incomplete, but I plan to finish them soon! ごめんなさい. </p> </footer> 

1<script> var options = { classname: 'my-class', id: 'my-id' }; var nanobar = new Nanobar( options ); nanobar.go( 30 ); nanobar.go( 76 ); nanobar.go(100); </script>

1 <div hidden id="snipcart" data-api-key="Y2I1NTAyNWYtMTNkMy00ODg0LWE4NDItNTZhYzUxNzJkZTI5NjM3MDI4NTUzNzYyMjQ4NzU0"></div> 

1<script src="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.js" defer></script>

1 

1<script src="/assets/js/mode-switcher.js"></script>

1 </body> </html>