Mercurial

comparison mrjunejune/test/snapshots/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
comparison
equal deleted inserted replaced
108:f07abbcd2ec5 109:1c446ab6f945
2 Content-Type: text/plain 2 Content-Type: text/plain
3 Content-Length: 0 3 Content-Length: 0
4 Connection: close 4 Connection: close
5 Body: 5 Body:
6 6
7 t/otf" crossorigin> 7 "font/woff" crossorigin>
8 <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
9
10 <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin>
8 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> 11 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
9 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin> 12 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
10 13
11 <link rel="preload" href="/base.css" as="style" /> 14 <link rel="preload" href="/base.css" as="style" />
12 <link rel="stylesheet" href="/base.css" /> 15 <link rel="stylesheet" href="/base.css" />
13 16
14 17
18 <link rel="stylesheet" href="markdown_to_html/index.css" />
19 </head>
20 <body>
15 <style> 21 <style>
16 .epi-photo {
17 display: flex;
18 justify-content: center;
19 margin-bottom: 10px;
20 }
21 </style>
22 </head>
23 <body>
24 <style>
25 :root { 22 :root {
26 --header-background: var(--white); 23 --header-background: var(--white);
27 --header-color: rgb(var(--black)); 24 --header-color: rgb(var(--black));
28 --link-hover-accent: var(--awesome); 25 --link-hover-accent: var(--awesome);
29 } 26 }
157 <h1><a href="/">MrJuneJune</a></h1> 154 <h1><a href="/">MrJuneJune</a></h1>
158 </header> 155 </header>
159 <script src="/index.js"></script> 156 <script src="/index.js"></script>
160 157
161 158
162 <main> 159 <div class="header">
163 <p>Hi, my name is Juntae, but most people call me June or MrJuneJune.</p> 160 <h1>Markdown to HTML Converter</h1>
164 161 </div>
165 <p>I am a software engineer with experience spanning a wide range of companies, from small startups to FAANGs....</p> 162
166 <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> 163 <div class="container">
167 164 <div class="panel">
168 <div class="epi-photo"> 165 <div class="label">Markdown Input</div>
169 <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" /> 166 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
170 </div> 167
171 168 ## Features
172 <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> 169
173 <p>Feel free to check it out. My bad code..</p> 170 This converter supports:
174 171
175 <h2>Links</h2> 172 - **Bold text** and *italic text*
176 <ul> 173 - [Links](https://example.com)
177 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my monorepo code</li> 174 - `inline code`
178 <li><a href="/resume">Resume</a> - My professional experiences </li> 175 - ~~strikethrough~~
179 <li><a href="/tools">Tools</a> - Tools </li> 176
180 <!-- <li><a href="/blogs">Blogs</a> - Personal Blogs where I rant </li> --> 177 ### Lists
181 </ul> 178
182 </main> 179 1. Ordered lists
183 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> 180 2. Like this one
181 3. With numbers
182
183 - Unordered lists
184 - Use dashes
185 - Or asterisks
186
187 ### Code Blocks
188
189 ```
190 function example() {
191 return "Hello World";
192 }
193 ```
194
195 ### Blockquotes
196
197 > This is a blockquote
198 > It can span multiple lines
199
200 ---
201
202 ### Images
203
204 ![Alt text](https://via.placeholder.com/150)
205
206 **Try editing this text!**</textarea>
207 </div>
208
209 <div class="panel">
210 <div class="title">
211 <div class="label">HTML Output</div>
212 <button id="copy"> Copy </button>
213 </div>
214 <div id="output"></div>
215 </div>
216 </div>
217 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
184 <small>&copy; 2026 June Park</small> 218 <small>&copy; 2026 June Park</small>
185 </div> 219 </div>
186 220
221 <script src="/markdown_to_html.js"></script>
222 <script>
223 function convert() {
224 output.innerHTML = '';
225 const markdown = input.value;
226 renderMarkdown(output, markdown);
227 }
228 input.addEventListener('input', convert);
229
230 convert();
231
232 copy.addEventListener('click', () => {
233 const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'});
234 const textBlob = new Blob([output.innerText], { type: 'text/plain'});
235 const data = [new ClipboardItem({
236 'text/html': htmlBlob,
237 'text/plain': textBlob
238 })];
239 navigator.clipboard.write(data).then(() => {
240 copy.textContent = "Copied!";
241 setTimeout(() => {
242 copy.textContent = "Copy";
243 copy.classList.remove('success');
244 }, 1000);
245 }).catch(err => {
246 console.error('Failed to copy: ', err);
247 });
248 });
249 </script>
250 </body>
251 </htmlLocation: /
252
253 <p>
254 <span class="entry-title-style">Tools & Platforms:</span>
255 <span class="skill-type-style">Bazel, PostgresSQL, Mercurial, Git, Pands, Raylib, XCode</span>
256 </p>
257 <p>
258 <span class="entry-title-style"> Web Frameworks: </span>
259 <span class="skill-type-style"> Django, Rails, React, Flask</span>
260 </p>
261 <p>
262 <span class="entry-title-style"> DevOp:</span>
263 <span class="skill-type-style"> Plummi, Heroku, DigitalOcean, AWS, Google Cloud </span>
264 </p>
265 <p>
266 <span class="entry-title-style"> Language:</span>
267 <span class="skill-type-style"> English, Korean, Japanese </span>
268 </p>
269 </div>
270
271 <!-- Experiences -->
272 <div class="sub-header">
273 <h2 class="section-style"> Experience </h2>
274 <div class="line"></div>
275 </div>
276 <div class="flex-box">
277 <p class="entry-title-style">
278 <a href="https://www.meta.com/">Meta</a>
279 </p>
280 <p class="entry-location-style">San Francisco, CA, USA</p>
281 </div>
282 <div class="flex-box">
283 <p class="entry-position-style">SOFTWARE ENGINEER</p>
284 <p class="entry-date-style">Oct, 2024 - Present</p>
285 </div>
286 <ul class="description-style">
287 <li>
288 Took initiative on Channel Value Rule, targeting the 16% of ad traffic with both app and web destinations to improve value attribution and ROI.
289 </li>
290 <li>
291 Built full-stack features using React and Hack/GraphQL, contributing to scalable, production-ready systems.
292 </li>
293 <li>
294 Partnered with data science to design A/B tests and analyze revenue impact of ads destination.
295 </li>
296 <li>
297 Proposed and implemented alpha improvements to internal testing infrastructure, reducing test time by 50% and enhancing developer velocity.
298 </li>
299 </ul>
300 <div class="flex-box">
301 <p class="entry-title-style">
302 <a href="https://www.wmg.com/">Warner Music Group</a>
303 </p>
304 <p class="entry-location-style">Toronto, ON, Canada</p>
305 </div>
306 <div class="flex-box">
307 <p class="entry-position-style">TECHNICAL LEAD ENGINEER</p>
308 <p class="entry-date-style">July, 2023 - Sept, 2024</p>
309 </div>
310 <ul class="description-style">
311 <li>
312 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
313 </li>
314 <li>
315 TypeScript testing and code structures.
316 </li>
317 <li>
318 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.
319 </li>
320 <li>
321 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.
322 </li>
323 <li>
324 Developed CI/CD pipelines for backend structures.
325 </li>
326 <li>
327 Designed infrastructure for pub/sub, caching, and media processing logic.
328 </li>
329 </ul>
330
331 <div class="flex-box">
332 <p class="entry-title-style">
333 <a href="https://www.google.com/">Google</a>
334 </p>
335 <p class="entry-location-style">Toronto, ON, Canada</p>
336 </div>
337 <div class="flex-box">
338 <p class="entry-position-style">SOFTWARE ENGINEER</p>
339 <p class="entry-date-style">Feb, 2022 - July 2023</p>
340 </div>
341 <ul class="description-style">
342 <li>
343 Implements and maintained new features relating to App Script across google workspace platform including Gmail, sheets, and Docs.</li>
344 <li>
345 Improved a response time and render time of App Script hover card components.</li>
346 <li>
347 Collaborated with a team of developers to ensure timely and accurate delivery of features.</li>
348 <li>
349 Conducted user testing and gathered feedback to iterate on features for optimal user experience.</li>
350 </ul>
351
352 <div class="flex-box">
353 <p class="entry-title-style">
354 <a href="https://www.everlywell.com/">Everlywell</a>
355 </p>
356 <p class="entry-location-style">Toronto, ON, Canada</p>
357 </div>
358 <div class="flex-box">
359 <p class="entry-position-style">SOFTWARE ENGINEER</p>
360 <p class="entry-date-style">December, 2020 - Jan, 2022</p>
361 </div>
362 <ul class="description-style">
363 <li>
364 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>
365 <li>
366 Implemented a script that helps accurately access and refund unused covid test kits; helping company save up to 200,000 USD.</li>
367 <li>
368 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>
369 <li>
370 Implemented an audit table to help debug problems and logged which process was responsible for the change of the record using PaperTrail gems</li>
371 </ul>
372
373 <div class="flex-box">
374 <p class="entry-title-style">
375 <a href="https://www.spiria.com/">Spiria</a>
376 </p>
377 <p class="entry-location-style">Oakville, ON, Canada</p>
378 </div>
379 <div class="flex-box">
380 <p class="entry-position-style">SOFTWARE ENGINEER</p>
381 <p class="entry-date-style">October, 2018 - October, 2020</p>
382 </div>
383 <ul class="description-style">
384 <li>
385 Constructed RESTful API endpoints in multiple different frameworks such as Django, Ruby on Rails, and Flask and automated API documentation process using swagger.
386 </li>
387 <li>
388 Designed custom rake tasks for importing production data into newly updated data structure to meet client's needs.
389 </li>
390 <li>
391 Maintained or updated staging/productions servers. Debugged problems in production postgres database using ssh and postgres console on Heroku or AWS servers
392 </li>
393 <li>
394 Collaborated in creating automation python scripts for websites and application using selenium covering for QA eliminating 80% of QA's manual work
395 </li>
396 </ul>
397
398 <div class="flex-box">
399 <p class="entry-title-style">
400 <a href="https://www.apexscore.ai/">Apex Score</a>
401 </p>
402 <p class="entry-location-style">Oakville, ON, Canada</p>
403 </div>
404 <div class="flex-box">
405 <p class="entry-position-style">SOFTWARE ENGINEER</p>
406 <p class="entry-date-style">September, 2019 - October, 2020</p>
407 </div>
408 <ul class="description-style">
409 <li>
410 Developed custom Shapley value regression model to calculate importance of independent variables of data sets using sklearn, pandas, and numpy.
411 </li>
412 <li>
413 Created custom image uploader to Amazon s3 bucket using boto3 library.
414 </li>
415 <li>
416 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.
417 </li>
418 <li>
419 Created an interactive graph using D3.js in Vue.js with data from Flask backend API.
420 </li>
421 </ul>
422
423 <div class="sub-header">
424 <h2 class="section-style"> Education </h2>
425 <div class="line"></div>
426 </div>
427 <div class="flex-box">
428 <p class="entry-title-style">
429 University of British Columbia
430 </p>
431 <p class="entry-location-style">Kelowna, British Columbia</p>
432 </div>
433 <div class="flex-box">
434 <p class="entry-position-style">BACHELOR OF SCIENCE IN PHYSICS</p>
435 <p class="entry-date-style">2014 - 2018</p>
436 </div>
437 <div id="footer"></div>
438 </main>
439 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
440 <small>&copy; 2026 June Park</small>
441 </div>
442
443 <script href="index.js"></script>
187 </body> 444 </body>
188 <script> 445 </html>
189 let arr = Array.from({ length: 18 }, (_, i) => i+1);
190 function setRandomImages() {
191 const randomIndex = Math.floor(Math.random() * arr.length);
192 const pos = arr[randomIndex];
193 currentPhoto.src = `/public/epi-photos/webp/${pos}.webp`;
194 currentPhoto.onload = () => {
195 currentPhoto.style.opacity = "1";
196 };
197 setTimeout(() => setRandomImages(), 1000);
198 }
199 setRandomImages();
200 </script>
201 </htmlLocation: /
202