Mercurial
diff mrjunejune/test/snapshots/tools_file_converter_index.html.snapshot @ 112:d6d578b49a19
[PostDog] Got CRUD working.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Sun, 04 Jan 2026 11:38:44 -0800 |
| parents | 1c446ab6f945 |
| children | e7899c93da77 |
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/tools_file_converter_index.html.snapshot Sun Jan 04 06:39:16 2026 -0800 +++ b/mrjunejune/test/snapshots/tools_file_converter_index.html.snapshot Sun Jan 04 11:38:44 2026 -0800 @@ -4,7 +4,7 @@ Connection: close Body: -/woff" crossorigin> +"font/woff" crossorigin> <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin> <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> @@ -15,135 +15,7 @@ <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"] { - padding: 0.75rem; - border: 2px dashed #ccc; - border-radius: 4px; - background: white; - font-size: 16px; - } - - 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; - min-height: 44px; - } - - 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; - } - - /* Mobile responsive */ - @media (max-width: 720px) { - .container { - padding: 1rem; - margin: 1rem auto; - } - - .converter-section { - padding: 1.5rem 1rem; - } - - .converter-section h2 { - font-size: 1.5rem; - } - - .file-input-wrapper label { - font-size: 1rem; - } - - button { - font-size: 1.1rem; - padding: 1rem 1.5rem; - } - - .result { - padding: 1rem; - font-size: 1rem; - } - } - </style> + <link rel="stylesheet" href="markdown_to_html/index.css" /> </head> <body> <style> @@ -284,55 +156,292 @@ <script src="/index.js"></script> - + <div class="header"> + <h1>Markdown to HTML Converter</h1> + </div> + <div class="container"> - <h1>File Format Converter</h1> - <p>Convert your images and videos to different formats using FFmpeg</p> + <div class="panel"> + <div class="label">Markdown Input</div> + <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter + +## Features + +This converter supports: - <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> +- **Bold text** and *italic text* +- [Links](https://example.com) +- `inline code` +- ~~strikethrough~~ + +### Lists + +1. Ordered lists +2. Like this one +3. With numbers - <div class="file-input-wrapper"> - <label for="imageInput">Choose an image file:</label> - <input type="file" id="imageInput" accept="image/*"> - </div> +- Unordered lists +- Use dashes +- Or asterisks + +### Code Blocks + +``` +function example() { + return "Hello World"; +} +``` + +### Blockquotes - <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button> +> This is a blockquote +> It can span multiple lines - <div class="loading" id="imageLoading">Converting... Please wait.</div> +--- + +### Images - <div class="result" id="imageResult"> - <p id="imageMessage"></p> - <a id="imageDownload" class="download-link" style="display: none;">Download WebP Image</a> + + +**Try editing this text!**</textarea> + </div> + + <div class="panel"> + <div class="title"> + <div class="label">HTML Output</div> + <button id="copy"> Copy </button> </div> + <div id="output"></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;"> + </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> + <script src="/markdown_to_html.js"></script> + <script> + function convert() { + output.innerHTML = ''; + const markdown = input.value; + renderMarkdown(output, markdown); + } + input.addEventListener('input', convert); + + convert(); + + copy.addEventListener('click', () => { + const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'}); + const textBlob = new Blob([output.innerText], { type: 'text/plain'}); + const data = [new ClipboardItem({ + 'text/html': htmlBlob, + 'text/plain': textBlob + })]; + navigator.clipboard.write(data).then(() => { + copy.textContent = "Copied!"; + setTimeout(() => { + copy.textContent = "Copy"; + copy.classList.remove('success'); + }, 1000); + }).catch(err => { + console.error('Failed to copy: ', err); + }); + }); + </script> </body> +</htmlLocation: /tools + + + <span class="entry-title-style">Tools & Platforms:</span> + <span class="skill-type-style">Bazel, PostgresSQL, Mercurial, Git, Pands, Raylib, XCode</span> + </p> + <p> + <span class="entry-title-style"> Web Frameworks: </span> + <span class="skill-type-style"> Django, Rails, React, Flask</span> + </p> + <p> + <span class="entry-title-style"> DevOp:</span> + <span class="skill-type-style"> Plummi, Heroku, DigitalOcean, AWS, Google Cloud </span> + </p> + <p> + <span class="entry-title-style"> Language:</span> + <span class="skill-type-style"> English, Korean, Japanese </span> + </p> + </div> + + <!-- Experiences --> + <div class="sub-header"> + <h2 class="section-style"> Experience </h2> + <div class="line"></div> + </div> + <div class="flex-box"> + <p class="entry-title-style"> + <a href="https://www.meta.com/">Meta</a> + </p> + <p class="entry-location-style">San Francisco, CA, USA</p> + </div> + <div class="flex-box"> + <p class="entry-position-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> </htmlLocation: /tools/markdown_to_html Location: /tools/file_converter