Mercurial

diff mrjunejune/test/snapshots/resume_index.html.snapshot @ 109:1c446ab6f945

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] New Blog about writing Seobeo library.
author June Park <parkjune1995@gmail.com>
date Sat, 03 Jan 2026 19:37:51 -0800
parents 092afa595764
children d6d578b49a19
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/resume_index.html.snapshot	Sat Jan 03 17:29:12 2026 -0800
+++ b/mrjunejune/test/snapshots/resume_index.html.snapshot	Sat Jan 03 19:37:51 2026 -0800
@@ -4,7 +4,10 @@
 Connection: close
 Body: 
 
-t/otf" crossorigin>
+"font/woff" crossorigin>
+<link rel="preload" href="/public/fonts/atkinson-bold.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>
 
@@ -12,16 +15,10 @@
 <link rel="stylesheet" href="/base.css" />
 
 
+    <link rel="stylesheet" href="markdown_to_html/index.css" />
+</head>
+<body>
     <style>
-      .epi-photo {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 10px;
-      }
-    </style>
-  </head>
-  <body>
-     <style>
   :root {
     --header-background: var(--white);
     --header-color: rgb(var(--black));
@@ -159,45 +156,291 @@
 <script src="/index.js"></script>
 
 
-     <main>
-       <p>Hi, my name is Juntae, but most people call me June or MrJuneJune.</p>
+    <div class="header">
+        <h1>Markdown to HTML Converter</h1>
+    </div>
+    
+    <div class="container">
+        <div class="panel">
+            <div class="label">Markdown Input</div>
+            <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
+
+## Features
+
+This converter supports:
 
-       <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>
+- **Bold text** and *italic text*
+- [Links](https://example.com)
+- `inline code`
+- ~~strikethrough~~
+
+### Lists
 
-       <div class="epi-photo">
-         <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" />
-       </div>
+1. Ordered lists
+2. Like this one
+3. With numbers
+
+- Unordered lists
+- Use dashes
+- Or asterisks
+
+### Code Blocks
 
-       <p>During my free time, I like to write codes mostly in C, Python, and Typescript. All in mono repo styles using mercurial and bazel. (I know that is mentally ill...)</p>
-       <p>Feel free to check it out. My bad code..</p>
+```
+function example() {
+    return "Hello World";
+}
+```
+
+### Blockquotes
+
+> This is a blockquote
+> It can span multiple lines
+
+---
+
+### Images
 
-       <h2>Links</h2>
-       <ul>
-         <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my monorepo code</li>
-         <li><a href="/resume">Resume</a> - My professional experiences </li>
-         <li><a href="/tools">Tools</a> - Tools </li>
-         <!-- <li><a href="/blogs">Blogs</a> - Personal Blogs where I rant </li> -->
-       </ul> 
-     </main>
-     <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
+![Alt text](https://via.placeholder.com/150)
+
+**Try editing this text!**</textarea>
+        </div>
+        
+        <div class="panel">
+            <div class="title">
+              <div class="label">HTML Output</div>
+              <button id="copy"> Copy </button>
+            </div>
+            <div id="output"></div>
+        </div>
+    </div>
+    <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
   <small>&copy; 2026 June Park</small>
 </div>
 
+    <script src="/markdown_to_html.js"></script>
+    <script>
+        function convert() {
+          output.innerHTML = '';
+          const markdown = input.value;
+          renderMarkdown(output, markdown);
+        }
+        input.addEventListener('input', convert);
+        
+        convert();
+
+        copy.addEventListener('click', () => {
+          const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'});
+          const textBlob = new Blob([output.innerText], { type: 'text/plain'});
+          const data = [new ClipboardItem({
+            'text/html': htmlBlob,
+            'text/plain': textBlob
+          })];
+          navigator.clipboard.write(data).then(() => {
+            copy.textContent = "Copied!";
+            setTimeout(() => {
+              copy.textContent = "Copy";
+              copy.classList.remove('success');
+            }, 1000);
+          }).catch(err => {
+            console.error('Failed to copy: ', err);
+          });
+        });
+    </script>
+</body>
+</htmlLocation: /
+
+ <p> 
+          <span class="entry-title-style">Tools & Platforms:</span>
+          <span class="skill-type-style">Bazel, PostgresSQL, Mercurial, Git, Pands, Raylib, XCode</span>
+        </p>
+        <p>
+          <span class="entry-title-style"> Web Frameworks: </span>
+          <span class="skill-type-style"> Django, Rails, React, Flask</span>
+        </p>
+        <p>
+          <span class="entry-title-style"> DevOp:</span>
+          <span class="skill-type-style"> Plummi, Heroku, DigitalOcean, AWS, Google Cloud </span>
+        </p>
+        <p>
+          <span class="entry-title-style"> Language:</span>
+          <span class="skill-type-style"> English, Korean, Japanese </span>
+        </p>
+      </div>
+
+      <!-- Experiences -->
+     <div class="sub-header">
+        <h2 class="section-style"> Experience </h2>
+        <div class="line"></div>
+      </div>
+      <div class="flex-box">
+        <p class="entry-title-style">
+          <a href="https://www.meta.com/">Meta</a>
+        </p>
+        <p class="entry-location-style">San Francisco, CA, USA</p>
+      </div>
+      <div class="flex-box">
+        <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>
+      <div class="flex-box">
+        <p class="entry-title-style">
+          <a href="https://www.wmg.com/">Warner Music Group</a>
+        </p>
+        <p class="entry-location-style">Toronto, ON, Canada</p>
+      </div>
+      <div class="flex-box">
+        <p class="entry-position-style">TECHNICAL LEAD ENGINEER</p>
+        <p class="entry-date-style">July, 2023 - Sept, 2024</p>
+      </div>
+      <ul class="description-style">
+        <li>
+          Implements <a href="https://bazel.build/">bazel </a>structure for the company for TypeScript and JavaScript code base for hermiticity and stablishing standards for JavaScript and
+        </li>
+        <li>
+          TypeScript testing and code structures.
+        </li>
+        <li>
+          Led a team of five engineers in building GraphQL endpoints for client-facing applications using Apollo and AppSync, supporting over 2000 RPS and auto scaling depending on request values.
+        </li>
+        <li>
+          Improved application response times by up to 85% for graphQL response by updating database schema and SQL queries, eliminating N+1 queries and lack of indexes.
+        </li>
+        <li>
+          Developed CI/CD pipelines for backend structures.
+        </li>
+        <li>
+          Designed infrastructure for pub/sub, caching, and media processing logic.
+        </li>
+      </ul>
+
+      <div class="flex-box">
+        <p class="entry-title-style">
+          <a href="https://www.google.com/">Google</a>
+        </p>
+        <p class="entry-location-style">Toronto, ON, Canada</p>
+      </div>
+      <div class="flex-box">
+        <p class="entry-position-style">SOFTWARE ENGINEER</p>
+        <p class="entry-date-style">Feb, 2022 - July 2023</p>
+      </div>
+      <ul class="description-style">
+        <li>
+          Implements and maintained new features relating to App Script across google workspace platform including Gmail, sheets, and Docs.</li>
+        <li>
+          Improved a response time and render time of App Script hover card components.</li>
+        <li>
+          Collaborated with a team of developers to ensure timely and accurate delivery of features.</li>
+        <li>
+          Conducted user testing and gathered feedback to iterate on features for optimal user experience.</li>
+      </ul>
+
+      <div class="flex-box">
+        <p class="entry-title-style">
+          <a href="https://www.everlywell.com/">Everlywell</a>
+        </p>
+        <p class="entry-location-style">Toronto, ON, Canada</p>
+      </div>
+      <div class="flex-box">
+        <p class="entry-position-style">SOFTWARE ENGINEER</p>
+        <p class="entry-date-style">December, 2020 - Jan, 2022</p>
+      </div>
+      <ul class="description-style">
+        <li>
+          Maintained Amazon amplify apps to create and deploy React web applications for companies such as <a href="https://brooklynnets.everlywell.com/">NBA</a>, <a href="https://tinder.everlywell.com/">Tinder</a>, and other companies for COVID-19 at-home test kits.</li>
+        <li>
+          Implemented a script that helps accurately access and refund unused covid test kits; helping company save up to 200,000 USD.</li>
+        <li>
+          Created several Rails controllers for internal purposes; mocking end to end user experience for QA, mass refund features for CX department, and more, ultimately reducing support tickets amount by 50 percent.</li>
+        <li>
+          Implemented an audit table to help debug problems and logged which process was responsible for the change of the record using PaperTrail gems</li>
+      </ul>
+
+      <div class="flex-box">
+        <p class="entry-title-style">
+          <a href="https://www.spiria.com/">Spiria</a>
+        </p>
+        <p class="entry-location-style">Oakville, ON, Canada</p>
+      </div>
+      <div class="flex-box">
+        <p class="entry-position-style">SOFTWARE ENGINEER</p>
+        <p class="entry-date-style">October, 2018 - October, 2020</p>
+      </div>
+      <ul class="description-style">
+        <li>
+          Constructed RESTful API endpoints in multiple different frameworks such as Django, Ruby on Rails, and Flask and automated API documentation process using swagger.
+        </li>
+        <li>
+          Designed custom rake tasks for importing production data into newly updated data structure to meet client's needs.
+        </li>
+        <li>
+          Maintained or updated staging/productions servers. Debugged problems in production postgres database using ssh and postgres console on Heroku or AWS servers
+        </li>
+        <li>
+          Collaborated in creating automation python scripts for websites and application using selenium covering for QA eliminating 80% of QA's manual work
+        </li>
+      </ul>
+
+      <div class="flex-box">
+        <p class="entry-title-style">
+          <a href="https://www.apexscore.ai/">Apex Score</a>
+        </p>
+        <p class="entry-location-style">Oakville, ON, Canada</p>
+      </div>
+      <div class="flex-box">
+        <p class="entry-position-style">SOFTWARE ENGINEER</p>
+        <p class="entry-date-style">September, 2019 - October, 2020</p>
+      </div>
+      <ul class="description-style">
+        <li>
+          Developed custom Shapley value regression model to calculate importance of independent variables of data sets using sklearn, pandas, and numpy.
+        </li>
+        <li>
+          Created custom image uploader to Amazon s3 bucket using boto3 library.
+        </li>
+        <li>
+          Built RESTful API application using Flask framework and automated extensive API documentation pages using flask-restplus, pytest, and swagger, covering 95% of the code base.
+        </li>
+        <li>
+          Created an interactive graph using D3.js in Vue.js with data from Flask backend API. 
+        </li>
+      </ul>
+
+     <div class="sub-header">
+        <h2 class="section-style"> Education </h2>
+        <div class="line"></div>
+      </div>
+      <div class="flex-box">
+        <p class="entry-title-style">
+          University of British Columbia
+        </p>
+        <p class="entry-location-style">Kelowna, British Columbia</p>
+      </div>
+      <div class="flex-box">
+        <p class="entry-position-style">BACHELOR OF SCIENCE IN PHYSICS</p>
+        <p class="entry-date-style">2014 - 2018</p>
+      </div>
+      <div id="footer"></div>
+    </main>
+    <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
+  <small>&copy; 2026 June Park</small>
+</div>
+
+    <script href="index.js"></script>
   </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>
-</htmlLocation: /
-Location: /resume
+</htmlLocation: /resume