From c890b560c0529948533799e412ed3e71f7829c0d Mon Sep 17 00:00:00 2001
From: Zach <duong.nguyen@rochester.edu>
Date: Thu, 19 Oct 2023 22:40:00 -0400
Subject: [PATCH 1/2] Add the Past Projects section

---
 index.html | 37 ++++++++++++++++++++++++++++++++++---
 styles.css | 46 +++++++++++++++++++++++++++++-----------------
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index ebc151e..060a2cd 100644
--- a/index.html
+++ b/index.html
@@ -126,8 +126,8 @@ <h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
         </div>
       </div>
     </div>
-    <div id="particles-js" class="relative px-5 bg-deep-purple">
-      <div class="flex flex-col items-center justify-center pt-16 gap-10 bg-deep-purple">
+    <div id="particles-js" class="relative flex flex-col items-center px-5 bg-deep-purple">
+      <div class="flex flex-col items-center justify-center py-16 gap-10 bg-deep-purple">
         <h2 class="text-5xl">
           <div id="prizes" class="absolute -top-20"></div>
           Prizes
@@ -143,7 +143,38 @@ <h2 class="text-5xl">
           <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-amazon-fire-stick bg-violet bg-[bottom_-16px_right_0px]"><h3>Amazon Fire Stick</h3></div>
         </div>
       </div>
-      <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
+      <div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
+        <h2 class="text-5xl text-center">
+          <div id="past-projects" class="absolute -top-20"></div>
+          Past projects
+        </h2>
+        <div class="flex flex-row flex-wrap justify-center pt-5 pb-12 lg:pt-1 gap-12">
+          <a href="https://devpost.com/software/goodsoup" target="_blank" class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale overflow-hidden">
+            <img class="w-full mx-auto mb-9" src="img/projects/goodsoup.png" />
+            <h3 class="mb-4 text-2xl text-center font-display">GoodSoup</h3>
+            <p class="px-6 text-center">
+              The dining hall recipe allergen analysis.
+            </p>
+          </a>
+          <a href="https://devpost.com/software/project-eleos" target="_blank" class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale overflow-hidden">
+            <img class="w-full mx-auto mb-9" src="img/projects/project-eleos.png" />
+            <h3 class="mb-4 text-2xl text-center font-display">Project Eleos</h3>
+            <p class="px-6 text-center">
+              Project Eleos is our attempt at solving the issue of computational
+              power and its availability to the average person.
+            </p>
+          </a>
+          <a href="https://devpost.com/software/2-tris" target="_blank" class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale overflow-hidden">
+            <img class="w-full mx-auto mb-9" src="img/projects/2-tris.jpg" />
+            <h3 class="mb-4 text-2xl text-center font-display">2-Tris</h3>
+            <p class="px-6 text-center">
+              A 2d co-op shooter version of Tetris featuring 3 classically
+              composed pieces.
+            </p>
+          </a>
+        </div>
+      </div>
+      <div class="flex flex-col items-center pb-24 pt-11 box-border gap-12 lg:gap-20">
         <h2 class="text-5xl">
           <div id="faq" class="absolute -top-20"></div>
           FAQS
diff --git a/styles.css b/styles.css
index 584d7b1..d59526b 100644
--- a/styles.css
+++ b/styles.css
@@ -745,6 +745,10 @@ h1, h2, h3, h4, h5, h6 {
   margin-top: 0.5rem;
 }
 
