Mercurial

diff 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
line wrap: on
line diff
--- a/mrjunejune/src/index.html	Thu Jan 01 14:47:28 2026 -0800
+++ b/mrjunejune/src/index.html	Thu Jan 01 16:34:51 2026 -0800
@@ -2,34 +2,48 @@
 <html lang="en">
   <head>
     <title> MrJuneJune </title>
-    <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
-
-    <link rel="preload" href="/fonts/Roboto-Regular.ttf" as="font" type="font/tff" crossorigin>
-    <link rel="preload" href="/fonts/Roboto-Thin.ttf"as="font" type="font/tff" crossorigin>
-    <link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
-
-    <link rel="preload" href="base.css" as="style" />
-    <link rel="stylesheet" href="base.css" />
+    {{//parts/base_head.html}}
+    <style>
+      .epi-photo {
+        display: flex;
+        justify-content: center;
+      }
+    </style>
   </head>
   <body>
      {{/parts/header.html}}
      <main>
-       <p>Hi, my name is Juntae, but most people call me June.</p>
+       <p>Hi, my name is Juntae, but most people call me June or MrJuneJune.</p>
 
-       <p>I am a software engineer with experience spanning a wide range of companies, from small startups to FAANG[s].</p>
+       <p>I am a software engineer with experience spanning a wide range of companies, from small startups to FAANGs....</p>
        <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>
 
-       <img> dog photos </img>
+       <div class="epi-photo">
+         <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" />
+       </div>
 
+       <p>During my free time, I like to write codes mostly in C, typescript and python.</p>
        <p>This website is hosted using my own server library which I wrote in C.</p>
 
        <h2>Links</h2>
        <ul>
          <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code (MIT License)</li>
          <li><a href="/resume">Resume</a> - My professional experiences </li>
-         <li><a href="/tools">Tools</a> - Tools I use daily</li>
+         <li><a href="/tools">Tools</a> - Tools </li>
        </ul>
      </main>
   </body>
+  <script>
+    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>
 </html>