diff --git a/.build.yml b/.build.yml
index 676b0e0..8ea7879 100644
--- a/.build.yml
+++ b/.build.yml
@@ -1,18 +1,18 @@
 image: alpine/edge
 packages:
-  - ruby
-  - ruby-bundler
-  - hut
+    - ruby
+    - ruby-bundler
+    - hut
 oauth: pages.sr.ht/PAGES:RW
 environment:
-  site: aleksrutins.srht.site
+    site: aleksrutins.srht.site
 tasks:
-  - build: |
-      cd farthergate.com
-      bundle install --path vendor/bundle
-      bundle exec ruby build.rb
-  - package: |
-      cd farthergate.com/_build
-      tar -cvz . > ../../site.tar.gz
-  - upload: |
-      hut pages publish -d $site site.tar.gz
+    - build: |
+          cd farthergate.com
+          bundle install --path vendor/bundle
+          bundle exec ruby build.rb
+    - package: |
+          cd farthergate.com/_build
+          tar -cvz . > ../../site.tar.gz
+    - upload: |
+          hut pages publish -d $site site.tar.gz
diff --git a/assets/site.css b/assets/site.css
index b6f0317..c119150 100644
--- a/assets/site.css
+++ b/assets/site.css
@@ -1,14 +1,33 @@
+@import url(https://fonts.bunny.net/css?family=dm-mono:400,400i,500,500i);
+
 :root {
-    font-family:
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        Oxygen,
-        Ubuntu,
-        Cantarell,
-        "Open Sans",
-        "Helvetica Neue",
-        sans-serif;
+    font-family: "DM Mono", "Courier New", Courier, monospace;
+    background-color: beige;
+}
+
+body {
+    max-width: 700px;
+    padding: 20px;
+    margin: auto;
+}
+
+nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    gap: 15px;
+}
+
+nav a {
+    color: gray;
+    transition-property: color;
+    transition-duration: 0.5s;
+    text-decoration: none;
+}
+
+nav a:hover,
+nav a.active {
+    color: black;
 }
diff --git a/build.rb b/build.rb
index e790c5d..6c14741 100644
--- a/build.rb
+++ b/build.rb
@@ -3,8 +3,13 @@ require "phlexite"
 
 require_relative "pages/layout"
 require_relative "pages/home"
+require_relative "pages/blog"
+require_relative "pages/about"
 
 Phlexite::Site.new { |s|
   s.mount "assets", on: "/"
+
   s.page "index.html", Pages::Home.new
+  s.page "blog/index.html", Pages::Blog.new
+  s.page "about/index.html", Pages::About.new
 }
diff --git a/pages/about.rb b/pages/about.rb
new file mode 100644
index 0000000..398bf0b
--- /dev/null
+++ b/pages/about.rb
@@ -0,0 +1,7 @@
+class Pages::About < ::Phlex::HTML
+  def view_template
+    render ::Pages::Layout.new(:about) {
+      p { "under construction" }
+    }
+  end
+end
diff --git a/pages/blog.rb b/pages/blog.rb
new file mode 100644
index 0000000..5edc831
--- /dev/null
+++ b/pages/blog.rb
@@ -0,0 +1,7 @@
+class Pages::Blog < ::Phlex::HTML
+  def view_template
+    render ::Pages::Layout.new(:blog) {
+      p { "under construction" }
+    }
+  end
+end
diff --git a/pages/home.rb b/pages/home.rb
index c20fb75..d479f72 100644
--- a/pages/home.rb
+++ b/pages/home.rb
@@ -1,7 +1,31 @@
 class Pages::Home < ::Phlex::HTML
   def view_template
-    render ::Pages::Layout.new("Home") {
-      h1 { "Home" }
+    render ::Pages::Layout.new(:home) {
+      p { "i'm aleks rūtiņš." }
+      p { "i'm a student and programmer, skilled with a wide variety of tools." }
+
+      h2 { "featured projects" }
+      ul {
+        li {
+          a(href: "https://sr.ht/~aleksrutins/phlexite") { "phlexite" }
+          span { " - a simple static site generator using phlex for templating" }
+        }
+
+        li {
+          a(href: "https://dynamite.farthergate.com/") { "dynamite" }
+          span { " - a customizable lv2 distortion plugin"}
+        }
+
+        li {
+          a(href: "https://packsnap.farthergate.com/") { "packsnap" }
+          span { " - a reproducible container build system" }
+        }
+
+        li {
+          a(href: "https://bc.farthergate.com/") { "biocircuits for mere mortals" }
+          span { " - a daunting topic broken down in a (hopefully) friendly way" }
+        }
+      }
     }
   end
 end
diff --git a/pages/layout.rb b/pages/layout.rb
index 5d29319..566713e 100644
--- a/pages/layout.rb
+++ b/pages/layout.rb
@@ -1,18 +1,40 @@
 module Pages
   class Layout < ::Phlex::HTML
-    def initialize(title)
-      @title = title
+    def pages = {
+      home: {
+        title: "Home",
+        url: "/"
+      },
+      blog: {
+        title: "Blog",
+        url: "/blog"
+      },
+      about: {
+        title: "About",
+        url: "/about"
+      }
+    }
+
+    def initialize(page)
+      @page = page
     end
     def view_template
       doctype
       html {
         head {
-          title { @title + " | Aleks Rūtiņš" }
+          title { pages[@page][:title] + " | Aleks Rūtiņš" }
           meta(charset: "utf-8")
           meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
           link(rel: "stylesheet", href: "/site.css")
         }
         body {
+          header {
+            nav {
+              pages.each { |key, page|
+                a(href: page[:url], class: key == @page ? "active" : "") { page[:title].downcase }
+              }
+            }
+          }
           yield
         }
       }