diff --git a/index.md b/index.md
deleted file mode 100644
index 46c1fae..0000000
--- a/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-description: Software developer and open-source enthusiast.
----
-
-I am a software developer, open-source enthusiast, lover of pizza, and renegade of funk. I speak fluent English and native Filipino. I also plan on learning German.
-
-You'll most likely find me within [my lab](https://code.fosterhangdaan.com/foster){target="_blank"} tinkering with my inventions and the latest JavaScript frameworks. Other times, I help in the battle for an open web and for user privacy by contributing in the development of free and open-source software.
-
-## Contact Me
-
-The best method of reaching me is through my email: [foster@hangdaan.email](mailto:foster@hangdaan.email).
-
-If you'd like an encrypted response, you can send me your GPG public key. You can find mine in the [GPG Key](/gpg-key) page.
diff --git a/index.tsx b/index.tsx
new file mode 100644
index 0000000..9e0716c
--- /dev/null
+++ b/index.tsx
@@ -0,0 +1,39 @@
+export const description = "Software developer and open-source enthusiast.";
+
+export default function({ nav }) {
+  const sortPosts = (a,b) => {
+    if (a.data.date < b.data.date) {
+      return 1;
+    } else if (a.data.date > b.data.date) {
+      return -1;
+    } else {
+      return 0;
+    }
+  };
+
+  return (
+    <>
+      <p>
+        I am a software developer, open-source enthusiast, lover of pizza, and renegade of funk. I speak fluent English and native Filipino. I also plan on learning German.
+      </p>
+      <p>
+        You'll most likely find me within <a href="https://code.fosterhangdaan.com/foster" target="_blank">my lab</a> tinkering with my inventions and the latest JavaScript frameworks. Other times, I help in the battle for an open web and for user privacy by contributing in the development of free and open-source software.
+      </p>
+      <h2>Contact Me</h2>
+      <p>
+        The best method of reaching me is through my email: <a href="mailto:foster@hangdaan.email">foster@hangdaan.email</a>.
+      </p>
+      <p>
+        If you'd like an encrypted response, you can send me your GPG public key. You can find mine in the <a href="/gpg-key">GPG Key</a> page.
+      </p>
+      <h2>Latest Blog Posts</h2>
+      <ul>
+        {nav.menu("/blog/posts").children.sort(sortPosts).slice(0,3).map(post => (
+          <li>
+            <a href={post.data.url} >{post.data.title}</a> &mdash; <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(post.data.date)}</time>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}