Mercurial
view mrjunejune/src/index.html @ 256:30c2196d03d4
[site] Integrate Zenbu themes and components
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 16:49:01 -0700 |
| parents | 40fa2363fee1 |
| children | 60a876c4587a |
line wrap: on
line source
<!doctype html> <html lang="en"> <head> <title> MrJuneJune </title> {{//parts/base_head.html}} <style> .epi-photo { display: flex; justify-content: center; margin-bottom: 10px; } .epi-photo img { max-width: 100%; height: auto; border-radius: 8px; } @media (max-width: 720px) { .epi-photo { margin-bottom: 1.5em; } ul { padding-left: 1.5em; } li { margin-bottom: 0.75em; } } #background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } #game { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; cursor: default; } #game.active { pointer-events: auto; z-index: 100; } #gameUI { position: fixed; top: 10px; right: 10px; pointer-events: auto; z-index: 101; cursor: pointer; } .site-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--zen-space-4); } .site-link-grid > a { color: inherit; text-decoration: none; } .site-link-grid zen-card, .site-link-grid article { height: 100%; } .site-link-grid p { margin: 0; color: var(--zen-color-text-muted); font-size: 0.9rem; } </style> </head> <body> {{/parts/header.html}} <main> <p>Hi, I am Juntae—usually June, and occasionally MrJuneJune because the domain name has committed me to the bit.</p> <p>I am a Member of Technical Staff at Microsoft and an engineering leader with over 10 years of experience building products and infrastructure at Microsoft, Meta, Google, and startups. Recently, I have been working on Copilot Tasks, AI execution infrastructure, and SuperApp experiences at the kind of scale where "it worked on my machine" is not a release strategy.</p> <p>Below is my dog, Epi-chan. I also named the frontend repo behind the SuperApp Code and Autopilot tabs after her :P</p> <div class="epi-photo"> <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" /> </div> <h2>Links</h2> <div class="site-link-grid"> <a href="https://zenbu.babocoder.com/file/tip"> <zen-card interactive> <article><h3>Repository</h3><p>Browse the code behind these experiments.</p></article> </zen-card> </a> <a href="/blog"> <zen-card interactive> <article><h3>Blogs</h3><p>Thoughts, experiments, and technical notes.</p></article> </zen-card> </a> <a href="/resume"> <zen-card interactive> <article><h3>Resume</h3><p>Professional experience and selected work.</p></article> </zen-card> </a> <a href="/tools"> <zen-card interactive> <article><h3>Tools</h3><p>Small things I built for myself.</p></article> </zen-card> </a> </div> <canvas id="background"></canvas> <canvas id="game"></canvas> <canvas id="gameUI"></canvas> </main> {{/parts/footer.html}} </body> <script> // Epi image let arr = Array.from({ length: 18 }, (_, i) => i+1); function setRandomImages() { const randomIndex = Math.floor(Math.random() * arr.length); const pos = arr[randomIndex]; currentPhoto.src = `/public/epi-photos/webp/${pos}.webp`; currentPhoto.onload = () => { currentPhoto.style.opacity = "1"; }; setTimeout(() => setRandomImages(), 1000); } setRandomImages(); </script> <script src="/public/dog-game.js"></script> </html>