From 5e8ff650bea87282dee5a754612846a0a4b037a8 Mon Sep 17 00:00:00 2001
From: MajorDroolz <maximhutz@gmail.com>
Date: Thu, 22 Dec 2022 22:47:15 -0500
Subject: [PATCH] FEAT: The About section is completely featured.

---
 home/index.css  | 63 ++++++++++++++++++++++++++++++++++---------------
 home/index.html | 31 +++++++++++++-----------
 2 files changed, 61 insertions(+), 33 deletions(-)

diff --git a/home/index.css b/home/index.css
index c3404a4..9a5d026 100644
--- a/home/index.css
+++ b/home/index.css
@@ -249,40 +249,65 @@ header {
 
 #about-me__title {
   text-align: right;
-  margin-right: 10vmin;
-  margin-bottom: 10vmin;
   font-size: 15vmin;
-  flex-basis: 60vmin;
+  width: 60vmin;
   z-index: 100;
   line-height: 15vmin;
+  margin-right: 10vmin;
+}
+
+#about-me__text-holder {
+  width: 80vmin;
+  height: 70vmin;
+  overflow: visible;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 
 #about-me__text-outer {
-  filter: drop-shadow(0px 20px 20px #0009);
-  flex-basis: 80vmin;
+  position: absolute;
+  background: var(--red);
+  box-shadow: 0px 10px 50px 0 #000;
+  padding: 20vh;
+  width: 81vmin;
+  overflow: hidden;
+  transform: rotate(5deg);
 }
 
 #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;
+  transform: rotate(-5deg);
 }
 
 .back-text {
   position: absolute;
-  bottom: -50%;
+  bottom: -60%;
   left: 50%;
   transform: translateX(-50%);
+}
+
+.icon::before {
+  content: attr(data-i);
+  font-family: "Material Symbols Outlined";
+  font-size: 10vh;
+  z-index: 1000;
+  color: var(--color);
+}
+
+#about-me-icon1 {
+  position: absolute;
+  top: 5vh;
+  left: 15vh;
+  color: white;
+  z-index: 100;
+}
+
+#about-me-icon2 {
+  position: absolute;
+  bottom: 10vh;
+  right: 15vh;
+  color: white;
+  z-index: 100;
 }
\ No newline at end of file
diff --git a/home/index.html b/home/index.html
index f41252a..015ec8f 100644
--- a/home/index.html
+++ b/home/index.html
@@ -43,22 +43,25 @@
     </header>
     
     <section id="about-me">
-      <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 id="about-me__text-holder">
+        <div id="about-me__text-outer">
+          <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__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>
-          <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>