Hoppe.home-Public/joern
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hero portrait (pixel-art, DHL ocean freight desk)

Browse Source 
Framed portrait next to the hero header text, responsive (stacks above
the text on mobile), matching the page's existing dark red/card
aesthetic. Also wired it in as the og:image/twitter:image for link
previews.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Joern Hoppe 2026-08-13 00:47:21 +02:00
parent a4458a4890
commit fdc879f09b
2 changed files with 51 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/jorn-dgf-pixel.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

39
index.html
View File

@ -5,6 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jörn Hoppe — Senior Logistics Executive | AI in Logistics &amp; Supply Chain</title>
<meta name="description" content="Jörn Hoppe — Senior logistics and ocean freight executive with 20+ years leading international teams and P&amp;L, now building a second track record in AI-enabled logistics transformation and personally operating a private production-grade AI &amp; infrastructure platform.">
<meta property="og:type" content="profile">
<meta property="og:title" content="Jörn Hoppe — Senior Logistics Executive | AI in Logistics & Supply Chain">
<meta property="og:description" content="20+ years leading international ocean freight teams and P&amp;L across Europe, Asia and the Americas — now building a second track record in AI-enabled logistics transformation.">
<meta property="og:image" content="https://joernhoppe.github.io/assets/jorn-dgf-pixel.jpg">
<meta property="og:url" content="https://joernhoppe.github.io/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://joernhoppe.github.io/assets/jorn-dgf-pixel.jpg">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%23c22236'/%3E%3Ctext x='32' y='45' font-family='Arial, sans-serif' font-weight='800' font-size='36' fill='white' text-anchor='middle'%3EH%3C/text%3E%3C/svg%3E">
<style>
:root {
@ -77,6 +84,31 @@
padding: 64px 0 48px;
border-bottom: 1px solid var(--card-border);
}
.hero-row {
display: flex;
align-items: center;
gap: 40px;
}
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero-portrait {
flex: none;
width: 220px;
height: 220px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 60px rgba(198, 34, 54, 0.22);
background: var(--accent-grad);
}
.hero-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 760px) {
.hero-row { flex-direction: column-reverse; gap: 24px; }
.hero-portrait { width: 180px; height: 180px; }
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
@ -289,6 +321,8 @@
<div class="brand-tag">Portfolio · Logistics &amp; AI</div>
</div>
</div>
<div class="hero-row">
<div class="hero-text">
<p class="eyebrow">Jörn Hoppe</p>
<h1>Senior Logistics Executive<br>AI in Logistics &amp; Supply Chain</h1>
<p class="headline">20+ years leading international ocean freight teams and P&amp;L across Europe, Asia and the Americas — now building a second track record turning AI capabilities into governed, measurable improvements for logistics organizations.</p>
@ -303,6 +337,11 @@
<a class="btn btn-secondary" href="mailto:Joern_Hoppe@outlook.com">Joern_Hoppe@outlook.com</a>
</div>
</div>
<div class="hero-portrait">
<img src="assets/jorn-dgf-pixel.jpg" alt="Pixel-art portrait of Jörn Hoppe at his ocean freight allocation management desk, DHL Global Forwarding" width="720" height="720" loading="eager">
</div>
</div>
</div>
</header>
<section id="profile">