diff --git a/controllers/projects.moon b/controllers/projects.moon
index caa56e0..7d80b17 100644
--- a/controllers/projects.moon
+++ b/controllers/projects.moon
@@ -6,33 +6,6 @@ import respond_to from require "lapis.application"
 import assert_valid from require "lapis.validate"
 
 class Projects extends lapis.Application
-  [projects: "/projects"]: =>
-    res, code = http.simple {
-      url: "https://api.github.com/users/Xe/repos"
-      headers: {
-        ["User-Agent"]: "http://christine.website #{os.getenv "GIT_REV"}"
-        ["Authorization"]: "token #{os.getenv "GITHUB_TOKEN"}"
-      }
-    }
-
-    if code != 200
-      @err = res
-      return render: "error", status: 500
-
-    repos, _, err = json.decode res
-
-    if err
-      @err = err
-      return render: "error", status: 500
-
-    @repos = {}
-
-    for _, repo in pairs(repos)
-      if not repo.fork
-        table.insert repos, repo
-
-    render: true
-
   [portfolio: "/portfolio"]: =>
 
     render: true
diff --git a/static/css/portfolio/main.css b/static/css/portfolio/main.css
new file mode 100644
index 0000000..7f2b3dd
--- /dev/null
+++ b/static/css/portfolio/main.css
@@ -0,0 +1,49 @@
+@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
+
+.box {
+	border-radius: 3px;
+	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	padding: 10px 25px;
+	text-align: right;
+	display: block;
+	margin-top: 60px;
+}
+.box-icon {
+	background-color: #57a544;
+	border-radius: 50%;
+	display: table;
+	height: 100px;
+	margin: 0 auto;
+	width: 100px;
+	margin-top: -61px;
+}
+.box-icon span {
+	color: #fff;
+	display: table-cell;
+	text-align: center;
+	vertical-align: middle;
+}
+.info h4 {
+	font-size: 26px;
+	letter-spacing: 2px;
+	text-transform: uppercase;
+}
+.info > p {
+	color: #717171;
+	font-size: 16px;
+	padding-top: 10px;
+	text-align: justify;
+}
+.info > a {
+	background-color: #03a9f4;
+	border-radius: 2px;
+	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	color: #fff;
+	transition: all 0.5s ease 0s;
+}
+.info > a:hover {
+	background-color: #0288d1;
+	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
+	color: #fff;
+	transition: all 0.5s ease 0s;
+}
diff --git a/views/portfolio.moon b/views/portfolio.moon
new file mode 100644
index 0000000..cb81bd1
--- /dev/null
+++ b/views/portfolio.moon
@@ -0,0 +1,33 @@
+import Widget from require "lapis.html"
+
+class Portfolio extends Widget
+  content: =>
+    link rel: "stylesheet", href: "/static/css/portfolio/main.css"
+
+    center ->
+      h1 "Projects I've Made"
+
+    div class: "row", ->
+      div class: "col-xs-12 col-sm-6 col-md-6 col-lg-6", ->
+        div class: "box", ->
+          div class: "box-icon", ->
+            span class: "fa fa-4x fa-code"
+
+          div class: "info", ->
+            h4 class: "text-center", "Elemental-IRCd"
+            p "Elemental-IRCd is a fork of the (now defunct) ShadowIRCd project. It is also a fork of Atheme's Charybdis irc daemon with more user-friendly features. Most of these things are security patches, network staff usability features, patches that make centralized management simpler and extra status levels in channels; but the resulting core changes mean it needs to be its own project. I plan to replace this with something still in development called Scylla."
+            a href: "https://github.com/elemental-ircd/elemental-ircd", class: "btn", "Learn More"
+
+      div class: "col-xs-12 col-sm-6 col-md-6 col-lg-6", ->
+        div class: "box", ->
+          div class: "box-icon", ->
+            span class: "fa fa-4x fa-cogs"
+
+          div class: "info", ->
+            h4 class: "text-center", "Scylla"
+            p "Scylla is a more experimental project in separating mechanism from policy in IRC networks. The overall idea is to make the flow of things similar to this:"
+            code [[protocol line >>= mechanism >>= event >>= core >>= policy >>= action >>= mechanism >>= protocol line]]
+            p "This would be implemented by the core being a minimal message bus that routes things to the appropriate component, allowing the components to be written in any language. It is still in the early planning stage but I hope to have something working by next year."
+            a href: "https://github.com/Xe/scylla", class: "btn", "Learn More"
+
+
diff --git a/views/projects.moon b/views/projects.moon
deleted file mode 100644
index 4b226a0..0000000
--- a/views/projects.moon
+++ /dev/null
@@ -1,20 +0,0 @@
-import Widget from require "lapis.html"
-
-class Projects extends Widget
-  content: =>
-    h1 "My Projects"
-
-    element "table", class: "table table-striped", ->
-      tr ->
-        td "Name"
-        td "Description"
-        td "Language"
-        td "Star Count"
-
-      for _, repo in pairs @repos
-        tr ->
-          td ->
-            a href: repo.html_url, repo.name
-          td repo.description or ""
-          td repo.language
-          td repo.stargazers_count