FEAT: Added project section, reworked about me section.

home/index.css

@@ -27,13 +27,19 @@ html {
   -webkit-overflow-scrolling: touch;
   overflow-y: scroll;
   overflow-x: hidden;
+  width: 100vw;
   padding: 100vh 0;
   color: white;
+  position: relative;
 }
 
-html, body {
+body {
   position: relative;
-  overflow-x: hidden;
+  padding: 0 10vmin;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  overflow-x: visible;
 }
 
 header {
@@ -98,8 +104,8 @@ header {
 .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));
+  font-size: 15vmin;
-  line-height: calc(min(11vh, 14vw));
+  line-height: 15vmin;
   font-family: "Open Sans", sans-serif;
   font-weight: 900;
   white-space: pre;
@@ -112,8 +118,8 @@ header {
   left: 50%;
   text-transform: uppercase;
   translate: -50% 0;
-  font-size: calc(min(12vh, 16vw));
+  font-size: 15vmin;
-  line-height: calc(min(11vh, 14vw));
+  line-height: 15vmin;
   font-family: "Open Sans", sans-serif;
   font-weight: 900;
   color: transparent;
@@ -156,7 +162,7 @@ header {
   transition: transform var(--timing) 1s, filter var(--timing) 1s;
 }
 
-.button.icon {
+.icon {
   font-size: 2.5vh;
 }
 
@@ -165,7 +171,7 @@ header {
   transform: scale(0.9);
 }
 
-.button.icon::before {
+.icon::before {
   content: attr(data-i);
   font-family: "Material Symbols Outlined";
   font-size: 4vh;
@@ -231,87 +237,210 @@ header {
 
 /*----------------------------------------------------------------------------*/
 
-.body {
+h2 {
-  font-family: "Source Code Pro", monospace;
-}
-
-.head {
   font-family: "Open Sans", sans-serif;
   font-weight: 900;
+  font-size: 15vmin;
+  text-transform: uppercase;
 }
 
+h3 {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 900;
+  font-size: 10vmin;
+  text-transform: uppercase;
+  position: relative;
+}
+
+p {
+  font-family: "Source Code Pro", monospace;
+  font-size: 5vmin;
+}
+
+.p2 {
+  font-family: "Source Code Pro", monospace;
+  font-size: 3vmin;
+}
+
+.card {
+  margin: 20vmin 0;
+}
+
+a {
+  font-size: 3.5vmin;
+  font-family: "Open Sans", sans-serif;
+  font-weight: 900;
+  color: white;
+}
+
+.card-back {
+  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: 0px 10px 50px 0 #000;
+  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%);
+}
+
+/*----------------------------------------------------------------------------*/
+
 #about-me {
-  width: 100vw;
-  overflow-x: hidden;
-  min-height: 100vh;
-  margin: 10vh 0;
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  align-content: center;
-  flex-wrap: wrap;
 }
 
 #about-me__title {
   text-align: right;
-  font-size: 15vmin;
-  width: 60vmin;
-  z-index: 100;
-  line-height: 15vmin;
   margin-right: 10vmin;
 }
 
-#about-me__text-holder {
-  width: 80vmin;
-  height: 70vmin;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#about-me__text-outer {
-  position: absolute;
-  background: var(--red);
-  box-shadow: 0px 10px 50px 0 #000;
-  padding: 20vh;
-  width: 81vmin;
-  overflow: hidden;
-  transform: rotate(5deg);
-}
-
 #about-me__text {
-  font-size: 4vmin;
+  width: 80vmin;
   position: relative;
-  transform: rotate(-5deg);
 }
 
-.back-text {
+#about-me__back {
-  position: absolute;
+  --rotate: 5deg;
-  bottom: -60%;
+  --color: var(--red);
-  left: 50%;
-  transform: translateX(-50%);
 }
 
-.icon::before {
+#about-me-inner {
-  content: attr(data-i);
+  display: flex;
-  font-family: "Material Symbols Outlined";
+  align-items: center;
-  font-size: 10vh;
+  justify-content: flex-end;
-  z-index: 1000;
+  flex-direction: column;
-  color: var(--color);
+  transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
 }
 
 #about-me-icon1 {
   position: absolute;
-  top: 5vh;
+  left: -10vmin;
-  left: 15vh;
+  top: -10vmin;
-  color: white;
+  transform: rotate(5deg);
-  z-index: 100;
 }
 
-#about-me-icon2 {
+#about-me-icon1::before {
-  position: absolute;
+  font-size: 10vmin;
-  bottom: 10vh;
-  right: 15vh;
-  color: white;
-  z-index: 100;
 }
