feat(portfolio): add glass VK logo to 6 places

index.html

@@ -11,6 +11,14 @@
 <link rel="manifest" href="prototypes/assets/site.webmanifest">
 <meta name="theme-color" content="#080808">
 <meta name="theme-color" content="#f0f0f0" media="(prefers-color-scheme: light)">
+<meta property="og:image" content="prototypes/assets/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:title" content="Vishal Katariya — Portfolio">
+<meta property="og:description" content="CS student at Hochschule Darmstadt. ML Engineering, Full-Stack, Infrastructure.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="prototypes/assets/og-image.png">
   <link rel="canonical" href="/prototypes/portfolio-combined" />
   <meta http-equiv="refresh" content="0; url=/prototypes/portfolio-combined" />
   <meta name="description" content="Vishal Katariya — Personal portfolio" />

prototypes/about.html

@@ -26,6 +26,14 @@
 <link rel="manifest" href="assets/site.webmanifest">
 <meta name="theme-color" content="#080808">
 <meta name="theme-color" content="#f0f0f0" media="(prefers-color-scheme: light)">
+<meta property="og:image" content="assets/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:title" content="Vishal Katariya — Portfolio">
+<meta property="og:description" content="CS student at Hochschule Darmstadt. ML Engineering, Full-Stack, Infrastructure.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="assets/og-image.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600;1,700&family=DM+Mono:wght@300;400;500&family=Space+Grotesk:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>

prototypes/cs-roadmap.html

@@ -11,6 +11,14 @@
 <link rel="manifest" href="assets/site.webmanifest">
 <meta name="theme-color" content="#080808">
 <meta name="theme-color" content="#f0f0f0" media="(prefers-color-scheme: light)">
+<meta property="og:image" content="assets/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:title" content="Vishal Katariya — Portfolio">
+<meta property="og:description" content="CS student at Hochschule Darmstadt. ML Engineering, Full-Stack, Infrastructure.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="assets/og-image.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 <style>

prototypes/portfolio-combined.html

@@ -26,6 +26,14 @@
 <link rel="manifest" href="assets/site.webmanifest">
 <meta name="theme-color" content="#080808">
 <meta name="theme-color" content="#f0f0f0" media="(prefers-color-scheme: light)">
+<meta property="og:image" content="assets/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:title" content="Vishal Katariya — Portfolio">
+<meta property="og:description" content="CS student at Hochschule Darmstadt. ML Engineering, Full-Stack, Infrastructure.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="assets/og-image.png">
 <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=Cormorant+Garamond:ital,wght@1,600;1,700&family=DM+Mono:wght@300;400;500&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -200,6 +208,40 @@
   font-weight: 800;
 }
 
