diff --git a/home/index.css b/home/index.css
index f879e89..d3dccbd 100644
--- a/home/index.css
+++ b/home/index.css
@@ -1,504 +1,165 @@
-@media (min-aspect-ratio: 6 / 5) {
-  .nav2, .nav3 {
-    display: none !important;
-  }
-}
-
-@media (min-aspect-ratio: 3 / 4) and (max-aspect-ratio: 6 / 5) {
-  .nav1, .nav3 {
-    display: none !important;
-  }
-
-  .nav12 > p {
-    display: none;
-  }
-}
-
-@media (max-aspect-ratio: 3 / 4) {
-  .nav1, .nav2, .nav12 {
-    display: none !important;
-  }
-}
-
-/*----------------------------------------------------------------------------*/
-
-html {
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: 100vw;
-  padding: 100vh 0;
-  color: white;
-  position: relative;
-}
-
 body {
-  position: relative;
-  padding: 0 10vmin;
+  --max-width: 1024px;
+  --pad: max(20px, calc((100vw - var(--max-width)) / 2));
+
   display: flex;
   align-items: center;
   flex-direction: column;
-  overflow-x: visible;
-}
-
-header {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100vw;
-  z-index: 1000;
-  filter: drop-shadow(0px 0px 100px #000);
 }
 
-#title-page > * {
-  opacity: calc(1 - 1.25 * var(--scroll, 0));
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-#title-page {
-  position: fixed;
-  width: 100vw;
-  background-color: var(--light);
-  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
-  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
-  height: calc(90vh - 77.5vh * var(--scroll, 0));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-#title-bottom {
-  position: absolute;
-  top: 65%;
-}
-
-#avatar {
-  position: fixed;
-  top: 50vh;
-  translate: 0 calc(-70% - 35% * var(--scroll, 0));
-  filter: grayscale(1) opacity(0.3);
-  z-index: -1;
-  width: max(90vmin, 60vh);
-  height: max(90vmin, 60vh);
-  image-rendering: crisp-edges;
-  image-rendering: -webkit-optimize-contrast;
-}
-
-#title-name::before {
-  content: "Hi! I'm";
-  position: absolute;
-  text-transform: none;
-  font-family: "Source Code Pro";
-  font-weight: normal;
-  font-size: calc(min(6vh, 8vw));
-  line-height: calc(min(5vh, 7vw));
-  top: 0;
-  left: 0;
-  translate: 1vmin -100%;
+.nav-link {
   color: var(--dark);
-}
-
-.fade-text::before {
-  content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t);
-  text-transform: uppercase;
-  font-size: 15vmin;
-  line-height: 15vmin;
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  white-space: pre;
-  color: black;
-}
-
-#title-name {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  text-transform: uppercase;
-  translate: -50% 0;
-  font-size: 15vmin;
-  line-height: 15vmin;
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  color: transparent;
-  -webkit-background-clip: text;
-  background-clip: text;
-  background-image: var(--grad);
-  transform: translateZ(0);
-}
-
-.fade1 { opacity: 05%; translate: 0 0; }
-.fade2 { opacity: 10%; translate: -5% 0; }
-.fade3 { opacity: 20%; translate: 5% 0; }
-.fade4 { opacity: 25%; translate: -10% 0; }
-.fade5 { opacity: 30%; translate: 10% 0; }
-
-.navbar {
-  padding: 2vmin 3vmin;
-  width: 100vw;
-  position: absolute;
-  display: flex;
-  box-sizing: border-box;
-  align-items: flex-start;
-  z-index: 100;
-}
-
-.button {
-  white-space: nowrap;
-  position: relative;
-  font-style: normal;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 4vh;
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  padding: 1vh 3vh;
-  color: var(--color, var(--dark));
-  background: transparent;
   text-decoration: none;
-  transition: transform var(--timing) 1s, filter var(--timing) 1s;
+  font-weight: 900;
+  font-family: "Open Sans";
 }
 
