FEAT: Beta for about section.

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);
 }
 
@@ -221,3 +223,66 @@ header {
   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%);
+}

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">

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) {

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: "";