Render content as inline

nnnlog · Jul 10, 2024 · 9f1a1dc · 9f1a1dc
1 parent d5554ac
commit 9f1a1dc
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 144 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,91 +6,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title><%= htmlWebpackPlugin.options.title %></title>
-  <script>
-    function init() {
-      new SmoothScroll(document, 120, 12);
-    }
-
-    function SmoothScroll(target, speed, smooth) {
-      if (target === document)
-        target = (document.scrollingElement
-          || document.documentElement
-          || document.body.parentNode
-          || document.body); // cross browser support for document scrolling
-
-      var moving = false;
-      var pos = target.scrollTop;
-      var frame = target === document.body
-      && document.documentElement
-        ? document.documentElement
-        : target; // safari is the new IE
-
-      target.addEventListener("mousewheel", scrolled, { passive: false });
-      target.addEventListener("DOMMouseScroll", scrolled, { passive: false });
-
-      function scrolled(e) {
-        // console.log(e);
-        e.preventDefault(); // disable default scrolling
-
-        var delta = normalizeWheelDelta(e);
-
-        if (pos === -1) {
-          pos = target.scrollTop;
-        }
-        pos += -delta * speed;
-        pos = Math.max(0, Math.min(pos, target.scrollHeight - frame.clientHeight)); // limit scrolling
-
-        if (!moving) update();
-      }
-
-      function normalizeWheelDelta(e) {
-        if (e.detail) {
-          if (e.wheelDelta)
-            return e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1); // Opera
-          else
-            return -e.detail / 3; // Firefox
-        } else
-          return e.wheelDelta / 120; // IE,Safari,Chrome
-      }
-
-      function update() {
-        if (pos === -1) {
-          requestFrame(update);
-          return;
-        }
-
-        moving = true;
-
-        var delta = Math.ceil((pos - target.scrollTop) / smooth);
-
-        target.scrollTop += delta;
-        // console.log(pos, target.scrollTop, delta);
-
-        if (Math.abs(pos - target.scrollTop) >= 1)
-          requestFrame(update);
-        else {
-          target.scrollTop = pos;
-          moving = false;
-          pos = -1;
-        }
-      }
-
-      var requestFrame = function() { // requestAnimationFrame cross browser
-        return (
-          window.requestAnimationFrame ||
-          window.webkitRequestAnimationFrame ||
-          window.mozRequestAnimationFrame ||
-          window.oRequestAnimationFrame ||
-          window.msRequestAnimationFrame ||
-          function(func) {
-            window.setTimeout(func, 1000 / 50);
-          }
-        );
-      }();
-    }
-  </script>
 </head>
-<body onload="init()">
+<body>
 <noscript>
   <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
     Please enable it to continue.</strong>

diff --git a/src/components/main/MainEducation.vue b/src/components/main/MainEducation.vue
@@ -3,52 +3,69 @@
 <template>
   <div class="header" style="margin-top: 6rem">Education</div>
   <div class="sub-header detail">
-    Bachelor, Computer Science & Engineering, Soongsil University
+    <div>Bachelor, Computer Science & Engineering, Soongsil University</div>
     <div class="detail-value">
-      (2022.03 ~ 2025.02 <sup>Expected to graduate</sup>)
+      <!--
+            -->(2022.03 ~ 2025.02 <sup>Expected to graduate</sup>)
     </div>
   </div>
   <ul>
     <li class="detail semi-bold">
-      GPA 4.32 / 4.50
+      <div>GPA 4.32 / 4.50</div>
       <div class="detail-value">(Class Rank 3/142)</div>
     </li>
     <li class="none">
       <ul>
-        <li>Major GPA 4.30 / 4.50</li>
+        <li><div>Major GPA 4.30 / 4.50</div></li>
       </ul>
     </li>
     <li class="detail">
-      Undergraduate student in Database Lab, Soongsil University
+      <div>Undergraduate student in Database Lab, Soongsil University</div>
       <div class="detail-value">(2022.03 ~ )</div>
     </li>
     <li class="detail">
