From 2fc2271221df7f204a3e3115d14b84646fe46be0 Mon Sep 17 00:00:00 2001
From: MajorDroolz <maximhutz@gmail.com>
Date: Thu, 22 Dec 2022 21:30:44 -0500
Subject: [PATCH] FEAT: Beta for about section.

---
 home/index.css   | 69 ++++++++++++++++++++++++++++++++++++++++++++++--
 home/index.html  | 27 ++++++++++++-------
 home/index.js    |  2 ++
 resume/index.css |  2 +-
 4 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/home/index.css b/home/index.css
index 6d69228..c3404a4 100644
--- a/home/index.css
+++ b/home/index.css
@@ -23,17 +23,19 @@
 /*----------------------------------------------------------------------------*/
 
 html {
-  background: var(--dark);
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   overflow-y: scroll;
+  overflow-x: hidden;
   padding: 100vh 0;
+  color: white;
 }
 
 header {
   position: fixed;
   top: 0;
   left: 0;
+  width: 100vw;
   z-index: 1000;
   filter: drop-shadow(0px 0px 100px #000);
 }
@@ -112,7 +114,7 @@ header {
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
-  background-image: linear-gradient(45deg, #F008, #00F8);
+  background-image: var(--grad);
   transform: translateZ(0);
 }
 
@@ -220,4 +222,67 @@ header {
   -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);
+}
+
+/*----------------------------------------------------------------------------*/
+
+.body {
+  font-family: "Source Code Pro", monospace;
+}
+
+.head {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 900;
+}
+
+#about-me {
+  width: 100vw;
+  min-height: 100vh;
+  margin: 10vh 0;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  flex-wrap: wrap;
+}
+
+#about-me__title {
+  text-align: right;
+  margin-right: 10vmin;
+  margin-bottom: 10vmin;
+  font-size: 15vmin;
+  flex-basis: 60vmin;
+  z-index: 100;
+  line-height: 15vmin;
+}
+
+#about-me__text-outer {
+  filter: drop-shadow(0px 20px 20px #0009);
+  flex-basis: 80vmin;
+}
+
+#about-me__text {
+  --x: 50%;
+  --y: 30%;
+  --path: polygon(
+    -25% -50%,
+    155% -30%,
+    150% 150%,
+    -30% 130%
+  );
+
+  font-size: 4vmin;
+  background: var(--red);
+  outline: 100vmax solid var(--red);
+  -webkit-clip-path: var(--path);
+  clip-path: var(--path);
+  position: relative;
+}
+
+.back-text {
+  position: absolute;
+  bottom: -50%;
+  left: 50%;
+  transform: translateX(-50%);
 }
\ No newline at end of file
diff --git a/home/index.html b/home/index.html
index ea0b024..f41252a 100644
--- a/home/index.html
+++ b/home/index.html
@@ -43,15 +43,24 @@
     </header>
     
     <section id="about-me">
-      <div id="about-me-back"></div>
-      <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>teach future developers</strong>. Seeks role to
-        fashion software solutions, focused on <strong>teamwork and creativity
-        </strong>.
-      </p>
+      <div id="about-me__back"></div>
+      <h2 id="about-me__title" class="head">About<br>Me</h2>
+      <div id="about-me__text-outer">
+        <div id="about-me__text">
+          <div class="back-text">
+            <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>
+          <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>
     </section>
   
     <section id="projects">
diff --git a/home/index.js b/home/index.js
index 8c98f06..0faface 100644
--- a/home/index.js
+++ b/home/index.js
@@ -26,6 +26,8 @@ function main() {
   if (menu == null) return;
   menu.addEventListener("click", clickMenuModal);
   menu.addEventListener("touchstart", clickMenuModal);
+
+  calcScroll();
 }
 
 function clickMenuModal(e) {
diff --git a/resume/index.css b/resume/index.css
index fa99ea6..815d86c 100644
--- a/resume/index.css
+++ b/resume/index.css
@@ -147,7 +147,7 @@ article {
 }
 
 body::before {
-  background: lightsteelblue linear-gradient(45deg, #F008, #00F8);
+  background: lightsteelblue var(--grad);
   width: 100vw;
   height: 100vh;
   content: "";