+
+/*----------------------------------------------------------------------------*/
+
+#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: 70vmin;
+  height: 50vmin;
+  box-shadow: 0px 10px 50px 0 #0008;
+  border-radius: 2vmin;
+  box-sizing: border-box;
+}
+
+#projects-inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: column;
+  transform: rotate(calc(-1 * var(--rotate))) translateY(17vmin);
+}
+
+#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: -1vmin;
+  left: 1vmin;
+  font-size: 5vmin;
+}
+
+#view-projects-icon {
+  user-select: none;
+  position: absolute;
+  top: -4vmin;
+  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;
+}
+
+/*----------------------------------------------------------------------------*/

home/index.html

@@ -23,10 +23,10 @@
       <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"><p>About</p></a>
+        <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"><p>Projects</p></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"><p>Resume</p></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"><p>Contact</p></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">
@@ -42,59 +42,86 @@
       </div>
     </header>
     
-    <section id="about-me">
+    <section id="about-me" class="card">
-      <h2 id="about-me__title" class="head">About<br>Me</h2>
+      <h2 id="about-me__title">About<br>Me</h2>
-      <div id="about-me__text-holder">
+      <div id="about-me__text">
-        <div id="about-me__text-outer">
+        <p id="about-me-icon1" class="white icon" data-i="accessibility_new"></p>
-          <div id="about-me-icon1" class="white icon" data-i="accessibility_new"></div>
+
-          <div id="about-me-icon2" class="white icon" data-i="rocket_launch"></div>
+        <div id="about-me__back" class="card-back">
-          <div id="about-me__text">
+          <div id="about-me-inner" class="card-back-inner">
-            <div class="back-text">
+            <div class="fade-text fade1" data-t="About Me"></div>
-              <div class="fade-text fade1" data-t="About Me"></div>
+            <div class="fade-text fade2" 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 class="fade-text fade3" data-t="About Me"></div>
-            </div>
-            <p class="body">
-              Passionate computer science student skilled in building <strong>
-              responsive, full-stack applications</strong>. Motivated to learn from
-              colleagues and <strong>teach future developers</strong>. Seeks role to
-              fashion software solutions, focused on <strong>teamwork and
-              creativity</strong>.
-            </p>
           </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>
       </div>
     </section>
   
-    <section id="projects">
+    <section id="projects" class="card">
-      <div id="projects-me-back"></div>
+      <h2 id="projects__title">Projects</h2>
-      <h2>Projects</h2>
+      <div id="projects__text">
-      <p>
+        <p id="projects-icon1" class="white icon" data-i="design_services"></p>
-        A selection of applications worked on as a computer scientist, from
+
-        flexible web solutions to REST-ful mobile apps.
+        <div id="projects__back" class="card-back">
-      </p>
+          <div id="projects-inner" class="card-back-inner">
-      <section>
+            <div class="fade-text fade1" data-t="Projects"></div>
-        <h3>Malung</h3>
+            <div class="fade-text fade2" data-t="Projects"></div>
-        <img src="/res/avatar.svg" width="300" height="300">
+            <div class="fade-text fade3" data-t="Projects"></div>
+          </div>
+        </div>
+
         <p>
-          A cloud-based COVID-19 classifier incorporating AI deep learning. Using
+          A selection of applications worked on as a computer scientist, from
-          MariaDB and Microsoft Azure, users can store...
+          flexible web solutions to REST-ful mobile apps.
         </p>
-        <a href="/projects/malung">Learn more →</a>
+
-      </section>
+        <section class="project-section">
-      <section>
+          <h3 class="fade-horizontal" data-t="Malung">Malung</h3>
-        <h3>Fresh-Manual</h3>
+          <div class="project__description">
-        <img src="/res/avatar.svg" width="300" height="300">
+            <p class="p2 project-desc__text">
-        <p>
+              A cloud-based COVID-19 classifier incorporating AI deep learning.
-          A mobile companion to Fresh Manuals website to find, save and organize
+              Using MariaDB and Microsoft Azure, users can store...<br><br>
-          product manuals. UI built with React, React-Native, and SwiftUI...
+              <a href="/projects/malung">Learn more →</a>
-        </p>
+            </p>
-        <a href="/projects/freshmanual">Learn more →</a>
+            <img class="project-desc__img" src="/res/malung.svg" width="300" height="300">
-      </section>
+          </div>
-      <a href="/projects">View all Projects</a>
+        </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">
+    <section id="my-experience" class="card">
       <div id="my-experience-back"></div>
       <h2>My Experience</h2>
       <p>
@@ -108,7 +135,7 @@
       </div>
     </section>
   
-    <footer id="contact-me">
+    <footer id="contact-me" class="card">
       <h2>Contact Me!</h2>
       <nav>
         <a href="mailto:maximhutz@gmail.com">maximhutz@gmail.com</a>

styles.css

@@ -9,7 +9,7 @@
   --light: #FEFADC;
   --dark: #504B43;
   --red: #EC1B24;
-  --yellow: #FCAB10;
+  --yellow: #F29F00;
   --green: #62C869;
   --blue: #2B9EB3;