Mercurial

comparison mrjunejune/test/snapshots/tools_markdown_to_html_index.html.snapshot @ 112:d6d578b49a19

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[PostDog] Got CRUD working.
author June Park <parkjune1995@gmail.com>
date Sun, 04 Jan 2026 11:38:44 -0800
parents 1c446ab6f945
children e7899c93da77
comparison
equal deleted inserted replaced
111:48f260576059 112:d6d578b49a19
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 /woff" crossorigin> 7 "font/woff" crossorigin>
8 <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin> 8 <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
9 9
10 <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> 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> 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> 12 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
13 13
14 <link rel="preload" href="/base.css" as="style" /> 14 <link rel="preload" href="/base.css" as="style" />
15 <link rel="stylesheet" href="/base.css" /> 15 <link rel="stylesheet" href="/base.css" />
16 16
17 17
18 <style> 18 <link rel="stylesheet" href="markdown_to_html/index.css" />
19 .container {
20 max-width: 800px;
21 margin: 2rem auto;
22 padding: 2rem;
23 }
24
25 .converter-section {
26 border-radius: 8px;
27 border: 2px solid var(--lightgray);
28 padding: 2rem;
29 margin-bottom: 2rem;
30 }
31
32 .converter-section h2 {
33 margin-top: 0;
34 color: var(--black);
35 }
36
37 .file-input-wrapper {
38 margin: 1rem 0;
39 }
40
41 .file-input-wrapper label {
42 display: block;
43 margin-bottom: 0.5rem;
44 font-weight: 600;
45 }
46
47 input[type="file"] {
48 padding: 0.75rem;
49 border: 2px dashed #ccc;
50 border-radius: 4px;
51 background: white;
52 font-size: 16px;
53 }
54
55 button {
56 background: var(--purple);
57 font-family: "More Thin", sans-serif;
58 color: var(--gray-gradient);
59 border: none;
60 padding: 0.75rem 1.5rem;
61 border-radius: 4px;
62 cursor: pointer;
63 font-size: 1rem;
64 margin-top: 1rem;
65 min-height: 44px;
66 }
67
68 button:hover {
69 background: var(--orange);
70 }
71
72 button:disabled {
73 background: var(--gray);
74 cursor: not-allowed;
75 }
76
77 .result {
78 margin-top: 1rem;
79 padding: 1rem;
80 background: white;
81 border-radius: 4px;
82 display: none;
83 }
84
85 .result.show {
86 display: block;
87 }
88
89 .result.success {
90 border-left: 4px solid var(--blue);
91 }
92
93 .result.error {
94 border-left: 4px solid var(--red);
95 }
96
97 .download-link {
98 display: inline-block;
99 margin-top: 0.5rem;
100 color: var(--awesome);
101 text-decoration: none;
102 }
103
104 .download-link:hover {
105 text-decoration: underline;
106 }
107
108 .loading {
109 display: none;
110 margin-top: 1rem;
111 }
112
113 .loading.show {
114 display: block;
115 }
116
117 /* Mobile responsive */
118 @media (max-width: 720px) {
119 .container {
120 padding: 1rem;
121 margin: 1rem auto;
122 }
123
124 .converter-section {
125 padding: 1.5rem 1rem;
126 }
127
128 .converter-section h2 {
129 font-size: 1.5rem;
130 }
131
132 .file-input-wrapper label {
133 font-size: 1rem;
134 }
135
136 button {
137 font-size: 1.1rem;
138 padding: 1rem 1.5rem;
139 }
140
141 .result {
142 padding: 1rem;
143 font-size: 1rem;
144 }
145 }
146 </style>
147 </head> 19 </head>
148 <body> 20 <body>
149 <style> 21 <style>
150 :root { 22 :root {
151 --header-background: var(--white); 23 --header-background: var(--white);
282 <h1><a href="/">MrJuneJune</a></h1> 154 <h1><a href="/">MrJuneJune</a></h1>
283 </header> 155 </header>
284 <script src="/index.js"></script> 156 <script src="/index.js"></script>
285 157
286 158
287 159 <div class="header">
160 <h1>Markdown to HTML Converter</h1>
161 </div>
162
288 <div class="container"> 163 <div class="container">
289 <h1>File Format Converter</h1> 164 <div class="panel">
290 <p>Convert your images and videos to different formats using FFmpeg</p> 165 <div class="label">Markdown Input</div>
291 166 <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter
292 <div class="converter-section"> 167
293 <h2>Image to WebP Converter</h2> 168 ## Features
294 <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p> 169
295 170 This converter supports:
296 <div class="file-input-wrapper"> 171
297 <label for="imageInput">Choose an image file:</label> 172 - **Bold text** and *italic text*
298 <input type="file" id="imageInput" accept="image/*"> 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>
299 </div> 213 </div>
300 214 <div id="output"></div>
301 <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
302
303 <div class="loading" id="imageLoading">Converting... Please wait.</div>
304
305 <div class="result" id="imageResult">
306 <p id="imageMessage"></p>
307 <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a>
308 </div>
309 </div> 215 </div>
310 216 </div>
311 <div class="converter-section"> 217 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
312 <h2>Video to MP4 Converter</h2>
313 <p>Upload a video file (AVI, MOV, MKV, etc.) to convert it to MP4 format</p>
314
315 <div class="file-input-wrapper">
316 <label for="videoInput">Choose a video file:</label>
317 <input type="file" id="videoInput" accept="video/*">
318 </div>
319
320 <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
321
322 <div class="loading" id="videoLoading">Converting... Please wait.</div>
323
324 <div class="result" id="videoResult">
325 <p id="videoMessage"></p>
326 <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a>
327 </div>
328 </div>
329 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
330 <small>&copy; 2026 June Park</small> 218 <small>&copy; 2026 June Park</small>
331 </div> 219 </div>
332 220
333 </div> 221 <script src="/markdown_to_html.js"></script>
334 <script src="/tools/file_converter/index.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>
335 </body> 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>
336 </htmlLocation: /tools/markdown_to_html 445 </htmlLocation: /tools/markdown_to_html
337 446