-.icon {
-  font-size: 2.5vh;
+.shadow {
+  filter: drop-shadow(0 4px 0 #0004);
 }
 
-.button:active {
-  transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s;
-  transform: scale(0.9);
+.icon, .r-icon, .button {
+  display: inline-flex;
+  align-items: center;
+}
+
+.clamp-width {
+  width: 100vw;
+  padding-right: var(--pad);
+  padding-left: var(--pad);
+  box-sizing: border-box;
 }
 
 .icon::before {
+  font-family: 'Material Symbols Outlined';
   content: attr(data-i);
-  font-family: "Material Symbols Outlined";
-  font-size: 4vh;
+  font-size: 36px;
+  margin-right: 5px;
 }
 
-.button::after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-color: var(--color, var(--dark));
-  filter: opacity(0);
-  transform: scale(0.9);
-  z-index: -1;
-  border-radius: 1vh;
-  transition: transform var(--timing) 1s, filter var(--timing) 1s;
+.r-icon::after {
+  font-family: 'Material Symbols Outlined';
+  content: attr(data-i);
+  font-size: 1.5rem;
+  margin-left: 5px;
 }
 
-.button:hover::after {
-  filter: opacity(0.25);
-  transform: scale(1);
+.scroll-opacity {
+  opacity: calc(1 - var(--scroll));
 }
 
-@media (hover: none) {
-  .button:hover::after {
-    filter: opacity(0);
-    transform: scale(0.9);
-  }
-}
-
-.button:active::after {
-  filter: opacity(0.5);
-}
-
-/*----------------------------------------------------------------------------*/
-
-#menu-modal::backdrop {
-  background-color: #0008;
-}
-
-#menu-modal {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  max-height: 100vh;
-  max-width: 100vw;
-  background: transparent;
-}
-
-#menu-inner {
-  padding: 2vmin 3vmin;
-  position: fixed;
-  height: 100vh;
-  width: 75vw;
-  display: flex;
-  box-sizing: border-box;
-  align-items: flex-start;
-  flex-direction: column;
-  -webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
-  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
-  background-color: var(--light);
-}
-
-/*----------------------------------------------------------------------------*/
-
-h2 {
-  font-family: "Open Sans", sans-serif;
+h1 {
+  font-size: 40px;
+  font-family: "Open Sans";
   font-weight: 900;
-  font-size: 15vmin;
-  text-transform: uppercase;
-  line-height: 15vmin;
 }
 
-h3 {
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  font-size: 10vmin;
-  text-transform: uppercase;
-  position: relative;
+i {
+  font-size: 20px;
+  font-size: "Source Serif Pro";
 }
 
 p {
-  font-family: "Source Code Pro", monospace;
-  font-size: 5vmin;
+  font-size: 20px;
+  font-family: "Open Sans";
+  font-weight: 100;
 }
 
-.p2 {
-  font-family: "Source Code Pro", monospace;
-  font-size: 3vmin;
+.lighter {
+  background: #fff4;
 }
 
-.card {
-  margin: 20vmin 0;
+.darker {
+  background: #0004;
 }
 
-a {
-  font-size: 3.5vmin;
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
-  color: white;
+hr {
+  height: 1px;
 }
 
-.card-back {
+.button {
+  color: var(--color);
+  position: relative;
+  padding: 10px 40px;
+}
+
+.button::before {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(var(--rotate));
   width: 100%;
   height: 100%;
-  padding: 10vmin 20vmin;
-  background-color: var(--color);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-  z-index: -1;
-}
-
-.card-back-inner {
-  position: absolute;
   top: 0;
   left: 0;
-  transform: rotate(calc(-1 * var(--rotate)));
-  width: 100%;
-  height: 100%;
-}
-
-.fade-horizontal::before {
-  position: absolute;
-  content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " ";
-  white-space: pre;
-  color: #0002;
-  z-index: -1;
-  left: 0;
-  mask: linear-gradient(to right, black 0%, transparent 50%);
+  background: var(--color);
+  opacity: 50%;
+  content: "";
+  border-radius: 10px;
 }
 
 /*----------------------------------------------------------------------------*/
 
-#about-me {
+header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  gap: 40px;
+  font-size: 25px;
+  padding: 20px;
+  font-family: "Open Sans";
+  font-weight: bolder;
+  color: var(--dark);
   align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
 }
 
-#about-me__title {
-  text-align: right;
-  margin-right: 10vmin;
+#header-back {
+  background: var(--light);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 84px;
+  z-index: -1;
 }
 
-#about-me__text {
-  width: 80vmin;
-  position: relative;
-}
-
-#about-me__back {
-  --rotate: 5deg;
-  --color: var(--red);
-}
-
-#about-me-inner {
+#about {
+  height: 90vh;
+  background: var(--light);
+  overflow: hidden;
   display: flex;
-  align-items: center;
   justify-content: flex-end;
   flex-direction: column;
-  transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
+  gap: 30px;
+  padding-bottom: 30px;
+  color: var(--dark);
 }
 
-#about-me-icon1 {
+#avatar {
+  filter: grayscale(1) opacity(0.2);
   position: absolute;
-  left: -10vmin;
-  top: -10vmin;
-  transform: rotate(5deg);
+  width: 900px;
+  height: 900px;
+  left: 70%;
+  top: 35%;
+  transform: translate(-50%, -50%);
 }
 
-#about-me-icon1::before {
-  font-size: 10vmin;
+nav {
+  display: flex;
+  gap: 20px;
+}
+
+#about-hr {
+  max-width: 600px;
+}
+
+#about-me {
+  max-width: 600px;
 }
 
 /*----------------------------------------------------------------------------*/
 
 #projects {
