FIX: Reroute to resume because the homepage is still in beta.

FEAT: add logos to page
FEAT: Home page now operational, but yet complete.
2023-01-03 01:03:18 -05:00 · 2023-01-03 01:02:17 -05:00 · 2023-01-03 00:33:07 -05:00 · 2023-01-02 17:26:05 -05:00 · 2022-12-25 18:42:21 -05:00 · 2022-12-25 18:37:41 -05:00
13 changed files with 390 additions and 379 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.github/workflows/prepare.yml
+++ b/.github/workflows/prepare.yml
@@ -26,15 +26,15 @@ jobs:

      - name: Minify files.
        run: |
-          for i in `find . -name "*.js" -type f`; do terser $i --compress -o $i; done
-          for i in `find . -name "*.css" -type f`; do csso $i -o $i; done
-          for i in `find . -name "*.html" -type f`; do html-minifier --remove-comments --collapse-whitespace $i -o $i; done
+          find . -name "*.js" -type f -exec terser {} -c -o {} \;
+          find . -name "*.css" -type f -exec csso {} -o {} \;
+          find . -name "*.html" -type f -exec html-minifier --remove-comments --collapse-whitespace {} -o {} \;
      
      - name: "Commiting changes."
        run: |
-          git config user.email "noreply@github.com"
-          git config user.name "github-actions"
+          git config user.name github-actions
+          git config user.email noreply@github.com
          git commit -am "Preparing changes for deployment."
  
      - name: "Pushing changes."
-        run: git push -f --set-upstream origin build
+        run: git push -uf origin build
--- a/home/index.css
+++ b/home/index.css
@@ -1,318 +1,284 @@
-@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);
+  overflow: hidden;
+  text-decoration: none;
 }

-.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%);
+button {
+  background-color: transparent;
 }

-/*----------------------------------------------------------------------------*/
-
-@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;
+body {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100vw;
  overflow-y: scroll;
 }

