Files
claude-codeandClaude Opus 5.5 bd233f4785 Sync from the live Portal /joern/ page (2026-09-25 version)
The Portal copy was rewritten on 2026-09-25 (Portal commit 543c1307) and
now loads the shared portal-frame.css / portal-ui.css design system; the
forge twin was still the 2026-08-31 version. Byte copy of
Hoppe-home-Apps/portal/joern/index.html.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-28 19:24:52 +02:00

492 lines
23 KiB
HTML
Raw Permalink 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" data-portal-shell="none">
<head>
<meta charset="UTF-8">
<link rel="canonical" href="https://hoppe.mywire.org/joern/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jörn Hoppe — AI Systems Builder &amp; Logistics Executive</title>
<meta name="description" content="Jörn Hoppe — logistics executive, AI systems builder and founder of Hoppe.home.">
<meta property="og:type" content="profile">
<meta property="og:title" content="Jörn Hoppe — AI Systems Builder &amp; Logistics Executive">
<meta property="og:description" content="Logistics executive, AI systems builder and founder of Hoppe.home.">
<meta property="og:image" content="https://hoppe.mywire.org/joern/assets/jorn-dgf-pixel.jpg">
<meta property="og:url" content="https://hoppe.mywire.org/joern/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://hoppe.mywire.org/joern/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">
<!-- 2026-09-05: joined the Portal design system (Jörn's page).
It carried a private palette under private variable names, so it could
not follow a theme and could not share a component. Those names are now
aliases of the shared tokens; only the identity accent is still declared
here. -->
<link rel="stylesheet" href="/portal/css/portal-frame.css?v=20260918-footerscope1">
<link rel="stylesheet" href="/portal/css/portal-ui.css?v=20260925-hubs1">
<style>
@layer hh.page {
/* This page has no sidebar, so it must opt out of the frame's flex body.
Without this line portal-frame.css's `body{display:flex}` turns every
top-level block into a column. Found by rendering, 2026-09-05. */
body { display: block; }
:root {
/* Jörn's page keeps its red identity, but on the palette's own red_lift
(#E0455A) instead of the #ff5069 it had invented. Every other name is an
ALIAS of a shared token, so the layout CSS is untouched and the surface
follows the theme. */
--accent:#e0455a; --accent-lt:rgba(224,69,90,.16); --accent-hov:#c22236;
--accent-soft:var(--accent-lt);
--accent-grad:linear-gradient(135deg,#e0455a 0%,#8f1927 100%);
--text-muted:var(--muted);
--card-bg:var(--glass-pane); --card-bg-solid:var(--card); --card-border:var(--glass-hair);
--chip-bg:color-mix(in srgb, var(--surface) 62%, transparent);
--bg-top:color-mix(in srgb, var(--accent) 26%, var(--page-grad-start));
--bg-mid:var(--page-grad-start); --bg-low:var(--page-grad-end); --bg-floor:var(--page-grad-end);
--shadow:var(--glass-lift-hi);
}
* { 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;
}
/* The brick-built H mark replaces this page's old flat "H" square below —
same asset the Portal uses everywhere else
(branding-hub/tools/render-pixel-icons.py). Sizing, colour and the
one-time load-in animation all come from the shared .hoppe-h-pixel /
.is-brand rules in portal-ui.css (loaded above) — nothing to redeclare. */
.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;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 760px) { .grid-3, .grid-4 { 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; }
/* Same .footer-brand shape every internal Portal page already uses (mark +
tagline) — this page's footer was bare text where every other Hoppe.home
page carries the mark. */
.footer-brand {
display: inline-flex; align-items: center; gap: 7px;
margin: 0 0 12px; font-weight: 700; font-size: 13px; color: var(--text-muted);
}
}
</style>
</head>
<body>
<svg class="pixel-icon-sprite" aria-hidden="true" focusable="false" style="display:none"><!-- The one glyph this page needs from the Portal's shared brick-pixel icon set (branding-hub/tools/render-pixel-icons.py). Inlined here because this is a standalone page with no shared sidebar to carry the full sprite. --><symbol id="pi-hmark" viewBox="0 0 105 105"><g transform="translate(9,9)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(8,8)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(7,7)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(6,6)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(5,5)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(4,4)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(3,3)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(2,2)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><g transform="translate(1,1)" opacity="1"><path fill="var(--hm-side, #10243b)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/></g><path fill="var(--hm-face, currentColor)" d="M0 0h24v36h-24zM0 60h24v36h-24zM0 36h96v24h-96zM72 0h24v36h-24zM72 60h24v36h-24z"/><g fill="var(--hm-stud, #0b1a2c)" opacity=".38"><circle cx="6.0" cy="6.0" r="2.5"/><circle cx="18.0" cy="6.0" r="2.5"/><circle cx="78.0" cy="6.0" r="2.5"/><circle cx="90.0" cy="6.0" r="2.5"/><circle cx="6.0" cy="18.0" r="2.5"/><circle cx="18.0" cy="18.0" r="2.5"/><circle cx="78.0" cy="18.0" r="2.5"/><circle cx="90.0" cy="18.0" r="2.5"/><circle cx="6.0" cy="30.0" r="2.5"/><circle cx="18.0" cy="30.0" r="2.5"/><circle cx="78.0" cy="30.0" r="2.5"/><circle cx="90.0" cy="30.0" r="2.5"/><circle cx="6.0" cy="42.0" r="2.5"/><circle cx="18.0" cy="42.0" r="2.5"/><circle cx="30.0" cy="42.0" r="2.5"/><circle cx="42.0" cy="42.0" r="2.5"/><circle cx="54.0" cy="42.0" r="2.5"/><circle cx="66.0" cy="42.0" r="2.5"/><circle cx="78.0" cy="42.0" r="2.5"/><circle cx="90.0" cy="42.0" r="2.5"/><circle cx="6.0" cy="54.0" r="2.5"/><circle cx="18.0" cy="54.0" r="2.5"/><circle cx="30.0" cy="54.0" r="2.5"/><circle cx="42.0" cy="54.0" r="2.5"/><circle cx="54.0" cy="54.0" r="2.5"/><circle cx="66.0" cy="54.0" r="2.5"/><circle cx="78.0" cy="54.0" r="2.5"/><circle cx="90.0" cy="54.0" r="2.5"/><circle cx="6.0" cy="66.0" r="2.5"/><circle cx="18.0" cy="66.0" r="2.5"/><circle cx="78.0" cy="66.0" r="2.5"/><circle cx="90.0" cy="66.0" r="2.5"/><circle cx="6.0" cy="78.0" r="2.5"/><circle cx="18.0" cy="78.0" r="2.5"/><circle cx="78.0" cy="78.0" r="2.5"/><circle cx="90.0" cy="78.0" r="2.5"/><circle cx="6.0" cy="90.0" r="2.5"/><circle cx="18.0" cy="90.0" r="2.5"/><circle cx="78.0" cy="90.0" r="2.5"/><circle cx="90.0" cy="90.0" r="2.5"/></g><g fill="var(--hm-lit, #ffffff)" opacity=".30"><circle cx="5.2" cy="5.2" r="1.4"/><circle cx="17.2" cy="5.2" r="1.4"/><circle cx="77.2" cy="5.2" r="1.4"/><circle cx="89.2" cy="5.2" r="1.4"/><circle cx="5.2" cy="17.2" r="1.4"/><circle cx="17.2" cy="17.2" r="1.4"/><circle cx="77.2" cy="17.2" r="1.4"/><circle cx="89.2" cy="17.2" r="1.4"/><circle cx="5.2" cy="29.2" r="1.4"/><circle cx="17.2" cy="29.2" r="1.4"/><circle cx="77.2" cy="29.2" r="1.4"/><circle cx="89.2" cy="29.2" r="1.4"/><circle cx="5.2" cy="41.2" r="1.4"/><circle cx="17.2" cy="41.2" r="1.4"/><circle cx="29.2" cy="41.2" r="1.4"/><circle cx="41.2" cy="41.2" r="1.4"/><circle cx="53.2" cy="41.2" r="1.4"/><circle cx="65.2" cy="41.2" r="1.4"/><circle cx="77.2" cy="41.2" r="1.4"/><circle cx="89.2" cy="41.2" r="1.4"/><circle cx="5.2" cy="53.2" r="1.4"/><circle cx="17.2" cy="53.2" r="1.4"/><circle cx="29.2" cy="53.2" r="1.4"/><circle cx="41.2" cy="53.2" r="1.4"/><circle cx="53.2" cy="53.2" r="1.4"/><circle cx="65.2" cy="53.2" r="1.4"/><circle cx="77.2" cy="53.2" r="1.4"/><circle cx="89.2" cy="53.2" r="1.4"/><circle cx="5.2" cy="65.2" r="1.4"/><circle cx="17.2" cy="65.2" r="1.4"/><circle cx="77.2" cy="65.2" r="1.4"/><circle cx="89.2" cy="65.2" r="1.4"/><circle cx="5.2" cy="77.2" r="1.4"/><circle cx="17.2" cy="77.2" r="1.4"/><circle cx="77.2" cy="77.2" r="1.4"/><circle cx="89.2" cy="77.2" r="1.4"/><circle cx="5.2" cy="89.2" r="1.4"/><circle cx="17.2" cy="89.2" r="1.4"/><circle cx="77.2" cy="89.2" r="1.4"/><circle cx="89.2" cy="89.2" r="1.4"/></g></symbol></svg>
<header class="hero">
<div class="wrap">
<div class="brand-row">
<svg class="hoppe-h-pixel is-brand" viewBox="0 0 105 105" role="img" aria-label="Hoppe.home"><use href="#pi-hmark"/></svg>
<div>
<div class="brand-name">Jörn Hoppe</div>
<div class="brand-tag">Portfolio · AI Systems Builder &amp; Logistics Executive</div>
</div>
</div>
<div class="hero-row">
<div class="hero-text">
<p class="eyebrow">Jörn Hoppe</p>
<h1>AI Systems Builder &amp; Logistics Executive</h1>
<p class="headline">Logistics executive, AI systems builder and founder of <strong>Hoppe.home</strong>. I bring an international operating perspective to the question of how people can use AI thoughtfully, creatively and well.</p>
<div class="meta-row">
<span class="chip">Felde, Germany</span>
<span class="chip">German citizen · Hong Kong permanent resident</span>
<span class="chip">German (native) · English (professional)</span>
<span class="chip">AI Adventure Passport · "Globetrotter"</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="https://summeradventure.ai/passport/joern-hoppe" target="_blank" rel="noopener">My AI Adventure Passport &rarr;</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" width="720" height="720" loading="eager">
</div>
</div>
</div>
</header>
<main id="main">
<section id="profile">
<div class="wrap">
<h2>Executive Profile</h2>
<p class="lede">An international logistics leader with more than two decades of experience, combining operational perspective with a hands-on curiosity for AI. Through Hoppe.home, I explore how good judgement, practical discipline and new technology can reinforce one another.</p>
</div>
</section>
<section id="achievements">
<div class="wrap">
<h2>Perspective</h2>
<div class="grid-3">
<div class="card"><div class="stat">Global</div><p>An international perspective shaped by years of logistics leadership.</p></div>
<div class="card"><div class="stat">Practical</div><p>A preference for useful ideas, clear thinking and meaningful results.</p></div>
<div class="card"><div class="stat">Curious</div><p>A continuing exploration of how AI can augment human capability.</p></div>
</div>
</div>
</section>
<section id="strengths">
<div class="wrap">
<h2>What I Care About</h2>
<div class="grid-3">
<div class="strength">
<h3>Leadership</h3>
<ul>
<li>Clear direction</li><li>Thoughtful collaboration</li><li>Real-world perspective</li>
</ul>
</div>
<div class="strength">
<h3>AI &amp; Digital Craft</h3>
<ul>
<li>Human-centred AI</li><li>Practical innovation</li><li>Meaningful experiences</li>
</ul>
</div>
<div class="strength">
<h3>Hoppe.home</h3>
<ul>
<li>Independent thinking</li><li>People and AI, together</li><li>A long-term outlook</li>
</ul>
</div>
</div>
</div>
</section>
<section id="experience">
<div class="wrap">
<h2>Background</h2>
<p class="lede">My professional path is rooted in international logistics. It informs a simple belief: the most exciting technology is the kind that helps people make better connections and better decisions.</p>
</div>
</section>
<section id="ecosystem">
<div class="wrap">
<h2>AI &amp; Ecosystem — Hoppe.home</h2>
<p class="lede">Alongside my professional career, I founded <strong>Hoppe.home</strong>: an independent AI power house and think tank for human-centred innovation, digital craft and thoughtful experimentation.</p>
<div class="grid-4" style="margin-top: 24px;">
<div class="card">
<div class="stat">People</div>
<p>Technology that starts with the people it is meant to help.</p>
</div>
<div class="card">
<div class="stat">Ideas</div>
<p>Curiosity translated into useful, approachable experiences.</p>
</div>
<div class="card">
<div class="stat">Craft</div>
<p>Careful work, designed to be clear and enduring.</p>
</div>
<div class="card">
<div class="stat">Team</div>
<p>People and AI collaborators working towards shared possibilities.</p>
</div>
</div>
<p class="lede" style="margin-top: 32px;"><strong>Where I'm focused</strong></p>
<ul class="ai-list" style="margin-top: 14px;">
<li><span class="dot"></span>Practical AI for people and organisations.</li>
<li><span class="dot"></span>Creative technology with a clear purpose.</li>
<li><span class="dot"></span>Responsible innovation shaped by real-world experience.</li>
</ul>
<div class="ecosystem-note">
<h3>Streaming &amp; MCP-first</h3>
<p>Hoppe.home is built around connected, responsive AI experiences: streaming context and MCP-first collaboration that lets people, agents and tools work together naturally. Joanna is the public face of that team. <a href="https://hoppe.mywire.org/joanna/" target="_blank" rel="noopener">Meet Joanna &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>
</main>
<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://summeradventure.ai/passport/joern-hoppe" target="_blank" rel="noopener">AI Adventure Passport</a>
<a href="https://hoppe.mywire.org/joanna/" target="_blank" rel="noopener">Joanna &amp; Hoppe.home</a>
</div>
<p class="footer-brand"><svg class="hoppe-h-pixel is-footer" aria-hidden="true" focusable="false"><use href="#pi-hmark"/></svg> Hoppe.home</p>
<p>© 2026 Jörn Hoppe · Felde, Germany</p>
</div>
</footer>
<script src="/portal/js/cookie-notice.js?v=20260826" defer></script>
</body>
</html>