noobs

Author: dustinusey

frontend/dist/images/brian.png

@@ -1 +1 @@
-@import "header", "dropdown", "project-list", "resource-list";
+@import "header", "dropdown", "project-list", "resource-list", "meet-the-noobs";

frontend/dist/images/dustin.png

@@ -0,0 +1,44 @@
+.meet-the-noobs {
+  margin-top: auto;
+  header {
+    @include flex(row, nowrap, center, center);
+    padding: 1rem;
+    font-size: 0.9rem;
+    font-weight: 300;
+  }
+  details {
+    padding: 1rem;
+    summary {
+      cursor: pointer;
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+    li {
+      @include flex(row, nowrap, flex-start, center);
+      transition: background 0.3s ease;
+      padding: 0.5rem;
+      cursor: default;
+      &:hover {
+        @include bg(var(--primary-bg));
+        img {
+          transform: scale(1.3);
+        }
+      }
+      img {
+        width: 25px;
+        margin-right: 1rem;
+        transition: transform 0.3s;
+      }
+      .group {
+        @include flex(column, nowrap, flex-start, flex-start);
+        p {
+          &:nth-child(1) {
+          }
+          &:nth-child(2) {
+            font-weight: 300;
+          }
+        }
+      }
+    }
+  }
+}

frontend/dist/images/rohald.png

@@ -53,6 +53,35 @@ <h1> Hold up!</h1>
             <ul class="resource-list" id="resourceList">
                 <!-- dynamic -->
             </ul>
+            <div class="meet-the-noobs">
+                <!-- <header>Developed by <i class="fa-solid fa-chevron-down"></i></header> -->
+                <details>
+                    <summary>Developed by</summary>
+                    <ul>
+                        <li>
+                            <img src="/frontend/dist/images/dustin.png">
+                            <div class="group">
+                                <p>Dustin Usey</p>
+                                <p class="sub">Frontend</p>
+                            </div>
+                        </li>
+                        <li>
+                            <img src="/frontend/dist/images/brian.png">
+                            <div class="group">
+                                <p>Brian Jenson</p>
+                                <p class="sub">Backend</p>
+                            </div>
+                        </li>
+                        <li>
+                            <img src="/frontend/dist/images/rohald.png">
+                            <div class="group">
+                                <p>Rohald van Merode</p>
+                                <p class="sub">Backend</p>
+                            </div>
+                        </li>
+                    </ul>
+                </details>
+            </div>
         </section>