-nav {
-  position: fixed;
-  z-index: 1000;
-  filter: drop-shadow(0px 0px 100px #000);
+html {
+  overflow-y: scroll;
+  scroll-behavior: smooth;
 }

-#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-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t);
-  font-size: calc(min(12vh, 16vw));
-  line-height: calc(min(11vh, 14vw));
-  font-family: "Open Sans", sans-serif;
-  font-weight: 900;
+.pre {
+  all: unset;
  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;
+.nav-link {
+  color: var(--color);
+  text-decoration: none;
  font-weight: 900;
-  color: transparent;
-  -webkit-background-clip: text;
-  background-clip: text;
-  background-image: linear-gradient(45deg, #F008, #00F8);
-  transform: translateZ(0);
+  font-family: "Open Sans";
 }

-.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;
+.shadow {
+  filter: drop-shadow(0 4px 0 #0004);
 }

-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; }
+.icon, .r-icon, .button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

-@keyframes nav-enter {
-  from {
-    opacity: 0;
-    transform: translateX(-7%);
-  }
+.icon::before {
+  font-family: 'Material Symbols Outlined';
+  content: attr(data-i);
+  font-size: 36px;
+  margin-right: 5px;
+}

-  to {
-    opacity: 1;
-    transform: translateX(0%);
-  }
+.r-icon::after {
+  font-family: 'Material Symbols Outlined';
+  content: attr(data-i);
+  margin-left: 5px;
+}
+
+h1 {
+  font-size: 40px;
+  font-family: "Open Sans";
+  font-weight: 900;
+}
+
+h2 {
+  font-size: 30px;
+  font-family: "Open Sans";
+  font-weight: 900;
+}
+
+i {
+  font-size: 20px;
+  font-size: "Source Serif Pro";
+}
+
+p {
+  font-size: 20px;
+  font-family: "Open Sans";
+  font-weight: 100;
+}
+
+.lighter {
+  background: #fff4;
+}
+
+.darker {
+  background: #0004;
+}
+
+hr {
+  height: 1px;
+  width: 100%;
 }

 .button {
+  color: var(--color);
  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;
+  padding: 10px 30px;
 }

-.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: "";
+.button::before {
+  position: absolute;
  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;
+  top: 0;
+  left: 0;
+  background: var(--color);
+  opacity: 25%;
+  content: "";
+  border-radius: 10px;
 }

-.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);
-}
-
-/*----------------------------------------------------------------------------*/
-
-article {
-  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-pad {
  width: 100vw;
-  max-height: 100vh;
-  max-width: 100vw;
-  background: transparent;
+  background-color: var(--color);
+  padding: 10px 20px;
+  box-sizing: border-box;
+}
+
+.png-icon {
+  filter: brightness(0) invert(1);
+}
+
+/*----------------------------------------------------------------------------*/
+
+#header-outer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+
+header {
+  margin: auto;
+  max-width: 1024px;
+  display: flex;
+  gap: 40px;
+  font-size: 25px;
+  font-family: "Open Sans";
+  font-weight: bolder;
+  color: var(--dark);
+  align-items: center;
+  box-sizing: border-box;
+}
+
+#about {
+  position: relative;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: 1024px;
+  min-height: 90vh;
+  color: var(--dark);
+  padding-top: 30px;
+  box-sizing: border-box;
+  gap: 30px;
+}
+
+#about > * {
+  max-width: 600px;
+}
+
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+#inner-nav {
+  display: inline-flex;
+  flex-grow: 1;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+/*----------------------------------------------------------------------------*/
+
+#projects {
+  margin: 30px auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 1024px;
+  min-height: 100vh;
+  color: white;
+  box-sizing: border-box;
+  gap: 30px;
+}
+
+#project-list {
+  overflow: visible;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 20px;
+}
+
+.project-item {
+  min-width: max(40%, 300px);
+  flex: 1;
+  height: 300px;
+  background-color: var(--color);
+  border-radius: 10px;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+
+.project-link {
+  color: white;
+  background-color: #0005;
+  padding: 10px;
+  border-radius: 0 0 10px 10px;
+}
+
+#experience-button {
+  align-self: center;
+}
+
+#footer-pad {
+  background: var(--dark) linear-gradient(#0002, #0002);
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  color: white;
+  max-width: 1024px;
+  margin: auto;
+  gap: 10px;
+}
+
+/*----------------------------------------------------------------------------*/
+
+#menu {
+  top: 0;
+  left: 0;
+  max-width: none;
+  max-height: none;
+  position: fixed;
+  background-color: var(--light);
+  color: var(--dark);
+  width: 100vw;
+  font-size: 25px;
+  overflow: visible;
+}
+
+#menu-top {
+  display: flex;
+  align-items: center;
+  transform: translateY(-1.5px);
 }

 #menu-inner {
-  padding: 2vmin 3vmin;
-  position: fixed;
-  height: 100vh;
-  width: 75vw;
+  max-width: 1024px;
  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);
+  gap: 30px;
+  margin: auto;
+  margin-bottom: 50px;
 }

-#menu-modal[open] {
-  animation: 0.5s ease menu-enter;
-}
+/*----------------------------------------------------------------------------*/

-@keyframes menu-enter {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0%);
+@media (max-width: 464px) {
+  .nav2, .nav3 {
+    display: none;
  }
 }