-  max-width: 200vmin;
-  display: flex;
-  flex-direction: column;
-}
-
-#projects__back {
-  --rotate: -5deg;
-  --color: var(--yellow);
-  padding: 10vmin 40vmin;
-}
-
-#projects__text {
-  position: relative;
-  padding-top: 5vmin;
-}
-
-.project-section {
-  margin: 10vmin 0;
-}
-
-.project__description {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 10vmin;
-}
-
-.project-desc__text {
-  min-width: 70vmin;
-  flex: 1;
-}
-
-.project-desc__img {
-  flex: 1;
-  min-width: 50vmin;
-  height: 50vmin;
-  box-shadow: var(--shadow);
-  border-radius: 2vmin;
-  background: white;
-}
-
-#projects-inner {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-direction: column;
-  transform: rotate(calc(-1 * var(--rotate))) translateY(20vmin);
-}
-
-#view-projects-button {
-  margin-top: 20vmin;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-}
-
-#view-projects-button-inner {
-  position: relative;
-}
-
-#view-all-button {
-  user-select: none;
-  position: absolute;
-  top: -4vmin;
-  left: 1vmin;
-  font-size: 5vmin;
-}
-
-#view-projects-icon {
-  user-select: none;
-  position: absolute;
-  top: -6vmin;
-  right: 1vmin;
-}
-
-#view-projects-icon::before {
-  font-size: 8vmin;
-}
-
-#projects-icon1 {
-  position: absolute;
-  right: 0;
-  top: -10vmin;
-  transform: rotate(-5deg);
-}
-
-#projects-icon1::before {
-  font-size: 10vmin;
-}
-
-/*----------------------------------------------------------------------------*/
-
-#my-experience {
-  max-width: 200vmin;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#my-experience__title {
-  margin-bottom: 5vmin;
-  font-size: 13vmin;
-}
-
-#my-experience__text-outer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  max-width: 100vw;
-  gap: 30vmin;
-}
-
-#my-experience__text {
-  position: relative;
-  width: 50vmin;
-}
-
-#my-experience__back {
-  --rotate: 5deg;
-  --color: var(--green);
-  padding: 10vmin 15vmin;
-}
-
-#my-experience-inner {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-direction: column;
-  transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
-}
-
-#my-experience__resume {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5vmin;
-}
-
-#my-experience__resume-img {
-  width: 40vmin;
-  height: 60vmin;
-  background-color: white;
-  border-radius: 2vmin;
-  box-shadow: var(--shadow);
+  height: 100vh;
 }
\ No newline at end of file
diff --git a/home/index.html b/home/index.html
index faa9bd3..a5fee41 100644
--- a/home/index.html
+++ b/home/index.html
@@ -15,172 +15,37 @@
     
     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="index.css">
+
     <script src="index.js"></script>
-    <title>Max's Place</title>
+    <title>Max Hutz</title>
   </head>
   <body>
-   <header>
-      <nav class="navbar">
-        <a href="#" class="button" data-i="home">Max's Place</a>
-        <div class="flex-space"></div>
-        <a href="#about-me" class="red icon nav12 button" data-i="accessibility_new">About</a>
-        <a href="#projects" class="yellow icon nav12 button" data-i="design_services">Projects</a>
-        <a href="/resume" class="green icon nav12 button" data-i="draft">Resume</a>
-        <a href="#contact-me" class="blue icon nav12 button" data-i="push_pin">Contact</a>
-        <button class="icon button nav3" data-i="menu" onclick="openMenu()"></button>
-      </nav>
-      <div id="title-page">
-        <img src="/res/avatar.svg" alt="Avatar" id="avatar">
-        <div id="title-bottom">
-          <div id="title-name">Max Hutz</div>
-          <div class="fade-text fade1" data-t="Max Hutz"></div>
-          <div class="fade-text fade2" data-t="Max Hutz"></div>
-          <div class="fade-text fade3" data-t="Max Hutz"></div>
-          <div class="fade-text fade4" data-t="Max Hutz"></div>
-          <div class="fade-text fade5" data-t="Max Hutz"></div>
-        </div>
-      </div>
+    <div id="header-back" class="shadow"></div>
+    <header class="clamp-width">
+      <a href="#" class="nav-link">MAX HUTZ</a>
+      <div class="flex-space"></div>
+      <a href="#" class="nav-link icon" data-i="work">Experience</a>
+      <a href="#" class="nav-link icon" data-i="clinical_notes">Resume</a>
+      <a href="#" class="nav-link icon" data-i="mail">Contact</a>
     </header>
