feat: enabled routes to blog page with styles and navigations

web-frontend/src/pages/About.vue

@@ -86,9 +86,9 @@ axios.get('/api/v1/cv/publications')
           <br>
           <div>
             <ul class="actions">
-              <div class="button primary"><a href="https://hwakabh.tumblr.com" target="_blank" rel="noopener noreferrer">Blog</a></div>
+              <!-- <div class="button primary"><a href="https://hwakabh.tumblr.com" target="_blank" rel="noopener noreferrer">Blog</a></div> -->
               <!-- TODO: implement http-clients to tumbler via backend API -->
-              <!-- <li><router-link to="/help" class="button primary">Blog</router-link></li> -->
+              <li><router-link to="/blog" class="button primary">Blog</router-link></li>
             </ul>
           </div>
         </div>

web-frontend/src/pages/Blog.vue

@@ -0,0 +1,67 @@
+<template>
+  <section class="wrapper fullscreen">
+    <div class="inner">
+      <h1 class="major">Elements</h1>
+      <section>
+        <h2>Text</h2>
+        <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
+        This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
+        This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
+        <hr />
+        <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+        <hr />
+        <h2>Heading Level 2</h2>
+        <h3>Heading Level 3</h3>
+        <h4>Heading Level 4</h4>
+        <hr />
+        <h3>Blockquote</h3>
+        <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
+        <h3>Preformatted</h3>
+        <pre><code>i = 0;
+
+while (!deck.isInOrder()) {
+    print 'Iteration ' + i;
+    deck.shuffle();
+    i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
+      </section>
+
+      <!-- Lists -->
+      <section>
+        <h2>Lists</h2>
+        <div class="row">
+          <div class="col-4 col-12-medium">
+            <h3>Unordered</h3>
+            <ul>
+              <li>Dolor pulvinar etiam.</li>
+              <li>Sagittis adipiscing.</li>
+              <li>Felis enim feugiat.</li>
+            </ul>
+          </div>
+          <div class="col-4 col-12-medium">
+            <h3>Alternate</h3>
+            <ul class="alt">
+              <li>Dolor pulvinar etiam.</li>
+              <li>Sagittis adipiscing.</li>
+              <li>Felis enim feugiat.</li>
+            </ul>
+          </div>
+          <div class="col-4 col-12-medium">
+            <h3>Ordered</h3>
+            <ol>
+              <li>Dolor pulvinar etiam.</li>
+              <li>Etiam vel felis viverra.</li>
+              <li>Felis enim feugiat.</li>
+              <li>Dolor pulvinar etiam.</li>
+              <li>Etiam vel felis lorem.</li>
+              <li>Felis enim et feugiat.</li>
+            </ol>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  </section>
+</template>