Mercurial

changeset 80:d55157451947

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Updating my homepage.
author June Park <parkjune1995@gmail.com>
date Thu, 01 Jan 2026 08:23:46 -0800
parents 5710108c949e
children 37fc1ec888b6
files mrjunejune/main.c mrjunejune/pages/base.css mrjunejune/pages/index.html mrjunejune/pages/index.js mrjunejune/pages/parts/header.html mrjunejune/pages/resume/index.html mrjunejune/pages/tools/index.css mrjunejune/pages/tools/index.html mrjunejune/pages/tools/markdown_to_html/index.html
diffstat 9 files changed, 130 insertions(+), 126 deletions(-) [+]
line wrap: on
line diff
--- a/mrjunejune/main.c	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/main.c	Thu Jan 01 08:23:46 2026 -0800
@@ -41,6 +41,7 @@
 
     size_t sub_file_size = 0;
     char *sub_content = Seobeo_Web_LoadFile(include_name, &sub_file_size);
+    printf("sub_content %s", sub_content);
     if (sub_content)
     {
       memcpy(final_body + current_offset, sub_content, sub_file_size);
@@ -57,7 +58,7 @@
 Seobeo_Request_Entry* GetHomePage(Seobeo_Request_Entry *req, Dowa_Arena *arena)
 {
   Seobeo_Request_Entry *resp = NULL; 
-  char *final_body = Dowa_Arena_Allocate(arena, 50 * 1024); // 50KB buffer
+  char *final_body = Dowa_Arena_Allocate(arena, 50 * 1024);
   Seobeo_ServerSideRender(final_body, "/index.html", arena);
   Dowa_HashMap_Push_Arena(resp, "body", final_body, arena);
   return resp;
--- a/mrjunejune/pages/base.css	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/base.css	Thu Jan 01 08:23:46 2026 -0800
@@ -60,14 +60,12 @@
   src: url("/fonts/atkinson-regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
-  font-display: swap;
 }
 @font-face {
   font-family: "Atkinson";
   src: url("/fonts/atkinson-bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
-  font-display: swap;
 }
 /* Fonts */
 @font-face {
@@ -98,6 +96,7 @@
   font-size: 20px;
   line-height: 1.7;
 }
+
 main {
   background: var(--white);
   width: var(--main-width);
@@ -105,6 +104,7 @@
   margin: auto;
   padding: 1em 1em;
 }
+
 h1,
 h2,
 h3,
@@ -257,3 +257,38 @@
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
 }
+
+a {
+  text-decoration: underline;
+}
+
+a::before {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 8px;
+  vertical-align: middle;
+
+  /* This treats the paw like a stencil */
+  background-color: #FF69B4; /* Change your color here! (e.g., Hot Pink) */
+  -webkit-mask: url('/public/paw.svg') no-repeat center;
+  mask: url('/public/paw.svg') no-repeat center;
+  
+  /* Your 2D Animation */
+  animation: pawStep 0.6s ease-out forwards;
+}
+
+@keyframes pawStep {
+  0% { transform: scale(0); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+a:hover::before {
+  animation: wiggle 0.4s ease-in-out infinite;
+}
+
+@keyframes wiggle {
+  0%, 100% { transform: rotate(-15deg); }
+  50% { transform: rotate(15deg); }
+}
--- a/mrjunejune/pages/index.html	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/index.html	Thu Jan 01 08:23:46 2026 -0800
@@ -1,17 +1,28 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <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" />
-    <link rel="stylesheet" href="resume.css" />
   </head>
   <body>
+     {{/parts/header.html}}
      <main>
-       {{/parts/header.html}}
-       <h1> Useful scripts </h1>
+
+       <p> Hi, my name is Juntae Park. Most people call me June irl or MrJuneJune online. I am a software engineer who codes for fun on my off time. </p>
+       <p> If you want to check out what I have done professionally, you can read my <a href="/resume">resume</a></p>
+       <p> If you want to check out what I code on my off time, you can check out my mercurial repo. All my codes are MIT License and free to share / use.</p>
+       <p> If you care about my thoughts on programming, you can read my blogs. </p>
+
+       <p> Below are links I used for my own productivity reasons.</p>
        <ul>
-         <li> <a href="/resume"> Resume </a> </li>
-         <li> <a href="/tools"> Tools </a> </li>
+         <li> <a href="/tools">Tools</a> </li>
        </ul>
      </main>
   </body>
+  <script src="index.js"></script>
 </html>
--- a/mrjunejune/pages/index.js	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/index.js	Thu Jan 01 08:23:46 2026 -0800
@@ -14,49 +14,37 @@
   const root = document.documentElement;
 
   if (preference === 'light') {
+    root.classList.remove('dark', 'auto');
     root.classList.add('light-mode');
-    root.classList.remove('dark');
   } else if (preference === 'dark') {
-    root.classList.remove('light-mode');
+    root.classList.remove('light-mode', 'auto');
     root.classList.add('dark');
   } else {
     // Auto - remove manual overrides and let CSS media query handle it
     root.classList.remove('light-mode', 'dark');
+    root.classList.add('auto');
   }
 }
 
-function populateHeader()
-{
-  fetch("/parts/headers.html")
-    .then(res => res.text())
-    .then(headerHTML => {
-      const range = document.createRange();
-      const fragment = range.createContextualFragment(headerHTML);
-      header.appendChild(fragment);
-      
-      const toggle = document.querySelector('#themeToggle');
-      if (!toggle) return;
-
-      toggle.addEventListener('click', function() {
-        let preference = getThemePreference();
-
-        // Cycle through: auto -> light -> dark -> auto
-        if (preference === 'auto') {
-          preference = 'light';
-        } else if (preference === 'light') {
-          preference = 'dark';
-        } else {
-          preference = 'auto';
-        }
-
-        localStorage.setItem(STORAGE_KEY, preference);
-        applyTheme(preference);
-      });
-    });
-}
-populateHeader();
-
 (function() {
   const currentPreference = getThemePreference();
   applyTheme(currentPreference);
 })();
+
+/* Toggle lights auto and dark */
+const toggle = document.querySelector('#themeToggle');
+toggle.addEventListener('click', function() {
+  let preference = getThemePreference();
+
+  // Cycle through: auto -> light -> dark -> auto
+  if (preference === 'auto') {
+    preference = 'light';
+  } else if (preference === 'light') {
+    preference = 'dark';
+  } else {
+    preference = 'auto';
+  }
+
+  localStorage.setItem(STORAGE_KEY, preference);
+  applyTheme(preference);
+});
--- a/mrjunejune/pages/parts/header.html	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/parts/header.html	Thu Jan 01 08:23:46 2026 -0800
@@ -1,26 +1,3 @@
-<header>
-	<nav>
-      <h2 class="header-logo">
-        <div id="themeToggle">
-          <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_favicon.svg" height="50" width="50">
-        </div>
-        <a href="/">MrJuneJune</a>
-      </h2>
-		<div class="internal-links">
-			<a href="/resume">Resume</a>
-			<a href="/tools">Tools</a>
-    </div>
-    <div class="social-links">
-			<a href="https://github.com/mrjunejune" target="_blank">
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-					></path></svg>
-			</a>
-		</div>
-	</nav>
-</header>
 <style>
   :root {
     --header-background: var(--white);
@@ -32,19 +9,19 @@
     width: 33%;
   }
   .header-logo {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr ;
     align-items: center;
   }
   header {
   	margin: auto;
-  	padding: 0 1em;
-      background: var(--header-background);
-      color: rgb(var(--header-color));
-      font-family: "Atkinson", sans-serif;
-      box-shadow: 0 2px 8px rgba(var(--black), 5%);
-      width: 720px;
-      max-width: calc(100% - 2em);
-
+  	padding: 1em 1em;
+    background: var(--header-background);
+    color: rgb(var(--header-color));
+    font-family: "Atkinson", sans-serif;
+    box-shadow: 0 2px 8px rgba(var(--black), 5%);
+    width: 720px;
+    max-width: calc(100% - 2em);
   }
   h2 {
   	margin: 0;
@@ -54,21 +31,6 @@
   h2 a.active {
   	text-decoration: none;
   }
-  nav {
-  	display: flex;
-  	align-items: center;
-  	justify-content: space-between;
-  }
-  nav a {
-  	padding: 1em 0.5em;
-  	color: rgb(var(--header-color));
-  	border-bottom: 4px solid transparent;
-  	text-decoration: none;
-  }
-  nav a.active {
-  	text-decoration: none;
-  	border-bottom-color: var(--link-hover-accent);
-  }
   .social-links,
   .social-links a {
     display: flex;
@@ -83,20 +45,35 @@
   	.social-links {
   		display: none;
   	}
-  .internal-links {
-    width: 45%;
-  }
-  }
-  :global(.dark) img {
-    -webkit-filter: invert(1); /* safari 6.0 - 9.0 */
-            filter: invert(1);
+    .internal-links {
+      width: 45%;
+    }
   }
   #themeToggle {
     background: var(--header-background);
     display: flex;
     align-items: center;
     border-radius: 25px;
-    filter: invert(1);
     cursor: pointer;
   }
+
+  /* Dark Mode toggles */
+  :is(html.dark, @media (prefers-color-scheme: dark) { html }) img {
+    -webkit-filter:  grayscale(1);
+    filter:  grayscale(1);
+  }
+  :is(html.light-mode, @media (prefers-color-scheme: dark) { html }) img {
+    -webkit-filter: brightness(2.9) grayscale(1);
+    filter:  brightness(2.9) grayscale(1);
+  }
 </style>
+<header>
+  <h2 class="header-logo">
+    <div id="themeToggle">
+      <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
+    </div>
+    <a href="/">MrJuneJune</a>
+  </h2>
+</header>
+<script src="index.js"></script>
+
--- a/mrjunejune/pages/resume/index.html	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/resume/index.html	Thu Jan 01 08:23:46 2026 -0800
@@ -1,7 +1,8 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="base.css" />
+    {{/parts/base_head.html}}
+    <link rel="preload" href="resume.css" as="style" />
     <link rel="stylesheet" href="resume.css" />
   </head>
   <body>
@@ -9,12 +10,12 @@
     <main>
       <div class="info">
         <p><span class="header-firstname-style"> JUNTAE </span><span class="header-lastname-style">PARK</span><p>
-        <p class="header-position-style"> FULL STACK DEVELOPER · SOFTWARE ENGINEER </p>
+        <p class="header-position-style"> SOFTWARE ENGINEER </p>
         <div class="header-address-style"> 
           Bay Area, CA, USA
         </div>
         <div class="header-social-style">
-          <p>📱(US) 650-531-1728 |📱(CA) 437-580-8026 | <a href="mailto:[email protected]"> ✉️  [email protected] </a>| <a href="https://github.com/mrjunejune"> 
+          <p> <a href="tel:+016505311728">(US) 650-531-1728</a> | <a href="tel:+014375808026">(CA) 437-580-8026</a> | <a href="mailto:[email protected]"> [email protected] </a>| <a href="https://github.com/mrjunejune"> 
                <svg viewBox="0 0 16 16" aria-hidden="true" width="12" height="12">
                  <path
 		 			fill="currentColor"
@@ -35,7 +36,7 @@
         <h2 class="section-style"> Summary </h2>
         <div class="line"></div>
       </div>
-      <p class="paragraph-style">Software Engineer with 8 years of hands-on experience across diverse tech stacks, from early-stage startups to FANG-scale systems. Adept in designing and delivering robust software solutions using modern languages, frameworks, and cloud platforms.  Open to impactful work.</p>
+      <p class="paragraph-style">Software Engineer with 9 years of hands-on experience across diverse tech stacks, from early-stage startups to FANG-scale systems. Adept in designing and delivering robust software solutions using modern languages, frameworks, and cloud platforms. <br><br> Open to impactful work.</p>
       <div class="sub-header">
 
         <h2 class="section-style"> Skills </h2>
@@ -44,7 +45,7 @@
       <div class="paragraph-style">
         <p>
           <span class="entry-title-style"> Programming Languages:</span>
-          <span class="skill-type-style"> TypeScript, Python, C++/C, Ruby, Java, MATLAB </span>
+          <span class="skill-type-style"> TypeScript, Python, C/C++, Ruby, Java, MATLAB </span>
         </p>
         <p> 
           <span class="entry-title-style">Tools & Platforms:</span>
@@ -79,20 +80,20 @@
         <p class="entry-position-style">SOFTWARE ENGINEER</p>
         <p class="entry-date-style">Oct, 2024 - Present</p>
       </div>
-        <ul class="description-style">
-          <li>
-            Took initiative on Channel Value Rule, targeting the 16% of ad traffic with both app and web destinations to improve value attribution and ROI.
-          </li>
-          <li>
-            Built full-stack features using React and Hack/GraphQL, contributing to scalable, production-ready systems.
-          </li>
-          <li>
-            Partnered with data science to design A/B tests and analyze revenue impact of ads destination.
-          </li>
-          <li>
-            Proposed and implemented alpha improvements to internal testing infrastructure, reducing test time by 50% and enhancing developer velocity.
-          </li>
-        </ul>
+      <ul class="description-style">
+        <li>
+          Took initiative on Channel Value Rule, targeting the 16% of ad traffic with both app and web destinations to improve value attribution and ROI.
+        </li>
+        <li>
+          Built full-stack features using React and Hack/GraphQL, contributing to scalable, production-ready systems.
+        </li>
+        <li>
+          Partnered with data science to design A/B tests and analyze revenue impact of ads destination.
+        </li>
+        <li>
+          Proposed and implemented alpha improvements to internal testing infrastructure, reducing test time by 50% and enhancing developer velocity.
+        </li>
+      </ul>
       <div class="flex-box">
         <p class="entry-title-style">
           <a href="https://www.wmg.com/">Warner Music Group</a>
--- a/mrjunejune/pages/tools/index.css	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/tools/index.css	Thu Jan 01 08:23:46 2026 -0800
@@ -1,11 +1,3 @@
-body {
-  line-height: 1.6;
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-  background: rgb(var(--gray-light));
-}
-
 .title {
   color: var(--darkgray);
 }
--- a/mrjunejune/pages/tools/index.html	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/tools/index.html	Thu Jan 01 08:23:46 2026 -0800
@@ -1,8 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="/base.css" />
-    <link rel="stylesheet" href="/resume.css" />
+    {{/parts/base_head.html}}
     <link rel="stylesheet" href="/tools/index.css" />
   </head>
   <body>
--- a/mrjunejune/pages/tools/markdown_to_html/index.html	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/tools/markdown_to_html/index.html	Thu Jan 01 08:23:46 2026 -0800
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Markdown to HTML Converter</title>
-    <link rel="stylesheet" href="/base.css" />
+    {{/parts/base_head.html}}
     <link rel="stylesheet" href="markdown_to_html/index.css" />
 </head>
 <body>