+.mb-9 {
+  margin-bottom: 2.25rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -2171,11 +2175,6 @@ h1, h2, h3, h4, h5, h6 {
   padding-right: 2.25rem;
 }
 
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
 .py-24 {
   padding-top: 6rem;
   padding-bottom: 6rem;
@@ -2191,6 +2190,15 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.25rem;
 }
 
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
 .pb-7 {
   padding-bottom: 1.75rem;
 }
@@ -2203,14 +2211,26 @@ h1, h2, h3, h4, h5, h6 {
   padding-top: 8rem;
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
-}
-
 .pt-5 {
   padding-top: 1.25rem;
 }
 
+.pb-24 {
+  padding-bottom: 6rem;
+}
+
+.pt-20 {
+  padding-top: 5rem;
+}
+
+.pt-11 {
+  padding-top: 2.75rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3101,10 +3121,6 @@ canvas {
     gap: 5rem;
   }
 
-  .lg\:self-start {
-    align-self: flex-start;
-  }
-
   .lg\:bg-groundboi {
     background-image: url('img/sticker2-no_border.png');
   }
@@ -3190,10 +3206,6 @@ canvas {
 }
 
 @media (min-width: 1280px) {
-  .xl\:relative {
-    position: relative;
-  }
-
   .xl\:block {
     display: block;
   }

From f25830dd4a482cc3fc60f400164cf6b1ba0d9c7b Mon Sep 17 00:00:00 2001
From: Zach <duong.nguyen@rochester.edu>
Date: Thu, 19 Oct 2023 23:05:47 -0400
Subject: [PATCH 2/2] Add the Past Projects section item on the navbar

---
 index.html |   9 ++--
 styles.css | 134 ++++++++++++++++++++++++-----------------------------
 2 files changed, 65 insertions(+), 78 deletions(-)

diff --git a/index.html b/index.html
index 060a2cd..b1cc8eb 100644
--- a/index.html
+++ b/index.html
@@ -12,13 +12,14 @@
   <nav class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform md:px-12 bg-deep-purple translate-y-0">
     <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
     <div>
-      <input class="absolute z-50 w-8 h-8 opacity-0 peer md:hidden" type="checkbox" />
-      <div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 md:hidden"></div>
-      <img class="relative z-40 md:hidden" src="img/icons/hamburger.png" />
-      <ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
+      <input class="absolute z-50 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
+      <div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 lg:hidden"></div>
+      <img class="relative z-40 lg:hidden" src="img/icons/hamburger.png" />
+      <ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 pb-16 text-3xl font-bold landscape:max-lg:overflow-auto transition-transform gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-10 lg:transition-none">
         <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#about">About</a></li>
         <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#tracks">Tracks</a></li>
         <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#prizes">Prizes</a></li>
+        <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#past-projects">Past projects</a></li>
         <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#faq">FAQ</a></li>
         <li class="hidden text-right hover:scale-110 transition-transform origin-center lg:block"><a href="#sponsoring">Sponsoring</a></li>
       </ul>
diff --git a/styles.css b/styles.css
index d59526b..1ed490b 100644
--- a/styles.css
+++ b/styles.css
@@ -741,14 +741,14 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 1.25rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mb-9 {
   margin-bottom: 2.25rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -2175,9 +2175,9 @@ h1, h2, h3, h4, h5, h6 {
   padding-right: 2.25rem;
 }
 
-.py-24 {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
 }
 
 .py-4 {
@@ -2190,21 +2190,24 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.25rem;
 }
 
-.py-16 {
-  padding-top: 4rem;
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pb-16 {
   padding-bottom: 4rem;
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
+.pb-24 {
+  padding-bottom: 6rem;
 }
 
 .pb-7 {
   padding-bottom: 1.75rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
+.pt-11 {
+  padding-top: 2.75rem;
 }
 
 .pt-32 {
@@ -2215,22 +2218,6 @@ h1, h2, h3, h4, h5, h6 {
   padding-top: 1.25rem;
 }
 
-.pb-24 {
-  padding-bottom: 6rem;
-}
-
-.pt-20 {
-  padding-top: 5rem;
-}
-
-.pt-11 {
-  padding-top: 2.75rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2975,33 +2962,10 @@ canvas {
 }
 
 @media (min-width: 768px) {
-  .md\:relative {
-    position: relative;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-
-  .md\:h-fit {
-    height: -moz-fit-content;
-    height: fit-content;
-  }
-
   .md\:w-80 {
     width: 20rem;
   }
 
-  .md\:w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  .md\:translate-x-0 {
-    --tw-translate-x: 0px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
   .md\:flex-row {
     flex-direction: row;
   }
@@ -3014,10 +2978,6 @@ canvas {
     gap: 0px;
   }
 
-  .md\:gap-16 {
-    gap: 4rem;
-  }
-
   .md\:gap-2 {
     gap: 0.5rem;
   }
@@ -3026,29 +2986,11 @@ canvas {
     gap: 0.625rem;
   }
 
-  .md\:bg-deep-purple {
-    --tw-bg-opacity: 1;
-    background-color: rgb(27 0 44 / var(--tw-bg-opacity));
-  }
-
-  .md\:p-0 {
-    padding: 0px;
-  }
-
   .md\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
   }
 
-  .md\:text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-
-  .md\:transition-none {
-    transition-property: none;
-  }
-
   @media not all and (min-width: 1024px) {
     .md\:max-lg\:relative {
       position: relative;
@@ -3089,6 +3031,15 @@ canvas {
     display: flex;
   }
 
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:h-fit {
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+
   .lg\:w-96 {
     width: 24rem;
   }
@@ -3097,10 +3048,20 @@ canvas {
     width: 999px;
   }
 
+  .lg\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .lg\:flex-\[0_0_454px\] {
     flex: 0 0 454px;
   }
 
+  .lg\:translate-x-0 {
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -3109,6 +3070,10 @@ canvas {
     gap: 0px;
   }
 
+  .lg\:gap-10 {
+    gap: 2.5rem;
+  }
+
   .lg\:gap-11 {
     gap: 2.75rem;
   }
@@ -3121,6 +3086,11 @@ canvas {
     gap: 5rem;
   }
 
+  .lg\:bg-deep-purple {
+    --tw-bg-opacity: 1;
+    background-color: rgb(27 0 44 / var(--tw-bg-opacity));
+  }
+
   .lg\:bg-groundboi {
     background-image: url('img/sticker2-no_border.png');
   }
@@ -3137,6 +3107,10 @@ canvas {
     background-repeat: no-repeat;
   }
 
+  .lg\:p-0 {
+    padding: 0px;
+  }
+
   .lg\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -3195,6 +3169,10 @@ canvas {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
+
+  .lg\:transition-none {
+    transition-property: none;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -3224,3 +3202,11 @@ canvas {
     }
   }
 }
+
+@media (orientation: landscape) {
+  @media not all and (min-width: 1024px) {
+    .landscape\:max-lg\:overflow-auto {
+      overflow: auto;
+    }
+  }
+}