Add initial cards concept

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright © 2025 Michael Pivato
+Copyright © 2023 Michael Pivato
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

index.html

@@ -54,9 +54,6 @@
             <li>
               <a class="secondary" href="#depthprediction">Depth Prediction</a>
             </li>
-            <li>
-              <a class="contrast" href="#about">About</a>
-            </li>
           </ul>
         </nav>
       </aside>
@@ -75,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">
@@ -85,8 +117,12 @@
           <ul>
             <li>
               Design, maintain and implement modern solutions in various
-              internal and client-facing products, primarily relating to the
-              enterprise costing product (PPM).
+              products, primarily the enterprise costing product (PPM).
+            </li>
+            <li>
+              Create and maintain various front- and back-end components to
+              support consistent theming, quality, and developer experience
+              across PPM and the billing product (PBRC).
             </li>
             <li>Respond to internal and client feedback to improve PPM.</li>
             <li>Develop automated tests to improve code quality.</li>
@@ -95,18 +131,18 @@
           <h4>Key Achievements</h4>
           <ul>
             <li>
-              Significant contributions to PPM, including rewriting many Java
-              Swing components to work natively in the browser.
+              Significant contributions to PPM, including designing and
+              implementing shared libraries for use in other teams.
             </li>
             <li>
-              Reduced time for a data transmission service by a factor of 10x
-              (e.g. 7.5GB file went from 50 minutes to 5 minutes for data
-              upload).
+              Create and setup front-end and associated web server back-end
+              components on PPM AND PBRC, as well as internal products.
             </li>
             <li>
               Created the PowerAnalytics product within the PPM reporting
-              framework, which improved the speed and functionality of a PowerBI
-              implementation by another team that went over budget.
+              framework, which improved the speed and functionality of an
+              implementation in PowerBI by another team that experienced cost
+              blowouts.
             </li>
           </ul>
           <details id="powerhealth">
@@ -138,11 +174,10 @@
                 that is now in production use and enjoyed by clients.
               </li>
               <li>
-                Create front-end and associated web server back-end components
-                on the costing and billing products, as well as internal
-                products such as the licensing service.
+                Create and setup front-end and associated web server back-end
+                components on the costing and billing products, as well as
+                internal products.
               </li>
-              <li>Migrate the PPM build system from a Ant to Gradle.</li>
             </ul>
           </details>
           <details id="dstgroup">
@@ -374,20 +409,8 @@
             this large, or specifically computer vision related models.
           </p>
         </section>
-        <section id="about">
-          <h2>About</h2>
-          <p>
-            Licensed under the
-            <a href="https://gitea.michaelpivato.dev/">MIT</a> license.
-          </p>
-          <p>
-            Inspired by a
-            <a href="https://motherfuckingwebsite.com">motherfuckingwebsite</a>
-            - no JavaScript or framework was used to create this resume.
-          </p>
-        </section>
         <footer class="container">
-          <small>Michael Pivato • 2026</small>
+          <small>Michael Pivato • 2025</small>
         </footer>
       </div>
     </main>

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);