Mercurial

comparison mrjunejune/src/index.html @ 91:19cccf6e866a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added Epi photo reels.
author June Park <parkjune1995@gmail.com>
date Thu, 01 Jan 2026 16:34:51 -0800
parents 431df06b1a9b
children 655ea0b661fd
comparison
equal deleted inserted replaced
90:1aeee370837b 91:19cccf6e866a
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <title> MrJuneJune </title> 4 <title> MrJuneJune </title>
5 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg"> 5 {{//parts/base_head.html}}
6 6 <style>
7 <link rel="preload" href="/fonts/Roboto-Regular.ttf" as="font" type="font/tff" crossorigin> 7 .epi-photo {
8 <link rel="preload" href="/fonts/Roboto-Thin.ttf"as="font" type="font/tff" crossorigin> 8 display: flex;
9 <link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> 9 justify-content: center;
10 <link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin> 10 }
11 11 </style>
12 <link rel="preload" href="base.css" as="style" />
13 <link rel="stylesheet" href="base.css" />
14 </head> 12 </head>
15 <body> 13 <body>
16 {{/parts/header.html}} 14 {{/parts/header.html}}
17 <main> 15 <main>
18 <p>Hi, my name is Juntae, but most people call me June.</p> 16 <p>Hi, my name is Juntae, but most people call me June or MrJuneJune.</p>
19 17
20 <p>I am a software engineer with experience spanning a wide range of companies, from small startups to FAANG[s].</p> 18 <p>I am a software engineer with experience spanning a wide range of companies, from small startups to FAANGs....</p>
21 <p>I know it is lame to work for them, but I have a dog so I need to put foods on my table.</p> 19 <p>I know it is lame to work for them, but I have a dog so I need to put foods on my table.</p>
22 20
23 <img> dog photos </img> 21 <div class="epi-photo">
22 <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" />
23 </div>
24 24
25 <p>During my free time, I like to write codes mostly in C, typescript and python.</p>
25 <p>This website is hosted using my own server library which I wrote in C.</p> 26 <p>This website is hosted using my own server library which I wrote in C.</p>
26 27
27 <h2>Links</h2> 28 <h2>Links</h2>
28 <ul> 29 <ul>
29 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code (MIT License)</li> 30 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code (MIT License)</li>
30 <li><a href="/resume">Resume</a> - My professional experiences </li> 31 <li><a href="/resume">Resume</a> - My professional experiences </li>
31 <li><a href="/tools">Tools</a> - Tools I use daily</li> 32 <li><a href="/tools">Tools</a> - Tools </li>
32 </ul> 33 </ul>
33 </main> 34 </main>
34 </body> 35 </body>
36 <script>
37 let arr = Array.from({ length: 18 }, (_, i) => i+1);
38 function setRandomImages() {
39 const randomIndex = Math.floor(Math.random() * arr.length);
40 const pos = arr[randomIndex];
41 currentPhoto.src = `/public/epi-photos/webp/${pos}.webp`;
42 currentPhoto.onload = () => {
43 currentPhoto.style.opacity = "1";
44 };
45 setTimeout(() => setRandomImages(), 1000);
46 }
47 setRandomImages();
48 </script>
35 </html> 49 </html>