-      President & Executives of SCCC, Problem Solving Club in CSE department
+      <div>
+        <!--
+            -->President & Executives of SCCC, Problem Solving Club in CSE
+        department<!--
+        -->
+      </div>
       <div class="detail-value">(2023.03 ~ )</div>
     </li>
     <li class="none">
       <ul>
         <li class="detail">
-          Open study for algorithms, basic C language, and logical circuit
-          (digital engineering)
+          <div>
+            <!--
+            -->Open study for algorithms, basic C language, and logical circuit
+            (digital engineering)<!--
+        -->
+          </div>
           <div class="detail-value">(2023.04)</div>
         </li>
         <li class="detail">
-          Executive Director of 2023 Soongsil University Programming Contest
+          <div>
+            <!--
+            -->Executive Director of 2023 Soongsil University Programming
+            Contest<!--
+        -->
+          </div>
           <div class="detail-value">(2023.04)</div>
         </li>
         <li class="detail">
           <a class="link" href="https://sccc.kr" target="_blank">
-            SCCC Homepage
-            <mdicon width="1rem" height="1rem" name="open-in-new" class="up" />
+            <div>SCCC Homepage</div>
+            <!--
+        --><mdicon width="1rem" height="1rem" name="open-in-new" class="up" />
           </a>
         </li>
       </ul>
     </li>
     <li class="semi-bold">
-      <router-link to="/activity/univ" class="link">
-        View completed subjects' summary in university
-        <mdicon width="1.5rem" height="1.5rem" name="arrow-right" />
+      <router-link to="/activity/univ" class="link"
+        ><!--
+-->View completed subjects' summary in university<!--
+        --><mdicon width="1.5rem" height="1.5rem" name="arrow-right" />
       </router-link>
     </li>
   </ul>

diff --git a/src/components/main/MainExperience.vue b/src/components/main/MainExperience.vue
@@ -3,90 +3,113 @@
 <template>
   <div class="header" style="margin-top: 6rem">Experience</div>
   <div class="sub-header detail">
-    Participating on Algorithm Contests
+    <div>Participating on Algorithm Contests</div>
     <div class="detail-value">(2019 ~ )</div>
   </div>
   <ul>
     <li class="detail semi-bold">
-      Honorable mention in the 47<sup>th</sup>&nbsp;ICPC World Finals
+      <div>Honorable mention in the 47</div>
+      <sup>th</sup>
+      <div>&nbsp;ICPC World Finals</div>
       <div class="detail-value">(2024.04, Luxor, Egypt)</div>
     </li>
     <li class="none">
       <ul>
         <li class="detail">
-          Silver Award&nbsp;<sup>5th rank</sup>&nbsp;in the 2022 ICPC Asia Seoul
-          Regional
+          <div>Silver Award</div>
+          <sup>&nbsp;5th rank&nbsp;</sup>
+          <div>in the 2022 ICPC Asia Seoul Regional</div>
           <div class="detail-value">(2022.11, Seoul, Republic of Korea)</div>
         </li>
       </ul>
     </li>
     <li class="detail semi-bold">
-      TA at Korea Olympiad in Informatics Committee
+      <div>TA at Korea Olympiad in Informatics Committee</div>
       <div class="detail-value">(2023.08 ~ )</div>
     </li>
     <li class="none">
       <ul>
         <li class="detail">
-          Coordinator of Korea Olympiad in Informatics 2024
-          1<sup>st</sup>&nbsp;Programming Contest
+          <div>Coordinator of Korea Olympiad in Informatics 2024 1</div>
+          <sup>st</sup>
+          <div>&nbsp;Programming Contest</div>
           <div class="detail-value">(2024.02 ~ 2024.05)</div>
         </li>
         <li class="detail">
