Mercurial
diff mrjunejune/test/snapshots/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 | 7eb79fd91c7e |
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/index.html.snapshot Sun Jan 04 06:39:16 2026 -0800 +++ b/mrjunejune/test/snapshots/index.html.snapshot Sun Jan 04 11:38:44 2026 -0800 @@ -3,443 +3,5 @@ Content-Length: 0 Connection: close Body: +Location: / -"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> -<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" /> - - - <link rel="stylesheet" href="markdown_to_html/index.css" /> -</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="header"> - <h1>Markdown to HTML Converter</h1> - </div> - - <div class="container"> - <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: - -- **Bold text** and *italic text* -- [Links](https://example.com) -- `inline code` -- ~~strikethrough~~ - -### Lists - -1. Ordered lists -2. Like this one -3. With numbers - -- Unordered lists -- Use dashes -- Or asterisks - -### Code Blocks - -``` -function example() { - return "Hello World"; -} -``` - -### Blockquotes - -> This is a blockquote -> It can span multiple lines - ---- - -### Images - - - -**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> - <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> - <small>© 2026 June Park</small> -</div> - - <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: / - - <p> - <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> -</html>