Design improvements on mobile, updated technology section

src/static/images/technology/nginx.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_nginx</title><path d="M15.948,2h.065a10.418,10.418,0,0,1,.972.528Q22.414,5.65,27.843,8.774a.792.792,0,0,1,.414.788c-.008,4.389,0,8.777-.005,13.164a.813.813,0,0,1-.356.507q-5.773,3.324-11.547,6.644a.587.587,0,0,1-.657.037Q9.912,26.6,4.143,23.274a.7.7,0,0,1-.4-.666q0-6.582,0-13.163a.693.693,0,0,1,.387-.67Q9.552,5.657,14.974,2.535c.322-.184.638-.379.974-.535" style="fill:#019639"/><path d="M8.767,10.538q0,5.429,0,10.859a1.509,1.509,0,0,0,.427,1.087,1.647,1.647,0,0,0,2.06.206,1.564,1.564,0,0,0,.685-1.293c0-2.62-.005-5.24,0-7.86q3.583,4.29,7.181,8.568a2.833,2.833,0,0,0,2.6.782,1.561,1.561,0,0,0,1.251-1.371q.008-5.541,0-11.081a1.582,1.582,0,0,0-3.152,0c0,2.662-.016,5.321,0,7.982-2.346-2.766-4.663-5.556-7-8.332A2.817,2.817,0,0,0,10.17,9.033,1.579,1.579,0,0,0,8.767,10.538Z" style="fill:#fff"/></svg>

src/static/style/desktop.css

@@ -1,7 +1,7 @@
 @media (min-width: 1000px) {
     #technology{
         background-position-x: 35vw;
-        height: 75vh;
+        height: fit-content;
         min-height: 75vh;
     }
 
@@ -9,14 +9,16 @@
         background-position-y: -180px;
         background-position-x: -200px;
         background-size: auto;
+        height: fit-content;
         min-height: 75vh;
-        height: 75vh;
     }
 
     .text{
         width: 50%;
         height: 100%;
         align-items: flex-start;
+        height: fit-content;
+        min-height: 75vh
     }
 
     .text-right{
@@ -29,6 +31,13 @@
         margin-right: auto;
     }
 
+    .gradient {
+        display: flex;
+        align-items: flex-end;
+        background-image: linear-gradient(to top, rgba(23, 22, 20, 1) 70%, rgba(23, 22, 20, 0));
+        min-height: 75vh;
+    }
+
     .gradient-left{
         background-image: linear-gradient(to right, rgba(23, 22, 20, 1), rgba(23, 22, 20, 1), rgba(23, 22, 20, 0));
     }
@@ -71,4 +80,16 @@
     #certs>a {
         max-width: 15%;
     }
+
+    #techlogos {
+        max-height: 40%;
+    }
+
+    #techlogos>a{
+        max-width: 5%;
+    }
+
+    .spacer {
+        display: none;
+    }
 }

src/static/style/mobile.css

@@ -48,33 +48,32 @@ footer h2, section h2{
 
 #technology{
     background-image: url(../images/njr-code.png);
-    height: 100vh;
+    height: fit-content;
     margin: 0;
     background-position: center;
     background-position-x: -400px;
+    background-position-y: 400px;
 }
 
 #motorsport{
     background-image: url(../images/topfuel_startline.jpg.jpeg);
-    height: 100vh;
+    height: fit-content;
     margin: 0;
     background-position: center;
     background-position-x: -65px;
-    background-position-y: -90px;
+    background-position-y: -100px;
     background-size: 200%;
 }
 
 .gradient{
     width: 100%;
-    height: 100%;
-    background-image: linear-gradient(to top, rgba(23, 22, 20, 1) 70%, rgba(23, 22, 20, 0));
-    display: flex;
-    align-items: flex-end;
+    height: fit-content;
 }
 
 .text{
-    height: 70%;
+    height: fit-content;
     width: 100%;
+    background-color: rgba(23, 22, 20, 1);
 }
 
 .text>div{
@@ -227,7 +226,7 @@ pre{
     display: flex;
     flex-direction: row;
     justify-content: center;
-    padding-top: 20px;
+    padding: 20px 0;
 }
 
 #certs>a {
@@ -236,4 +235,27 @@ pre{
 
 #certs>a>img {
     width: 100%;
+}
+
+#techlogos {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    max-height:30%;
+}
+
+#techlogos>a {
+    max-width: 10%;
+    padding: 10px;
+}
+
+#techlogos>a>img {
+    width: 100%;
+}
+
+.spacer {
+    height: 30vh;
+    width: 100%;
+    background-image: linear-gradient(to top, rgba(23, 22, 20, 1) 10%, rgba(23, 22, 20, 0));
 }