diff --git a/.gitignore b/.gitignore
index 2a8645f..ce4daf9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
.hugo_build.lock
+node_modules/
diff --git a/archetypes/default.md b/archetypes/default.md
index 00e77bd..025de32 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -1,6 +1,8 @@
---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .File.ContentBaseName "-" " " | title }}"
date: {{ .Date }}
+tags: []
draft: true
+hero: false
---
diff --git a/assets/js/app.js b/assets/js/app.js
new file mode 100644
index 0000000..b3c0579
--- /dev/null
+++ b/assets/js/app.js
@@ -0,0 +1,5 @@
+import clickableMaker from "./clickable-maker";
+
+window.addEventListener('load', () => {
+ clickableMaker();
+});
diff --git a/assets/js/clickable-maker.js b/assets/js/clickable-maker.js
new file mode 100644
index 0000000..e765727
--- /dev/null
+++ b/assets/js/clickable-maker.js
@@ -0,0 +1,16 @@
+export default function() {
+ const elements = document.querySelectorAll('[data-href]');
+
+ elements.forEach(e => {
+ const href = e.dataset.href
+ e.addEventListener('click', () => {
+ window.location.href = href;
+ });
+ e.addEventListener('auxclick', (evt) => {
+ if (evt.button == 1) {
+ // Middle click was pushed
+ window.open(href, '_blank')
+ }
+ })
+ });
+}
diff --git a/assets/jsconfig.json b/assets/jsconfig.json
new file mode 100644
index 0000000..377218c
--- /dev/null
+++ b/assets/jsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "*": [
+ "*"
+ ]
+ }
+ }
+}
\ No newline at end of file
diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss
new file mode 100644
index 0000000..f5ca8c6
--- /dev/null
+++ b/assets/sass/_base.scss
@@ -0,0 +1,19 @@
+html,
+body {
+ background-color: #162028;
+ font-family: $font-family-sans-serif;
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+ color: $text-color;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ transition: color 100ms ease-in-out;
+ color: darken($text-color, 15%);
+
+ &:hover {
+ color: darken($text-color, 5%);
+ }
+}
diff --git a/assets/sass/_blog.scss b/assets/sass/_blog.scss
new file mode 100644
index 0000000..f39d66a
--- /dev/null
+++ b/assets/sass/_blog.scss
@@ -0,0 +1,114 @@
+$article-image-size: 24px;
+
+section.blog-recent {
+ .header {
+ display: flex;
+ justify-content: space-between;
+
+ .all-articles {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ a {
+ text-decoration: none;
+
+ &:after {
+ content: "ยป";
+ }
+ }
+ }
+ }
+}
+
+section.blog-recent,
+section.blog {
+ .list {
+ .blog-items {
+ list-style: none;
+
+ .blog-item {
+ background-color: $background-lighter;
+ border-radius: 16px;
+ padding: 8px;
+ display: flex;
+ cursor: pointer;
+ user-select: none;
+
+ transition: transform 250ms ease-in-out;
+
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ &:hover {
+ transform: translateX(2rem);
+
+ @media (max-width: $xl) {
+ transform: translateX(1rem);
+ }
+
+ @media (max-width: $lg) {
+ transform: translateX(0.5rem);
+ }
+ }
+
+ .article-image {
+ max-width: $article-image-size;
+ max-height: $article-image-size;
+
+ margin-right: 1rem;
+ }
+
+ .article-text {
+ .article-title {
+ line-height: $article-image-size;
+ font-size: 1.2rem;
+ margin: 0;
+ }
+
+ .article-desc,
+ .article-date {
+ display: block;
+ }
+
+ .article-date {
+ color: darken($text-color, 15%);
+ }
+ }
+ }
+ }
+ }
+}
+
+section.blog-popular {
+ .popular-items {
+ list-style: none;
+ padding: 0;
+
+ li {
+ display: grid;
+ grid-template-columns: 25px 1fr;
+
+ &:not(:first-child) {
+ margin-bottom: 0.25rem;
+ }
+
+ &:not(:last-child) {
+ margin-top: 0.25rem;
+ }
+
+ .arrow {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 25px;
+ }
+
+ .link {
+ text-decoration: none;
+ font-size: 1.2rem;
+ }
+ }
+ }
+}
diff --git a/assets/sass/_container.scss b/assets/sass/_container.scss
new file mode 100644
index 0000000..06d37be
--- /dev/null
+++ b/assets/sass/_container.scss
@@ -0,0 +1,55 @@
+// Source: https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css
+
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+ padding-right: 0.75rem;
+ padding-left: 0.75rem;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+@media (min-width: $sm) {
+ .container-sm,
+ .container {
+ max-width: 540px;
+ }
+}
+@media (min-width: $md) {
+ .container-md,
+ .container-sm,
+ .container {
+ max-width: 720px;
+ }
+}
+@media (min-width: $lg) {
+ .container-lg,
+ .container-md,
+ .container-sm,
+ .container {
+ max-width: 960px;
+ }
+}
+@media (min-width: $xl) {
+ .container-xl,
+ .container-lg,
+ .container-md,
+ .container-sm,
+ .container {
+ max-width: 1140px;
+ }
+}
+@media (min-width: $xxl) {
+ .container-xxl,
+ .container-xl,
+ .container-lg,
+ .container-md,
+ .container-sm,
+ .container {
+ max-width: 1320px;
+ }
+}
diff --git a/assets/sass/_fontawesome.scss b/assets/sass/_fontawesome.scss
new file mode 100644
index 0000000..083bc0b
--- /dev/null
+++ b/assets/sass/_fontawesome.scss
@@ -0,0 +1,3 @@
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
diff --git a/assets/sass/_footer.scss b/assets/sass/_footer.scss
new file mode 100644
index 0000000..90500c1
--- /dev/null
+++ b/assets/sass/_footer.scss
@@ -0,0 +1,52 @@
+$icon-size: 2rem;
+
+footer {
+ display: flex;
+ justify-content: space-between;
+
+ @media (max-width: $sm) {
+ flex-direction: column;
+
+ .credits {
+ text-align: center;
+ }
+ }
+
+ .credits {
+ p {
+ a {
+ text-decoration: none;
+ }
+ }
+ }
+
+ .social-links {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ ul {
+ display: flex;
+ list-style: none;
+ justify-content: center;
+ padding: 0;
+
+ li {
+ a {
+ text-decoration: none;
+ color: $text-color;
+ margin: 0.5rem;
+
+ &:hover {
+ color: darken($text-color, 10%);
+ }
+
+ i {
+ line-height: $icon-size;
+ font-size: $icon-size;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/assets/sass/_header.scss b/assets/sass/_header.scss
new file mode 100644
index 0000000..23d5ae3
--- /dev/null
+++ b/assets/sass/_header.scss
@@ -0,0 +1,78 @@
+$brand-height: 64px;
+
+header {
+ display: flex;
+ justify-content: space-between;
+
+ .brand {
+ display: flex;
+ text-decoration: none;
+ color: $text-color;
+ user-select: none;
+
+ .brand-logo {
+ width: auto;
+ height: $brand-height;
+ }
+
+ .brand-name {
+ line-height: $brand-height;
+ vertical-align: middle;
+ font-size: 28px;
+
+ margin-left: 2rem;
+
+ @media (max-width: $sm) {
+ font-size: 20px;
+ margin-left: 1rem;
+ }
+ }
+ }
+
+ .site-nav {
+ flex-grow: 1;
+ max-width: 200px;
+
+ .nav-items {
+ display: flex;
+ justify-content: space-between;
+ list-style: none;
+ padding: 0;
+
+ .nav-item {
+ text-align: center;
+
+ a {
+ text-decoration: none;
+ font-size: 1.1rem;
+ color: $text-color;
+
+ &:hover {
+ color: darken($text-color, 15%);
+ }
+ }
+ }
+ }
+ }
+
+ @media (max-width: $md) {
+ flex-direction: column;
+
+ .site-nav {
+ flex-grow: unset;
+ max-width: unset;
+
+ .nav-items {
+ justify-content: unset;
+
+ .nav-item {
+ flex-basis: 100%;
+ }
+ }
+ }
+ }
+}
+
+body > .header {
+ margin-bottom: 1rem;
+}
diff --git a/assets/sass/_hero.scss b/assets/sass/_hero.scss
new file mode 100644
index 0000000..5856bf5
--- /dev/null
+++ b/assets/sass/_hero.scss
@@ -0,0 +1,30 @@
+section.hero {
+ max-width: 60%;
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+
+ @media (max-width: $lg) {
+ max-width: 75%;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+
+ @media (max-width: $md) {
+ max-width: 100%;
+ margin-top: 1rem;
+ }
+
+ h1 {
+ color: $primary;
+ font-size: 2.5rem;
+
+ @media (max-width: $md) {
+ font-size: 1.5rem;
+ }
+ }
+
+ p {
+ font-size: 14px;
+ line-height: 2;
+ }
+}
diff --git a/assets/sass/_home.scss b/assets/sass/_home.scss
new file mode 100644
index 0000000..19f89fc
--- /dev/null
+++ b/assets/sass/_home.scss
@@ -0,0 +1,56 @@
+.split-content {
+ display: flex;
+
+ main {
+ margin-right: 4rem;
+ width: 75%;
+ }
+
+ aside {
+ width: 25%;
+ }
+
+ @media (max-width: $lg) {
+ flex-direction: column;
+
+ main,
+ aside {
+ width: 100%;
+ }
+ }
+}
+
+.home-header {
+ position: relative;
+ background-color: rgba($black, 0.5);
+ padding-bottom: 90px;
+ padding-top: 45px;
+
+ @media (max-width: $md) {
+ padding-top: 30px;
+ }
+
+ .wave {
+ overflow: hidden;
+ display: block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 90px;
+ transform: translateY(1px);
+ z-index: 3;
+
+ svg {
+ position: absolute;
+ left: -3%;
+ right: -3%;
+ bottom: 0;
+ width: 106%;
+ min-width: 600px;
+
+ fill: $background;
+ }
+ }
+}
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
new file mode 100644
index 0000000..e3d8d93
--- /dev/null
+++ b/assets/sass/_variables.scss
@@ -0,0 +1,32 @@
+// Typography
+$font-family-sans-serif: "Nunito", sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+// Base colors
+$white: #ffffff;
+$black: #000000;
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66d9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;
+
+// Theme colors
+$background: #162028;
+$background-lighter: #1c2d35;
+$background-darker: #0f171d;
+$primary: #a1fab3;
+$text-color: #ecf8ff;
+
+// Breakpoints
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+$xxl: 1400px;
diff --git a/assets/sass/app.scss b/assets/sass/app.scss
new file mode 100644
index 0000000..68d1cce
--- /dev/null
+++ b/assets/sass/app.scss
@@ -0,0 +1,18 @@
+// Reusable variables
+@import "variables";
+
+// Plugins
+@import "fontawesome";
+
+// Base styling
+@import "base";
+
+// Generic styling
+@import "container";
+
+// Component specific styling
+@import "header";
+@import "hero";
+@import "blog";
+@import "footer";
+@import "home";
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..132c024
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,7 @@
+---
+hero: true
+# HTML allowed in the following two fields
+heroMain: I'm Daniel, junior software engineer
+heroSub: I am a student pursuing a Bachelor's in Computer Science, with a software engineering specialization.
I have a love for discovering new technologies and inventing unique solutions to complex problems.
+---
+
diff --git a/content/snippets/filler-1.md b/content/snippets/filler-1.md
new file mode 100644
index 0000000..6c44f7b
--- /dev/null
+++ b/content/snippets/filler-1.md
@@ -0,0 +1,7 @@
+---
+title: "Filler 1"
+date: 2022-04-16T08:45:13Z
+draft: false
+---
+
+Filler 1
\ No newline at end of file
diff --git a/content/snippets/filler-2.md b/content/snippets/filler-2.md
new file mode 100644
index 0000000..b028eed
--- /dev/null
+++ b/content/snippets/filler-2.md
@@ -0,0 +1,7 @@
+---
+title: "Filler 2"
+date: 2022-04-17T08:45:13Z
+draft: false
+---
+
+Filler 2
\ No newline at end of file
diff --git a/content/snippets/filler-3.md b/content/snippets/filler-3.md
new file mode 100644
index 0000000..3bb917e
--- /dev/null
+++ b/content/snippets/filler-3.md
@@ -0,0 +1,7 @@
+---
+title: "Filler 3"
+date: 2022-04-18T08:45:13Z
+draft: false
+---
+
+Filler 3
\ No newline at end of file
diff --git a/content/snippets/filler-4.md b/content/snippets/filler-4.md
new file mode 100644
index 0000000..bcc0936
--- /dev/null
+++ b/content/snippets/filler-4.md
@@ -0,0 +1,7 @@
+---
+title: "Filler 4"
+date: 2022-04-19T08:45:13Z
+draft: false
+---
+
+Filler 4
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index fb4dcf4..7cb8287 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,3 +11,12 @@ services:
- ./:/code
working_dir: /code
tty: true
+
+ node:
+ image: node:18
+ volumes:
+ - ./:/code
+ working_dir: /code
+ tty: true
+ user: node
+ command: yarn
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..36b3dc5
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,46 @@
+
+
+
+
{{ safeHTML $.Params.heroSub }}
+