Design improvements on mobile, updated technology section

src/.buildinfo.json

@@ -1,6 +1,6 @@
 {
     "tag": "jc-ng-localtest:",
-    "date": "2025-07-19",
+    "date": "2025-07-21",
-    "host": "jake-e580",
+    "host": "jake-pc",
     "user": "jake"
 }

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%;
+    height: fit-content;
-    background-image: linear-gradient(to top, rgba(23, 22, 20, 1) 70%, rgba(23, 22, 20, 0));
-    display: flex;
-    align-items: flex-end;
 }
 
 .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));
 }

src/templates/index.html

@@ -2,31 +2,57 @@
     <main>
         <section id="technology">
             <div class="gradient gradient-left">
+                <div class="spacer"></div>
                 <div class="text text-left">
                     <div>
                         <h2>Technology</h2>
                         <hr>
-                        <p>Working with technology is my day job, I currently specialise in:</p>
+                        <p>Technology is my day job. I design and build distributed systems for large companies around the world.</p>
-                        <ul>
+                        <p>
-                            <li>Linux (primarily RHEL & Debian based)</li>
+                            I also work with technology in my spare time, building systems for <a href="#motorsport">Nitro Junkie</a>, and for me to use personally. For example, the current iteration of this website is written in Python and deployed via a Jenkins pipeline to Google Cloud Run as a Docker container.
-                            <li>SCM with Git and Subversion</li>
+                        </p>
-                            <li>Big Data (Hadoop & Cloud storage)</li>
+                        <p>
-                            <li>Programming (Python, Bash & C#)</li>
+                            Below are some of the technologies I'm using most at the moment.
-                        </ul>
+                            My personal projects can also be found over on the <a href="/projects/">projects</a> page. Be aware though that if I'm able to write about a project here, it most likely wasn't done professionally so some may be a little rough around the edges.
-                        <p>I also run some services for personal use and occasionally write software. I may write about some of the services I run in the future. For now, my code can be found on <a href="https://github.com/jcharman">GitHub</a>.</p>
+                        </p>
+                        <div id="techlogos">
+                            <a href="https://ansible.com"><img src="/static/images/technology/ansible.png" /></a>
+                            <a href="https://aws.amazon.com/"><img src="/static/images/technology/aws.png" /></a>
+                            <a href="https://azure.microsoft.com/en-gb"><img src="/static/images/technology/azure.png" /></a>
+                            <a href="https://dotnet.microsoft.com/en-us/languages/csharp"><img src="/static/images/technology/csharp.png" /></a>
+                            <a href="https://www.debian.org/"><img src="/static/images/technology/debian.png" /></a>
+                            <a href="https://www.digitalocean.com/"><img src="/static/images/technology/digitalocean.png" /></a>
+                            <a href="https://www.docker.com/"><img src="/static/images/technology/docker.png" /></a>
+                            <a href="https://www.freeipa.org/"><img src="/static/images/technology/freeipa.png" /></a>
+                            <a href="https://cloud.google.com/"><img src="/static/images/technology/gcloud.png" /></a>
+                            <a href="https://git-scm.com/"><img src="/static/images/technology/git.png" /></a>
+                            <a href="https://www.grafana.com/"><img src="/static/images/technology/grafana.png" /></a>
+                            <a href="https://hadoop.apache.org/"><img src="/static/images/technology/hadoop.svg" /></a>
+                            <a href="https://hive.apache.org/"><img src="/static/images/technology/hive.svg" /></a>
+                            <a href="https://www.java.com/"><img src="/static/images/technology/java.png" /></a>
+                            <a href="https://www.jenkins.io/"><img src="/static/images/technology/jenkins.png" /></a>
+                            <a href="https://mariadb.org/"><img src="/static/images/technology/mariadb.png" /></a>
+                            <a href="https://nginx.org/"><img src="/static/images/technology/nginx.svg" /></a>
+                            <a href="https://www.proxmox.com/"><img src="/static/images/technology/proxmox.png" /></a>
+                            <a href="https://www.python.org/"><img src="/static/images/technology/python.png" /></a>
+                            <a href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux"><img src="/static/images/technology/redhat.png" /></a>
+                            <a href="https://rockylinux.org/"><img src="/static/images/technology/rocky.png" /></a>
+                            <a href="https://subversion.apache.org/"><img src="/static/images/technology/svn.svg" /></a>
+                        </div>
+                        <div id="certs">
+                            <a href="https://catalog-education.oracle.com/ords/certview/sharebadge?id=A6C9B3D3D21627EB9C2504395194FAF772E01412911D4ADC78063133D54579ED"><img src="/static/images/certs/OCIF2023CA.png" /></a>
+                        </div>
                         <div class="social">
                             <a class="button" href="https://www.linkedin.com/in/jakecharman/"><i class="fa-brands fa-linkedin-in"></i></a>
                             <a class="button" href="https://github.com/jcharman/"><i class="fa-brands fa-github"></i></a>
                         </div>
-                        <div id="certs">
-                            <a href="https://catalog-education.oracle.com/ords/certview/sharebadge?id=A6C9B3D3D21627EB9C2504395194FAF772E01412911D4ADC78063133D54579ED"><img src="/static/images/OCIF2023CA.png" /></a>
-                        </div>
                     </div>
                 </div>
             </div>
         </section>
         <section id="motorsport">
             <div class="gradient gradient-right">
+                <div class="spacer"></div>
                 <div class="text text-right">
                     <div>
                         <h2>Racing</h2>