Halfway through resume page. Need to add modals.

content/assets/css/index.css

@@ -85,16 +85,6 @@
      width: 100%;
 }
 
-.down-arrow {
-     animation: flash 1s infinite;
-     bottom: 20px;
-     color: var(--tertiary-colour);
-     font-size: 1rem;
-     left: 50%;
-     position: fixed;
-     transform: translateX(-50%);
-}
-
 .faces .slide {
      border-radius: 10px;
      left: 50%;
@@ -137,15 +127,3 @@ footer {
 .hidden {
      display: none;
 }
-
-@keyframes flash {
-
-     0%,
-     100% {
-          opacity: 1;
-     }
-
-     50% {
-          opacity: 0.5;
-     }
-}

content/assets/css/resume.css

@@ -0,0 +1,313 @@
+@import url("theme.css");
+
+/*****************************
+* RESUME
+* Styling for the resume page.
+*****************************/
+
+* {
+     z-index: 1;
+}
+
+body {
+     color: var(--primary-colour);
+     font-family: var(--general-sans);
+}
+
+.page-menu {
+     align-items: center;
+     background-color: var(--background-colour);
+     color: var(--primary-colour);
+     display: flex;
+     flex-direction: row;
+     font-size: 0.6rem;
+     font-weight: 400;
+     justify-content: center;
+     padding: 10px;
+     position: sticky;
+     text-align: center;
+     top: 0;
+     z-index: 100;
+
+     &>*:not(:last-child)::after {
+          content: " | ";
+          margin: 0 8px;
+     }
+}
+
+.hero {
+     align-items: center;
+     background-image: url('../media/face-1276x1276.webp');
+     background-position: center center;
+     background-repeat: no-repeat;
+     background-size: 50vh;
+     display: flex;
+     flex-direction: column;
+     height: 100vh;
+     justify-content: center;
+     text-align: center;
+     z-index: -5 !important;
+
+     &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(255, 255, 255, 0.95);
+          pointer-events: none;
+     }
+
+     .title {
+          font-family: var(--general-serif);
+          font-size: 5rem;
+          font-variation-settings: "opsz" 8;
+          font-weight: 900;
+     }
+
+     .metadetails {
+          border-bottom: 0.5px solid lightgray;
+          border-top: 0.5px solid lightgray;
+          display: flex;
+          flex-direction: row;
+          gap: 5rem;
+
+          img {
+               height: 2.5rem;
+          }
+
+          figcaption {
+               color: var(--primary-colour);
+               font-family: var(--general-sans);
+               font-size: 0.8rem;
+               font-style: normal;
+               font-weight: 400;
+          }
+     }
+}
+
+#experience {
+     color: var(--primary-colour);
+     min-height: 80vh;
+
+
+     &>div {
+          margin: 30px;
+          padding: 1.2rem;
+
+          li {
+               border: none;
+
+               &:hover {
+                    box-shadow: none;
+               }
+          }
+
+          h2 {
+               color: var(--primary-colour);
+               font-family: var(--general-sans);
+               font-size: 2.5rem;
+               margin: 0 0 -18px 0;
+          }
+
+          .company {
+               font-family: var(--general-sans);
+               font-weight: 400;
+               font-size: 1.2rem;
+               margin: 0;
+
+               span {
+                    font-size: 0.7rem;
+                    font-weight: 400;
+                    margin: 0 0 0 25px;
+               }
+          }
+
+          .job-blurb {
+               font-family: var(--general-serif);
+               font-size: 1.2rem;
+               font-weight: 700;
+               line-height: 1.5;
+               margin-bottom: 30px;
+               margin-top: 30px;
+          }
+
+          .job-achievements {
+               font-family: var(--general-serif);
+
+               h5 {
+                    color: var(--primary-colour);
+                    font-size: 0.9rem;
+                    margin: 0;
+                    text-transform: none;
+               }
+
+               p {
+                    margin: 0 0 10px 0;
+               }
+          }
+     }
+
+     .mambu {
+          background-image: url("../media/mambu-logo-272x263.png");
+     }
+
+     .spread {
+          background-image: url("../media/spread-ai-logo-125x144.png");
+     }
+
+     .mambu,
+     .spread {
+          background-size: contain;
+          background-repeat: no-repeat;
+          filter: saturate(0);
+          height: 112px;
+          margin-left: 3rem;
+          margin-right: 3rem;
+          position: relative;
+
+          &::after {
+               background: rgba(255, 255, 255, 0.70);
+               bottom: 0;
+               content: '';
+               left: 0;
+               pointer-events: none;
+               position: absolute;
+               right: 0;
+               top: 0;
+               z-index: -5;
+          }
+     }
+}
+
+#demo {
+     margin: 0 2.5rem;
+
+     .cards {
+
+          .twemoji {
+               font-size: 3rem;
+               margin-bottom: 8px;
+          }
+
+          ul li {
+               align-items: center;
+               display: flex;
+               flex-direction: column;
+               font-size: 1.8rem;
+               height: 300px;
+               justify-content: center;
+          }
+     }
+}
+
+#learning {
+     margin: 2.5rem;
+
+     .cards {
+
+          ul li {
+               background-color: var(--tertiary-colour);
+               border: none;
+
+               &:hover {
+                    box-shadow: none;
+               }
+          }
+     }
+}
+
+.prefooter {
+     align-items: flex-start;
+     display: flex;
+     flex-direction: row;
+     gap: 2rem;
+     justify-content: center;
+     margin-top: 1.3rem;
+     margin-bottom: 0.5rem;
+     text-align: center;
+
+     div {
+          img {
+               height: 1.2rem;
+          }
+     }
+
+     div:last-child {
+          img {
+               height: 1.5rem;
+          }
+     }
+}
+
+.faq-container {
+     position: relative;
+
+     .faq {
+          background: var(--background-colour);
+          border: 2px solid var(--primary-colour);
+          border-radius: 5px;
+          bottom: 50px;
+          opacity: 0;
+          padding: 20px;
+          position: fixed;
+          right: 20px;
+          transition: opacity 0.3s, visibility 0.3s;
+          visibility: hidden;
+          width: 300px;
+          z-index: 999;
+
+          h3 {
+               color: var(--primary-colour);
+               font-family: var(--general-serif);
+          }
+     }
+
+     #faq-toggle:checked+.question-icon .icon.question {
+          opacity: 0;
+     }
+
+     #faq-toggle:checked+.question-icon .icon.close {
+          opacity: 1;
+     }
+
+     #faq-toggle:checked~.faq {
+          opacity: 1;
+          visibility: visible;
+     }
+
+     .question-icon {
+          align-items: center;
+          bottom: 20px;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          position: fixed;
+          right: 20px;
+          width: 50px;
+          z-index: 1000;
+
+          .icon {
+               font-size: 1rem;
+               position: absolute;
+               transition: opacity 0.3s;
+          }
+
+          .icon.question {
+               opacity: 1;
+          }
+
+          .icon.close {
+               opacity: 0;
+          }
+     }
+}
+
+.visually-hidden {
+     height: 1px;
+     left: -9999px;
+     overflow: hidden;
+     position: absolute;
+     width: 1px;
+}

content/assets/js/index.js

@@ -1,5 +1,5 @@
 // INDEX.js
-// Manages the animations on the home page
+// Manages the animations on the homepage
 
 document.addEventListener('DOMContentLoaded', function () {
      // Register the GSAP plugin to use