+/* ── Topbar scroll-swap: wordmark → logo mark ── */
+.nav-logo {
+  transition: box-shadow .2s, padding .35s cubic-bezier(.22,.61,.36,1);
+  overflow: hidden;
+}
+.nav-logo-name {
+  max-width: 200px;
+  overflow: hidden;
+  transition: max-width .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
+}
+.nav-logo-mark {
+  width: 28px; height: 28px; flex-shrink: 0;
+  border-radius: 6px; object-fit: cover;
+  opacity: 0; max-width: 0; overflow: hidden;
+  transition: max-width .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
+}
+#shared-nav.scrolled .nav-logo-name { max-width: 0; opacity: 0; }
+#shared-nav.scrolled .nav-logo-mark { max-width: 28px; opacity: 1; }
+#shared-nav.scrolled .nav-logo { padding: 10px 12px; }
+
+/* ── Profile icon: logo fills circle, glass border ── */
+.nav-profile { background: transparent !important; overflow: hidden; padding: 0 !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,.22) !important; }
+.nav-profile-mark { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
+
+/* ── Hero identity mark ── */
+.home-identity-mark {
+  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; opacity: .45; margin-bottom: 4px;
+}
+
+/* ── About photo mark ── */
+.about-photo-mark {
+  width: 28px; height: 28px; border-radius: 6px; object-fit: cover; opacity: .65;
+}
+
 /* ── NAME WORDMARK — full name wordmark ── */
 .wm-cap {
   font-family: 'DM Mono', monospace;
@@ -3459,6 +3501,7 @@
     <div class="nav-logo-name">
       <span class="hn-script">V</span><span class="hn-sans">ishal</span>&thinsp;<span class="hn-script">K</span><span class="hn-sans">atariya</span>
     </div>
+    <img class="nav-logo-mark" src="assets/logo-128.png" alt="VK" width="28" height="28">
   </a>
 
   <button class="nav-menu-btn" id="navMenuBtn" aria-label="Menu" onclick="toggleMenu()">
@@ -3492,7 +3535,7 @@
     <button class="nav-theme" id="themeBtn" onclick="toggleTheme()" title="Toggle theme">
       <svg width="16" height="16" aria-hidden="true"><use id="theme-ico" href="#ic-moon"></use></svg>
     </button>
-    <button class="nav-profile" onclick="showPage('me')" title="Private section">VK</button>
+    <button class="nav-profile" onclick="showPage('me')" title="Private section"><img class="nav-profile-mark" src="assets/logo-128.png" alt="VK" width="26" height="26"></button>
   </div>
 </nav>
 
@@ -3576,13 +3619,7 @@
           <div style="font-size:clamp(28px,3.5vw,36px)"><span class="hn-script" style="font-size:1.5em;line-height:0.82;display:inline-block;margin-right:-.07em;vertical-align:-.14em;">V</span><span class="hn-sans" style="font-family:'Syne',sans-serif;font-weight:800;">ishal</span></div>
           <div style="font-size:clamp(28px,3.5vw,36px)"><span class="hn-script" style="font-size:1.5em;line-height:0.82;display:inline-block;margin-right:-.07em;vertical-align:-.14em;">K</span><span class="hn-sans" style="font-family:'Syne',sans-serif;font-weight:800;">atariya</span></div>
         </div>
-        <!-- 3D person icon -->
-        <div class="ico ico-float" style="opacity:.18;margin-bottom:4px">
-          <svg width="42" height="42" viewBox="0 0 42 42" fill="none">
-            <circle cx="21" cy="15" r="9" fill="rgba(255,255,255,.6)" stroke="rgba(255,255,255,.8)" stroke-width="1.5"/>
-            <path d="M4 42 C4 31 12 26 21 26 C30 26 38 31 38 42" fill="rgba(255,255,255,.6)" stroke="rgba(255,255,255,.8)" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-        </div>
+        <img class="home-identity-mark" src="assets/logo-256.png" alt="VK" width="42" height="42">
       </div>
       <div style="display:flex;gap:6px;flex-wrap:wrap;">
         <span class="chip">Darmstadt · DE</span>
@@ -6020,7 +6057,7 @@ <h1 class="ph-title"><span class="hn-script">A</span>bout</h1>
 <div class="page" id="pg-me">
 <div class="page-wrap" style="max-width:520px;padding-top:100px;margin:0 auto">
   <div class="me-auth-card" style="text-align:center;padding:56px 36px;border-radius:24px">
-    <div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--blue));display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:18px;font-weight:500;color:#050505;margin:0 auto 20px">VK</div>
+    <img src="assets/logo-128.png" alt="VK" width="56" height="56" style="border-radius:50%;margin:0 auto 20px;display:block;box-shadow:0 0 0 1.5px rgba(255,255,255,.22)">
     <h2 style="font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;margin:0 0 10px"><svg class="ico" width="24" height="24" viewBox="0 0 13 13" fill="none"><rect x="3" y="6" width="7" height="5.5" rx="1" stroke="rgba(255,255,255,.5)" stroke-width="1" fill="none"/><path d="M4.5 6V4.5a2 2 0 0 1 4 0V6" stroke="rgba(255,255,255,.5)" stroke-width="1" fill="none"/><circle cx="6.5" cy="9" r=".8" fill="rgba(255,255,255,.5)"/></svg>Private section</h2>
     <p style="color:var(--w60);font-size:14px;line-height:1.6;margin:0 0 28px">/me is only available on the Tailnet.<br>Connect to Tailscale and open the private site.</p>
     <p style="color:var(--w30);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.4px;margin:0 0 24px">me.auxois-wyrm.ts.net</p>
@@ -6046,6 +6083,21 @@ <h2 style="font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700
 }
 tick(); setInterval(tick, 1000);
 