-    
-    <section id="about-me" class="card">
-      <h2 id="about-me__title">About<br>Me</h2>
-      <div id="about-me__text">
-        <p id="about-me-icon1" class="white icon" data-i="accessibility_new"></p>
-
-        <div id="about-me__back" class="card-back">
-          <div id="about-me-inner" class="card-back-inner">
-            <div class="fade-text fade1" data-t="About Me"></div>
-            <div class="fade-text fade2" data-t="About Me"></div>
-            <div class="fade-text fade3" data-t="About Me"></div>
-          </div>
-        </div>
-
-        <p>
-          Passionate computer science student skilled in building
-          <b>responsive, full-stack applications</b>.
-  
-          Motivated to learn from colleagues and
-          <b>teach future developers</b>.
-  
-          Seeks role to fashion software solutions, focused on
-          <b>teamwork and creativity</b>.
-        </p>
+    <section id="about" class="clamp-width">
+      <img src="/res/avatar.svg" id="avatar" class="scroll-opacity">
+      <div class="scroll-opacity">
+        <h1>Hey! 👋 I'm Max Hutz.</h1>
+        <i>Software engineer in New York.</i>
       </div>
-    </section>
-  
-    <section id="projects" class="card">
-      <h2 id="projects__title">Projects</h2>
-      <div id="projects__text">
-        <p id="projects-icon1" class="white icon" data-i="design_services"></p>
-
-        <div id="projects__back" class="card-back">
-          <div id="projects-inner" class="card-back-inner">
-            <div class="fade-text fade1" data-t="Projects"></div>
-            <div class="fade-text fade2" data-t="Projects"></div>
-            <div class="fade-text fade3" data-t="Projects"></div>
-          </div>
-        </div>
-
-        <p>
-          A selection of applications worked on as a computer scientist, from
-          flexible web solutions to REST-ful mobile apps.
-        </p>
-
-        <section class="project-section">
-          <h3 class="fade-horizontal" data-t="Malung">Malung</h3>
-          <div class="project__description">
-            <p class="p2 project-desc__text">
-              A cloud-based COVID-19 classifier incorporating AI deep learning.
-              Using MariaDB and Microsoft Azure, users can store...<br><br>
-              <a href="/projects/malung">Learn more →</a>
-            </p>
-            <img class="project-desc__img" src="/res/malung.svg" width="300" height="300">
-          </div>
-        </section>
-
-        <section class="project-section">
-          <h3 class="fade-horizontal" data-t="Fresh-Manual">Fresh-Manual</h3>
-          <div class="project__description">
-            <p class="p2 project-desc__text">
-              A mobile companion to Fresh Manuals website to find, save and
-              organize product manuals. UI built with React, React-Native, and
-              SwiftUI...<br><br>
-              <a href="/projects/freshmanual">Learn more →</a>
-            </p>
-            <img class="project-desc__img" src="/res/freshmanual.svg" width="300" height="300">
-          </div>
-        </section>
-
-        <a href="/projects" id="view-projects-button">
-          <div id="view-projects-button-inner">
-            <h2>Projects</h2>
-            <h3 id="view-all-button">View All</h3>
-            <p id="view-projects-icon" class="white icon" data-i="visibility"></p>
-          </div>
-        </a>
-      </div>
-    </section>
-  
-    <section id="my-experience" class="card">
-      <h2 id="my-experience__title">My<br>Experience</h2>
-      <div id="my-experience__text-outer">
-        <div id="my-experience__text">
-          <div id="my-experience__back" class="card-back">
-            <div id="my-experience-inner" class="card-back-inner">
-              <div class="fade-text fade1" data-t="My Experience"></div>
-              <div class="fade-text fade2" data-t="My Experience"></div>
-              <div class="fade-text fade3" data-t="My Experience"></div>
-            </div>
-          </div>
-          <p>
-            I've had varied experiences: from <strong>mentoring fellow undergrads
-            </strong> to performing in fast-paced settings where <strong>communication
-            and innovation</strong> are key.
-          </p>
-        </div>
-        <div id="my-experience__resume">
-          <img id="my-experience__resume-img" src="/res/avatar.svg" width="300" height="300">
-          <a id="my-experience__resume-button" href="/projects/freshmanual">View Resume →</a>
-        </div>
-      </div>
-    </section>
-  
-    <footer id="contact-me" class="card">
-      <h2>Contact Me!</h2>
-      <nav>
-        <a href="mailto:maximhutz@gmail.com">maximhutz@gmail.com</a>
-        <a href="tel:+19142165972">914.216.5972</a>
-        <a href="#">New York City or Tri-State Area Preferred</a>
+      <p id="about-me" class="scroll-opacity">
+        I’m a passionate computer science student skilled in building
+        responsive, full-stack applications. I love learning from colleagues
+        and teaching future developers. I thrive where teamwork and creativity
+        are key.
+      </p>
+      <hr class="darker scroll-opacity" id="about-hr">
+      <nav class="scroll-opacity">
+        <a href="mailto:maximhutz@gmail.com" class="nav-link blue button">maximhutz@gmail.com</a>
+        <a href="/resume" class="nav-link red button r-icon" data-i="arrow_right" target="_blank">View Resume</a>
       </nav>
