Add initial cards concept

index.html

@@ -72,6 +72,41 @@
           successfully implemented many applications that have been used and
           loved by clients.
         </p>
+        <div class="special-card-wrapper">
+          <a href="#career" class="secondary special-card">
+            <article>
+              <header>Career</header>
+            </article>
+          </a>
+          <a href="#education" class="secondary special-card">
+            <article>
+              <header>Education</header>
+            </article>
+          </a>
+          <a href="#skills" class="secondary special-card">
+            <article>
+              <header>Skills</header>
+            </article>
+          </a>
+          <div class="special-card">
+            <article>
+              <header>
+                <a href="#hobbies" class="secondary">Hobby Projects</a>
+              </header>
+              <div>
+                <a href="#bufpiv">
+                  <button class="contrast">Buf Piv</button>
+                </a>
+                <a href="#picar">
+                  <button class="contrast">PiCar</button>
+                </a>
+                <a href="#depthprediction">
+                  <button class="contrast">Depth Prediction</button>
+                </a>
+              </div>
+            </article>
+          </div>
+        </div>
         <section id="career">
           <h2>Career</h2>
           <hgroup id="telstrahealth">

website.scss

@@ -12,14 +12,14 @@
     "forms/input-file": false,
     "forms/input-range": false,
     "forms/input-search": false,
-    "components/card": false,
+    "components/card": true,
     "components/dropdown": false,
     "components/loading": false,
     "components/group": false,
     "components/modal": false,
     "components/progress": false,
     "components/tooltip": false,
-    "layout/grid": false,
+    "layout/grid": true,
     "layout/landmarks": false,
     "layout/overflow-auto": false,
     "utilities/accessibility": false,
@@ -27,10 +27,71 @@
   )
 );
 
+@use "node_modules/@picocss/pico/scss/colors" as *;
+
 .closed-on-mobile {
   display: none;
 }
 
+$animation-length: 0.4s;
+.special-card {
+  filter: drop-shadow(0 0 1rem $cyan-500);
+  margin: 1.5rem;
+  cursor: pointer;
+  transition: scale $animation-length;
+  opacity: 0;
+  min-width: 9rem;
+  max-width: 9rem;
+  animation: fadeIn 1s forwards;
+  @for $i from 1 through 4 {
+    &:nth-child(#{$i}n) {
+      // TODO: Delay last stuff less than earlier stuff
+      animation-delay: #{$i * 0.1}s;
+    }
+  }
+  &:hover {
+    scale: 1.02;
+
+    & > article > div {
+      // Set to something larger than button
+      // since % doesn't work
+      max-height: 400px;
+      height: fit-content;
+    }
+  }
+
+  button {
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  & > article > div {
+    display: block;
+    max-height: 0;
+    overflow: hidden;
+    // Close it faster
+    transition: max-height 0.2 * $animation-length;
+  }
+
+  &:hover > article > div {
+    transition: max-height $animation-length;
+  }
+}
+
+.special-card-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @media (min-width: 992px) {
   main.responsive-nav {
     --block-spacing-horizontal: calc(var(--spacing) * 1.75);