website redesign

Author: 5iri

components/Achievements/Achievements.module.scss

@@ -1,48 +1,60 @@
 @import '../variables';
 
+.achievements {
+  width: min(1200px, 92%);
+  margin: 0 auto;
+  padding-bottom: clamp(2.2rem, 5vw, 4rem);
+}
+
 .achYear {
-  width: 100%;
-  margin: 50px auto;
+  margin-top: clamp(1.2rem, 3vw, 2rem);
 
   h3 {
     text-align: center;
-    width: 40%;
-    margin: auto;
-    color: $light;
-    font-size: 1.8rem;
-    border-bottom: 2px solid $light;
-
-    padding: {
-      bottom: 10px;
-    }
+    width: fit-content;
+    margin: 0 auto;
+    color: #2a2928;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.72rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    border: 1px dashed rgba(42, 41, 40, 0.34);
+    border-radius: 999px;
+    padding: 0.45rem 0.8rem;
   }
 
   .achList {
+    margin-top: 0.85rem;
     width: 100%;
-    padding: 1em;
-
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 0.9rem;
 
     .ach {
-      width: 300px;
-      height: 360px;
-      margin: 30px;
+      @include tech-card;
+      min-height: 340px;
+      padding: 0.75rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
 
-      // background-color: rebeccapurple;
       .achImg {
-        height: 70%;
-
-        background-size: contain;
+        width: 100%;
+        aspect-ratio: 4 / 3;
+        border-radius: 10px;
+        background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
+        border: 1px solid rgba(42, 41, 40, 0.12);
       }
 
       .achName {
-        padding-top: 10px;
-        height: 30%;
-        text-align: center;
+        margin-top: 0.7rem;
+        text-align: left;
+        color: #2a2928;
+        font-family: 'Inter', sans-serif;
+        font-size: 0.95rem;
+        line-height: 1.55;
       }
     }
   }

components/Activities/Activities.module.scss

@@ -1,8 +1,8 @@
 @import '../variables';
 
 .projectBar {
-  width: 95vw;
-  max-width: none;
+  width: min(1200px, 92%);
+  max-width: 1200px;
   padding: 1em 1.5em;
   margin: 1.5em auto 0;
 
@@ -13,8 +13,9 @@
   justify-content: space-between;
   align-items: center;
 
-  border: 2px solid $light;
-  border-radius: 20px;
+  border: 1px solid rgba(42, 41, 40, 0.2);
+  border-radius: 999px;
+  background: rgba(255, 252, 243, 0.86);
 
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -27,24 +28,27 @@
   flex: 1 1 0;
   padding: 0.7em 0.5em;
   text-align: center;
-  font-size: 1.1rem;
+  font-size: 0.68rem;
+  font-family: 'IBM Plex Mono', monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #2a2928;
   transition: all 0.3s ease;
-  border-radius: 10px;
+  border-radius: 999px;
   cursor: pointer;
   white-space: nowrap;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(42, 41, 40, 0.08);
     transform: translateY(-2px);
   }
 }
 
 .activeTag {
   background-color: $light;
-  color: $white;
-  font-weight: bold;
-  transform: scale(1.05);
-  box-shadow: 0 4px 15px rgba(247, 28, 50, 0.4);
+  color: #fbf8ef;
+  transform: scale(1.02);
+  box-shadow: 0 8px 18px rgba(198, 72, 44, 0.28);
 }
 
 .carousel {
@@ -53,7 +57,7 @@
   align-items: center;
   justify-content: center;
   height: calc(100vh - 200px);
-  max-width: 95vw;
+  max-width: min(1200px, 92%);
   margin: 0 auto;
   padding: 1rem 4rem;
 }
@@ -65,7 +69,7 @@
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: $white;
+  color: #2a2928;
   font-size: 2rem;
   cursor: pointer;
   z-index: 10;
@@ -155,14 +159,16 @@
   overflow-y: auto;
 
   h2 {
-    font-size: 1.6rem;
+    font-size: 1.65rem;
+    font-family: 'Fraunces', serif;
+    color: #2a2928;
     margin-bottom: 0.5rem;
   }
 
   p {
-    font-size: 1rem;
+    font-size: 0.95rem;
     line-height: 1.75;
-    opacity: 0.85;
+    color: #4a4948;
   }
 }
 
