diff --git a/astro.config.mjs b/astro.config.ts
similarity index 100%
rename from astro.config.mjs
rename to astro.config.ts
diff --git a/src/layouts/base/Footer.astro b/src/components/base/Footer.astro
similarity index 100%
rename from src/layouts/base/Footer.astro
rename to src/components/base/Footer.astro
diff --git a/src/components/base/Head.astro b/src/components/base/Head.astro
new file mode 100644
index 0000000..0e3aa3a
--- /dev/null
+++ b/src/components/base/Head.astro
@@ -0,0 +1,8 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="generator" content={Astro.generator} />
+<title>Kamoshi.org</title>
+
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" href="/favicon.ico" sizes="any">
diff --git a/src/layouts/base/Header.astro b/src/components/base/Header.astro
similarity index 95%
rename from src/layouts/base/Header.astro
rename to src/components/base/Header.astro
index c228221..e4f4cdb 100644
--- a/src/layouts/base/Header.astro
+++ b/src/components/base/Header.astro
@@ -5,6 +5,7 @@ interface MenuItem {
   url: string;
 }
 
+/** Config for the menu displayed in site navbar. */
 const menu: MenuItem[] = [
   {
     identifier: 'projects',
@@ -36,7 +37,7 @@ const menu: MenuItem[] = [
     name: 'About',
     url: '/about/',
   }
-]
+];
 ---
 <nav class="p-nav">
   <input id="p-nav-toggle" type="checkbox" hidden>
