updated projects CSS

static/css/projects.css

@@ -1,35 +1,66 @@
 .projects {
     width: 90vw;
-    min-height: 92vh;
     margin: auto;
     padding-top: 4vh;
 }
 
 .project {
+    height: 25vh;
+    width: 90%;
     background-color: var(--background2);
     border-radius: 10px;
     color: var(--text);
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     align-items: center;
-    padding: 1%;
-    padding-bottom: 2px;
     text-decoration: none;
-    margin-bottom: 10px;
 }
 
 .imgtitle {
-    width: 95%;
+    width: 100%;
+    height: 60%;
     position: relative;
 }
 
-.imgtitle img {
+.backgroundcontainer {
+    overflow: hidden;
     width: 100%;
     height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
     border-radius: 10px;
 }
 
+.background {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+    filter: blur(5px);
+    /*damn apple*/
+    -webkit-filter: blur(5px);
+}
+
+.foregroundcontainer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    object-fit: contain;
+}
+
+.foreground {
+    max-width: 95%;
+    max-height: 95%;
+    object-fit: contain;
+}
+
 .overlay {
     width: 100%;
     height: 100%;
@@ -72,7 +103,7 @@
         gap: 10px;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         justify-items: center;
-        align-items: center;
+        align-items: stretch;
     }
 
     .project {
@@ -98,6 +129,7 @@
     }
 
     .project {
+        height: 80vh;
         width: 90vw;
         flex-shrink: 0;
         scroll-snap-align: start;

templates/aboutme.html

@@ -1,6 +1,4 @@
-{% if homepage %}
 <div class="aboutmecontainer">
-    {% endif %}
     <div class="aboutme{{'full' if not homepage}}">
         <div class="aboutmelogocontainer">
             <img src="../static/img/logo.png" alt="logo" class="aboutmelogo">
@@ -33,5 +31,5 @@ <h1 class="aboutmename">Hi, I'm Joel</h1>
             </g>
         </svg>
     </div>
-</div>
-{% endif %}
+    {% endif %}
+</div>

templates/projects.html

@@ -2,7 +2,12 @@
     {% for project in projects %}
     <a href="/projects/{{project.id}}" class="project">
         <div class="imgtitle">
-            <img src="{{ project.image }}" alt="{{ project.title }}">
+            <div class="backgroundcontainer">
+                <img class="background" src="{{ project.image }}" alt="{{ project.title }}">
+            </div>
+            <div class="foregroundcontainer">
+                <img class="foreground" src="{{ project.image }}" alt="{{ project.title }}">
+            </div>
             <div class="overlay">
                 <h1>{{ project.title }}</h1>
             </div>