FEAT: Added experiences section.

home/index.css

@@ -242,6 +242,7 @@ h2 {
   font-weight: 900;
   font-size: 15vmin;
   text-transform: uppercase;
+  line-height: 15vmin;
 }
 
 h3 {
@@ -282,7 +283,7 @@ a {
   height: 100%;
   padding: 10vmin 20vmin;
   background-color: var(--color);
-  box-shadow: 0px 10px 50px 0 #000;
+  box-shadow: var(--shadow);
   overflow: hidden;
   z-index: -1;
 }
@@ -386,11 +387,11 @@ a {
 
 .project-desc__img {
   flex: 1;
-  min-width: 70vmin;
+  min-width: 50vmin;
   height: 50vmin;
-  box-shadow: 0px 10px 50px 0 #0008;
+  box-shadow: var(--shadow);
   border-radius: 2vmin;
-  box-sizing: border-box;
+  background: white;
 }
 
 #projects-inner {
@@ -398,7 +399,7 @@ a {
   align-items: center;
   justify-content: flex-end;
   flex-direction: column;
-  transform: rotate(calc(-1 * var(--rotate))) translateY(17vmin);
+  transform: rotate(calc(-1 * var(--rotate))) translateY(20vmin);
 }
 
 #view-projects-button {
@@ -416,7 +417,7 @@ a {
 #view-all-button {
   user-select: none;
   position: absolute;
-  top: -1vmin;
+  top: -4vmin;
   left: 1vmin;
   font-size: 5vmin;
 }
@@ -424,7 +425,7 @@ a {
 #view-projects-icon {
   user-select: none;
   position: absolute;
-  top: -4vmin;
+  top: -6vmin;
   right: 1vmin;
 }
 
@@ -443,4 +444,65 @@ a {
   font-size: 10vmin;
 }
 
-/*----------------------------------------------------------------------------*/
+/*----------------------------------------------------------------------------*/
+
+#my-experience {
+  max-width: 200vmin;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#my-experience__title {
+  margin-bottom: 5vmin;
+  font-size: 13vmin;
+}
+
+#my-experience__text-outer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 100vw;
+  gap: 30vmin;
+}
+
+#my-experience__text {
+  position: relative;
+  width: 50vmin;
+}
+
+#my-experience__back {
+  --rotate: 5deg;
+  --color: var(--green);
+  padding: 10vmin 15vmin;
+}
+
+#my-experience-inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: column;
+  transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
+}
+
+#my-experience__resume {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5vmin;
+}
+
+#my-experience__resume-img {
+  width: 40vmin;
+  height: 60vmin;
+  background-color: white;
+  border-radius: 2vmin;
+  box-shadow: var(--shadow);
+}
+
+#my-experience__resume-button {
+  
+}

home/index.html

@@ -122,16 +122,26 @@
     </section>
   
     <section id="my-experience" class="card">
-      <div id="my-experience-back"></div>
-      <h2>My Experience</h2>
-      <p>
-        I've had varied experiences: from <strong>mentoring fellow undergrads
-        </strong> to performing in fast-paced settings where <strong>communication
-        and innovation</strong> are key.
-      </p>
-      <div>
-        <img src="/res/avatar.svg" width="300" height="300">
-        <a href="/projects/freshmanual">View Resume →</a>
+      <h2 id="my-experience__title">My<br>Experience</h2>
+      <div id="my-experience__text-outer">
+        <div id="my-experience__text">
+          <div id="my-experience__back" class="card-back">
+            <div id="my-experience-inner" class="card-back-inner">
+              <div class="fade-text fade1" data-t="My Experience"></div>
+              <div class="fade-text fade2" data-t="My Experience"></div>
+              <div class="fade-text fade3" data-t="My Experience"></div>
+            </div>
+          </div>
+          <p>
+            I've had varied experiences: from <strong>mentoring fellow undergrads
+            </strong> to performing in fast-paced settings where <strong>communication
+            and innovation</strong> are key.
+          </p>
+        </div>
+        <div id="my-experience__resume">
+          <img id="my-experience__resume-img" src="/res/avatar.svg" width="300" height="300">
+          <a id="my-experience__resume-button" href="/projects/freshmanual">View Resume →</a>
+        </div>
       </div>
     </section>
   

styles.css

@@ -17,6 +17,7 @@
   --start-timing: cubic-bezier(0,.5,0,.9);
 
   --grad: linear-gradient(45deg, #F008, #00F8);
+  --shadow: 0px 10px 50px 0 #0008;
 }
 
 .light { --color: var(--light) }