FEAT: Added rest of unstyled HTML content. Temporarily removed animations.

home/index.css

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap');
 
 /*----------------------------------------------------------------------------*/
 
@@ -12,9 +12,9 @@
 
   --light: #FEFADC;
   --dark: #504B43;
-  --red: #F8333C;
+  --red: #EC1B24;
   --yellow: #FCAB10;
-  --green: #8FD694;
+  --green: #62C869;
   --blue: #2B9EB3;
 
   --timing: cubic-bezier(0.2, 1, 0, 1);
@@ -30,13 +30,6 @@
 
 .flex-space { flex: 1 }
 
-.pos-center {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
 /*----------------------------------------------------------------------------*/
 
 @media (min-aspect-ratio: 6 / 5) {
@@ -49,10 +42,14 @@
   .nav1, .nav3 {
     display: none !important;
   }
+
+  .nav12 > p {
+    display: none;
+  }
 }
 
 @media (max-aspect-ratio: 3 / 4) {
-  .nav1, .nav2 {
+  .nav1, .nav2, .nav12 {
     display: none !important;
   }
 }
@@ -64,10 +61,13 @@ html {
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   overflow-y: scroll;
+  padding: 100vh 0;
 }
 
-nav {
+header {
   position: fixed;
+  top: 0;
+  left: 0;
   z-index: 1000;
   filter: drop-shadow(0px 0px 100px #000);
 }
@@ -111,8 +111,9 @@ nav {
 #title-name::before {
   content: "Hi! I'm";
   position: absolute;
-  font-family: "Source Serif Pro", serif;
+  text-transform: none;
-  font-style: italic;
+  font-family: "Source Code Pro";
+  font-weight: normal;
   font-size: calc(min(6vh, 8vw));
   line-height: calc(min(5vh, 7vw));
   top: 0;
@@ -123,6 +124,7 @@ nav {
 
 .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: calc(min(12vh, 16vw));
   line-height: calc(min(11vh, 14vw));
   font-family: "Open Sans", sans-serif;
@@ -135,6 +137,7 @@ nav {
   position: absolute;
   top: 0;
   left: 50%;
+  text-transform: uppercase;
   translate: -50% 0;
   font-size: calc(min(12vh, 16vw));
   line-height: calc(min(11vh, 14vw));
@@ -148,13 +151,9 @@ nav {
 }
 
 .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 {
@@ -167,27 +166,8 @@ nav {
   z-index: 100;
 }
 
-nav a:nth-child(1) { animation: nav-enter 2s 000ms var(--timing) backwards; }
-nav a:nth-child(2) { animation: nav-enter 2s 100ms var(--timing) backwards; }
-nav a:nth-child(3) { animation: nav-enter 2s 200ms var(--timing) backwards; }
-nav a:nth-child(4) { animation: nav-enter 2s 300ms var(--timing) backwards; }
-nav a:nth-child(5) { animation: nav-enter 2s 400ms var(--timing) backwards; }
-nav a:nth-child(6) { animation: nav-enter 2s 500ms var(--timing) backwards; }
-nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; }
-
-@keyframes nav-enter {
-  from {
-    opacity: 0;
-    transform: translateX(-7%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
 .button {
+  white-space: nowrap;
   position: relative;
   font-style: normal;
   display: flex;
@@ -249,11 +229,6 @@ nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; }
 
 /*----------------------------------------------------------------------------*/
 
-article {
-  margin-bottom: 200vh;
-  background-color: var(--color, transparent);
-}
-
 #about-section {
   height: 60vmin;
 }
@@ -267,7 +242,6 @@ article {
 
 #menu-modal::backdrop {
   background-color: #0008;
-  animation: 0.5s ease menu-back-enter;
 }
 
 #menu-modal {
@@ -291,28 +265,4 @@ article {
   -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);
-}
-
-#menu-modal[open] {
-  animation: 0.5s ease menu-enter;
-}
-
-@keyframes menu-enter {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0%);
-  }
-}
-
-@keyframes menu-back-enter {
-  from {
-    filter: opacity(0);
-  }
-
-  to {
-    filter: opacity(1);
-  }
 }

home/index.html

@@ -10,41 +10,104 @@
     <title>Max's Place</title>
   </head>
   <body>
-   <nav>
+   <header>
-      <header class="navbar nav1">
+      <nav class="navbar">
-        <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
+        <a href="#" class="button" data-i="home">Max's Place</a>
         <div class="flex-space"></div>
-        <a href="/about" class="red icon button" data-i="accessibility_new">About</a>
+        <a href="/about" class="red icon nav12 button" data-i="accessibility_new"><p>About</p></a>
-        <a href="/projects" class="yellow icon button" data-i="design_services">Projects</a>
+        <a href="/projects" class="yellow icon nav12 button" data-i="design_services"><p>Projects</p></a>
-        <a href="/resume" class="green icon button" data-i="draft">Resume</a>
+        <a href="/resume" class="green icon nav12 button" data-i="draft"><p>Resume</p></a>
-        <a href="/contact" class="blue icon button" data-i="push_pin">Contact</a>
+        <a href="/contact" class="blue icon nav12 button" data-i="push_pin"><p>Contact</p></a>
-      </header>
+        <button class="icon button nav3" data-i="menu" onclick="openMenu()"></button>
-      <header class="navbar nav2">
+      </nav>
-        <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
-        <div class="flex-space"></div>
-        <a href="/about" class="red icon button" data-i="accessibility_new"></a>
-        <a href="/projects" class="yellow icon button" data-i="design_services"></a>
-        <a href="/resume" class="green icon button" data-i="draft"></a>
-        <a href="/contact" class="blue icon button" data-i="push_pin"></a>
-      </header>
-      <header class="navbar nav3">
-        <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
-        <div class="flex-space"></div>
-        <button class="icon button" data-i="menu" onclick="openMenu()"></button>
-      </header>
       <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 id="title-name">Max Hutz</div>
-          <div class="fade-text fade1" data-t="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 fade2" data-t="Max Hutz"></div>
-          <div class="fade-text fade3" 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 fade4" data-t="Max Hutz"></div>
-          <div class="fade-text fade5" data-t="MAX HUTZ"></div>
+          <div class="fade-text fade5" data-t="Max Hutz"></div>
         </div>
       </div>
-    </nav>
+    </header>
-    <article id="title-section"></article>
+    
+    <section>
+      <h2>About Me</h2>
+      <p>
+        Passionate computer science student skilled in building <strong>
+        responsive, full-stack applications</strong>. Motivated to learn from
+        colleagues and <strong>future developers</strong>. Seeks role to fashion
+        software solutions, focused on <strong>teamwork and creativity</strong>.
+      </p>
+    </section>
+  
+    <section>
+      <h2>Projects</h2>
+      <p>
+        A selection of applications worked on as a computer scientist, from
+        flexible web solutions to REST-ful mobile apps.
+      </p>
+      <section>
+        <h3>Malung</h3>
+        <img src="/res/avatar.svg" width="300" height="300">
+        <p>
+          A cloud-based COVID-19 classifier incorporating AI deep learning. Using
+          MariaDB and Microsoft Azure, users can store...
+        </p>
+        <a href="/projects/malung">Learn more →</a>
+      </section>
+      <section>
+        <h3>Fresh-Manual</h3>
+        <img src="/res/avatar.svg" width="300" height="300">
+        <p>
+          A mobile companion to Fresh Manuals website to find, save and organize
+          product manuals. UI built with React, React-Native, and SwiftUI...
+        </p>
+        <a href="/projects/freshmanual">Learn more →</a>
+      </section>
+      <a href="/projects">View all Projects</a>
+    </section>
+  
+    <section>
+      <h2>My Experience</h2>
+      <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>
+        <img src="/res/avatar.svg" width="300" height="300">
+        <a href="/projects/freshmanual">View Resume →</a>
+      </div>
+    </section>
+  
+    <footer>
+      <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>
+      </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">

home/index.js

@@ -1,5 +1,3 @@
-let menuOpen = true;
-
 function calcScroll() {
   const scroll = window.scrollY;
   const vh = window.innerHeight / 100;
@@ -12,28 +10,22 @@ function calcScroll() {
 function openMenu() {
   const menu = document.getElementById("menu-modal");
   if (menu == null) return;
-  requestAnimationFrame(() => menuOpen = false);
   menu.showModal();
 }
 
 function closeMenu() {
   const menu = document.getElementById("menu-modal");
   if (menu == null) return;
-  requestAnimationFrame(() => menuOpen = true);
   menu.close();
 }
 
 function main() {
-  document.body.addEventListener('wheel', preventScroll, { passive: false });
-  document.body.addEventListener('touchmove', preventScroll, { passive: false });
   window.addEventListener("scroll", () => requestAnimationFrame(calcScroll));
 
   const menu = document.getElementById("menu-modal");
-
+  if (menu == null) return;
-  if (menu) {
+  menu.addEventListener("click", clickMenuModal);
-    menu.addEventListener("click", clickMenuModal);
+  menu.addEventListener("touchstart", clickMenuModal);
-    menu.addEventListener("touchstart", clickMenuModal);
-  }
 }
 
 function clickMenuModal(e) {
@@ -42,11 +34,4 @@ function clickMenuModal(e) {
   closeMenu();
 }
 
-function preventScroll(e) {
-  if (menuOpen) return;
-  e.preventDefault();
-  e.stopPropagation();
-  return false;
-}
-
 window.onload = main;