diff --git a/index.css b/index.css
index 0d68fa8..1b0fdd2 100644
--- a/index.css
+++ b/index.css
@@ -1,75 +1,44 @@
-@font-face {
-  font-family: et-book;
-  src: url(et-book.ttf);
-}
-a {
-  color: inherit;
-}
-
+html,
 body {
-  font-family: et-book;
-  font-size: 1.5em;
-  background-color: #f9f5d7;
-  margin: 100px auto;
-  max-width: 675px;
-  scroll-behavior: smooth;
-  overscroll-behavior-y: none;
-  overscroll-behavior-x: none;
-}
-body,
-html {
-  overflow-anchor: none;
-  padding: 0 5%;
-}
-
-.project {
-  position: relative;
-  text-decoration: none;
-}
-.project::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 1px;
-  background-color: #000;
-  bottom: 0;
-  left: 0;
-  transition: width 0.5s;
-}
-.project:hover::after {
-  width: 100%;
-}
-.description {
-  visibility: hidden;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 0;
-  transition: all 0.6s ease;
-  display: inline-block;
-  vertical-align: top;
-  max-width: 0;
-}
-.project:hover + .description,
-.description.revealed {
-  visibility: visible;
-  width: auto;
-  max-width: 450px;
-}
-.container {
-  position: relative;
-}
-.social-icons {
+  height: 100%;
+  font-family: "EB Garamond";
+  margin: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 1.5em;
 }
 
