FEAT: Created the dymanic title page.

home/index.css

@@ -0,0 +1,318 @@
+@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');
+
+/*----------------------------------------------------------------------------*/
+
+* {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  outline: 0;
+
+  --light: #FEFADC;
+  --dark: #504B43;
+  --red: #F8333C;
+  --yellow: #FCAB10;
+  --green: #8FD694;
+  --blue: #2B9EB3;
+
+  --timing: cubic-bezier(0.2, 1, 0, 1);
+  --start-timing: cubic-bezier(0,.5,0,.9);
+}
+
+.light { --color: var(--light) }
+.dark { --color: var(--dark) }
+.red { --color: var(--red) }
+.yellow { --color: var(--yellow) }
+.green { --color: var(--green) }
+.blue { --color: var(--blue) }
+
+.flex-space { flex: 1 }
+
+.pos-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/*----------------------------------------------------------------------------*/
+
+@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;
+  }
+}
+
+@media (max-aspect-ratio: 3 / 4) {
+  .nav1, .nav2 {
+    display: none !important;
+  }
+}
+
+/*----------------------------------------------------------------------------*/
+
+html {
+  background: var(--dark);
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: scroll;
+}
+
+nav {
+  position: fixed;
+  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;
+  font-family: "Source Serif Pro", serif;
+  font-style: italic;
+  font-size: calc(min(6vh, 8vw));
+  line-height: calc(min(5vh, 7vw));
+  top: 0;
+  left: 0;
+  translate: 1vmin -100%;
+  color: var(--dark);
+}
+
+.fade-text::before {
+  content: attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data);
+  font-size: calc(min(12vh, 16vw));
+  line-height: calc(min(11vh, 14vw));
+  font-family: "Open Sans", sans-serif;
+  font-weight: 900;
+  white-space: pre;
+  color: black;
+}
+
+#title-name {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  translate: -50% 0;
+  font-size: calc(min(12vh, 16vw));
+  line-height: calc(min(11vh, 14vw));
+  font-family: "Open Sans", sans-serif;
+  font-weight: 900;
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-image: linear-gradient(45deg, #F008, #00F8);
+  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;
+}
+
+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 {
+  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;
+}
+
+.button.icon {
+  font-size: 2.5vh;
+}
+
+.button:active {
+  transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s;
+  transform: scale(0.9);
+}
+
+.button.icon::before {
+  content: attr(data-i);
+  font-family: "Material Symbols Outlined";
+  font-size: 4vh;
+}
+
+.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;
+}
+
+.button:hover::after {
+  filter: opacity(0.25);
+  transform: scale(1);
+}
+
+@media (hover: none) {
+  .button:hover::after {
+    filter: opacity(0);
+    transform: scale(0.9);
+  }
+}
+
+.button:active::after {
+  filter: opacity(0.5);
+}
+
+/*----------------------------------------------------------------------------*/
+
+section {
+  margin-bottom: 200vh;
+  background-color: var(--color, transparent);
+}
+
+#about-section {
+  height: 60vmin;
+}
+
+#title-section {
+  height: 90vmin;
+  z-index: 1000;
+}
+
+/*----------------------------------------------------------------------------*/
+
+#menu-modal::backdrop {
+  background-color: #0008;
+  animation: 0.5s ease menu-back-enter;
+}
+
+#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);
+}
+
+#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

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="/res/favicon.ico">
+    <link rel="stylesheet" href="index.css">
+    <script src="index.js"></script>
+    <title>Max's Place</title>
+  </head>
+  <body>
+   <nav>
+      <menu class="navbar nav1">
+        <a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</a>
+        <div class="flex-space"></div>
+        <a href="/about" class="red icon button" data-i="accessibility_new">About</a>
+        <a href="/projects" class="yellow icon button" data-i="design_services">Projects</a>
+        <a href="/resume" class="green icon button" data-i="draft">Resume</a>
+        <a href="/contact" class="blue icon button" data-i="push_pin">Contact</a>
+      </menu>
+      <menu class="navbar nav2">
+        <a href="#" class="button" id="homebutton" 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>
+      </menu>
+      <menu class="navbar nav3">
+        <a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</a>
+        <div class="flex-space"></div>
+        <button class="icon button" data-i="menu" onclick="openMenu()"></a>
+      </menu>
+      <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="MAX HUTZ"></div>
+          <div class="fade-text fade2" data="MAX HUTZ"></div>
+          <div class="fade-text fade3" data="MAX HUTZ"></div>
+          <div class="fade-text fade4" data="MAX HUTZ"></div>
+          <div class="fade-text fade5" data="MAX HUTZ"></div>
+        </div>
+      </div>
+    </nav>
+    <section id="title-section"></section>
+  </body>
+</html>
+
+<dialog id="menu-modal">
+  <div id="menu-inner">
+    <a href="#" class="button" id="homebutton" 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>

home/index.js