-      <form action="#" method="post">
-        <div>
-          <label for="fullname">Full Name</label>
-          <input type="text" name="fullname" id="fullname">
-        </div>
-        <div>
-          <label for="email">Email</label>
-          <input type="text" name="email" id="email">
-        </div>
-        <div>
-          <label for="message">Your Message</label>
-          <textarea name="message" id="message" cols="30" rows="10"></textarea>
-        </div>
-        <button type="submit">Submit</button>
-      </form>
-    </footer>
-
-<!----------------------------------------------------------------------------->
-
-    <dialog id="menu-modal">
-      <div id="menu-inner">
-        <a href="#" class="button" data-i="home" onclick="closeMenu()">Max's&nbsp;Place</a>
-        <div class="flex-space"></div>
-        <a href="/about" class="red icon button" data-i="accessibility_new" onclick="closeMenu()">About</a>
-        <a href="/projects" class="yellow icon button" data-i="design_services" onclick="closeMenu()">Projects</a>
-        <a href="/resume" class="green icon button" data-i="draft" onclick="closeMenu()">Resume</a>
-        <a href="/contact" class="blue icon button" data-i="push_pin" onclick="closeMenu()">Contact</a>
-        <div class="flex-space"></div>
-      </div>
-    </dialog>
+    </section>
+    <section id="projects" class="clamp-width"></section>
   </body>
 </html>
\ No newline at end of file
diff --git a/home/index.js b/home/index.js
index 0faface..a6dd052 100644
--- a/home/index.js
+++ b/home/index.js
@@ -1,39 +1,10 @@
+window.onload = main;
+
 function calcScroll() {
-  const scroll = window.scrollY;
-  const vh = window.innerHeight / 100;
-  const title = document.getElementById("title-page");
-  if (title == null) return;
-  
-  title.style.setProperty("--scroll", Math.min(1, scroll / (77.5 * vh)));
-}
-
-function openMenu() {
-  const menu = document.getElementById("menu-modal");
-  if (menu == null) return;
-  menu.showModal();
-}
-
-function closeMenu() {
-  const menu = document.getElementById("menu-modal");
-  if (menu == null) return;
-  menu.close();
+  document.body.style.setProperty("--scroll", window.scrollY / (0.7 * window.innerHeight));
 }
 
 function main() {
-  window.addEventListener("scroll", () => requestAnimationFrame(calcScroll));
-
-  const menu = document.getElementById("menu-modal");
-  if (menu == null) return;
-  menu.addEventListener("click", clickMenuModal);
-  menu.addEventListener("touchstart", clickMenuModal);
-
+  window.addEventListener("scroll", calcScroll);
   calcScroll();
-}
-
-function clickMenuModal(e) {
-  const menu = document.getElementById("menu-modal");
-  if (menu == null || e.target != menu) return;
-  closeMenu();
-}
-
-window.onload = main;
\ No newline at end of file
+}
\ No newline at end of file