-.social-icons a {
-  margin-left: 15px;
-  color: inherit;
-  text-decoration: none;
+main {
+  flex: 1;
+}
+
+header,
+footer {
+  text-align: center;
+  padding: 10px 0;
+  background-color: #f3f3f3;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-left {
+  flex: 1;
+  text-align: left;
+}
+
+.header-right {
+  flex: 1;
+  text-align: right;
+}
+
+img.logo {
+  width: 7%;
+  height: auto;
+}
+
+ul {
+  list-style-type: none; /* no bullet points */
 }
diff --git a/index.html b/index.html
index 3d5aceb..9bd4d78 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -9,74 +9,107 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap"
+      rel="stylesheet"
+    />
     <title>Barrett Ruth</title>
   </head>
 
   <body>
-    <div class="container">
-      <div class="social-icons">
-        <a href="https://linkedin.com/in/barrett-ruth" target="_blank">
-          <i class="fab fa-linkedin"></i>
-        </a>
-        <a href="https://github.com/barrett-ruth" target="_blank">
-          <i class="fab fa-github"></i>
-        </a>
-        <a href="mailto:br.barrettruth@gmail.com" target="_blank">
-          <i class="fas fa-envelope"></i>
-        </a>
+    <header>
+      <div class="header-left">
+        <img src="public/logo.webp" alt="Barrett Ruth logo" class="logo" />
       </div>
-      <h1>Barrett Ruth</h1>
-    </div>
-    <aside>Software developer.</aside>
-    <aside>Simplicity advocate.</aside>
-    <h2>
-      <a target="_blank" href="https://github.com/barrett-ruth">projects</a>
-    </h2>
-    <ol>
-      <li>
-        <a target="_blank" class="project" href="https://thecourseforum.com"
-          >theCourseForum</a
-        >
-        <span class="description"
-          >&#8212; university-wide enrollment analytics</span
-        >
-      </li>
-      <li>
-        <a
-          target="_blank"
-          class="project"
-          href="https://atlas-devs-atlas.vercel.app/"
-          >atlas</a
-        >
-        <span class="description"
-          >&#8212; cutting-edge machine learning research blog</span
-        >
-      </li>
-      <li>
-        <a target="_blank" class="project" href="https://github.com/nvimdev"
-          >nvimdev</a
-        >
-        <span class="description"
-          >&#8212; open-source neovim contributions</span
-        >
-      </li>
-    </ol>
-    <h2>
-      <a href="https://swe-interview-prep.vercel.app" target="_blank"
-        >interview preparation</a
-      >
-    </h2>
-    <h2><a target="_blank" href="/public/resume.pdf">resume</a></h2>
-    <h2 style="display: none">
-      <a target="_blank" href="/public/transcript.pdf">transcript</a>
-    </h2>
+      <div class="header-right">
+        <span>Header Text Here</span>
+      </div>
+    </header>
+    <main>
+      <ul>
+        <li>Projects</li>
+        <li>Resume</li>
+        <li>Transcript</li>
+      </ul>
+    </main>
+    <footer>
+      <div>Footer Text Here</div>
+      <div>
+        <a href="https://twitter.com/yourtwitterhandle">Twitter</a> |
+        <a href="https://linkedin.com/in/yourlinkedinprofile">LinkedIn</a>
+      </div>
+    </footer>
   </body>
+
+  <!-- <body> -->
+  <!--   TODO: move this -->
+  <!--   <div class="container"> -->
+  <!--     <div class="social-icons"> -->
+  <!--       <a href="https://linkedin.com/in/barrett-ruth" target="_blank"> -->
+  <!--         <i class="fab fa-linkedin"></i> -->
+  <!--       </a> -->
+  <!--       <a href="https://github.com/barrett-ruth" target="_blank"> -->
+  <!--         <i class="fab fa-github"></i> -->
+  <!--       </a> -->
+  <!--       <a href="mailto:br.barrettruth@gmail.com" target="_blank"> -->
+  <!--         <i class="fas fa-envelope"></i> -->
+  <!--       </a> -->
+  <!--     </div> -->
+  <!--     <h1>Barrett Ruth</h1> -->
+  <!--   </div> -->
+  <!--   <aside>Software developer.</aside> -->
+  <!--   <aside>Simplicity advocate.</aside> -->
+  <!--   <h2> -->
+  <!--     <a target="_blank" href="https://github.com/barrett-ruth">projects</a> -->
+  <!--   </h2> -->
+  <!--   <ol> -->
+  <!--     <li> -->
+  <!--       <a target="_blank" class="project" href="https://thecourseforum.com" -->
+  <!--         >theCourseForum</a -->
+  <!--       > -->
+  <!--       <span class="description" -->
+  <!--         >&#8212; university-wide enrollment analytics</span -->
+  <!--       > -->
+  <!--     </li> -->
+  <!--     <li> -->
+  <!--       <a -->
+  <!--         target="_blank" -->
+  <!--         class="project" -->
+  <!--         href="https://atlas-devs-atlas.vercel.app/" -->
+  <!--         >atlas</a -->
+  <!--       > -->
+  <!--       <span class="description" -->
+  <!--         >&#8212; cutting-edge machine learning research blog</span -->
+  <!--       > -->
+  <!--     </li> -->
+  <!--     TODO: no -->
+  <!--     <li> -->
+  <!--       <a target="_blank" class="project" href="https://github.com/nvimdev" -->
+  <!--         >nvimdev</a -->
+  <!--       > -->
+  <!--       <span class="description" -->
+  <!--         >&#8212; open-source neovim contributions</span -->
+  <!--       > -->
+  <!--     </li> -->
+  <!--   </ol> -->
+  <!--   TODO: remove this? -->
+  <!--   <h2> -->
+  <!--     <a href="https://swe-interview-prep.vercel.app" target="_blank" -->
+  <!--       >interview preparation</a -->
+  <!--     > -->
+  <!--   </h2> -->
+  <!--   <h2><a target="_blank" href="/public/resume.pdf">resume</a></h2> -->
+  <!--   <h2 style="display: none"> -->
+  <!--     <a target="_blank" href="/public/transcript.pdf">transcript</a> -->
+  <!--   </h2> -->
+  <!-- </body> -->
   <script>
     document.addEventListener("DOMContentLoaded", function () {
-      document.querySelectorAll(".project").forEach((project) => {
-        project.addEventListener("mouseover", () => {
-          const description = project.nextElementSibling;
-          description.classList.add("revealed");
+      document.querySelectorAll(".project").forEach((p) => {
+        p.addEventListener("mouseover", () => {
+          p.nextElementSibling.classList.add("revealed");
         });
       });
     });
diff --git a/public/logo.webp b/public/logo.webp
new file mode 100644
index 0000000..fd0e319
Binary files /dev/null and b/public/logo.webp differ
