diff --git a/.gitignore b/.gitignore
index a3dc99c..5f066f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
+testing/
 
 # the only files that need to be generated are .html, so just exclude them
 out/*.html
diff --git a/out/res/style.css b/out/res/style.css
index 7cab22c..6494f6f 100644
--- a/out/res/style.css
+++ b/out/res/style.css
@@ -25,54 +25,37 @@ body {
   color: #000000;
 }
 
-br {
-  display: block;
-  content: "";
-  margin-top: 2px;
-}
-
 * {
   box-sizing: border-box;
 }
 
-.card {
+/* Card */
+
+.Card {
   margin: 6px;
   padding: 8px;
   background: var(--accent-bg-color);
   border-radius: var(--card-border-radius);
 }
 
-.card.inner-card {
-  margin: 4px;
-  margin-bottom: 28px;
-  padding: 18px;
-  border: solid var(--accent-color) 1px;
-}
-
-.card.layout-card {
+.Card.Card-layout {
   margin: 36px auto;
   padding: 26px;
   width: clamp(200px, 100%, var(--cards-length));
   box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40);
 }
 
-.grayed-out {
-  color: var(--grayed-text-color);
+.Card.Card-inner {
+  margin: 4px;
+  margin-bottom: 24px;
+  padding: 16px;
 }
 
-.align-right {
-  text-align: right;
-}
-.float-right {
-  float: right;
-} 
-.float-left {
-  float: left;
-}
+/* Navigation */
 
-.navigation-branding-text {
-  text-decoration: none;
+.Navigation-branding {
   display: inline-block;
+  user-select: none;
   padding: 8px;
   font-size: 18px;
   white-space: nowrap;
@@ -80,42 +63,48 @@ br {
   margin-right: 10px;
 }
 
-.noselect {
-  user-select: none;
+.Navigation-buttons {
+  display: flex;
+  flex-direction: row;
+  float: right;
 }
 
-.button-default {
-  display: inline-block;
+.Navigation-buttons .Button {
+  margin-left: 12px;
+}
+
+/* Button */
+
+.Button {
+  display: block;
   text-decoration: none;
   border: none;
   background-color: var(--accent-bg-color);
   border-radius: var(--button-border-radius);
   padding: 8px;
-  font-size: 18px;
-  white-space: nowrap;
-  margin-left: 10px;
-  margin-right: 10px;
   color: var(--button-accent-color);
   cursor: pointer;
-  outline: none;
-  min-width: 56px;
   text-align: center;
 }
 
-.button-default:hover:not(.button-selected) {
+.Button:hover:not(.Button-selected) {
   color: var(--accent-bg-color);
   background-color: var(--hover-bg-color);
 }
 
-.button-selected {
+.Button.Button-selected {
   color: var(--accent-bg-color);
   background-color: var(--selected-bg-color);
 }
 
-.input {
-  border: none;
-  outline: none;
-  border-radius: 4px;
-  padding: 3px;
-  margin: 8px;
+/* Project */
+
+.Project-top {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
+
+.Project-top-view {
+  margin-left: auto;
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index b44725a..c724487 100644
--- a/src/index.js
+++ b/src/index.js
@@ -41,15 +41,13 @@ const data = {
 };
 
 const linkButton = ({ link, text, selected=false }) => `
-    <a href="${link}" class="button-default${selected ? " button-selected" : ""}">${text}</a>
+    <a href="${link}" class="${selected ? "Button Button-selected" : "Button"}">${text}</a>
 `;
 
 const navigation = ({currentName}) => `
-    <nav class="card layout-card noselect">
-        <div class="float-left">
-            <b class="navigation-branding-text">${data.navigationBrandingText}</b>
-        </div>
-        <div class="align-right">
+    <nav class="Card Card-layout">
+        <b class="Navigation-branding">${data.navigationBrandingText}</b>
+        <div class="Navigation-buttons">
             ${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
         </div>
     </nav>
@@ -67,7 +65,7 @@ const makePage = ({ name, description, title }) => content => [`
     </head>
     <body>
         ${navigation({currentName: name})}
-        <main class="card layout-card" id="content">
+        <main class="Card Card-layout">
             ${content}
         </main>
     </body>
@@ -94,10 +92,10 @@ const projectsPage = async () => makePage({
         .filter(a => !a.archived)
         .map(
             repo =>`
-            <div class="card inner-card">
-                <div>
+            <div class="Card Card-inner">
+                <div class="Project-top">
                     <b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b>
-                    <a class="button-default float-right" href=${repo.html_url}>view >></a>
+                    <a class="Button Project-top-view" href=${repo.html_url}>view >></a>
                 </div>
                 ${repo.description ? `<p>${repo.description}</p>` : ""}
             </div>`
@@ -110,16 +108,13 @@ const pages = {
     "projects.html": projectsPage,
     "index.html": indexPage
 };
-let renderedPageCache = null;
 
 const renderPages = async () => {
-    if (renderedPageCache) return renderedPageCache;
-
-    renderedPageCache = {};
+    let renderedPages = {};
     for (const [pageName, builder] of Object.entries(pages)) {
-        renderedPageCache[pageName] = await builder();
+        renderedPages[pageName] = await builder();
     }
-    return renderedPageCache;
+    return renderedPages;
 };
 
 const deployPages = async () => {
@@ -133,8 +128,4 @@ const deployPages = async () => {
     }
 };
 
-const deployAll = async () => {
-    await deployPages();
-};
-
-deployAll();
+deployPages();