diff --git a/src/components/headers/Article.astro b/src/components/headers/Article.astro
new file mode 100644
index 0000000..1e73249
--- /dev/null
+++ b/src/components/headers/Article.astro
@@ -0,0 +1,43 @@
+---
+import type { Dayjs } from "dayjs";
+
+interface Props {
+  title: string;
+  date: Dayjs;
+  tags?: string[];
+  github?: string;
+}
+
+const { title, date, tags = [], github } = Astro.props;
+---
+<header class="p-header">
+  <h1 class="p-header__heading">{title}</h1>
+  <div class="p-header__meta">
+    <span class="p_date">
+      <img class="p_date__icon" width="120" height="123" src="/static/svg/calendar.svg" alt="">
+      &nbsp;{date.format("MMM DD, YYYY")}
+    </span>
+
+    <!-- {%- include "partials/tags.html" -%} -->
+    <section class="p_tags">
+      <img class="p_tags__icon" width="123" height="105" src="/static/svg/tags.svg" alt="">
+      <ul class="p_tags__list">
+        {tags.map(tag => (
+          <li><a href='{{ get_taxonomy_url(kind="tags", name=tag) | safe }}'>{tag}</a></li>
+        ))}
+      </ul>
+    </section>
+  </div>
+
+  <!-- {%- include "partials/github.html" -%} -->
+  {github && (
+    <a href={github} class="p-github" aria-label="View source on GitHub">
+      <svg width="40" height="40" viewBox="0 0 250 250" aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+    </a>
+  )}
+  
+</header>
diff --git a/src/layouts/Article.astro b/src/layouts/Article.astro
new file mode 100644
index 0000000..210e54f
--- /dev/null
+++ b/src/layouts/Article.astro
@@ -0,0 +1,25 @@
+---
+import dayjs from "dayjs";
+import Base from "./Base.astro";
+import Header from "../components/headers/Article.astro";
+
+const {frontmatter} = Astro.props;
+---
+<Base>
+  <main class="l-article">
+    <aside class="l-article__aside">
+      <div class="l-article__toc">
+        <!-- {%- include "partials/toc.html" -%} -->
+      </div>
+    </aside>
+    <article class="l-article__article marker readable">
+        <Header
+          title={frontmatter.title}
+          date={dayjs(frontmatter.date)}
+          tags={frontmatter.tags}/>
+      <div class="markdown">
+        <slot />
+      </div>
+    </article>
+  </main>
+</Base>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
new file mode 100644
index 0000000..9974897
--- /dev/null
+++ b/src/layouts/Base.astro
@@ -0,0 +1,20 @@
+---
+import '../styles/styles.scss';
+import Head from "../components/base/Head.astro";
+import Header from "../components/base/Header.astro";
+import Footer from "../components/base/Footer.astro";
+---
+<html lang="en">
+	<Head />
+	<body>
+    <slot name="header">
+      <Header />
+    </slot>
+		
+    <slot />
+		
+    <slot name="footer">
+      <Footer />
+    </slot>
+	</body>
+</html>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
deleted file mode 100644
index f23a5f3..0000000
--- a/src/layouts/BaseLayout.astro
+++ /dev/null
@@ -1,18 +0,0 @@
----
-import '../styles/styles.scss';
-import Footer from './base/Footer.astro';
-import Header from './base/Header.astro';
----
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<Header />
-    <Footer />
-	</body>
-</html>
diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
new file mode 100644
index 0000000..67297b7
--- /dev/null
+++ b/src/layouts/Home.astro
@@ -0,0 +1,51 @@
+---
+import Base from "./Base.astro";
+
+
+const notice = {
+	header: "Hello!",
+	content: [
+		"Test"
+	]
+};
+---
+<Base>
+	<main class="l-home">
+		<article class="l-home__article markdown readable">
+			<slot />
+		</article>
+		<aside class="l-home__aside">
+			<section class="p-card">
+				<h2 class="p-card__header">{notice.header}</h2>
+				{notice.content.map(item => (
+					<p>{item}</p>
+				))}
+			</section>
+
+			<!-- <section class="p-card p-card-image">
+				<h2 class="p-card__header">Image of the Month</h2>
+				<a href="{{config.extra.cards.image.src}}">
+					{%- set image = resize_image(path=config.extra.cards.image.src, op="fit_width", width=400, format="webp") -%}
+					<img class="p-card-image__image" src="{{image.url}}" width="{{image.width}}" height="{{image.height}}" alt="{{- config.extra.cards.image.alt -}}">
+				</a>
+			</section> -->
+
+			<!-- <section class="p-card p-card-contact">
+				<h2 class="p-card__header">Contact</h2>
+				<div class="p-card-contact__grid">
+					{%- if config.extra.cards.contact.email -%}
+					<img class="p-card-contact__image" width="38" height="25" src=/static/svg/email.svg alt="email">
+					<a class="p-card-contact__text" href="mailto:{{- config.extra.cards.contact.email -}}">
+						{{- config.extra.cards.contact.email -}}
+					</a>
+					{%- endif -%}
+			
+					{%- if config.extra.cards.contact.discord -%}
+					<img class="p-card-contact__image" width="38" height="30" src="/static/svg/discord.svg" alt="discord">
+					<span class="p-card-contact__text">{{- config.extra.cards.contact.discord -}}</span>
+					{%- endif -%}
+				</div>
+			</section> -->
+		</aside>
+	</main>
+</Base>
diff --git a/src/pages/about.astro b/src/pages/about.astro
deleted file mode 100644
index 9f8db0c..0000000
--- a/src/pages/about.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
----
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>My Astro Sitess</h1>
-	</body>
-</html>
diff --git a/src/pages/about.md b/src/pages/about.md
new file mode 100644
index 0000000..ad98fe9
--- /dev/null
+++ b/src/pages/about.md
@@ -0,0 +1,35 @@
+---
+layout: ../layouts/Article.astro
+title: "A little about me!"
+date: 2021-09-10T19:34:01+02:00
+tags: ["meta"]
+---
+
+## Summary
+
+I'm a CS student with professional experience as a TypeScript developer, but generally I enjoy playing around and tinkering with all kinds of tangentially related things. Some of my favorite programming languages are Rust, TypeScript and Python. I also have some experience with functional languages such as Scala and OCaml. In the future I would like to learn to program in Haskell.
+
+When it comes to human-languages, I really like the Japanese language, so I've been learning it on and off since 2016. I think that it is very beautiful and elegant at the same time. I also like listening to music, playing video games. In my free time I love going on pretty long walks and whenever I come across something interesting I usually take a photo of it.
+
+## Website
+
+This website was a completely random idea of mine, but it turned out to be a great fun with occasional frustrating moments here and there (especially configuring Nginx and DNS :smile:). I've written it from scratch with the help of [Hugo](https://gohugo.io/). Originally I thought about using Angular, but I realized it would be a huge overkill for a website of this type, so I decided to look as some static site generators. Eventually, I came across Hugo and it turned out to be the right tool for the job. I'm very happy that I ended up learning it!
+
+Why create a website from scratch instead of just using something existing like Wordpress, or at least use someone else's theme for Hugo/Jekyll? That's a pretty reasonable question. Thing is, I didn't actually want to have a website per se, or rather I don't think it would be any good anyway. I just wanted to create one myself completely on my own. There's something about looking at your own creations, and feeling good about the outcome, even if it's not that good, at least you know you made it! :smile:
+
+## Timeline
+
+{{ timeline(source="/data/timelines/about.yml") }}
+
+
+## Acknowledgements
+
+This website would not have been possible without the following free and open-source projects. Thanks!
+
+| Project                                                                   | License      |
+|---------------------------------------------------------------------------|--------------|
+| [Leaflet](https://leafletjs.com/)                                         | BSD 2-clause |
+| [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) | MIT          |
+| [leaflet-photo](https://github.com/kamoshi/leaflet-photo)                 | MIT          |
+| [Github Corners](https://tholman.com/github-corners/)                     | MIT          |
+| [Lunr](https://lunrjs.com/)                                               | MIT          |
diff --git a/src/pages/index.astro b/src/pages/index.astro
deleted file mode 100644
index 2173b68..0000000
--- a/src/pages/index.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
----
-
-<BaseLayout>
-	<h1>My Astro Site</h1>
-</BaseLayout>
-
diff --git a/src/pages/index.md b/src/pages/index.md
new file mode 100644
index 0000000..aeb3884
--- /dev/null
+++ b/src/pages/index.md
@@ -0,0 +1,24 @@
+---
+layout: ../layouts/Home.astro
+title: "Welcome to kamoshi.org!"
+date: "2020–12–09"
+---
+
+# Welcome to my personal website
+You've somehow made your way to the internet nexus of my activities - the place where I write and do random stuff! This website is a weird amalgamation of all my various interests and thoughts, so it probably is pretty random at times. It is also a [living document](https://en.wikipedia.org/wiki/Living_document) continously evolving throughout the time. It can change at any time without prior notice in any way imaginable, be wary of the fact anything here could be deleted or edited.
+
+Now that you've been warned, please enjoy the transient ramblings that are present here at this time. Why "Kamoshi"? It's a pretty long story...
+
+## Interactive map with my Geotagged photos
+Throughout the last few years I've been taking photos in random places. I've spent some time geotagging them, and I've been able to create a map of them. It takes a horrendous amount of time to geotag them, and honestly I've forgotten some places, so it will take a while to add at least some of the rest.
+
+[Take me to the map!](@/map/index.md)
+
+## A short guide to the Hanafuda card game
+I've been playing Hanafuda for a while now, so I decided to write a short guide to the game. I am by no means good at the game, so take everything with a grain of salt, but it should be enough to get you started.
+
+[Take me to the guide!](@/posts/hanafuda.md)
+
+## Thanks for visiting!
+
+