Mercurial

comparison mrjunejune/test/snapshots/tools_file_converter_index.html.snapshot @ 126:e7899c93da77

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Remove playground.
author June Park <parkjune1995@gmail.com>
date Thu, 08 Jan 2026 18:03:34 -0800
parents d6d578b49a19
children 7eb79fd91c7e
comparison
equal deleted inserted replaced
125:f236c895604e 126:e7899c93da77
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 "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>
11 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
12 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
13
14 <link rel="preload" href="/base.css" as="style" />
15 <link rel="stylesheet" href="/base.css" />
16
17
18 <link rel="stylesheet" href="markdown_to_html/index.css" />
19 </head>
20 <body>
21 <style>
22 :root {
23 --header-background: var(--white);
24 --header-color: rgb(var(--black));
25 --link-hover-accent: var(--awesome);
26 }
27
28 /* Fixed icon in top left corner */
29 #themeToggle {
30 position: fixed;
31 top: 20px;
32 left: 20px;
33 background: var(--header-background);
34 display: flex;
35 align-items: center;
36 border-radius: 50%;
37 cursor: pointer;
38 z-index: 1000;
39 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
40 transition: transform 0.2s ease;
41 }
42
43 #themeToggle:hover {
44 transform: scale(1.05);
45 }
46
47 /* Professional header */
48 header {
49 margin: auto;
50 padding: 1.5em 1em;
51 font-family: "More", sans-serif;
52 box-shadow: 0 2px 8px rgba(var(--black), 5%);
53 width: 720px;
54 max-width: calc(100% - 2em);
55 text-align: center;
56 }
57
58 header h1 {
59 margin: 0;
60 font-size: 1.8em;
61 font-weight: 700;
62 letter-spacing: -0.5px;
63 }
64
65 header h1 a {
66 text-decoration: none;
67 color: var(--header-color);
68 }
69
70 header h1 a::before {
71 display: none;
72 }
73
74 /* Mobile responsiveness */
75 @media (max-width: 720px) {
76 #themeToggle {
77 top: 15px;
78 left: 15px;
79 }
80
81 header {
82 padding: 1em;
83 }
84
85 header h1 {
86 font-size: 1.5em;
87 }
88 }
89
90 @media (max-width: 480px) {
91 #themeToggle {
92 top: 10px;
93 left: 10px;
94 }
95
96 #themeToggle img {
97 height: 40px;
98 width: 40px;
99 }
100
101 header h1 {
102 font-size: 1.3em;
103 }
104 }
105
106 #logo {
107 width: 300px;
108 }
109
110 /* 1. DEFINE THE DEFAULTS (Light Mode) */
111 :root {
112 --logo-invert: invert(0);
113 --epi-grayscale: grayscale(0) brightness(1);
114 }
115
116 /* 2. MANUAL DARK OVERRIDE */
117 html.dark {
118 --logo-invert: invert(1);
119 --epi-grayscale: grayscale(1);
120 }
121
122 /* 3. MANUAL LIGHT OVERRIDE */
123 html.light-mode {
124 --logo-invert: invert(0);
125 --epi-grayscale: brightness(2.9) grayscale(1);
126 }
127
128 /* 4. SYSTEM PREFERENCE */
129 @media (prefers-color-scheme: dark) {
130 :root:not(.light-mode) {
131 --logo-invert: invert(1);
132 }
133 }
134
135 /* 5. APPLY TO ELEMENTS */
136 #logo {
137 -webkit-filter: var(--logo-invert);
138 filter: var(--logo-invert);
139 transition: filter 0.3s ease;
140 }
141
142 .epi-logo {
143 -webkit-filter: var(--epi-grayscale);
144 filter: var(--epi-grayscale);
145 transition: filter 0.3s ease;
146 }
147 </style>
148
149 <div id="themeToggle">
150 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
151 </div>
152
153 <header>
154 <h1><a href="/">MrJuneJune</a></h1>
155 </header>
156 <script src="/index.js"></script>
157
158
159 <div class="header">
160 <h1>Markdown to HTML Converter</h1>
161 </div>
162
163 <div class="container">
164 <div class="panel">
165 <div class="label">Markdown Input</div>
166 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
167
168 ## Features
169
170 This converter supports:
171
172 - **Bold text** and *italic text*
173 - [Links](https://example.com)
174 - `inline code`
175 - ~~strikethrough~~
176
177 ### Lists
178
179 1. Ordered lists
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;">
218 <small>&copy; 2026 June Park</small>
219 </div>
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: /tools
252
253
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>
444 </body>
445 </htmlLocation: /tools/markdown_to_html
446 Location: /tools/file_converter
447