Information
All Works
WIJNAND BREDEWOLD
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vogel Monitoring — Zwolle Langenholte</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Fira+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --moss: #2e3d22; --fern: #4d6238; --sage: #7a9160; --reed: #c2ae7a; --sand: #e8dfc8; --linen: #f2ece0; --dusk: #1c2617; --water: #3d5a4e; --mist: #9ab08e; --ink: #181e12; --card-bg: rgba(255,255,255,0.72); --card-border: rgba(0,0,0,0.10); --radius: 20px; } html { scroll-behavior: smooth; } body { background: var(--linen); color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; line-height: 1.7; min-height: 100vh; } /* HERO */ .hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } .hero-img { position: absolute; inset: 0; background: var(--dusk); } .hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; opacity: 1; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,22,10,0.92) 0%, rgba(15,22,10,0.45) 45%, rgba(15,22,10,0.1) 100%); } .hero-content { position: relative; z-index: 2; padding: 3rem 5vw 4.5rem; } .hero-tag { font-family: "Fira Mono", monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 10px; } .hero-tag::before { content: ""; width: 28px; height: 1px; background: var(--sage); } h1 { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 300; line-height: 1.0; color: var(--sand); letter-spacing: -0.02em; max-width: 16ch; } h1 em { font-style: italic; color: var(--sage); } .hero-sub { margin-top: 1.6rem; font-size: 1.05rem; font-weight: 300; color: rgba(232,223,200,0.75); max-width: 56ch; letter-spacing: 0.02em; } .live-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 1.8rem; padding: 6px 14px 6px 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; font-family: "Fira Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,223,200,0.7); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); } .scroll-hint { position: absolute; bottom: 2rem; right: 5vw; z-index: 2; font-family: "Fira Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(154,176,142,0.6); writing-mode: vertical-rl; display: flex; align-items: center; gap: 8px; } .scroll-hint::after { content: ""; width: 1px; height: 44px; background: var(--sage); } /* NAV */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem 5vw; display: flex; justify-content: space-between; align-items: center; background: rgba(28,38,23,0.7); backdrop-filter: blur(10px); } .nav-logo { font-family: "Fira Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand); text-decoration: none; } .nav-links { display: flex; gap: 2.2rem; } .nav-links a { font-family: "Fira Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); text-decoration: none; } /* PAGE */ .page { padding: 0 5vw 6rem; } .section-label { font-family: "Fira Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fern); margin-bottom: 2rem; display: flex; align-items: center; gap: 10px; } .section-label::before { content: ""; width: 26px; height: 1px; background: var(--fern); } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .card-header { padding: 16px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-title { font-family: "Fira Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss); font-weight: 500; } .card-divider { border: none; border-top: 1px solid var(--card-border); margin: 0; } /* SPECTROGRAM */ .spec-section { padding: 4rem 5vw 0; } .spec-section .section-label { margin-bottom: 1.4rem; } .spec-header-text, .bw-header-text { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 300; line-height: 1.15; color: var(--moss); margin-bottom: 0.6rem; } .spec-header-text em, .bw-header-text em { font-style: italic; color: var(--water); } .spec-desc, .bw-desc { font-size: 0.97rem; font-weight: 300; color: #4a4a3a; max-width: 60ch; margin-bottom: 2.2rem; line-height: 1.65; } #spec { display: block; width: 100%; height: 280px; background: #063b2b; margin: 0; } @media (max-width:520px) { #spec { height: 220px !important; } } .spec-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; border-top: 1px solid var(--card-border); background: rgba(255,255,255,0.55); } .spec-status { display: flex; align-items: center; gap: 8px; font-family: "Fira Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(46,61,34,0.55); } .spec-status-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.18); } #enableSpec { margin-left: auto; padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.18); background: var(--moss); color: var(--sand); cursor: pointer; font-family: "Fira Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; white-space: nowrap; text-decoration: none; display: inline-block; } .audio-wrap { padding: 12px 16px 16px; border-top: 1px solid var(--card-border); background: rgba(255,255,255,0.45); } #listenAudio { width: 100%; display: block; } /* BIRDWEATHER */ .bw-section { padding: 4rem 5vw 0; } .bw-frame { border: 0; width: 100%; height: 1000px; display: block; } @media (max-width:520px) { .bw-frame { height: 70vh; min-height: 520px; } } /* FOOTER */ footer { background: var(--ink); padding: 3.5rem 5vw; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; } .footer-name { font-size: 1.6rem; font-weight: 300; color: var(--sand); margin-bottom: 0.4rem; } .footer-desc { font-size: 0.88rem; color: var(--mist); font-weight: 300; max-width: 42ch; } .footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; } .footer-links a { font-family: "Fira Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); text-decoration: none; } .footer-bottom { width: 100%; border-top: 1px solid rgba(154,176,142,0.12); padding-top: 1.4rem; font-family: "Fira Mono", monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(154,176,142,0.3); display: flex; justify-content: space-between; } .reveal { opacity: 1; transform: none; } @media (max-width:600px) { .nav-links { display: none; } footer { flex-direction: column; } .footer-links { align-items: flex-start; } .footer-bottom { flex-direction: column; gap: 0.4rem; } } </style> </head> <body> <nav id="mainnav"> <a href="#" class="nav-logo">Wijnand Bredewold</a> <div class="nav-links"> <a href="#livestream">Live stream</a> <a href="#detectie">Vogel detectie</a> <a href="https://wijnandbredewold.nl" target="_blank" rel="noopener noreferrer">Portfolio</a> </div> </nav> <section class="hero"> <div class="hero-img"> <img src="https://freight.cargo.site/t/original/i/Z2793324126806712240562009831527/Buitenlanden-Langeholte.jpg" alt="Buitenlanden Langenholte" > </div> <div class="hero-overlay"></div> <div class="hero-content"> <div class="hero-tag">Buitenlanden Langenholte, Zwolle</div> <h1>Vogel<em>monitoring</em><br>Langenholte</h1> <p class="hero-sub">Realtime geluid, spectrogram en AI-vogeldetectie vanuit de buitenlanden Langenholte waar de Vecht en het Zwarte Water samenkomen.</p> <div class="live-badge" id="heroBadge"> <span class="live-dot"></span> <span id="heroBadgeText">Stream beschikbaar</span> </div> </div> <div class="scroll-hint">Scroll</div> </section> <section class="spec-section" id="livestream"> <div class="section-label">Live stream</div> <h2 class="spec-header-text">24/7 audio & <em>spectrogram</em></h2> <p class="spec-desc">Een continue livestream vanuit het natuurgebied. Het spectrogram visualiseert de geluiden in realtime — elke vogelroep verschijnt als een lichtspoor op het scherm.</p> <div class="card spec-card reveal" id="specCard"> <div class="card-header"> <div class="card-title">Live audio · Buitenlanden Langenholte</div> </div> <hr class="card-divider"> <canvas id="spec" aria-label="Audio spectrogram" width="3301" height="300"></canvas> <div class="spec-bar"> <div class="spec-status"> <span class="spec-status-dot"></span> <span id="specStatusText">Inactief</span> </div> <a href="#" id="enableSpec" role="button" aria-label="Start Live Stream">Start Live Stream</a> </div> <hr class="card-divider"> <div class="audio-wrap"> <audio id="listenAudio" controls crossorigin="anonymous" preload="none" playsinline src="https://locus.creacast.com:9443/zwolle_nature_reserve_langenholte.mp3" ></audio> </div> </div> </section> <section class="bw-section page" id="detectie"> <div class="section-label">AI-detectie</div> <h2 class="bw-header-text">Realtime vogel<em>detectie</em></h2> <p class="bw-desc">BirdWeather analyseert de livestream continu met het BirdNET-model van Cornell Lab. Elke gedetecteerde soort verschijnt direct in het overzicht hieronder.</p> <div class="card reveal"> <div class="card-header"> <div class="card-title">BirdWeather · Live detecties</div> </div> <hr class="card-divider"> <iframe class="bw-frame" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://app.birdweather.com/data/uuqUZFYsEgLySc4oTJQXPnc9; title="BirdWeather realtime vogeldetectie Langenholte" >