Skip to content

Commit 5e83e33

Browse files
hydro13hydro13
committed
feat: add nav, hero stats, live ticker, about, experience, better badges
1 parent 9a7d9a5 commit 5e83e33

3 files changed

Lines changed: 490 additions & 3 deletions

File tree

‎index.html‎

Lines changed: 149 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,48 @@
1111
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
1212
</head>
1313
<body>
14+
15+
<!-- ==================== NAV ==================== -->
16+
<nav id="navbar">
17+
<div class="nav-inner">
18+
<a class="nav-brand" href="#hero">hydro13</a>
19+
<div class="nav-links">
20+
<a href="#projects">Work</a>
21+
<a href="#about">About</a>
22+
<a href="#experience">Experience</a>
23+
<a href="#hire">Hire</a>
24+
<a href="mailto:r.waslander@gmail.com">Contact</a>
25+
</div>
26+
</div>
27+
</nav>
28+
1429
<!-- ==================== HERO ==================== -->
1530
<section id="hero">
1631
<div class="hero-content">
1732
<p class="hero-label">hydro13</p>
1833
<h1>Robin Waslander</h1>
1934
<h2>AI Systems Architect &amp; Builder</h2>
2035
<p class="tagline">I build things that should not exist yet.</p>
36+
37+
<div class="hero-stats">
38+
<div class="hero-stat">
39+
<span class="stat-number">35</span>
40+
<span class="stat-label">years in IT</span>
41+
</div>
42+
<div class="hero-stat">
43+
<span class="stat-number">5</span>
44+
<span class="stat-label">projects shipped</span>
45+
</div>
46+
<div class="hero-stat">
47+
<span class="stat-number">811K</span>
48+
<span class="stat-label">threats blocked</span>
49+
</div>
50+
<div class="hero-stat">
51+
<span class="stat-number">250K</span>
52+
<span class="stat-label">lines TypeScript</span>
53+
</div>
54+
</div>
55+
2156
<div class="terminal">
2257
<div class="terminal-header">
2358
<span class="terminal-dot red"></span>
@@ -33,6 +68,34 @@ <h2>AI Systems Architect &amp; Builder</h2>
3368
</div>
3469
</section>
3570

71+
<!-- ==================== TICKER ==================== -->
72+
<div class="ticker-wrap" aria-hidden="true">
73+
<div class="ticker-track">
74+
<span class="ticker-dot">●</span>
75+
<span class="ticker-item">Tandem Browser — 180+ threats blocked today</span>
76+
<span class="ticker-sep">·</span>
77+
<span class="ticker-item">Kanbu — 154 MCP tools live</span>
78+
<span class="ticker-sep">·</span>
79+
<span class="ticker-item">SDR — ADS-B tracking aircraft above BRU</span>
80+
<span class="ticker-sep">·</span>
81+
<span class="ticker-item">OpenClaw contributor — PR merged Feb 2026</span>
82+
<span class="ticker-sep">·</span>
83+
<span class="ticker-item">Available for freelance contracts</span>
84+
<span class="ticker-sep">·</span>
85+
<span class="ticker-dot">●</span>
86+
<span class="ticker-item">Tandem Browser — 180+ threats blocked today</span>
87+
<span class="ticker-sep">·</span>
88+
<span class="ticker-item">Kanbu — 154 MCP tools live</span>
89+
<span class="ticker-sep">·</span>
90+
<span class="ticker-item">SDR — ADS-B tracking aircraft above BRU</span>
91+
<span class="ticker-sep">·</span>
92+
<span class="ticker-item">OpenClaw contributor — PR merged Feb 2026</span>
93+
<span class="ticker-sep">·</span>
94+
<span class="ticker-item">Available for freelance contracts</span>
95+
<span class="ticker-sep">·</span>
96+
</div>
97+
</div>
98+
3699
<!-- ==================== PROJECTS ==================== -->
37100
<section id="projects">
38101
<h2 class="section-title">What I've Built</h2>
@@ -41,7 +104,7 @@ <h2 class="section-title">What I've Built</h2>
41104

42105
<article class="project-card">
43106
<div class="card-header">
44-
<span class="badge open-source">OPEN SOURCE</span>
107+
<span class="badge active-sprint">ACTIVE SPRINT</span>
45108
</div>
46109
<h3>Kanbu</h3>
47110
<p class="project-tagline">Enterprise AI Project Management</p>
@@ -56,7 +119,7 @@ <h3>Kanbu</h3>
56119

57120
<article class="project-card">
58121
<div class="card-header">
59-
<span class="badge in-dev">IN DEVELOPMENT</span>
122+
<span class="badge flagship">FLAGSHIP</span>
60123
</div>
61124
<h3>Tandem Browser</h3>
62125
<p class="project-tagline">AI-Human Symbiotic Browser</p>
@@ -182,6 +245,90 @@ <h3>Databases</h3>
182245
</div>
183246
</section>
184247