@@ -173,7 +179,7 @@
 
   a {
     font-size: 1.2rem;
-    color: $white;
+    color: #2a2928;
     transition: color 0.2s;
 
     &:hover {
@@ -226,7 +232,7 @@
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  border: 1px solid rgba($white, 0.5);
+  border: 1px solid rgba(42, 41, 40, 0.32);
   background: transparent;
   cursor: pointer;
   padding: 0;

components/Alumni/Alumni.module.scss

@@ -1,75 +1,92 @@
 @import '../variables';
 
 .filter {
+  width: min(1200px, 92%);
+  margin: 1.4rem auto 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 2rem;
-  gap: 2rem;
+  padding: 0;
+  gap: 0.75rem;
 
   .search {
-    background-color: #0d0d0d;
-    border: 1px solid #0d0d0d;
+    background: rgba(255, 252, 243, 0.9);
+    border: 1px solid rgba(42, 41, 40, 0.2);
     flex: 1;
-    padding: 0.75rem;
-    font-size: 1.35rem;
-    font-family: 'Tomorrow', sans-serif;
-    border-radius: 5px;
-    color: #f5f5f5;
+    padding: 0.72rem 0.95rem;
+    font-size: 0.96rem;
+    font-family: 'Inter', sans-serif;
+    border-radius: 999px;
+    color: #2a2928;
   }
 
   .dropdown {
     position: relative;
 
     button {
-      font-size: 1.35rem;
-      font-family: 'Tomorrow', sans-serif;
-      border-radius: 5px;
-      color: #f5f5f5;
-      background-color: #0d0d0d;
-      border: 1px solid #0d0d0d;
-      padding: 0.75rem;
+      font-size: 0.68rem;
+      font-family: 'IBM Plex Mono', monospace;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      border-radius: 999px;
+      color: #2a2928;
+      background: rgba(255, 252, 243, 0.9);
+      border: 1px solid rgba(42, 41, 40, 0.2);
+      padding: 0.75rem 0.94rem;
       cursor: pointer;
     }
 
     .options {
       position: absolute;
-      margin-top: 2rem;
-      z-index: 3;
-      font-family: 'Tomorrow', sans-serif;
+      right: 0;
+      margin-top: 0.56rem;
+      z-index: 6;
+      font-family: 'IBM Plex Mono', monospace;
       display: none;
       flex-direction: column;
-      width: 10rem;
+      width: 11rem;
       max-height: 20rem;
       overflow-y: scroll;
-      border-radius: 5px;
+      border-radius: 14px;
+      border: 1px solid rgba(42, 41, 40, 0.18);
+      background: rgba(255, 252, 243, 0.98);
+      box-shadow: 0 16px 34px rgba(42, 41, 40, 0.14);
 
       .option {
-        background-color: #0d0d0d;
-        color: #f5f5f5;
-        padding: 0.75rem;
-        font-size: 1rem;
+        color: #2a2928;
+        padding: 0.74rem;
+        font-size: 0.65rem;
+        letter-spacing: 0.06em;
+        border-top: 1px solid rgba(42, 41, 40, 0.09);
         width: 100%;
         text-align: center;
       }
 
+      .option:first-child {
+        border-top: 0;
+      }
+
       .option:hover {
-        background-color: #1a1a1a;
+        background: rgba(42, 41, 40, 0.08);
         cursor: pointer;
       }
     }
   }
 
   @media (max-width: 650px) {
+    margin-top: 1rem;
     flex-direction: column;
+    align-items: stretch;
   }
 }
 
 .cardGrp {
+  width: min(1200px, 92%);
+  margin: 0.75rem auto 0;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  gap: 2rem;
-  padding: 2rem;
+  gap: 1rem;
+  padding: 0 0 clamp(2rem, 5vw, 3.8rem);
 
   @media (max-width: 850px) {
     grid-template-columns: 1fr 1fr;
@@ -81,6 +98,6 @@
 }
 
 .selYear {
-  margin-left: 1.25rem;
-  color: #f5f5f5;
+  margin-left: 0.5rem;
+  color: #706f6b;
 }