+// ── Topbar scroll-swap (wordmark → logo mark past 80px) ──
+(function(){
+  const nav = document.getElementById('shared-nav');
+  let ticking = false;
+  window.addEventListener('scroll', function(){
+    if (!ticking) {
+      requestAnimationFrame(function(){
+        nav.classList.toggle('scrolled', window.scrollY > 80);
+        ticking = false;
+      });
+      ticking = true;
+    }
+  }, { passive: true });
+})();
+
 // ── Theme toggle
 function toggleTheme() {
   const html = document.documentElement;

prototypes/portfolio-v4.html

@@ -18,6 +18,14 @@
 <link rel="manifest" href="assets/site.webmanifest">
 <meta name="theme-color" content="#080808">
 <meta name="theme-color" content="#f0f0f0" media="(prefers-color-scheme: light)">
+<meta property="og:image" content="assets/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:title" content="Vishal Katariya — Portfolio">
+<meta property="og:description" content="CS student at Hochschule Darmstadt. ML Engineering, Full-Stack, Infrastructure.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="assets/og-image.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600;1,700&family=DM+Mono:wght@300;400;500&family=Space+Grotesk:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>

prototypes/projects.html

@@ -26,6 +26,14 @@
 <link rel="manifest" href="assets/site.webmanifest">
 <meta name="theme-color" content="#080808">
 <meta name="theme-color" content="#f0f0f0" media="(prefers-color-scheme: light)">
+<meta property="og:image" content="assets/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:title" content="Vishal Katariya — Portfolio">
+<meta property="og:description" content="CS student at Hochschule Darmstadt. ML Engineering, Full-Stack, Infrastructure.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="assets/og-image.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600;1,700&family=DM+Mono:wght@300;400;500&family=Space+Grotesk:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>

prototypes/resume.html

@@ -11,6 +11,14 @@
 <link rel="manifest" href="assets/site.webmanifest">
 <meta name="theme-color" content="#080808">
 <meta name="theme-color" content="#f0f0f0" media="(prefers-color-scheme: light)">
+<meta property="og:image" content="assets/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:title" content="Vishal Katariya — Portfolio">
+<meta property="og:description" content="CS student at Hochschule Darmstadt. ML Engineering, Full-Stack, Infrastructure.">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="assets/og-image.png">
 <script>
   window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
 </script>
@@ -368,6 +376,7 @@
   <div class="hdr">
     <div class="hdr-top">
       <div>
+        <img src="assets/logo-128.png" alt="VK" width="22" height="22" style="border-radius:4px;margin-bottom:5px;opacity:.85;display:block">
         <div class="hdr-name">VISHAL KATARIYA</div>
         <div class="hdr-role">AI · ML · SWE / CS Student at h_da</div>
       </div>

tasks/DEVLOG.md

@@ -6,6 +6,35 @@
 
 ---
 
+## [2026-06-30] Claude Code (local) — feat/logo-everywhere (6 of 7 sub-places)
+
+**Mode:** Builder
+
+**Did:**
+- Generated logo-128/256/512 derivatives from logo.png (Pillow, dark bg)
+- Generated og-image.png (1200×630, Pillow — dark bg, logo left, name + tagline right)
+- Added og:image / twitter:card meta tags to all 7 HTML files
+- Sub-place 1: topbar scroll-swap (wordmark → logo mark past 80px, rAF debounced)
+- Sub-place 2: profile icon — VK text replaced with logo, glass ring border, transparent bg
+- Sub-place 4: hero identity widget — person SVG replaced with logo mark (opacity .45)
+- Sub-place 6: resume.html header — small logo above name (22px, print-safe)
+- Sub-place 7: /me auth card — VK gradient circle → logo with glass ring
+- Sub-place 5 (about photo block) removed by Vishal — didn't look right there
+- Visual QA at 1920px, 560px, all sub-places via Playwright
+
+**Decided:**
+- About photo block (sub-place 5) dropped — 6/7 completed
+- Glass ring color: rgba(255,255,255,.22) — matches rest of site's white-glass aesthetic
+- OG image: system font (DejaVu Bold) for text — no web font at gen time
+
+**State:** `feat/logo-everywhere` pushed, awaiting PR + merge to dev
+
+**Next:** Open PR feat/logo-everywhere → dev, merge, kill HTTP server
+
+**Modified:** 11 files (4 new PNGs, 7 HTML files)
+
+---
+
 ## [2026-06-30] Claude Code (local) — Favicon border fix (Option C enhanced contrast)
 
 **Mode:** Builder