basic content

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;
 }

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
 }

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

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

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

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
         }
       }