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);
 }
 
@@ -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%);
 }