keith/bytegeist-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand portfolio exhibits and integrate branding

Browse Source
This commit is contained in:
Keith Casko
2026-06-21 09:30:56 -04:00
parent 4afd0e3620
commit 1e3ccebcf0
2 changed files with 128 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+52 -8
View File
@@ -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" />
<img src="assets/images/portfolio-grafana-logs.png" alt="Centralized container logs in Grafana" />
<figure class="screenshot-exhibit">
<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" />
<img src="assets/images/portfolio-crowdsec-decisions.png" alt="CrowdSec security decisions" />
<figure class="screenshot-exhibit">
<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" />
<img src="assets/images/portfolio-woodpecker-pipeline.png" alt="Successful Woodpecker CI pipeline" />
<figure class="screenshot-exhibit">
<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" />
<img src="assets/images/portfolio-wiki-disaster-recovery.png" alt="ByteGeist disaster recovery runbook" />
<figure class="screenshot-exhibit">
<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
+76 -5
View File
@@ -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));
gap: 24px;
grid-template-columns: 1fr;
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 {
grid-column: auto;
.story-images .crowdsec-capture {
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;