Mercurial

comparison mrjunejune/test/snapshots/tools_index.html.snapshot @ 94:092afa595764

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Added Integration tests.
author June Park <parkjune1995@gmail.com>
date Fri, 02 Jan 2026 18:13:32 -0800
parents
children 1c446ab6f945
comparison
equal deleted inserted replaced
93:be91a73d801a 94:092afa595764
1 HTTP/1.1 301 Moved Permanently
2 Content-Type: text/plain
3 Content-Length: 0
4 Connection: close
5 Body:
6
7 ="font/woff" crossorigin>
8
9 <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.regular.otf" as="font" type="font/otf" crossorigin>
11 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
12
13 <link rel="preload" href="/base.css" as="style" />
14 <link rel="stylesheet" href="/base.css" />
15
16
17 <style>
18 .container {
19 max-width: 800px;
20 margin: 2rem auto;
21 padding: 2rem;
22 }
23
24 .converter-section {
25 border-radius: 8px;
26 border: 2px solid var(--lightgray);
27 padding: 2rem;
28 margin-bottom: 2rem;
29 }
30
31 .converter-section h2 {
32 margin-top: 0;
33 color: var(--black);
34 }
35
36 .file-input-wrapper {
37 margin: 1rem 0;
38 }
39
40 .file-input-wrapper label {
41 display: block;
42 margin-bottom: 0.5rem;
43 font-weight: 600;
44 }
45
46 input[type="file"] {
47 width: 50%;
48 padding: 0.5rem;
49 border: 2px dashed #ccc;
50 border-radius: 4px;
51 background: white;
52 }
53
54 button {
55 background: var(--purple);
56 font-family: "More Thin", sans-serif;
57 color: var(--gray-gradient);
58 border: none;
59 padding: 0.75rem 1.5rem;
60 border-radius: 4px;
61 cursor: pointer;
62 font-size: 1rem;
63 margin-top: 1rem;
64 }
65
66 button:hover {
67 background: var(--orange);
68 }
69
70 button:disabled {
71 background: var(--gray);
72 cursor: not-allowed;
73 }
74
75 .result {
76 margin-top: 1rem;
77 padding: 1rem;
78 background: white;
79 border-radius: 4px;
80 display: none;
81 }
82
83 .result.show {
84 display: block;
85 }
86
87 .result.success {
88 border-left: 4px solid var(--blue);
89 }
90
91 .result.error {
92 border-left: 4px solid var(--red);
93 }
94
95 .download-link {
96 display: inline-block;
97 margin-top: 0.5rem;
98 color: var(--awesome);
99 text-decoration: none;
100 }
101
102 .download-link:hover {
103 text-decoration: underline;
104 }
105
106 .loading {
107 display: none;
108 margin-top: 1rem;
109 }
110
111 .loading.show {
112 display: block;
113 }
114 </style>
115 </head>
116 <body>
117 <style>
118 :root {
119 --header-background: var(--white);
120 --header-color: rgb(var(--black));
121 --link-hover-accent: var(--awesome);
122 }
123
124 /* Fixed icon in top left corner */
125 #themeToggle {
126 position: fixed;
127 top: 20px;
128 left: 20px;
129 background: var(--header-background);
130 display: flex;
131 align-items: center;
132 border-radius: 50%;
133 cursor: pointer;
134 z-index: 1000;
135 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
136 transition: transform 0.2s ease;
137 }
138
139 #themeToggle:hover {
140 transform: scale(1.05);
141 }
142
143 /* Professional header */
144 header {
145 margin: auto;
146 padding: 1.5em 1em;
147 font-family: "More", sans-serif;
148 box-shadow: 0 2px 8px rgba(var(--black), 5%);
149 width: 720px;
150 max-width: calc(100% - 2em);
151 text-align: center;
152 }
153
154 header h1 {
155 margin: 0;
156 font-size: 1.8em;
157 font-weight: 700;
158 letter-spacing: -0.5px;
159 }
160
161 header h1 a {
162 text-decoration: none;
163 color: var(--header-color);
164 }
165
166 header h1 a::before {
167 display: none;
168 }
169
170 /* Mobile responsiveness */
171 @media (max-width: 720px) {
172 #themeToggle {
173 top: 15px;
174 left: 15px;
175 }
176
177 header {
178 padding: 1em;
179 }
180
181 header h1 {
182 font-size: 1.5em;
183 }
184 }
185
186 @media (max-width: 480px) {
187 #themeToggle {
188 top: 10px;
189 left: 10px;
190 }
191
192 #themeToggle img {
193 height: 40px;
194 width: 40px;
195 }
196
197 header h1 {
198 font-size: 1.3em;
199 }
200 }
201
202 #logo {
203 width: 300px;
204 }
205
206 /* 1. DEFINE THE DEFAULTS (Light Mode) */
207 :root {
208 --logo-invert: invert(0);
209 --epi-grayscale: grayscale(0) brightness(1);
210 }
211
212 /* 2. MANUAL DARK OVERRIDE */
213 html.dark {
214 --logo-invert: invert(1);
215 --epi-grayscale: grayscale(1);
216 }
217
218 /* 3. MANUAL LIGHT OVERRIDE */
219 html.light-mode {
220 --logo-invert: invert(0);
221 --epi-grayscale: brightness(2.9) grayscale(1);
222 }
223
224 /* 4. SYSTEM PREFERENCE */
225 @media (prefers-color-scheme: dark) {
226 :root:not(.light-mode) {
227 --logo-invert: invert(1);
228 }
229 }
230
231 /* 5. APPLY TO ELEMENTS */
232 #logo {
233 -webkit-filter: var(--logo-invert);
234 filter: var(--logo-invert);
235 transition: filter 0.3s ease;
236 }
237
238 .epi-logo {
239 -webkit-filter: var(--epi-grayscale);
240 filter: var(--epi-grayscale);
241 transition: filter 0.3s ease;
242 }
243 </style>
244
245 <div id="themeToggle">
246 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
247 </div>
248
249 <header>
250 <h1><a href="/">MrJuneJune</a></h1>
251 </header>
252 <script src="/index.js"></script>
253
254
255
256 <div class="container">
257 <h1>File Format Converter</h1>
258 <p>Convert your images and videos to different formats using FFmpeg</p>
259
260 <div class="converter-section">
261 <h2>Image to WebP Converter</h2>
262 <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p>
263
264 <div class="file-input-wrapper">
265 <label for="imageInput">Choose an image file:</label>
266 <input type="file" id="imageInput" accept="image/*">
267 </div>
268
269 <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
270
271 <div class="loading" id="imageLoading">Converting... Please wait.</div>
272
273 <div class="result" id="imageResult">
274 <p id="imageMessage"></p>
275 <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a>
276 </div>
277 </div>
278
279 <div class="converter-section">
280 <h2>Video to MP4 Converter</h2>
281 <p>Upload a video file (AVI, MOV, MKV, etc.) to convert it to MP4 format</p>
282
283 <div class="file-input-wrapper">
284 <label for="videoInput">Choose a video file:</label>
285 <input type="file" id="videoInput" accept="video/*">
286 </div>
287
288 <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
289
290 <div class="loading" id="videoLoading">Converting... Please wait.</div>
291
292 <div class="result" id="videoResult">
293 <p id="videoMessage"></p>
294 <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a>
295 </div>
296 </div>
297 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
298 <small>&copy; 2026 June Park</small>
299 </div>
300
301 </div>
302 <script src="/tools/file_converter/index.js"></script>
303 </body>
304 </htmlLocation: /tools
305
306 ition-style">SOFTWARE ENGINEER</p>
307 <p class="entry-date-style">Oct, 2024 - Present</p>
308 </div>
309 <ul class="description-style">
310 <li>
311 Took initiative on Channel Value Rule, targeting the 16% of ad traffic with both app and web destinations to improve value attribution and ROI.
312 </li>
313 <li>
314 Built full-stack features using React and Hack/GraphQL, contributing to scalable, production-ready systems.
315 </li>
316 <li>
317 Partnered with data science to design A/B tests and analyze revenue impact of ads destination.
318 </li>
319 <li>
320 Proposed and implemented alpha improvements to internal testing infrastructure, reducing test time by 50% and enhancing developer velocity.
321 </li>
322 </ul>
323 <div class="flex-box">
324 <p class="entry-title-style">
325 <a href="https://www.wmg.com/">Warner Music Group</a>
326 </p>
327 <p class="entry-location-style">Toronto, ON, Canada</p>
328 </div>
329 <div class="flex-box">
330 <p class="entry-position-style">TECHNICAL LEAD ENGINEER</p>
331 <p class="entry-date-style">July, 2023 - Sept, 2024</p>
332 </div>
333 <ul class="description-style">
334 <li>
335 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
336 </li>
337 <li>
338 TypeScript testing and code structures.
339 </li>
340 <li>
341 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.
342 </li>
343 <li>
344 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.
345 </li>
346 <li>
347 Developed CI/CD pipelines for backend structures.
348 </li>
349 <li>
350 Designed infrastructure for pub/sub, caching, and media processing logic.
351 </li>
352 </ul>
353
354 <div class="flex-box">
355 <p class="entry-title-style">
356 <a href="https://www.google.com/">Google</a>
357 </p>
358 <p class="entry-location-style">Toronto, ON, Canada</p>
359 </div>
360 <div class="flex-box">
361 <p class="entry-position-style">SOFTWARE ENGINEER</p>
362 <p class="entry-date-style">Feb, 2022 - July 2023</p>
363 </div>
364 <ul class="description-style">
365 <li>
366 Implements and maintained new features relating to App Script across google workspace platform including Gmail, sheets, and Docs.</li>
367 <li>
368 Improved a response time and render time of App Script hover card components.</li>
369 <li>
370 Collaborated with a team of developers to ensure timely and accurate delivery of features.</li>
371 <li>
372 Conducted user testing and gathered feedback to iterate on features for optimal user experience.</li>
373 </ul>
374
375 <div class="flex-box">
376 <p class="entry-title-style">
377 <a href="https://www.everlywell.com/">Everlywell</a>
378 </p>
379 <p class="entry-location-style">Toronto, ON, Canada</p>
380 </div>
381 <div class="flex-box">
382 <p class="entry-position-style">SOFTWARE ENGINEER</p>
383 <p class="entry-date-style">December, 2020 - Jan, 2022</p>
384 </div>
385 <ul class="description-style">
386 <li>
387 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>
388 <li>
389 Implemented a script that helps accurately access and refund unused covid test kits; helping company save up to 200,000 USD.</li>
390 <li>
391 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>
392 <li>
393 Implemented an audit table to help debug problems and logged which process was responsible for the change of the record using PaperTrail gems</li>
394 </ul>
395
396 <div class="flex-box">
397 <p class="entry-title-style">
398 <a href="https://www.spiria.com/">Spiria</a>
399 </p>
400 <p class="entry-location-style">Oakville, ON, Canada</p>
401 </div>
402 <div class="flex-box">
403 <p class="entry-position-style">SOFTWARE ENGINEER</p>
404 <p class="entry-date-style">October, 2018 - October, 2020</p>
405 </div>
406 <ul class="description-style">
407 <li>
408 Constructed RESTful API endpoints in multiple different frameworks such as Django, Ruby on Rails, and Flask and automated API documentation process using swagger.
409 </li>
410 <li>
411 Designed custom rake tasks for importing production data into newly updated data structure to meet client's needs.
412 </li>
413 <li>
414 Maintained or updated staging/productions servers. Debugged problems in production postgres database using ssh and postgres console on Heroku or AWS servers
415 </li>
416 <li>
417 Collaborated in creating automation python scripts for websites and application using selenium covering for QA eliminating 80% of QA's manual work
418 </li>
419 </ul>
420
421 <div class="flex-box">
422 <p class="entry-title-style">
423 <a href="https://www.apexscore.ai/">Apex Score</a>
424 </p>
425 <p class="entry-location-style">Oakville, ON, Canada</p>
426 </div>
427 <div class="flex-box">
428 <p class="entry-position-style">SOFTWARE ENGINEER</p>
429 <p class="entry-date-style">September, 2019 - October, 2020</p>
430 </div>
431 <ul class="description-style">
432 <li>
433 Developed custom Shapley value regression model to calculate importance of independent variables of data sets using sklearn, pandas, and numpy.
434 </li>
435 <li>
436 Created custom image uploader to Amazon s3 bucket using boto3 library.
437 </li>
438 <li>
439 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.
440 </li>
441 <li>
442 Created an interactive graph using D3.js in Vue.js with data from Flask backend API.
443 </li>
444 </ul>
445
446 <div class="sub-header">
447 <h2 class="section-style"> Education </h2>
448 <div class="line"></div>
449 </div>
450 <div class="flex-box">
451 <p class="entry-title-style">
452 University of British Columbia
453 </p>
454 <p class="entry-location-style">Kelowna, British Columbia</p>
455 </div>
456 <div class="flex-box">
457 <p class="entry-position-style">BACHELOR OF SCIENCE IN PHYSICS</p>
458 <p class="entry-date-style">2014 - 2018</p>
459 </div>
460 <div id="footer"></div>
461 </main>
462 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
463 <small>&copy; 2026 June Park</small>
464 </div>
465
466 <script href="index.js"></script>
467 </body>
468 </html>