diff --git a/src/index.pug b/src/index.pug
index 1a13271..cbd8a5b 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -1 +1,23 @@
-extends templates/page.pug
+extends templates/homepage.pug
+
+block 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
+
+block aside
+ section.blog-popular
+ h3 Popular Content
+ ul.popular-items
+ li
+ include partials/arrow.pug
+ a.link(href="javascript:void(0)") New Portfolio Layout
diff --git a/src/partials/arrow.pug b/src/partials/arrow.pug
new file mode 100644
index 0000000..f70e3c6
--- /dev/null
+++ b/src/partials/arrow.pug
@@ -0,0 +1,2 @@
+span.arrow
+ |
diff --git a/src/templates/homepage.pug b/src/templates/homepage.pug
new file mode 100644
index 0000000..5813d75
--- /dev/null
+++ b/src/templates/homepage.pug
@@ -0,0 +1,4 @@
+extends page.pug
+
+block variables
+ - var isHome = true;
diff --git a/src/templates/page.pug b/src/templates/page.pug
index 576c4e5..47c9bcf 100644
--- a/src/templates/page.pug
+++ b/src/templates/page.pug
@@ -1,39 +1 @@
-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.page-home
- #app
- .home-header
- .container
- include ../partials/header.pug
- include ../partials/hero.pug
- include ../partials/header-wave.pug
- .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
- |
- a.link(href="javascript:void(0)") New Portfolio Layout
- .container
- include ../partials/footer.pug
+extends skeleton.pug
diff --git a/src/templates/skeleton.pug b/src/templates/skeleton.pug
new file mode 100644
index 0000000..86d316e
--- /dev/null
+++ b/src/templates/skeleton.pug
@@ -0,0 +1,26 @@
+block variables
+
+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.page-home
+ #app
+ .home-header
+ .container
+ include ../partials/header.pug
+ - if (isHome)
+ include ../partials/hero.pug
+ - if (isHome)
+ include ../partials/header-wave.pug
+ .container
+ .split-content
+ main
+ block main
+ aside
+ block aside
+ .container
+ include ../partials/footer.pug