Improve UI look in projects tab and add shadow to cards

Author: CosmeValera

sass/projects.scss

@@ -6,6 +6,10 @@ h2.presentation-text {
     text-wrap: balance;
 }
 
+span.colorful {
+    color: $color-fg-secondary;
+}
+
 .filter-buttons {
     display: flex;
     justify-content: center;
@@ -47,6 +51,7 @@ h2.presentation-text {
             position: relative;
             overflow: hidden;
             border-radius: 3%;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 
             a {
                 text-decoration: none;
@@ -64,7 +69,7 @@ h2.presentation-text {
                 left: 0;
                 width: 100%;
                 height: 100%;
-                background-color: rgba(0, 96, 96, 0.9); /* When activated 0.9 opacity */
+                background-color: rgba(0, 96, 96, 0.85); /* When activated 0.85 opacity */
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
@@ -85,7 +90,8 @@ h2.presentation-text {
                 }
                 .learn-more-button {
                     @include styled-button($color-fg-secondary, $color-fg-secondary);
-                    margin: 0 1rem;
+                    margin: 0 3rem;
+                    border-radius: 9999px;
                 }
             }
         }
@@ -94,11 +100,17 @@ h2.presentation-text {
             .project-details-overlay {
                 opacity: 1;
                 border-radius: 3%;
+                border: 6px inset transparent;
+                border-image: linear-gradient(60deg, #ffffffcc, #4ff5f5cc) 1;
             }
 
             .project-image {
                 transform: translateY(20px);
                 transition: transform 0.5s;
+                img {
+                    filter: blur(6px);
+                    -webkit-filter: blur(6px);
+                }
             }
         }
     }

templates/projects.html

@@ -30,7 +30,7 @@
   </nav>
   <hr>
 
-  <h2 class="presentation-text">Here are some of my projects:</h2>
+  <h2 class="presentation-text"><span class="colorful">Check</span> Out <span class="colorful">Some</span> of <i>My <span class="colorful">Work:</span></i></h2>
 
   <div class="filter-buttons">
     <button class="filter-button selected-filter" data-filter="All">All</button>
@@ -44,7 +44,7 @@ <h2 class="presentation-text">Here are some of my projects:</h2>
 
   <div class="row project-cards-row">
 
-    <div class="project-card col-12 col-md-6 col-lg-4 animate__animated animate__bounceInLeft">
+    <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInLeft">
       <div class="project-image">
         <img src="{{ get_url(path='images/FitCal.png') }}" alt="FitCal" />
         <div class="project-details-overlay">
@@ -55,7 +55,7 @@ <h3 class="card-title">FitCal</h3>
       </div>
     </div>
 
-    <div class="project-card col-12 col-md-6 col-lg-4 animate__animated animate__bounceIn">
+    <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceIn">
       <div class="project-image">
         <img src="{{ get_url(path='images/Sympho.png') }}" alt="Sympho" />
         <div class="project-details-overlay">
@@ -66,7 +66,7 @@ <h3 class="card-title">Sympho</h3>
       </div>
     </div>
 
-    <div class="project-card col-12 col-md-6 col-lg-4 animate__animated animate__bounceInRight">
+    <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInRight">
       <div class="project-image">
         <img src="{{ get_url(path='images/LeagueOfPokemon/AI4Crop.png') }}" alt="League of Pokemon" />
         <div class="project-details-overlay">
@@ -77,7 +77,7 @@ <h3 class="card-title">League of Pokemon</h3>
       </div>
     </div>
 
-    <div class="project-card col-12 col-md-6 col-lg-4 animate__animated animate__bounceInLeft">
+    <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInLeft">
       <div class="project-image">
         <img src="{{ get_url(path='images/AndroidDepartmentQuest.jpg') }}" alt="AndroidDepartmentQuest" />
         <div class="project-details-overlay">
@@ -88,7 +88,7 @@ <h3 class="card-title">Department Quest</h3>
       </div>
     </div>
 
-    <div class="project-card col-12 col-md-6 col-lg-4 animate__animated animate__bounceIn">
+    <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceIn">
       <div class="project-image">
         <img src="{{ get_url(path='images/Inventory.png') }}" alt="Inventory" />
         <div class="project-details-overlay">
@@ -99,7 +99,7 @@ <h3 class="card-title">Inventory</h3>
       </div>
     </div>
 
-    <div class="project-card col-12 col-md-6 col-lg-4 animate__animated animate__bounceInRight">
+    <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInRight">
       <div class="project-image">
         <img src="{{ get_url(path='images/CoreLink2.png') }}" alt="CoreLink" />
         <div class="project-details-overlay">