-@keyframes menu-back-enter {
-  from {
-    filter: opacity(0);
+@media (max-width: 813px) and (min-width: 465px) {
+  .nav1, .nav3 {
+    display: none;
  }
+}

-  to {
-    filter: opacity(1);
+@media (min-width: 814px) {
+  .nav1, .nav2 {
+    display: none;
  }
 }
--- a/home/index.html
+++ b/home/index.html
@@ -4,57 +4,116 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="This is the home page of Maxim Voldman Hutz's personal website.">
+
    <link rel="icon" type="image/x-icon" href="/res/favicon.ico">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
+    <link rel="stylesheet" href="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">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
+    
+    <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>
-   <nav>
-      <header class="navbar nav1">
-        <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">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>
+    <div id="header-outer" class="light width-pad shadow">
+      <header>
+        <a href="#" class="nav-link dark">MAX HUTZ</a>
+        <div class="flex"></div>
+        <a href="/experience" class="nav-link dark icon nav3" data-i="work">Experience</a>
+        <a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
+        <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
+        <a href="/experience" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
+        <a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume"></a>
+        <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" aria-label="Contact"></a>
+        <button class="nav-link dark icon nav1" data-i="menu" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
      </header>
-      <header class="navbar nav2">
-        <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 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>
-    </nav>
-    <article id="title-section"></article>
+    </div>

-    <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 class="light width-pad">
+      <section id="about">
+        <div class="flex"></div>
+        <div class="flex"></div>
+        <div>
+          <h1>Hey! 👋 <span class="pre">I'm Max Hutz.</span></h1>
+          <i>Software engineer in New York.</i>
+        </div>
+        <p id="about-me">
+          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">
+        <nav>
+          <div id="inner-nav">
+            <a href="mailto:maximhutz@gmail.com" class="nav-link blue button flex">maximhutz@gmail.com</a>
+            <a href="/resume" class="nav-link red button r-icon flex" data-i="arrow_right" target="_blank">View Resume</a>
+          </div>
+          <div class="space"></div>
+        </nav>
+        <div class="flex"></div>
+      </section>
+    </div>
+
+    <div class="dark width-pad">
+      <section id="projects">
+        <h2>Worked on:</h2>
+        <div id="project-list">
+          <a class="yellow project-item shadow" href="/experience/malung">
+            <div class="space"></div>
+            <div class="nav-link project-link r-icon" data-i="arrow_right">Malung: COVID-19 Classifier</div>
+          </a>
+          <a class="blue project-item shadow" href="/experience/freshmanual">
+            <div class="space"></div>
+            <div class="nav-link project-link r-icon" data-i="arrow_right">Freshmanual: Mobile App</div>
+          </a>
+          <a class="green project-item shadow" href="/experience/pollbuddy">
+            <div class="space"></div>
+            <div class="nav-link project-link r-icon" data-i="arrow_right">Poll Buddy</div>
+          </a>
+          <a class="red project-item shadow" href="/experience/rpi-crisis">
+            <div class="space"></div>
+            <div class="nav-link project-link r-icon" data-i="arrow_right">CRISIS</div>
+          </a>
+        </div>
+        <hr class="lighter">
+        <a href="/experience" id="experience-button" class="nav-link white button">View all experiences.</a>
+      </section>
+    </div>
+
+    <div id="footer-pad" class="dark width-pad">
+      <footer>
+        <h2>&copy; 2022</h2>
+        <div class="flex"></div>
+        <a href="https://github.com/MajorDroolz" class="png-icon" target="_blank">
+          <img src="/res/icons/github.png" alt="GitHub" width="30" height="30">
+        </a>
+        <a href="https://www.linkedin.com/in/maximhutz/" class="png-icon" target="_blank">
+          <img src="/res/icons/linkedin.png" alt="LinkedIn" width="30" height="30">
+        </a>
+        <a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
+      </footer>
+    </div>
+
+    <dialog id="menu">
+      <div class="light width-pad shadow">
+        <div id="menu-inner">
+          <div id="menu-top">
+            <a href="/home" class="nav-link dark">MAX HUTZ</a>
+            <div class="flex"></div>
+            <form method="dialog">
+              <button class="nav-link dark icon" data-i="close" aria-label="Close"></button>
+            </form>
+          </div>
+          <a href="/experience" class="nav-link dark icon" data-i="work">Experience</a>
+          <a href="/resume" class="nav-link dark icon" data-i="clinical_notes">Resume</a>
+          <a href="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
+        </div>
      </div>
    </dialog>
  </body>
--- a/home/index.js
+++ b/home/index.js
@@ -1,52 +0,0 @@
-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;
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta http-equiv="Refresh" content="0; url=home"/>
+		<meta http-equiv="Refresh" content="0; url=resume">
+		<link rel="stylesheet" href="/styles.css">
 	</head>
-	<body bgcolor="black"></body>
 </html>
--- a/res/.DS_Store
+++ b/res/.DS_Store
--- a/res/icons/.DS_Store
+++ b/res/icons/.DS_Store
--- a/res/icons/github.png
+++ b/res/icons/github.png
--- a/res/icons/linkedin.png
+++ b/res/icons/linkedin.png
--- a/resume/index.css
+++ b/resume/index.css
@@ -22,7 +22,6 @@

 html {
  font-size: 1vw;
-  background: black;
  animation: var(--enter) scene-enter;
 }

@@ -148,7 +147,7 @@ article {
 }

 body::before {
-  background: lightsteelblue linear-gradient(45deg, #F008, #00F8);
+  background: lightsteelblue var(--grad);
  width: 100vw;
  height: 100vh;
  content: "";
--- a/resume/index.html
+++ b/resume/index.html
@@ -16,6 +16,7 @@
    ">

    <!-- Resume styling. -->
+    <link rel="preload stylesheet" as="style" href="/styles.css">
    <link rel="preload stylesheet" as="style" href="index.css">

    <!-- Site's Icon -->
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,38 @@
+* {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  outline: 0;
+}
+
+:root {
+  --light: #FEFADC;
+  --dark: #504B43;
+  --red: #EC1B24;
+  --yellow: #E19200;
+  --green: #4CB753;
+  --blue: #2B9EB3;
+
+  --timing: cubic-bezier(0.2, 1, 0, 1);
+  --start-timing: cubic-bezier(0,.5,0,.9);
+
+  --grad: linear-gradient(45deg, #F008, #00F8);
+  --shadow: 0px 10px 50px 0 #0008;
+}
+
+.light { --color: var(--light) }
+.dark { --color: var(--dark) }
+.red { --color: var(--red) }
+.yellow { --color: var(--yellow) }
+.green { --color: var(--green) }
+.blue { --color: var(--blue) }
+.white { --color: white }
+
+.flex-space, .flex { flex-grow: 1 }
+.space { flex: 1000 }
+
+/*----------------------------------------------------------------------------*/
+
+html {
+  background: var(--dark);
+}
Author	SHA1	Message	Date
MajorDroolz	f8b282c042	FIX: Reroute to resume because the homepage is still in beta.	2023-01-03 01:03:18 -05:00
MajorDroolz	151f01c335	FEAT: add logos to page	2023-01-03 01:02:17 -05:00
MajorDroolz	6fd537104e	FEAT: Home page now operational, but yet complete.	2023-01-03 00:33:07 -05:00
MajorDroolz	f7136af88e	OHAUL: Completely new figma design, made about section.	2023-01-02 17:26:05 -05:00
MajorDroolz	7e10a6e664	FIX: removed unneeded CSS.	2022-12-25 18:42:21 -05:00
MajorDroolz	de831dbea3	FEAT: Added experiences section.	2022-12-25 18:37:41 -05:00
MajorDroolz	30f3c69d32	FEAT: Added project section, reworked about me section.	2022-12-24 22:22:38 -05:00
MajorDroolz	011c58f69a	FIX: New combined stylesheet.	2022-12-22 23:00:55 -05:00
MajorDroolz	beb2776c85	FIX: scrolling issues with safari.	2022-12-22 22:56:24 -05:00
MajorDroolz	5e8ff650be	FEAT: The About section is completely featured.	2022-12-22 22:47:15 -05:00
MajorDroolz	2fc2271221	FEAT: Beta for about section.	2022-12-22 21:30:44 -05:00
MajorDroolz	b7c7e0dd9c	FIX: Partial unification of styling, will work on resume later.	2022-12-22 18:29:53 -05:00
MajorDroolz	cf6a5ef910	FEAT: Added rest of unstyled HTML content. Temporarily removed animations.	2022-12-22 16:51:59 -05:00
MajorDroolz	4199536932	Merge branch 'main' into homepage	2022-12-20 17:34:43 -05:00
MajorDroolz	b63bebcebf	CLEAN: Condensed prepare action.	2022-12-20 17:12:40 -05:00