Mercurial
diff mrjunejune/test/snapshots/tools_index.html.snapshot @ 94:092afa595764
[MrJuneJune] Added Integration tests.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Fri, 02 Jan 2026 18:13:32 -0800 |
| parents | |
| children | 1c446ab6f945 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/test/snapshots/tools_index.html.snapshot Fri Jan 02 18:13:32 2026 -0800 @@ -0,0 +1,468 @@ +HTTP/1.1 301 Moved Permanently +Content-Type: text/plain +Content-Length: 0 +Connection: close +Body: + +="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> + +<link rel="preload" href="/base.css" as="style" /> +<link rel="stylesheet" href="/base.css" /> + + + <style> + .container { + max-width: 800px; + margin: 2rem auto; + padding: 2rem; + } + + .converter-section { + border-radius: 8px; + border: 2px solid var(--lightgray); + padding: 2rem; + margin-bottom: 2rem; + } + + .converter-section h2 { + margin-top: 0; + color: var(--black); + } + + .file-input-wrapper { + margin: 1rem 0; + } + + .file-input-wrapper label { + display: block; + margin-bottom: 0.5rem; + font-weight: 600; + } + + input[type="file"] { + width: 50%; + padding: 0.5rem; + border: 2px dashed #ccc; + border-radius: 4px; + background: white; + } + + button { + background: var(--purple); + font-family: "More Thin", sans-serif; + color: var(--gray-gradient); + border: none; + padding: 0.75rem 1.5rem; + border-radius: 4px; + cursor: pointer; + font-size: 1rem; + margin-top: 1rem; + } + + button:hover { + background: var(--orange); + } + + button:disabled { + background: var(--gray); + cursor: not-allowed; + } + + .result { + margin-top: 1rem; + padding: 1rem; + background: white; + border-radius: 4px; + display: none; + } + + .result.show { + display: block; + } + + .result.success { + border-left: 4px solid var(--blue); + } + + .result.error { + border-left: 4px solid var(--red); + } + + .download-link { + display: inline-block; + margin-top: 0.5rem; + color: var(--awesome); + text-decoration: none; + } + + .download-link:hover { + text-decoration: underline; + } + + .loading { + display: none; + margin-top: 1rem; + } + + .loading.show { + display: block; + } + </style> +</head> +<body> + <style> + :root { + --header-background: var(--white); + --header-color: rgb(var(--black)); + --link-hover-accent: var(--awesome); + } + + /* Fixed icon in top left corner */ + #themeToggle { + position: fixed; + top: 20px; + left: 20px; + background: var(--header-background); + display: flex; + align-items: center; + border-radius: 50%; + cursor: pointer; + z-index: 1000; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.2s ease; + } + + #themeToggle:hover { + transform: scale(1.05); + } + + /* Professional header */ + header { + margin: auto; + padding: 1.5em 1em; + font-family: "More", sans-serif; + box-shadow: 0 2px 8px rgba(var(--black), 5%); + width: 720px; + max-width: calc(100% - 2em); + text-align: center; + } + + header h1 { + margin: 0; + font-size: 1.8em; + font-weight: 700; + letter-spacing: -0.5px; + } + + header h1 a { + text-decoration: none; + color: var(--header-color); + } + + header h1 a::before { + display: none; + } + + /* Mobile responsiveness */ + @media (max-width: 720px) { + #themeToggle { + top: 15px; + left: 15px; + } + + header { + padding: 1em; + } + + header h1 { + font-size: 1.5em; + } + } + + @media (max-width: 480px) { + #themeToggle { + top: 10px; + left: 10px; + } + + #themeToggle img { + height: 40px; + width: 40px; + } + + header h1 { + font-size: 1.3em; + } + } + + #logo { + width: 300px; + } + + /* 1. DEFINE THE DEFAULTS (Light Mode) */ + :root { + --logo-invert: invert(0); + --epi-grayscale: grayscale(0) brightness(1); + } + + /* 2. MANUAL DARK OVERRIDE */ + html.dark { + --logo-invert: invert(1); + --epi-grayscale: grayscale(1); + } + + /* 3. MANUAL LIGHT OVERRIDE */ + html.light-mode { + --logo-invert: invert(0); + --epi-grayscale: brightness(2.9) grayscale(1); + } + + /* 4. SYSTEM PREFERENCE */ + @media (prefers-color-scheme: dark) { + :root:not(.light-mode) { + --logo-invert: invert(1); + } + } + + /* 5. APPLY TO ELEMENTS */ + #logo { + -webkit-filter: var(--logo-invert); + filter: var(--logo-invert); + transition: filter 0.3s ease; + } + + .epi-logo { + -webkit-filter: var(--epi-grayscale); + filter: var(--epi-grayscale); + transition: filter 0.3s ease; + } +</style> + +<div id="themeToggle"> + <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> +</div> + +<header> + <h1><a href="/">MrJuneJune</a></h1> +</header> +<script src="/index.js"></script> + + + + <div class="container"> + <h1>File Format Converter</h1> + <p>Convert your images and videos to different formats using FFmpeg</p> + + <div class="converter-section"> + <h2>Image to WebP Converter</h2> + <p>Upload an image file (PNG, JPG, GIF, etc.) to convert it to WebP format</p> + + <div class="file-input-wrapper"> + <label for="imageInput">Choose an image file:</label> + <input type="file" id="imageInput" accept="image/*"> + </div> + + <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button> + + <div class="loading" id="imageLoading">Converting... Please wait.</div> + + <div class="result" id="imageResult"> + <p id="imageMessage"></p> + <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a> + </div> + </div> + + <div class="converter-section"> + <h2>Video to MP4 Converter</h2> + <p>Upload a video file (AVI, MOV, MKV, etc.) to convert it to MP4 format</p> + + <div class="file-input-wrapper"> + <label for="videoInput">Choose a video file:</label> + <input type="file" id="videoInput" accept="video/*"> + </div> + + <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button> + + <div class="loading" id="videoLoading">Converting... Please wait.</div> + + <div class="result" id="videoResult"> + <p id="videoMessage"></p> + <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a> + </div> + </div> + <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> + <small>© 2026 June Park</small> +</div> + + </div> + <script src="/tools/file_converter/index.js"></script> +</body> +</htmlLocation: /tools + +ition-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>© 2026 June Park</small> +</div> + + <script href="index.js"></script> + </body> +</html>