@@ -0,0 +1,52 @@
+let menuOpen = true;
+
+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;
+  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) {
+    menu.addEventListener("click", clickMenuModal);
+    menu.addEventListener("touchstart", clickMenuModal);
+  }
+}
+
+function clickMenuModal(e) {
+  const menu = document.getElementById("menu-modal");
+  if (menu == null || e.target != menu) return;
+  closeMenu();
+}
+
+function preventScroll(e) {
+  if (menuOpen) return;
+  e.preventDefault();
+  e.stopPropagation();
+  return false;
+}
+
+window.onload = main;

res/avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 554 554"><style><![CDATA[.B{filter:url(#C)}.C{fill:#a05abc}.D{fill:#af7ac5}.E{filter:url(#B)}.F{filter:url(#A)}.G{color-interpolation-filters:sRGB}]]></style><defs><filter id="A" x="0" y="0" width="1" height="1" class="G"><feColorMatrix type="hueRotate" values="12"/><feColorMatrix type="saturate" values="1" result="B"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix values="2.125 -3.3125 -3.3125 0 4.36709 -3.3125 2.125 -3.3125 0 4.36709 -3.3125 -3.3125 2.125 0 4.36709 0 0 0 1 0 " in="B"/></filter><filter id="B" x="0" y="0" width="1" height="1" class="G"><feColorMatrix type="hueRotate" values="354"/><feColorMatrix type="saturate" values="1" result="B"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix values="2.125 -3.3125 -3.3125 0 4.36709 -3.3125 2.125 -3.3125 0 4.36709 -3.3125 -3.3125 2.125 0 4.36709 0 0 0 1 0 " in="B"/></filter><filter id="C" x="0" y="0" width="1" height="1" class="G"><feColorMatrix values="2.125 -3.3125 -3.3125 0 4.36709 -3.3125 2.125 -3.3125 0 4.36709 -3.3125 -3.3125 2.125 0 4.36709 0 0 0 1 0 "/></filter><filter id="D" x="0" y="0" width="1" height="1" class="G"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 1 "/><feColorMatrix type="hueRotate" values="161" result="A"/><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/><feBlend in2="A" mode="darken"/><feBlend mode="screen"/><feComposite in2="SourceGraphic" operator="in" result="E"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix type="hueRotate" values="336" in="E"/><feColorMatrix type="saturate" values="1" result="E"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feColorMatrix values="1 -0.8 -0.8 0 1 -0.8 1 -0.8 0 1 -0.8 -0.8 1 0 1 0 0 0 1 0 " in="E"/></filter></defs><g transform="matrix(1.17978 -.082498 .082498 1.17978 -117.279225 -70.898248)" filter="url(#D)"><g class="C"><path d="M329.034 118.009l48.34 70.702-61.966-46.857z" class="B"/><path d="M287.916 216.201l27.192-72.75-2.276 71.404z" class="E"/></g><path d="M341.354 214.234l-53.428 3.133-26.379 45.662z" class="D F"/><path d="M295.643 243.441l-35.168 21.855-9.411 47.981z" class="B C"/><path d="M257.003 274.362l-26.791 32.588 17.846 17.14z" class="B D"/><path d="M229.677 307.956l18.461 18.173-16.318 27.687z" class="B C"/><path d="M232.267 355.613l35.236 20.197-19.043-47.921z" class="D E"/><path d="M233.991 357.815l33.596 19.228 1.623 26.319z" class="B C"/><g class="D"><path d="M268.53 376.38l4.011 83.623 13.242-56.91z" class="F"/><path d="M314.563 199.77l1.868-55.303 15.014 11.036z" class="B"/><path d="M195.95 325.764l6.859-22.709-42.863-13.857z" class="F"/></g><g class="C"><path d="M168.675 300.078L158.5 289.492l-16.355 5.766z" class="B"/><path d="M219.788 374.415l-10.226-20.452-60.977 27.648z" class="E"/></g><path d="M136.464 404.336l11.995-21.618 22.777-2.178z" class="B D"/><path d="M319.018 356.614l-5.302-18.558 62.492 3.409z" class="C F"/><path d="M353.62 349.078l44.176 15.112-20.704-21.546z" class="D E"/><path d="M315.23 392.595l-.379-15.528 41.914 18.34z" class="B C"/><path d="M336.679 395.549l24 20.149-4.045-18.953z" class="B D"/><path d="M350.453 239.583l69.688-28.69 2.841-67.605z" class="C E"/><path d="M424.193 143.574l-2.85 67.696 23.512 41.191z" class="B D"/><path d="M436.075 198.454l33.682 50.976-21.262 16.005z" class="C F"/><path d="M470.223 250.67l-21.145 15.949 6.05 66.934z" class="D E"/><path d="M471.151 251.309l12.241 57.584-29.163 34.087z" class="B C"/><path d="M484.206 309.292l-30.912 36.737 11.631 52.247z" class="B D"/><path d="M452.335 348.661l11.644 50.374-32.734 52.025z" class="C E"/><path d="M443.691 384.322l-13.529 66.991-25.378-10.889z" class="D F"/><path d="M429.773 452.231l-25.312-10.646-44.634 34.427z" class="B C"/><path d="M429.155 454.085l-70.263 23.635 21.306 9.892z" class="B D"/><path d="M356.916 478.092l22.523 10.322-89.083 9.32z" class="C F"/></g></svg>