-          TA at Training Camp of International Olympiad in Informatics, Republic
-          of Korea
+          <div>
+            <!--
+            -->
+            TA at Training Camp of International Olympiad in Informatics,
+            Republic of Korea<!--
+            -->
+          </div>
           <div class="detail-value">(2023.08 ~ )</div>
         </li>
       </ul>
     </li>
     <li class="detail">
-      Silver Award in the 38<sup>th</sup>&nbsp;Korea Olympiad in Informatics 1
-      <sup>st</sup>&nbsp;Contest, General High School
+      <div>Silver Award in the 38</div>
+      <sup>th</sup>
+      <div>&nbsp;Korea Olympiad in Informatics 1</div>
+      <sup>st</sup>
+      <div>&nbsp;Contest, General High School</div>
       <div class="detail-value">(2021.05)</div>
     </li>
     <li class="bold">
       <router-link to="/activity/algorithm" class="link">
-        View all experiences related to algorithm
+        <div>View all experiences related to algorithm</div>
         <mdicon width="1.5rem" height="1.5rem" name="arrow-right" />
       </router-link>
     </li>
   </ul>
   <div class="sub-header detail" style="margin-top: 2rem">
-    Completed Software Programs
+    <div>Completed Software Programs</div>
     <div class="detail-value">(2020 ~ )</div>
   </div>
   <ul>
     <li class="detail semi-bold">
-      Software Maestro 13<sup>th</sup>
+      <div>Software Maestro 13</div>
+      <sup>th</sup>
       <div class="detail-value">(2022.04 ~ 2022.11)</div>
     </li>
     <li class="none">
       <ul>
         <li>
-          Codemap, The web platform for preparing algorithm contests -&nbsp;
-          <router-link to="/project/codemap" class="link">
-            View detail of the project<mdicon
-              width="1.5rem"
-              height="1.5rem"
-              name="arrow-right"
-            />
+          <div>
+            <!--
+            -->Codemap, The web platform for preparing algorithm contests
+            -&nbsp;<!--
+        -->
+          </div>
+          <router-link to="/project/codemap" class="link"
+            ><!--
+            -->View detail of the project<!--
+        --><mdicon width="1.5rem" height="1.5rem" name="arrow-right" />
           </router-link>
         </li>
       </ul>
     </li>
     <li class="detail">
-      BEST OF THE BEST 9<sup>th</sup>, Security product development
+      <div>BEST OF THE BEST 9</div>
+      <sup>th</sup>
+      <div>, Security product development</div>
       <div class="detail-value">(2020.07 ~ 2021.03)</div>
     </li>
     <li class="none">
       <ul>
         <li class="detail">
-          Excellence Award in National High School Cyber Security Competition
+          <div>
+            <!--
+            -->Excellence Award in National High School Cyber Security
+            Competition<!--
+        -->
+          </div>
           <div class="detail-value">(2021.08)</div>
         </li>
       </ul>
     </li>
     <li class="detail">
-      SW-oriented class, Dongnae High School
+      <div>SW-oriented class, Dongnae High School</div>
       <div class="detail-value">(2020.03 ~ 2022.02)</div>
     </li>
   </ul>

diff --git a/src/components/main/MainProjects.vue b/src/components/main/MainProjects.vue
@@ -5,13 +5,17 @@
   <ul>
     <li>
       <div class="semi-bold">Mostly using a Language & Framework</div>
-      : Javascript/Typescript (<b>Node.js</b>, express, <b>Vue.js</b>), Flutter,
-      C++ (Algorithm)
+      <div>: Javascript/Typescript (</div>
+      <b>Node.js</b>
+      <div>, express,</div>
+      <b>Vue.js</b>
+      <div>), Flutter, C++ (Algorithm)</div>
     </li>
     <li class="bold">
       <router-link to="/project" class="link">
-        View all projects
-        <mdicon width="1.5rem" height="1.5rem" name="arrow-right" />
+        <!--
+            -->View all projects<!--
+        --><mdicon width="1.5rem" height="1.5rem" name="arrow-right" />
       </router-link>
     </li>
   </ul>