Mercurial

comparison mrjunejune/src/index.html @ 211:a6d8d32a0261

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Simple animations for darkmode.
author MrJuneJune <me@mrjunejune.com>
date Sun, 15 Feb 2026 21:38:23 -0800
parents 3468e2fe8d88
children
comparison
equal deleted inserted replaced
210:0abed117e623 211:a6d8d32a0261
27 27
28 li { 28 li {
29 margin-bottom: 0.75em; 29 margin-bottom: 0.75em;
30 } 30 }
31 } 31 }
32
33 #background {
34 position: fixed;
35 top: 0;
36 left: 0;
37 width: 100%;
38 height: 100%;
39 pointer-events: none;
40 z-index: 0;
41 }
42
43 #game {
44 position: fixed;
45 top: 0;
46 left: 0;
47 width: 100%;
48 height: 100%;
49 pointer-events: none;
50 z-index: 1;
51 cursor: default;
52 }
53
54 #game.active {
55 pointer-events: auto;
56 z-index: 100;
57 }
58
59 #gameUI {
60 position: fixed;
61 top: 10px;
62 right: 10px;
63 pointer-events: auto;
64 z-index: 101;
65 cursor: pointer;
66 }
32 </style> 67 </style>
33 </head> 68 </head>
34 <body> 69 <body>
35 {{/parts/header.html}} 70 {{/parts/header.html}}
36 <main> 71 <main>
51 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code</li> 86 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code</li>
52 <li><a href="/blog">Blogs</a> - My thoughts / Experiments </li> 87 <li><a href="/blog">Blogs</a> - My thoughts / Experiments </li>
53 <li><a href="/resume">Resume</a> - My professional experiences </li> 88 <li><a href="/resume">Resume</a> - My professional experiences </li>
54 <li><a href="/tools">Tools</a> - Things I made for myself </li> 89 <li><a href="/tools">Tools</a> - Things I made for myself </li>
55 </ul> 90 </ul>
91 <canvas id="background"></canvas>
92 <canvas id="game"></canvas>
93 <canvas id="gameUI"></canvas>
56 </main> 94 </main>
57 {{/parts/footer.html}} 95 {{/parts/footer.html}}
58 </body> 96 </body>
59 <script> 97 <script>
98 // Epi image
60 let arr = Array.from({ length: 18 }, (_, i) => i+1); 99 let arr = Array.from({ length: 18 }, (_, i) => i+1);
61 function setRandomImages() { 100 function setRandomImages() {
62 const randomIndex = Math.floor(Math.random() * arr.length); 101 const randomIndex = Math.floor(Math.random() * arr.length);
63 const pos = arr[randomIndex]; 102 const pos = arr[randomIndex];
64 currentPhoto.src = `/public/epi-photos/webp/${pos}.webp`; 103 currentPhoto.src = `/public/epi-photos/webp/${pos}.webp`;
67 }; 106 };
68 setTimeout(() => setRandomImages(), 1000); 107 setTimeout(() => setRandomImages(), 1000);
69 } 108 }
70 setRandomImages(); 109 setRandomImages();
71 </script> 110 </script>
111 <script src="/public/dog-game.js"></script>
72 </html> 112 </html>