248+
<!-- ==================== ABOUT ==================== -->
249+
<section id="about">
250+
<h2 class="section-title">About</h2>
251+
<p class="section-subtitle">The person behind the projects.</p>
252+
<div class="about-grid">
253+
<div class="about-text">
254+
<p>I'm Robin — AI systems architect based in Herent, Belgium. 35 years in IT. Started as a sysadmin, ran a VR company, now building autonomous AI systems solo out of a home office.</p>
255+
<p>I think in systems. Not in tasks or sprints — in the way pieces connect and where they break. That instinct comes from 35 years of keeping production infrastructure alive for banks, hospitals, and telecoms.</p>
256+
<p>The projects on this page exist because nobody else made them. Tandem because AI needs a browser that doesn't leak data. Kanbu because PM tools weren't built for AI workflows. TotalRecall because AI that forgets everything is just expensive autocomplete.</p>
257+
</div>
258+
<div class="about-aside">
259+
<div class="about-aside-item">
260+
<span class="aside-label">Location</span>
261+
<span class="aside-value">Herent, Belgium</span>
262+
</div>
263+
<div class="about-aside-item">
264+
<span class="aside-label">Availability</span>
265+
<span class="aside-value available">Open to contracts</span>
266+
</div>
267+
<div class="about-aside-item">
268+
<span class="aside-label">Entity</span>
269+
<span class="aside-value">Mblock BV (B2B)</span>
270+
</div>
271+
<div class="about-aside-item">
272+
<span class="aside-label">Languages</span>
273+
<span class="aside-value">Dutch · English</span>
274+
</div>
275+
<div class="about-links">
276+
<a href="https://linkedin.com/in/robinwaslander" target="_blank" rel="noopener">LinkedIn</a>
277+
<a href="https://github.com/hydro13" target="_blank" rel="noopener">GitHub</a>
278+
<a href="https://x.com/Robin_waslander" target="_blank" rel="noopener">X</a>
279+
</div>
280+
</div>
281+
</div>
282+
</section>
283+
284+
<!-- ==================== EXPERIENCE ==================== -->
285+
<section id="experience">
286+
<h2 class="section-title">Experience</h2>
287+
<p class="section-subtitle">Where the 35 years come from.</p>
288+
<div class="experience-list">
289+
290+
<div class="exp-item">
291+
<div class="exp-left">
292+
<span class="exp-date">2025 — Present</span>
293+
</div>
294+
<div class="exp-right">
295+
<h3>AI Architect &amp; Builder — Mblock BV</h3>
296+
<p>Building Tandem, Kanbu, and autonomous AI systems. Solo architecture, solo development, solo deployment.</p>
297+
<div class="exp-tags">
298+
<span>TypeScript</span><span>AI/ML</span><span>Electron</span><span>MCP</span><span>Claude API</span>
299+
</div>
300+
</div>
301+
</div>
302+
303+
<div class="exp-item">
304+
<div class="exp-left">
305+
<span class="exp-date">2017 — 2022</span>
306+
</div>
307+
<div class="exp-right">
308+
<h3>Co-founder &amp; CTO — Meta3D BV</h3>
309+
<p>Built a virtual reality company from zero. Software architecture, hardware procurement, client delivery. Ran until 2022.</p>
310+
<div class="exp-tags">
311+
<span>VR / AR</span><span>Unity</span><span>C#</span><span>Hardware</span>
312+
</div>
313+
</div>
314+
</div>
315+
316+
<div class="exp-item">
317+
<div class="exp-left">
318+
<span class="exp-date">1990 — 2017</span>
319+
</div>
320+
<div class="exp-right">
321+
<h3>Senior Systems Engineer — Enterprise IT</h3>
322+
<p>27 years keeping production infrastructure alive. Clients: Postbank, ING, Deventer Ziekenhuis, KPN, Stichting Talant. MCSE certified 2001.</p>
323+
<div class="exp-tags">
324+
<span>MCSE</span><span>Windows Server</span><span>Security</span><span>Active Directory</span><span>Network</span>
325+
</div>
326+
</div>
327+
</div>
328+
329+
</div>
330+
</section>
331+
185332
<!-- ==================== HIRE ME ==================== -->
186333
<section id="hire">
187334
<h2 class="section-title">Hire Me</h2>

‎script.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,19 @@
9090
setTimeout(runTerminal, 600);
9191
})();
9292

93+
// Nav scroll behavior
94+
(function () {
95+
const navbar = document.getElementById('navbar');
96+
if (!navbar) return;
97+
window.addEventListener('scroll', () => {
98+
if (window.scrollY > 40) {
99+
navbar.classList.add('scrolled');
100+
} else {
101+
navbar.classList.remove('scrolled');
102+
}
103+
}, { passive: true });
104+
})();
105+
93106
// Scroll reveal animation
94107
(function () {
95108
const observer = new IntersectionObserver(
@@ -109,7 +122,7 @@
109122
{ threshold: 0.1 }
110123
);
111124

112-
document.querySelectorAll('.project-card, .skill-group, .hire-card').forEach(el => {
125+
document.querySelectorAll('.project-card, .skill-group, .hire-card, .exp-item').forEach(el => {
113126
observer.observe(el);
114127
});
115128
})();

0 commit comments

Comments
 (0)