new projects section

Author: extrawurst

sass/hallo/_layout.scss

@@ -121,6 +121,57 @@ main {
     }
 }
 
+.projects {
+    margin-top: 25px;
+    text-align: center;
+
+    p {
+        font-size: x-large;
+        margin-top: 40px;
+        margin-bottom: 40px;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 20px;
+
+        .project {
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            max-width: 400px;
+            width: 100%;
+
+            .project-info {
+                flex: 1;
+                text-align: left;
+
+                .project-name {
+                    font-size: 1.1rem;
+                    font-weight: 600;
+                    margin-bottom: 8px;
+                }
+
+                .project-description {
+                    font-size: 0.9rem;
+                    line-height: 1.5;
+                    opacity: 0.85;
+                }
+            }
+
+            .project-logo {
+                width: 80px;
+                height: 80px;
+                flex-shrink: 0;
+                object-fit: contain;
+            }
+        }
+    }
+}
+
 .clients {
     margin-top: 25px;
     text-align: center;
@@ -171,4 +222,4 @@ footer {
             height: 28px;
         }
     }
-}
+}

static/images/ezlime-logo.svg

@@ -54,4 +54,35 @@
         </div>
     </div>
 </main>
-{% endblock content %}
+<main>
+    <div class="projects column left">
+        <p>
+            Featured Open Source Projects:
+        </p>
+
+        <div class="row">
+            <a href="https://live-ask.com" class="project">
+                <div class="project-info">
+                    <div class="project-name">live-ask.com</div>
+                    <div class="project-description">Real-time Q&A platform for moderating audience questions at events</div>
+                </div>
+                <img src="{{ get_url(path='images/liveask-logo.svg') }}" class="project-logo" alt="live-ask logo" />
+            </a>
+            <a href="https://ezli.me" class="project">
+                <div class="project-info">
+                    <div class="project-name">ezli.me</div>
+                    <div class="project-description">Lightning-fast, privacy-focused URL shortening service</div>
+                </div>
+                <img src="{{ get_url(path='images/ezlime-logo.svg') }}" class="project-logo" alt="ezli.me logo" />
+            </a>
+            <a href="https://gitui.org" class="project">
+                <div class="project-info">
+                    <div class="project-name">gitui.org</div>
+                    <div class="project-description">Blazing fast terminal UI for Git written in Rust</div>
+                </div>
+                <img src="{{ get_url(path='images/gitui-logo.png') }}" class="project-logo" alt="gitui logo" />
+            </a>
+        </div>
+    </div>
+</main>
+{% endblock content %}