Expand portfolio exhibits and integrate branding

index.html

@@ -56,6 +56,10 @@
       <div><span>04</span><strong>Documented recovery</strong><small>tested restore procedures</small></div>
     </section>
 
+    <div class="logo-divider" aria-hidden="true">
+      <img src="assets/images/bytegeist-logo.png" alt="" />
+    </div>
+
     <section id="architecture" class="architecture section-rule">
       <div class="section-heading">
         <p class="section-index">01 / Architecture</p>
@@ -117,8 +121,18 @@
           </ul>
         </div>
         <div class="story-images">
-          <img src="assets/images/portfolio-grafana-operations.png" alt="Grafana infrastructure metrics dashboard" />
+          <figure class="screenshot-exhibit">
-          <img src="assets/images/portfolio-grafana-logs.png" alt="Centralized container logs in Grafana" />
+            <figcaption><span>Infrastructure monitoring</span><small>Grafana operations dashboard</small></figcaption>
+            <a href="assets/images/portfolio-grafana-operations.png" target="_blank">
+              <img src="assets/images/portfolio-grafana-operations.png" alt="Grafana infrastructure metrics dashboard" />
+            </a>
+          </figure>
+          <figure class="screenshot-exhibit">
+            <figcaption><span>Centralized logging</span><small>Container logs collected in Loki</small></figcaption>
+            <a href="assets/images/portfolio-grafana-logs.png" target="_blank">
+              <img src="assets/images/portfolio-grafana-logs.png" alt="Centralized container logs in Grafana" />
+            </a>
+          </figure>
         </div>
       </article>
 
@@ -137,8 +151,18 @@
           </ul>
         </div>
         <div class="story-images">
-          <img src="assets/images/portfolio-authentik-applications.png" alt="Applications protected by Authentik" />
+          <figure class="screenshot-exhibit">
-          <img src="assets/images/portfolio-crowdsec-decisions.png" alt="CrowdSec security decisions" />
+            <figcaption><span>Identity portal</span><small>Applications protected by Authentik</small></figcaption>
+            <a href="assets/images/portfolio-authentik-applications.png" target="_blank">
+              <img src="assets/images/portfolio-authentik-applications.png" alt="Applications protected by Authentik" />
+            </a>
+          </figure>
+          <figure class="screenshot-exhibit">
+            <figcaption><span>Active firewall decisions</span><small>CrowdSec command-line output</small></figcaption>
+            <a href="assets/images/portfolio-crowdsec-decisions.png" target="_blank">
+              <img class="crowdsec-capture" src="assets/images/portfolio-crowdsec-decisions.png" alt="CrowdSec security decisions" />
+            </a>
+          </figure>
         </div>
       </article>
 
@@ -156,8 +180,18 @@
           </ul>
         </div>
         <div class="story-images">
-          <img src="assets/images/portfolio-gitea-dashboard.png" alt="Self-hosted Gitea dashboard" />
+          <figure class="screenshot-exhibit">
-          <img src="assets/images/portfolio-woodpecker-pipeline.png" alt="Successful Woodpecker CI pipeline" />
+            <figcaption><span>Source control</span><small>Self-hosted repositories in Gitea</small></figcaption>
+            <a href="assets/images/portfolio-gitea-dashboard.png" target="_blank">
+              <img src="assets/images/portfolio-gitea-dashboard.png" alt="Self-hosted Gitea dashboard" />
+            </a>
+          </figure>
+          <figure class="screenshot-exhibit">
+            <figcaption><span>Continuous delivery</span><small>Successful Woodpecker pipeline</small></figcaption>
+            <a href="assets/images/portfolio-woodpecker-pipeline.png" target="_blank">
+              <img src="assets/images/portfolio-woodpecker-pipeline.png" alt="Successful Woodpecker CI pipeline" />
+            </a>
+          </figure>
         </div>
       </article>
 
@@ -175,8 +209,18 @@
           </ul>
         </div>
         <div class="story-images">
-          <img src="assets/images/portfolio-cloud-dashboard-overview.png" alt="ByteGeist internal service portal" />
+          <figure class="screenshot-exhibit">
-          <img src="assets/images/portfolio-wiki-disaster-recovery.png" alt="ByteGeist disaster recovery runbook" />
+            <figcaption><span>Service portal</span><small>Internal tools organized in Dashy</small></figcaption>
+            <a href="assets/images/portfolio-cloud-dashboard-overview.png" target="_blank">
+              <img src="assets/images/portfolio-cloud-dashboard-overview.png" alt="ByteGeist internal service portal" />
+            </a>
+          </figure>
+          <figure class="screenshot-exhibit">
+            <figcaption><span>Recovery runbook</span><small>Documented rebuild and restore process</small></figcaption>
+            <a href="assets/images/portfolio-wiki-disaster-recovery.png" target="_blank">
+              <img src="assets/images/portfolio-wiki-disaster-recovery.png" alt="ByteGeist disaster recovery runbook" />
+            </a>
+          </figure>
         </div>
       </article>
     </section>

style.css

@@ -391,6 +391,28 @@ h1 {
   border-radius: 3px;
 }
 
+.logo-divider {
+  width: min(calc(100% - 48px), var(--max));
+  height: 280px;
+  margin: 0 auto;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  border-bottom: 1px solid var(--line);
+  background:
+    radial-gradient(circle, rgba(88, 166, 255, 0.08), transparent 45%),
+    #080a0d;
+}
+
+.logo-divider img {
+  width: 420px;
+  height: 420px;
+  object-fit: cover;
+  object-position: center 28%;
+  opacity: 0.72;
+  mix-blend-mode: screen;
+}
+
 .principles {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -516,13 +538,42 @@ footer p {
 .story-images {
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: 1fr;
-  gap: 24px;
+  gap: 64px;
   min-width: 0;
   align-items: start;
 }
 
-.story-images img:hover {
+.screenshot-exhibit {
+  margin: 0;
+  padding-top: 24px;
+  border-top: 1px solid var(--line);
+}
+
+.screenshot-exhibit figcaption {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 24px;
+  margin-bottom: 16px;
+}
+
+.screenshot-exhibit figcaption span {
+  font-size: 1.18rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.screenshot-exhibit figcaption small {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.screenshot-exhibit a {
+  display: block;
+}
+
+.screenshot-exhibit a:hover img {
   box-shadow: 0 8px 24px rgba(88, 166, 255, 0.1);
 }
 
@@ -538,8 +589,8 @@ footer p {
   transition: box-shadow 300ms ease;
 }
 
-.story-images img:only-child {
+.story-images .crowdsec-capture {
-  grid-column: auto;
+  filter: none;
 }
 
 .lesson-list {
@@ -771,18 +822,38 @@ footer p {
     margin-top: 38px;
   }
 
+  .logo-divider {
+    width: calc(100% - 32px);
+    height: 210px;
+  }
+
+  .logo-divider img {
+    width: 300px;
+    height: 300px;
+  }
+
   .system-story {
     padding: 54px 0;
   }
 
   .story-images {
     grid-template-columns: 1fr;
+    gap: 44px;
   }
 
   .story-images img {
     height: auto;
   }
 
+  .screenshot-exhibit figcaption {
+    display: block;
+  }
+
+  .screenshot-exhibit figcaption small {
+    display: block;
+    margin-top: 4px;
+  }
+
   .lesson-list article {
     grid-template-columns: 40px 1fr;
     gap: 14px;