joern/index.html
Joern Hoppe cfdb76e065 Add reciprocal links to Joanna's page
Ecosystem section and footer now link to donnyandjoern-debug.github.io
(Joanna's own page), which previously only linked back here.
2026-08-13 22:57:24 +02:00

564 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 {
--bg-top: #3d0f18;
--bg-mid: #200a10;
--bg-low: #12060a;
--bg-floor: #0a0407;
--card-bg: rgba(20, 25, 38, 0.72);
--card-bg-solid: #141926;
--card-border: rgba(255, 255, 255, 0.09);
--text: #f4f6fb;
--text-muted: #a8b0c4;
--accent: #ff5069;
--accent-soft: rgba(255, 80, 105, 0.14);
--accent-grad: linear-gradient(135deg, #e6394f 0%, #9c1b2c 100%);
--chip-bg: rgba(255, 255, 255, 0.05);
--shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
background-color: var(--bg-floor);
background-image:
radial-gradient(1100px 620px at 50% -8%, var(--bg-top) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-low) 45%, var(--bg-floor) 100%);
background-attachment: fixed, fixed;
background-repeat: no-repeat, no-repeat;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); }
/* Brand row */
.brand-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 40px;
}
.logo-mark {
flex: none;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--accent-grad);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 26px;
color: #fff;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 10px 26px rgba(198, 34, 54, 0.45), 0 0 46px rgba(198, 34, 54, 0.28);
}
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.brand-tag {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
font-weight: 700;
margin-top: 2px;
}
/* Hero */
header.hero {
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;
font-size: 12px;
font-weight: 700;
color: var(--accent);
margin: 0 0 14px;
}
h1 {
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.12;
margin: 0 0 10px;
letter-spacing: -0.02em;
color: #fff;
}
.headline {
font-size: clamp(1.05rem, 2.4vw, 1.35rem);
color: var(--text-muted);
margin: 0 0 22px;
max-width: 660px;
}
.meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.chip {
font-size: 13px;
background: var(--chip-bg);
color: var(--text-muted);
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--card-border);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
border: 1px solid transparent;
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 10px 28px rgba(198, 34, 54, 0.4); }
.btn-primary:hover { box-shadow: 0 14px 34px rgba(198, 34, 54, 0.55); }
.btn-secondary { background: rgba(255, 255, 255, 0.04); color: var(--text); border-color: var(--card-border); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }
section { padding: 56px 0; border-bottom: 1px solid var(--card-border); }
section:last-of-type { border-bottom: none; }
h2 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
margin: 0 0 24px;
font-weight: 700;
}
.lede { font-size: 17px; max-width: 720px; color: var(--text); }
/* Grid cards */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 22px;
box-shadow: var(--shadow);
backdrop-filter: blur(6px);
}
.card .stat {
font-size: 26px;
font-weight: 800;
color: var(--accent);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.card p { margin: 0; font-size: 14px; color: var(--text-muted); }
/* Strengths */
.strength h3 {
font-size: 15px;
margin: 0 0 12px;
color: #fff;
}
.strength ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 14px; }
.strength li { margin-bottom: 6px; }
/* Experience */
.job {
position: relative;
padding: 0 0 36px 28px;
border-left: 2px solid var(--card-border);
}
.job:last-child { padding-bottom: 0; }
.job::before {
content: "";
position: absolute;
left: -7px;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent-grad);
border: 2px solid var(--bg-low);
box-shadow: 0 0 10px rgba(198, 34, 54, 0.6);
}
.job .role { font-size: 17px; font-weight: 700; margin: 0 0 2px; color: #fff; }
.job .org {
font-size: 14px;
color: var(--accent);
font-weight: 600;
margin: 0 0 4px;
}
.job .when { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.job ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--text); }
.job li { margin-bottom: 6px; }
.job .impact {
margin-top: 12px;
padding: 12px 14px;
background: var(--accent-soft);
border: 1px solid rgba(255, 80, 105, 0.22);
border-radius: 8px;
font-size: 13.5px;
color: var(--text);
}
.impact strong { color: var(--accent); }
.earlier { margin-top: 8px; }
.earlier-item {
padding: 14px 0;
border-top: 1px solid var(--card-border);
}
.earlier-item:first-child { border-top: none; }
.earlier-item .role { font-weight: 700; font-size: 14.5px; color: #fff; }
.earlier-item .org { color: var(--text-muted); font-size: 13px; }
.earlier-item p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-muted); }
/* Dot lists */
.ai-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ai-list li {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 15px;
color: var(--text);
}
.ai-list .dot {
flex: none;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent-grad);
margin-top: 8px;
box-shadow: 0 0 8px rgba(198, 34, 54, 0.6);
}
/* Ecosystem section extras */
.ecosystem-note {
margin-top: 28px;
padding: 20px 22px;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
box-shadow: var(--shadow);
backdrop-filter: blur(6px);
}
.ecosystem-note h3 {
margin: 0 0 8px;
font-size: 14px;
color: #fff;
letter-spacing: 0.01em;
}
.ecosystem-note p { margin: 0; font-size: 14.5px; color: var(--text-muted); }
/* Education / footer */
.edu-item { margin-bottom: 14px; }
.edu-item .role { font-weight: 700; font-size: 14.5px; color: #fff; }
.edu-item .org { color: var(--text-muted); font-size: 13.5px; }
footer {
padding: 48px 0 64px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--accent); }
.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
</style>
</head>
<body>
<header class="hero">
<div class="wrap">
<div class="brand-row">
<div class="logo-mark">H</div>
<div>
<div class="brand-name">Jörn Hoppe</div>
<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>
<div class="meta-row">
<span class="chip">Bremen, Germany</span>
<span class="chip">German citizen · Hong Kong permanent resident</span>
<span class="chip">German (native) · English (professional)</span>
</div>
<div class="cta-row">
<a class="btn btn-primary" href="https://www.linkedin.com/in/joernhoppehk/" target="_blank" rel="noopener">Connect on LinkedIn</a>
<a class="btn btn-secondary" href="https://www.xing.com/profile/Joern_Hoppe3/portfolio?nwt_nav=profile" target="_blank" rel="noopener">XING Profile</a>
<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">
<div class="wrap">
<h2>Executive Profile</h2>
<p class="lede">Senior logistics and ocean freight executive with 20+ years leading international teams and P&amp;L across Europe, Asia and the Americas, combining deep operational and commercial expertise with a modern focus on AI-enabled transformation. Now building a practitioner track record in logistics AI — turning emerging AI capabilities into practical, governed and measurable improvements that make teams faster, more data-driven and more resilient.</p>
</div>
</section>
<section id="achievements">
<div class="wrap">
<h2>Key Achievements</h2>
<div class="grid-3">
<div class="card">
<div class="stat">~$130M</div>
<p>Turned a loss-making ocean freight business around to sustained EBIT profitability within 12 months (CEVA Germany, 20212022).</p>
</div>
<div class="card">
<div class="stat">~500</div>
<p>People led across P&amp;L portfolios up to USD 130M, spanning Germany and Greater China.</p>
</div>
<div class="card">
<div class="stat">2024→</div>
<p>Pioneering AI-enabled transformation in ocean carrier &amp; yield management at DHL Global Forwarding — from manual reporting to AI-assisted market intelligence and decision support.</p>
</div>
</div>
</div>
</section>
<section id="strengths">
<div class="wrap">
<h2>Core Strengths</h2>
<div class="grid-3">
<div class="strength">
<h3>Logistics Leadership</h3>
<ul>
<li>Ocean freight product leadership</li>
<li>Carrier, capacity &amp; yield management</li>
<li>P&amp;L ownership and business turnaround</li>
<li>Customer implementation &amp; SOP design</li>
<li>Procurement, tender &amp; pricing governance</li>
</ul>
</div>
<div class="strength">
<h3>AI &amp; Digital Transformation</h3>
<ul>
<li>AI adoption in day-to-day logistics workflows</li>
<li>Automation of reporting &amp; market intelligence</li>
<li>Microsoft 365 Copilot &amp; productivity use cases</li>
<li>Data-driven decision support</li>
<li>Knowledge management &amp; workflow design</li>
</ul>
</div>
<div class="strength">
<h3>Entrepreneurial Profile</h3>
<ul>
<li>Practical innovation mindset</li>
<li>End-to-end supply chain perspective</li>
<li>Human-centric change enablement</li>
<li>Bridges business and technology</li>
<li>Strong global network across freight forwarding &amp; carriers</li>
</ul>
</div>
</div>
</div>
</section>
<section id="experience">
<div class="wrap">
<h2>Professional Experience</h2>
<div class="job">
<p class="role">Senior Manager Global Ocean Carrier &amp; Yield Management</p>
<p class="org">DHL Global Forwarding · Bremen, Germany</p>
<p class="when">May 2024 Present</p>
<ul>
<li>Lead carrier and yield-related activities, translating market intelligence and carrier developments into commercial guidance for leadership decision-making.</li>
<li>Drive AI-assisted ways of working — from automated reporting and market intelligence to Copilot-based collaboration — to improve speed, consistency and decision quality.</li>
<li>Champion responsible AI adoption with realistic business cases, strong governance, data quality and user acceptance.</li>
</ul>
<div class="impact"><strong>Selected impact:</strong> Leading early Copilot adoption in Carrier &amp; Yield Management — onboarded 6 team members, moved the first recurring report to Copilot-assisted production, and reviewed and refined the complete Smart Engine functional specification (FSD) for AI orchestration.</div>
</div>
<div class="job">
<p class="role">Director Ocean Product Services — Germany, Austria, Switzerland &amp; Eastern Europe</p>
<p class="org">Crane Worldwide Germany GmbH · Hamburg, Germany</p>
<p class="when">Apr 2023 May 2024</p>
<ul>
<li>Led a 20-person ocean organization with shared P&amp;L responsibility, including planning, execution and business reviews with country management.</li>
<li>Built a standalone ocean pricing and procurement setup, including a structured rate repository and improved sales communication.</li>
<li>Established back-office support in India and standardized onboarding and process training for ocean staff.</li>
<li>Drove customer implementations, tender management and business development through customer-facing ocean capability presentations.</li>
</ul>
<div class="impact"><strong>Selected impact:</strong> Built a more structured and scalable ocean operating model, strengthening commercial responsiveness, process discipline and organizational clarity.</div>
</div>
<div class="job">
<p class="role">Head of Ocean DACH — Germany, Austria &amp; Switzerland</p>
<p class="org">CEVA Logistics · Hong Kong &amp; Bremen, Germany</p>
<p class="when">Dec 2020 Feb 2023</p>
<ul>
<li>Led an 80-person ocean organization with full P&amp;L ownership (~USD 130M), including budget, execution and monthly European management reviews.</li>
<li>Turned around a loss-making ocean business to sustained EBIT profitability in 20212022.</li>
<li>Reorganized export and import departments and stood up service centers for invoicing, file creation and customer reporting.</li>
<li>Served on the European Ocean Management Team as executive sponsor for productivity, cost and centralization initiatives.</li>
</ul>
</div>
<div class="job">
<p class="role">Director Global Ocean Allocation &amp; Operations Management</p>
<p class="org">CEVA Logistics · Hong Kong</p>
<p class="when">Apr 2017 Mar 2021</p>
<ul>
<li>Governed global ocean operations processes, work instructions and country performance reviews.</li>
<li>Designed CEVA's ocean allocation management process and led a team of allocation managers across FEWB, TPEB, ANZ and LATAM trades.</li>
<li>Contributed to shared service center development, offshoring and major ocean IT implementations, including myCEVA's online quotation and booking capability.</li>
</ul>
<div class="impact"><strong>Selected impact:</strong> Standardized global ocean allocation planning across FEWB, TPEB, ANZ and LATAM trades and supported the rollout of myCEVA's online quotation and booking capability.</div>
</div>
<div class="earlier">
<p class="role" style="margin-bottom: 12px; font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em;">Earlier Career Highlights</p>
<div class="earlier-item">
<p class="role">General Manager Ocean Operations Management, Greater China</p>
<p class="org">CEVA Logistics · Hong Kong · 2015 2017</p>
<p>Led approximately 500 ocean export and import operators across China, Hong Kong and Taiwan; shared P&amp;L responsibility above USD 35M; improved productivity in key stations and strengthened governance, training and shared-service structures.</p>
</div>
<div class="earlier-item">
<p class="role">Manager Global Business Process Ocean</p>
<p class="org">CEVA Logistics · Hong Kong · 2014 2015</p>
<p>Governed global standard ocean operations processes and supported development, testing, training and deployment of global process and system tools, including EDI, allocation, reporting and compliance-related solutions.</p>
</div>
<div class="earlier-item">
<p class="role">Business SME / Project Manager / Process Specialist</p>
<p class="org">CEVA Logistics · Bremen &amp; Hong Kong · 2011 2014</p>
<p>Led international process transformation and rollout projects across regions, translating business requirements into operational tools, training and standardized workflows.</p>
</div>
<div class="earlier-item">
<p class="role">Ocean Export, Pricing &amp; Development Leadership Roles</p>
<p class="org">Eagle Global Logistics / CEVA Logistics / Group7 · Bremen, Germany · 2003 2011</p>
<p>Progressed through operational, pricing, customer service, sales support and supervisory roles covering ocean and air freight, contract management, tender support, customer implementations and apprentice training.</p>
</div>
<div class="earlier-item">
<p class="role">Apprenticeship</p>
<p class="org">Circle International · Bremen, Germany · 2000 2003</p>
<p>Completed commercial freight forwarding training across airfreight, ocean freight, road freight, warehousing and finance.</p>
</div>
</div>
</div>
</section>
<section id="ai-focus">
<div class="wrap">
<h2>AI, Innovation &amp; Entrepreneurial Focus</h2>
<ul class="ai-list">
<li><span class="dot"></span>Building a practical AI-in-logistics profile centered on implementation, adoption and measurable business value — not technology hype.</li>
<li><span class="dot"></span>Completed DHL Global Forwarding's full internal AI training curriculum; selected for the AI Pioneer Program (2026).</li>
<li><span class="dot"></span>Long-term ambition: become an entrepreneurial AI expert for logistics and supply chain organizations, connecting deep industry experience with practical AI solution design.</li>
</ul>
</div>
</section>
<section id="ecosystem">
<div class="wrap">
<h2>AI &amp; Ecosystem — Hoppe.home</h2>
<p class="lede">Outside of my day job, I design, build and personally operate a private, production-grade AI and infrastructure platform — <strong>Hoppe.home</strong>. It's a real environment in daily use, not a lab or a demo, and it's where I turn my logistics-honed operating discipline into hands-on software and AI practice.</p>
<div class="grid-3" style="margin-top: 24px;">
<div class="card">
<div class="stat">12+</div>
<p>Self-managed servers across Windows and Linux, built out as a genuine enterprise-style environment — domain services, certificate authority, monitoring and automated backups.</p>
</div>
<div class="card">
<div class="stat">10+</div>
<p>Custom-built applications running in daily production use — spanning financial and tax tooling, monitoring dashboards, knowledge management and a browser-based game platform.</p>
</div>
<div class="card">
<div class="stat">24/7</div>
<p>A resident AI agent operates as a genuine working partner — handling day-to-day development, operations and monitoring continuously, always under my direct oversight.</p>
</div>
</div>
<div class="ecosystem-note">
<h3>How it's run</h3>
<p>The platform is a real working partnership between human oversight and an autonomous AI operator: I set direction, priorities and guardrails; the AI handles day-to-day engineering, infrastructure operations, monitoring and documentation. Every significant change is tracked, reviewed and kept inside clear governance boundaries — the same operating discipline I apply professionally, brought home and applied at a personal scale. <a href="https://donnyandjoern-debug.github.io" target="_blank" rel="noopener">Meet Joanna, Hoppe.home's resident AI operator &rarr;</a></p>
</div>
</div>
</section>
<section id="education">
<div class="wrap">
<h2>Education</h2>
<div class="edu-item">
<p class="role">Commercial Training Certificate</p>
<p class="org">Business School Ellmerstrasse · Bremen, Germany · Aug 2000 Jan 2003</p>
</div>
<div class="edu-item">
<p class="role">Advanced Certificate of Secondary Education</p>
<p class="org">Secondary School Thedinghausen · Thedinghausen, Germany · Jul 1994 Jul 2000</p>
</div>
</div>
</section>
<footer>
<div class="wrap">
<div class="footer-links">
<a href="https://www.linkedin.com/in/joernhoppehk/" target="_blank" rel="noopener">LinkedIn</a>
<a href="https://www.xing.com/profile/Joern_Hoppe3/portfolio?nwt_nav=profile" target="_blank" rel="noopener">XING</a>
<a href="mailto:Joern_Hoppe@outlook.com">Email</a>
<a href="https://github.com/JoernHoppe" target="_blank" rel="noopener">GitHub</a>
<a href="https://donnyandjoern-debug.github.io" target="_blank" rel="noopener">Joanna &amp; Hoppe.home</a>
</div>
<p>© 2026 Jörn Hoppe · Bremen, Germany</p>
</div>
</footer>
</body>
</html>