diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/magenta-tiles.png b/images/magenta-tile-1.png
similarity index 100%
rename from magenta-tiles.png
rename to images/magenta-tile-1.png
diff --git a/magenta-tile-2.png b/images/magenta-tile-2.png
similarity index 100%
rename from magenta-tile-2.png
rename to images/magenta-tile-2.png
diff --git a/magenta-tile-3.png b/images/magenta-tile-3.png
similarity index 100%
rename from magenta-tile-3.png
rename to images/magenta-tile-3.png
diff --git a/magenta-tile-4.png b/images/magenta-tile-4.png
similarity index 100%
rename from magenta-tile-4.png
rename to images/magenta-tile-4.png
diff --git a/magenta-tiles.xcf b/images/magenta-tile.xcf
similarity index 100%
rename from magenta-tiles.xcf
rename to images/magenta-tile.xcf
diff --git a/index.html b/index.html
index 0ca6b47..250b96e 100644
--- a/index.html
+++ b/index.html
@@ -3,58 +3,49 @@
 <head>
 
 <title>Nupa's Page</title>
+<meta charset='utf-8'/>
+<link rel='stylesheet' href='style-3.css'>
 
-<style>
-
-html {
-    margin: 0 auto;
-    max-width: 80ch;
-}
-
-body {
-    background-image: url('magenta-tile-4.png');
-    background-size: 3vmin;
-    color: darkgray;
-    text-shadow: 2px 2px black;
-    font-family: sans-serif;
-    font-weight: bold;
-    max-width: 120ch;
-    
-}
-
-h1, h3 {
-    text-align: center;
-}
-
-ul {
-  list-style: none;
-  padding-left: 0px;
-}
-
-li:before {
-  content: '●';
-  padding: 20px;
-  text-shadow: 2px 2px black;
-}
-
-</style>
 </head>
 <body>
+<div id='title'>
 
 <h1>Nupa's Page</h1>
+<span class='subtitle'>A place to show off my projects.</span>
 
-<h3>A place to show off my projects.</h3>
+</div>
+<div id='content'>
 
-<h2>Stuff I've made:</h2>
+<h3>Flistify</h3>
+<p>
+    A script to bulk-resize images for an f-list gallery, using python and imagemagick.
+</p>
 
-<ul>
-    <li>Portal ZZT</li>
-    <li>The ZZT Nanogame Collection</li>
-    <li>Collabyrinth, a ZZT collab</li>
-    <li>My 2007 Homepage and drawings</li>
-    <li>flistify: a script to bulk-resize images for f-list</li>
-    <li>braceless-javascript: a subset of javascript that looks like lisp.</li>
-</ul>
+<h3>Braceless Javascript</h3>
+<p>
+    A couple of short programs written in a subset of javascript. Specifically, javascript but you can't use anything with curly braces in it, like 'if' or 'for'. Instead, ternaries and lambdas give you all the flow control you need. Has a lispy flavor.
+</p>
 
+<h3>Portal ZZT</h3>
+<p>
+    2008. A portal clone in the ZZT Engine.
+</p>
+
+<h3>ZZT Nanogames</h3>
+<p>
+    2008. A collection of ZZT games that use only one screen each. Also includes <em>Eight Legged Express</em>, which I believe was made in one weekend as a challenge.
+</p>
+
+<h3>Collabyrinth</h3>
+<p>
+    2008.
+</p>
+
+<h3>Traps and Zoids</h3>
+<p>
+    2007.
+</p>
+
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/style-1.css b/style-1.css
new file mode 100644
index 0000000..03fb973
--- /dev/null
+++ b/style-1.css
@@ -0,0 +1,29 @@
+html {
+    margin: 0 auto;
+    max-width: 80ch;
+}
+
+body {
+    background-image: url('images/magenta-tile-1.png');
+    background-size: 2rem;
+    color: white;
+    text-shadow: 2px 2px black;
+    font-family: sans-serif;
+    font-weight: bold;
+    max-width: 120ch;
+}
+
+h1, h3 {
+    text-align: center;
+}
+
+ul {
+  list-style: none;
+  padding-left: 0px;
+}
+
+li:before {
+  content: '●';
+  padding: 20px;
+  text-shadow: 2px 2px black;
+}
\ No newline at end of file
diff --git a/style-2.css b/style-2.css
new file mode 100644
index 0000000..f4403ba
--- /dev/null
+++ b/style-2.css
@@ -0,0 +1,29 @@
+html {
+    margin: 0 auto;
+    max-width: 80ch;
+}
+
+body {
+    background-image: url('images/magenta-tile-4.png');
+    background-size: 2rem;
+    color: darkgray;
+    text-shadow: 2px 2px black;
+    font-family: sans-serif;
+    font-weight: bold;
+    max-width: 120ch;
+}
+
+h1, h3 {
+    text-align: center;
+}
+
+ul {
+  list-style: none;
+  padding-left: 0px;
+}
+
+li:before {
+  content: '●';
+  padding: 20px;
+  text-shadow: 2px 2px black;
+}
\ No newline at end of file
diff --git a/style-3.css b/style-3.css
new file mode 100644
index 0000000..490ca60
--- /dev/null
+++ b/style-3.css
@@ -0,0 +1,22 @@
+
+html {
+    margin: 0 auto;
+    max-width: 40rem;
+}
+
+body {
+    font-family: sans-serif;
+    background-color: black;
+    color: hotpink;
+    max-width: 120ch;
+    border: 1rem double purple;
+    padding: 1rem;
+}
+
+#title {
+    text-align: center;
+}
+
+.subtitle {
+    font-style: italic;
+}
