/home/mrjunejune/zenbu: mrjunejune/test/snapshots/root.snapshot comparison

comparison mrjunejune/test/snapshots/root.snapshot @ 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

comparison

equal deleted inserted replaced

-:5ec271d612ae
+:30c2196d03d4
 <html lang="en">
 <head>
 <title> MrJuneJune </title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#f7f3e8">
 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
+<link rel="manifest" href="/public/manifest.json">
+<link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font"  crossorigin>
 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> -->
 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
+<link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
+<link rel="stylesheet" href="/public/design-system/styles/themes.css" />
 <link rel="preload" href="/base.css" as="style" />
 <link rel="stylesheet" href="/base.css" />
+<link rel="stylesheet" href="/public/design-system/styles/components.css" />
+<script
+type="module"
+src="/public/design-system/components/index.js"
+></script>
+<script src="/public/pwa-register.js" defer></script>
 <style>
 .epi-photo {
 display: flex;
 justify-content: center;
 }
 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>
 <style>
 :root {
 --header-background: var(--white);
---header-color: rgb(var(--black));
+--header-color: var(--black);
 --link-hover-accent: var(--awesome);
 }
-/* Fixed icon in top left corner */
+#themeControl {
-#themeToggle {
 position: fixed;
 top: 20px;
 left: 20px;
-background: var(--header-background);
-display: flex;
-align-items: center;
-border-radius: 50%;
-cursor: pointer;
 z-index: 1000;
-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 transition: transform 0.2s ease;
 }
-#themeToggle:hover {
+#themeControl:hover {
 transform: scale(1.05);
+}
+#themeToggle {
+flex-direction: column;
+min-width: 4.5rem;
+padding: 0.35rem;
+border-radius: 1.5rem;
+}
+#themeName {
+font-family: "More", sans-serif;
+font-size: 0.65rem;
+line-height: 1;
 }
 /* Professional header */
 header {
 margin: auto;
 padding: 1.5em 1em;
 font-family: "More", sans-serif;
-box-shadow: 0 2px 8px rgba(var(--black), 5%);
+box-shadow: var(--zen-shadow-sm);
 width: 720px;
 max-width: calc(100% - 2em);
 text-align: center;
 }
 display: none;
 }
 /* Mobile responsiveness */
 @media (max-width: 720px) {
-#themeToggle {
+#themeControl {
 top: 15px;
 left: 15px;
 }
 header {
 font-size: 1.5em;
 }
 }
 @media (max-width: 480px) {
-#themeToggle {
+#themeControl {
 top: 10px;
 left: 10px;
 }
 #themeToggle img {
 --logo-invert: invert(0);
 --epi-grayscale: grayscale(0) brightness(1);
 }
 /* 2. MANUAL DARK OVERRIDE */
-html.dark {
+html[data-zen-theme="ink"] {
 --logo-invert: invert(1);
 --epi-grayscale: grayscale(1);
 }
 /* 3. MANUAL LIGHT OVERRIDE */
-html.light-mode {
+html[data-zen-theme="paper"] {
 --logo-invert: invert(0);
 --epi-grayscale: brightness(2.9) grayscale(1);
 }
+html[data-zen-theme="playful"] {
+--logo-invert: invert(0);
+--epi-grayscale: saturate(1.25);
+}
 /* 4. SYSTEM PREFERENCE */
 @media (prefers-color-scheme: dark) {
-:root:not(.light-mode) {
+:root:not([data-zen-theme]) {
 --logo-invert: invert(1);
 }
 }
 /* 5. APPLY TO ELEMENTS */
 filter: var(--epi-grayscale);
 transition: filter 0.3s ease;
 }
 </style>
-<div id="themeToggle">
+<zen-button id="themeControl" variant="quiet">
-<img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
+<button
-</div>
+id="themeToggle"
+type="button"
+aria-label="Change site theme"
+>
+<img
+id="epiChan"
+class="epi-logo"
+alt=""
+src="/public/epi_all_colors.svg"
+height="50"
+width="50"
+>
+<span id="themeName" aria-live="polite">Auto</span>
+</button>
+</zen-button>
 <header>
 <h1><a href="/">MrJuneJune</a></h1>
 </header>
 <script src="/index.js"></script>
 <main>
 <p>Hi, I am Juntae&mdash;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>
 <div class="epi-photo">
 <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" />
 </div>
 <h2>Links</h2>
-<ul>
+<div class="site-link-grid">
-<li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code</li>
+<a href="https://zenbu.babocoder.com/file/tip">
-<li><a href="/blog">Blogs</a> - My thoughts / Experiments </li>
+<zen-card interactive>
-<li><a href="/resume">Resume</a> - My professional experiences </li>
+<article><h3>Repository</h3><p>Browse the code behind these experiments.</p></article>
-<li><a href="/tools">Tools</a> - Things I made for myself </li>
+</zen-card>
-</ul>
+</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>
 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
 <small>&copy; 2026 June Park</small>
 </div>
 </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`;
 };
 setTimeout(() => setRandomImages(), 1000);
 }
 setRandomImages();
 </script>
+<script src="/public/dog-game.js"></script>
 </html>

Mercurial

comparison mrjunejune/test/snapshots/root.snapshot @ 256:30c2196d03d4