Mercurial

comparison postdog/history/d8ff107c-856d-e516-4863-53fe587855eb.txt @ 114:e2a73e64e8e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[Postdog] Got history working.
author June Park <parkjune1995@gmail.com>
date Tue, 06 Jan 2026 08:15:37 -0800
parents
children
comparison
equal deleted inserted replaced
113:7a4e942814bc 114:e2a73e64e8e6
1 https:/mrjunejune.com
2 ---
3 GET
4 ---
5 Content-Type: application/json
6 ---
7
8 ---
9 HTTP Status: 200
10
11 <!doctype html>
12 <html lang="en">
13 <head>
14 <title> MrJuneJune </title>
15 <meta charset="UTF-8">
16 <meta name="viewport" content="width=device-width, initial-scale=1.0">
17 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
18
19 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin>
20 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
21
22 <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin>
23 <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
24
25 <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin>
26 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
27 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
28
29 <link rel="preload" href="/base.css" as="style" />
30 <link rel="stylesheet" href="/base.css" />
31
32
33 <style>
34 .epi-photo {
35 display: flex;
36 justify-content: center;
37 margin-bottom: 10px;
38 }
39
40 .epi-photo img {
41 max-width: 100%;
42 height: auto;
43 border-radius: 8px;
44 }
45
46 @media (max-width: 720px) {
47 .epi-photo {
48 margin-bottom: 1.5em;
49 }
50
51 ul {
52 padding-left: 1.5em;
53 }
54
55 li {
56 margin-bottom: 0.75em;
57 }
58 }
59 </style>
60 </head>
61 <body>
62 <style>
63 :root {
64 --header-background: var(--white);
65 --header-color: rgb(var(--black));
66 --link-hover-accent: var(--awesome);
67 }
68
69 /* Fixed icon in top left corner */
70 #themeToggle {
71 position: fixed;
72 top: 20px;
73 left: 20px;
74 background: var(--header-background);
75 display: flex;
76 align-items: center;
77 border-radius: 50%;
78 cursor: pointer;
79 z-index: 1000;
80 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
81 transition: transform 0.2s ease;
82 }
83
84 #themeToggle:hover {
85 transform: scale(1.05);
86 }
87
88 /* Professional header */
89 header {
90 margin: auto;
91 padding: 1.5em 1em;
92 font-family: "More", sans-serif;
93 box-shadow: 0 2px 8px rgba(var(--black), 5%);
94 width: 720px;
95 max-width: calc(100% - 2em);
96 text-align: center;
97 }
98
99 header h1 {
100 margin: 0;
101 font-size: 1.8em;
102 font-weight: 700;
103 letter-spacing: -0.5px;
104 }
105
106 header h1 a {
107 text-decoration: none;
108 color: var(--header-color);
109 }
110
111 header h1 a::before {
112 display: none;
113 }
114
115 /* Mobile responsiveness */
116 @media (max-width: 720px) {
117 #themeToggle {
118 top: 15px;
119 left: 15px;
120 }
121
122 header {
123 padding: 1em;
124 }
125
126 header h1 {
127 font-size: 1.5em;
128 }
129 }
130
131 @media (max-width: 480px) {
132 #themeToggle {
133 top: 10px;
134 left: 10px;
135 }
136
137 #themeToggle img {
138 height: 40px;
139 width: 40px;
140 }
141
142 header h1 {
143 font-size: 1.3em;
144 }
145 }
146
147 #logo {
148 width: 300px;
149 }
150
151 /* 1. DEFINE THE DEFAULTS (Light Mode) */
152 :root {
153 --logo-invert: invert(0);
154 --epi-grayscale: grayscale(0) brightness(1);
155 }
156
157 /* 2. MANUAL DARK OVERRIDE */
158 html.dark {
159 --logo-invert: invert(1);
160 --epi-grayscale: grayscale(1);
161 }
162
163 /* 3. MANUAL LIGHT OVERRIDE */
164 html.light-mode {
165 --logo-invert: invert(0);
166 --epi-grayscale: brightness(2.9) grayscale(1);
167 }
168
169 /* 4. SYSTEM PREFERENCE */
170 @media (prefers-color-scheme: dark) {
171 :root:not(.light-mode) {
172 --logo-invert: invert(1);
173 }
174 }
175
176 /* 5. APPLY TO ELEMENTS */
177 #logo {
178 -webkit-filter: var(--logo-invert);
179 filter: var(--logo-invert);
180 transition: filter 0.3s ease;
181 }
182
183 .epi-logo {
184 -webkit-filter: var(--epi-grayscale);
185 filter: var(--epi-grayscale);
186 transition: filter 0.3s ease;
187 }
188 </style>
189
190 <div id="themeToggle">
191 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
192 </div>
193
194 <header>
195 <h1><a href="/">MrJuneJune</a></h1>
196 </header>
197 <script src="/index.js"></script>
198
199
200 <main>
201 <p>Hi, my name is Juntae, but most people call me June or MrJuneJune.</p>
202
203 <p>I am a software engineer with experience spanning a wide range of companies, from small startups to FAANGs....</p>
204 <p>I know it is lame to work for them, but I have a dog so I need to put foods on my table.</p>
205
206 <div class="epi-photo">
207 <img id="currentPhoto" style="opacity: 0; transition: opacity 0.2s;" />
208 </div>
209
210 <p>During my free time, I like to write codes mostly in C, Python, and Typescript; all in mono repo styles using bazel. (I know that is mentally ill...)</p>
211 <p>Feel free to check it out my bad code!</p>
212
213 <h2>Links</h2>
214 <ul>
215 <li><a href="https://zenbu.babocoder.com/file/tip">Repository</a> - Check out my code</li>
216 <li><a href="/blog">Blogs</a> - My thoughts / Experiments </li>
217 <li><a href="/resume">Resume</a> - My professional experiences </li>
218 <li><a href="/tools">Tools</a> - Things I made for myself </li>
219 </ul>
220 </main>
221 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
222 <small>&copy; 2026 June Park</small>
223 </div>
224
225 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9b9c39a8799bcbfd',t:'MTc2NzcxMzA5Nw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
226 <script>
227 let arr = Array.from({ length: 18 }, (_, i) => i+1);
228 function setRandomImages() {
229 const randomIndex = Math.floor(Math.random() * arr.length);
230 const pos = arr[randomIndex];
231 currentPhoto.src = `/public/epi-photos/webp/${pos}.webp`;
232 currentPhoto.onload = () => {
233 currentPhoto.style.opacity = "1";
234 };
235 setTimeout(() => setRandomImages(), 1000);
236 }
237 setRandomImages();
238 </script>
239 </html>
240