changeset 97:3bdfffaad162

[MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
author June Park <parkjune1995@gmail.com>
date Fri, 02 Jan 2026 20:21:58 -0800
parents 70401cf61e97
children 5c47eab8032d
files mrjunejune/deploy.sh mrjunejune/src/base.css mrjunejune/src/index.html mrjunejune/src/parts/base_head.html mrjunejune/src/public/resume.pdf mrjunejune/src/resume.css mrjunejune/src/resume/index.html mrjunejune/src/tools/file_converter/index.html mrjunejune/src/tools/index.css mrjunejune/src/tools/markdown_to_html/index.css
diffstat 10 files changed, 320 insertions(+), 36 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/deploy.sh	Fri Jan 02 20:21:58 2026 -0800
@@ -0,0 +1,4 @@
+bazel build //mrjunejune:mrjunejune_server_bundle 
+sudo mv bazel-bin/mrjunejune/mrjunejune_server_bundle /usr/local/bin/
+sudo chown mrjunejune_server:zenbu_team /usr/local/bin/mrjunejune_server_bundle
+sudo chmod 750 /usr/local/bin/mrjunejune_server_bundle
--- a/mrjunejune/src/base.css	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/base.css	Fri Jan 02 20:21:58 2026 -0800
@@ -149,6 +149,8 @@
   color: rgb(var(--gray-dark));
   font-size: 20px;
   line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 main {
@@ -171,19 +173,19 @@
 }
 
 h1 {
-  font-size: 3.052em;
+  font-size: 2.5em;
 }
 
 h2 {
-  font-size: 2.441em;
+  font-size: 2em;
 }
 
 h3 {
-  font-size: 1.953em;
+  font-size: 1.75em;
 }
 
 h4 {
-  font-size: 1.563em;
+  font-size: 1.5em;
 }
 
 h5 {
@@ -290,9 +292,67 @@
 @media (max-width: 720px) {
   body {
     font-size: 18px;
+    line-height: 1.8;
   }
+
   main {
+    padding: 1.5em 1em;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.75em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  h4 {
+    font-size: 1.25em;
+  }
+
+  h5 {
+    font-size: 1.1em;
+  }
+
+  p {
+    margin-bottom: 1.25em;
+  }
+
+  /* Better touch targets for mobile */
+  a {
+    padding: 0.25em 0;
+    display: inline-block;
+  }
+
+  button, input[type="submit"], input[type="button"] {
+    min-height: 44px;
+    padding: 0.75em 1.5em;
+    font-size: 1em;
+  }
+
+  input, textarea, select {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+
+  /* Improve blockquote readability */
+  blockquote {
+    font-size: 1.1em;
+    padding: 0.5em 0 0.5em 1em;
+  }
+
+  /* Better code block sizing */
+  code {
+    font-size: 0.9em;
+  }
+
+  pre {
     padding: 1em;
+    overflow-x: auto;
   }
 }
 
--- a/mrjunejune/src/index.html	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/index.html	Fri Jan 02 20:21:58 2026 -0800
@@ -9,6 +9,26 @@
         justify-content: center;
         margin-bottom: 10px;
       }
+
+      .epi-photo img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+      }
+
+      @media (max-width: 720px) {
+        .epi-photo {
+          margin-bottom: 1.5em;
+        }
+
+        ul {
+          padding-left: 1.5em;
+        }
+
+        li {
+          margin-bottom: 0.75em;
+        }
+      }
     </style>
   </head>
   <body>
--- a/mrjunejune/src/parts/base_head.html	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/parts/base_head.html	Fri Jan 02 20:21:58 2026 -0800
@@ -1,3 +1,5 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
 
 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font"  crossorigin>
Binary file mrjunejune/src/public/resume.pdf has changed
--- a/mrjunejune/src/resume.css	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/resume.css	Fri Jan 02 20:21:58 2026 -0800
@@ -17,114 +17,125 @@
 }
 
 .header-firstname-style {
-    font-size: 32pt;
+    font-size: 2.5rem;
     font-family: "Roboto Light", sans-serif;
     color: var(--graytext);
 }
 
 .header-lastname-style {
-    font-size: 32pt;
+    font-size: 2.5rem;
     font-family: "Roboto", sans-serif;
     font-weight: bold;
     color: var(--text);
 }
 
 .header-position-style {
-    font-size: 7.6pt;
+    font-size: 0.875rem;
     font-family: "Source Sans Pro", sans-serif;
     font-variant: small-caps;
     color: var(--awesome);
+    letter-spacing: 0.05em;
 }
 
 .header-address-style {
-    font-size: 8pt;
+    font-size: 1rem;
     font-family: "Roboto", sans-serif;
     font-style: italic;
     color: var(--lighttext);
 }
 
 .header-social-style {
-    font-size: 10pt;
+    font-size: 1.1rem;
     font-family: "Roboto", sans-serif;
     color: var(--text);
+    line-height: 1.6;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
 }
 
 .header-quote-style {
-    font-size: 9pt;
+    font-size: 1rem;
     font-family: "Source Sans Pro", sans-serif;
     font-style: italic;
     color: var(--darktext);
 }
 
 .footer-style {
-    font-size: 8pt;
+    font-size: 0.875rem;
     font-family: "Source Sans Pro", sans-serif;
     font-variant: small-caps;
     color: var(--lighttext);
 }
 
 .section-style {
-    font-size: 16pt;
+    font-size: 1.5rem;
     font-family: "Source Sans Pro", sans-serif;
     font-weight: bold;
     color: var(--text);
 }
 
 .subsection-style {
-    font-size: 12pt;
+    font-size: 1.25rem;
     font-family: "Source Sans Pro", sans-serif;
     font-variant: small-caps;
     color: var(--text);
 }
 
 .paragraph-style {
-    font-size: 9pt;
+    font-size: 1rem;
     font-family: "Source Sans Pro Light", sans-serif;
     color: var(--text);
+    line-height: 1.6;
 }
 
 .entry-title-style {
-    font-size: 10pt;
+    font-size: 1.1rem;
     font-family: "Source Sans Pro", sans-serif;
     font-weight: bold;
     color: var(--darktext);
 }
 
 .entry-position-style {
-    font-size: 8pt;
+    font-size: 0.95rem;
     font-family: "Source Sans Pro", sans-serif;
     font-variant: small-caps;
     color: var(--graytext);
+    letter-spacing: 0.03em;
 }
 
 .entry-date-style {
-    font-size: 8pt;
+    font-size: 0.95rem;
     font-family: "Source Sans Pro Light", sans-serif;
     font-style: italic;
     color: var(--graytext);
 }
 
 .entry-location-style {
-    font-size: 9pt;
+    font-size: 1rem;
     font-family: "Source Sans Pro Light", sans-serif;
     font-style: italic;
     color: var(--awesome);
 }
 
 .description-style {
-    font-size: 9pt;
+    font-size: 1rem;
     font-family: "Source Sans Pro Light", sans-serif;
     color: var(--text);
+    line-height: 1.7;
+}
+
+.description-style li {
+    margin-bottom: 0.75em;
 }
 
 .subentry-title-style {
-    font-size: 8pt;
+    font-size: 0.95rem;
     font-family: "Source Sans Pro", sans-serif;
     color: var(--graytext);
 }
 
 .subentry-position-style {
-    font-size: 7pt;
+    font-size: 0.875rem;
     font-family: "Source Sans Pro", sans-serif;
     font-variant: small-caps;
     color: var(--graytext);
@@ -136,9 +147,10 @@
 .honor-location-style,
 .skill-type-style,
 .skill-set-style {
-    font-size: 9pt;
+    font-size: 1rem;
     font-family: "Source Sans Pro", sans-serif;
     color: var(--graytext);
+    line-height: 1.6;
 }
 
 .letter-section-style,
@@ -158,4 +170,90 @@
 .flex-box {
   display: flex;
   justify-content: space-between;
+  gap: 1em;
+  flex-wrap: wrap;
 }
+
+/* Mobile responsive styles */
+@media (max-width: 720px) {
+  .header-firstname-style,
+  .header-lastname-style {
+    font-size: 2rem;
+  }
+
+  .header-position-style {
+    font-size: 0.875rem;
+  }
+
+  .header-address-style {
+    font-size: 0.95rem;
+  }
+
+  .header-social-style {
+    font-size: 0.95rem;
+    line-height: 1.8;
+    word-break: break-word;
+  }
+
+  .header-social-style p {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  .header-social-style a {
+    display: inline-block;
+    padding: 0.5em 0;
+  }
+
+  .section-style {
+    font-size: 1.35rem;
+  }
+
+  .subsection-style {
+    font-size: 1.15rem;
+  }
+
+  .paragraph-style {
+    font-size: 1rem;
+    line-height: 1.7;
+  }
+
+  .entry-title-style {
+    font-size: 1.1rem;
+  }
+
+  .entry-position-style,
+  .entry-date-style {
+    font-size: 0.95rem;
+  }
+
+  .entry-location-style {
+    font-size: 0.95rem;
+  }
+
+  .description-style {
+    font-size: 1rem;
+    line-height: 1.8;
+  }
+
+  .description-style li {
+    margin-bottom: 1em;
+  }
+
+  .flex-box {
+    gap: 0.5em;
+  }
+
+  .sub-header {
+    margin-top: 2em;
+  }
+
+  .info a {
+    padding: 0.5em;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
--- a/mrjunejune/src/resume/index.html	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/resume/index.html	Fri Jan 02 20:21:58 2026 -0800
@@ -17,20 +17,21 @@
           Bay Area, CA, USA
         </div>
         <div class="header-social-style">
-          <p> <a href="tel:+016505311728">(US) 650-531-1728</a> | <a href="tel:+014375808026">(CA) 437-580-8026</a> | <a href="mailto:[email protected]"> [email protected] </a>| <a href="https://github.com/mrjunejune"> 
-               <svg viewBox="0 0 16 16" aria-hidden="true" width="12" height="12">
-                 <path
-		 			fill="currentColor"
-		 			d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-                       ></path>
-               </svg> mrjunejune
-          </a>| <a href="https://www.linkedin.com/in/junepark"> 
-             <svg width="12" height="12" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+          <div>
+            <a href="tel:+016505311728">(US) 650-531-1728</a>
+          </div>
+          <div>
+            <a href="tel:+014375808026">(CA) 437-580-8026</a>
+          </div>
+          <div>
+            <a href="mailto:[email protected]">[email protected]</a>
+          </div>
+          <div>
+            <a href="https://www.linkedin.com/in/junepark"><svg width="12" height="12" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
                <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
-             </svg>
-            junepark
+             </svg> June Park
             </a>
-          </p>
+          </div>
         </div>
       </div>
 
--- a/mrjunejune/src/tools/file_converter/index.html	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/tools/file_converter/index.html	Fri Jan 02 20:21:58 2026 -0800
@@ -35,11 +35,11 @@
         }
 
         input[type="file"] {
-            width: 50%;
-            padding: 0.5rem;
+            padding: 0.75rem;
             border: 2px dashed #ccc;
             border-radius: 4px;
             background: white;
+            font-size: 16px;
         }
 
         button {
@@ -52,6 +52,7 @@
             cursor: pointer;
             font-size: 1rem;
             margin-top: 1rem;
+            min-height: 44px;
         }
 
         button:hover {
@@ -102,6 +103,36 @@
         .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>
 </head>
 <body>
--- a/mrjunejune/src/tools/index.css	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/tools/index.css	Fri Jan 02 20:21:58 2026 -0800
@@ -53,3 +53,26 @@
   70% { box-shadow: 0 0 0 10px rgba(68, 136, 255, 0); }
   100% { box-shadow: 0 0 0 0 rgba(68, 136, 255, 0); }
 }
+
+/* Mobile responsive */
+@media (max-width: 720px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .nav-list a {
+    font-size: 1.1rem;
+    line-height: 1.6;
+  }
+
+  .nav-list li {
+    margin-bottom: 1.5em;
+    padding: 0.5em 0;
+  }
+
+  .sphere {
+    width: 14px;
+    height: 14px;
+    margin-right: 12px;
+  }
+}
--- a/mrjunejune/src/tools/markdown_to_html/index.css	Fri Jan 02 19:16:17 2026 -0800
+++ b/mrjunejune/src/tools/markdown_to_html/index.css	Fri Jan 02 20:21:58 2026 -0800
@@ -24,6 +24,7 @@
 
 .title button {
   margin-top: 0px;
+  margin-bottom: 10px;
 }
 
 button:hover {
@@ -177,7 +178,51 @@
 }
 
 @media (max-width: 768px) {
+  body {
+    padding: 10px;
+    font-size: 16px;
+  }
+
   .container {
     grid-template-columns: 1fr;
+    gap: 15px;
   }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .panel {
+    padding: 15px;
+  }
+
+  textarea {
+    height: 300px;
+    font-size: 16px;
+  }
+
+  #output {
+    min-height: 300px;
+    font-size: 1rem;
+  }
+
+  button {
+    font-size: 1rem;
+    padding: 12px 20px;
+    min-height: 44px;
+    width: 100%;
+  }
+
+  .title {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .label {
+    font-size: 1rem;
+  }
+
+  #output h1 { font-size: 1.75em; }
+  #output h2 { font-size: 1.5em; }
+  #output h3 { font-size: 1.25em; }
 }