Add static content of current page to index

src/index.pug

@@ -1,6 +1,78 @@
 doctype html
 html(lang='en')
   head
+    meta(charset='UTF-8')
+    meta(http-equiv='X-UA-Compatible', content='IE=edge')
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
     title Portfolio - Daniel de Cloet
-  body
+  body.page-home
-    span#out
+    #app
+      .home-header
+        .container
+          header
+            a.router-link-active.router-link-exact-active.brand(href='/')
+              img.brand-logo(src="//via.placeholder.com/256", alt="Brand Logo")
+              span.brand-name Daniel de Cloet
+            nav.site-nav
+              ul.nav-items
+                li.nav-item
+                  a(href="/blog") Blog
+                li.nav-item
+                  a(href="/blog") Snippets
+                li.nav-item
+                  a(href="/blog") Contact
+          section.hero
+            h1 I'm Daniel, junior software engineer
+            p.
+              I am a student pursuing a Bachelor's in Computer Science, with a software engineering specialization. <br> I have a love for discovering new technologies and inventing unique solutions to complex problems.
+        .wave
+          | <svg preserveAspectRatio="none" width="1440" height="74" viewBox="0 0 1440 74"><path d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"></path></svg>
+      .container
+        .split-content
+          main
+            section.blog-recent
+              .header
+                h3 Latest Articles
+                .all-articles
+                  a(href="/blog") All articles
+              .list
+                ul.blog-items
+                  li.blog-item
+                    img.article-image(src="//via.placeholder.com/128", alt="Article Topic")
+                    .article-text
+                      h4.article-title New Portfolio Layout
+                      span.article-date(title='September 3rd 2021, 10:11:02') 9 months ago
+          aside
+            section.blog-popular
+              h3 Popular Content
+              ul.popular-items
+                li
+                  span.arrow
+                    | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+                  a.link(href="javascript:void(0)") New Portfolio Layout
+      .container
+        footer
+          .credits
+            p Designed and developed by Daniel de Cloet
+            p
+              | Built with
+              |
+              a(href="https://vuejs.org", target='_blank') Vue.js
+              | . Iconset provided by
+              |
+              a(href='https://fontawesome.com/', target='_blank') Font Awesome
+              | . View the
+              |
+              a(href="https://git.chaoticlogic.us/daniel/personal-website/", target='_blank') source code
+              | .
+          .social-links
+            ul
+              li
+                a(href="https://github.com/Daniel-I-Am", target='_blank')
+                  i.fa-brands.fa-github
+              li
+                a(href="https://git.chaoticlogic.us/daniel/", target='_blank')
+                  i.fa-brands.fa-gitlab
+              li
+                a(href="https://www.linkedin.com/in/daniel-de-cloet-11254a182/", target='_blank')
+                  i.fa-brands.fa-linkedin