File: /home/wbwebdes/domains/willemblankevoort.nl/public_html/index.html
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Willem — CKV Cultureel Zelfportret</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg1: #fff7fb;
--bg2: #f6fbff;
--accent-1: #6f42c1;
--accent-2: #e96cc3;
--paper: #fffdfa;
--muted: #6b7280;
--card-radius: 18px;
}
* {
box-sizing: border-box
}
html,
body {
height: 100%
}
body {
margin: 0;
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial;
background: linear-gradient(180deg, var(--bg1), var(--bg2));
color: #111827;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------- PAGE LAYOUT ---------- */
.wrap {
max-width: 1200px;
margin: 28px auto;
padding: 24px;
}
.hide {
display: none
}
/* ---------- HERO / SCRAPBOOK ---------- */
.hero {
position: relative;
display: grid;
grid-template-columns: 320px 1fr;
gap: 28px;
align-items: center;
margin-bottom: 24px;
}
.scrap {
background: linear-gradient(180deg, #fff, #fff9fb);
border-radius: 22px;
padding: 22px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
position: relative;
overflow: visible;
border: 1px solid rgba(15, 23, 42, 0.04);
}
.portrait {
width: 260px;
height: 260px;
border-radius: 14px;
overflow: hidden;
margin: -60px auto 8px;
box-shadow: 0 18px 50px rgba(2, 6, 23, 0.18);
transform: rotate(-2deg);
transition: transform .6s cubic-bezier(.2, .9, .3, 1);
}
.portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.portrait:hover {
transform: rotate(0deg) scale(1.02)
}
.tagline {
text-align: center;
margin-top: 8px;
font-weight: 600;
color: var(--accent-1);
letter-spacing: 0.2px;
}
.hero-meta {
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.meta-badge {
display: inline-flex;
gap: 10px;
align-items: center;
background: linear-gradient(90deg, rgba(111, 66, 193, 0.12), rgba(233, 108, 195, 0.06));
padding: 8px 12px;
border-radius: 999px;
color: var(--accent-1);
font-weight: 600;
width: max-content;
}
.name {
font-size: 28px;
font-weight: 700;
margin: 8px 0;
}
.intro {
color: var(--muted);
font-size: 15px
}
.decor {
position: absolute;
right: -36px;
top: -36px;
width: 180px;
height: 180px;
opacity: 0.15;
transform: rotate(15deg);
}
/* tape & polaroid accents */
.tape {
width: 70px;
height: 22px;
background: linear-gradient(90deg, #fff3, #fff6);
position: absolute;
left: 30px;
top: -14px;
border-radius: 4px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
transform: rotate(-10deg);
border: 1px solid rgba(0, 0, 0, 0.04)
}
.handwritten {
font-family: "Poppins";
color: #3b3b3b;
font-weight: 600;
font-size: 13px;
}
/* ---------- CONTENT GRID ---------- */
.grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 28px;
align-items: start;
}
/* main column */
.main-col .card {
background: var(--paper);
border-radius: var(--card-radius);
padding: 22px;
box-shadow: 0 18px 40px rgba(2, 6, 23, 0.06);
margin-bottom: 20px;
position: relative;
overflow: visible;
border: 1px solid rgba(2, 6, 23, 0.03);
}
.card h2 {
color: var(--accent-1);
margin: 0 0 12px 0;
font-size: 20px;
}
/* polaroid gallery (scrap) */
.polaroids {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.polaroid {
width: 190px;
background: white;
padding: 12px 12px 18px;
border-radius: 12px;
transform: rotate(var(--rot));
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
transition: transform .45s cubic-bezier(.2, .9, .3, 1), box-shadow .45s;
border: 1px solid rgba(2, 6, 23, 0.04);
position: relative;
}
.polaroid img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 8px;
display: block
}
.polaroid:hover {
transform: scale(1.05) rotate(0deg);
box-shadow: 0 22px 48px rgba(2, 6, 23, 0.18)
}
.polaroid p {
font-size: 13px;
color: var(--muted);
margin-top: 8px
}
/* right column */
.side-col .card {
position: sticky;
top: 28px;
background: linear-gradient(180deg, #fff, #fffaf7);
padding: 18px;
border-radius: 16px;
box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06);
}
.small-list {
list-style: none;
padding: 0;
margin: 0
}
.small-list li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.04)
}
.small-list li:last-child {
border-bottom: 0
}
/* brush stroke & paint splatter */
.brush {
width: 100%;
height: 80px;
margin-top: -28px;
margin-bottom: 20px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="120" viewBox="0 0 1200 120"><path d="M0 60 C200 10, 400 110, 600 60 C800 10,1000 110,1200 60 L1200 120 L0 120 Z" fill="%23fff0f7" /></svg>') no-repeat center/cover;
opacity: 0.9;
}
/* timeline style */
.timeline {
display: flex;
flex-direction: column;
gap: 14px
}
.timeline-item {
display: flex;
gap: 12px;
align-items: flex-start;
background: linear-gradient(90deg, #fff, #fffefc);
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.timeline-item .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent-2);
margin-top: 6px;
flex-shrink: 0
}
.timeline-item .content {
font-size: 14px;
color: var(--muted)
}
/* playful floating elements */
.float {
position: fixed;
right: 18px;
bottom: 18px;
width: 140px;
height: 140px;
pointer-events: none;
opacity: 0.12;
transform: rotate(-12deg);
}
/* animations */
@keyframes floaty {
0% {
transform: translateY(0) rotate(-4deg)
}
50% {
transform: translateY(-10px) rotate(2deg)
}
100% {
transform: translateY(0) rotate(-4deg)
}
}
.float svg {
animation: floaty 5s ease-in-out infinite
}
/* responsive */
@media (max-width:1100px) {
.grid {
grid-template-columns: 1fr;
}
.hero {
grid-template-columns: 1fr;
text-align: center
}
.portrait {
margin: -40px auto 8px
}
.side-col .card {
position: static
}
}
@media (max-width:520px) {
.polaroid {
width: 48%
}
}
/* small utilities */
.muted {
color: var(--muted)
}
.btn {
display: inline-block;
padding: 10px 14px;
border-radius: 10px;
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
color: white;
font-weight: 600;
text-decoration: none;
box-shadow: 0 8px 24px rgba(111, 66, 193, 0.16);
}
/* PASSWORD BOX */
#loginBox {
max-width: 420px;
margin: 70px auto;
background: white;
padding: 28px;
border-radius: 14px;
box-shadow: 0 18px 48px rgba(2, 6, 23, 0.08);
text-align: center;
}
#loginBox input {
width: 72%;
padding: 10px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.06);
margin-top: 14px
}
#loginBox button {
margin-top: 12px;
padding: 10px 18px;
border-radius: 10px;
border: 0;
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
color: white;
font-weight: 700
}
/* emphasize quote */
.big-quote {
font-size: 20px;
padding: 18px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(111, 66, 193, 0.06), rgba(233, 108, 195, 0.03));
color: #2a2540;
font-weight: 600;
}
</style>
</head>
<body>
<!-- SIMPLE PASSWORD GATE -->
<div id="login" class="wrap">
<div id="loginBox">
<h2 style="margin:0 0 6px">CKV Zelfportret</h2>
<p class="muted" style="margin:0 0 12px">Vul het wachtwoord in om het te bekijken.
<input id="pw" type="password" placeholder="Wachtwoord">
<br>
<button onclick="checkPW()">Open portfolio</button>
<p class="muted" style="margin-top:12px;font-size:13px">Het is natuurlijk niet de bedoeling dat iedereen en z'n moeder dit kan bekijken! LOL</code>.</p>
</div>
</div>
<!-- MAIN SITE -->
<div id="site" class="wrap hide" aria-hidden="true">
<!-- HERO -->
<section class="hero" aria-label="Intro">
<div class="scrap">
<div class="tape" aria-hidden="true"></div>
<div class="portrait">
<!-- REPLACE mijn-foto.jpg with your own image -->
<img src="https://cvo-av-portal-p01.s3.eu-central-1.amazonaws.com/uploads/sites/11/2025/02/SHeFotografie_DeDelta0924_032-450x450.jpg" alt="Portret van Willem">
</div>
<div class="hero-meta">
<div class="meta-badge handwritten">Willem — 16 • Havo 4</div>
<div class="name">Willem</div>
<div class="intro">Bartender & bediening • Eigen bedrijf • Tennisspeler
</div>
<div style="margin-top:12px">
<a class="btn" href="#reflectie">Bekijk mijn reflectie</a>
</div>
</div>
<svg class="decor" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g" x1="0" x2="1">
<stop offset="0" stop-color="#fff" />
<stop offset="1" stop-color="#fff" />
</linearGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="#fff" />
</svg>
</div>
<!-- Artistic headline panel -->
<div style="padding:20px 18px;">
<div
style="background:linear-gradient(90deg,#fff,#fffefb);border-radius:16px;padding:20px;box-shadow:0 10px 40px rgba(2,6,23,0.06)">
<div class="big-quote">"Kunst zit voor mij in beweging, sfeer en de verhalen die mensen met elkaar
delen."</div>
<div style="margin-top:12px;color:var(--muted)">Dit project verzamelt mijn herinneringen,
inspiratiebronnen en creatieve interesses — in beeld, geluid en ervaring.</div>
</div>
<div class="brush" aria-hidden="true"></div>
</div>
</section>
<!-- GRID -->
<section class="grid">
<!-- LEFT: Main content -->
<div class="main-col">
<!-- OVER MIJ (expanded, personal collage) -->
<article class="card" id="over">
<h2>Wie ben ik? — Een collage</h2>
<div style="display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap">
<div style="flex:1;min-width:220px">
<p class="muted">Ik ben <strong>Willem</strong>, 16 jaar en ik zit in Havo 4. Werk in de
horeca: bartender en bediening in een restaurant. Ik heb ook mijn eigen bedrijf waarin
ik creatieve opdrachten doe — dat geeft me vrijheid om te bouwen aan dingen die ik leuk
vind. Verder speel ik tennis en besteed ik veel vrije tijd aan series, films, muziek en
games.</p>
<p class="muted"><strong>Wat mij drijft:</strong> beleving, sfeer maken, creatief zijn en
samen momenten delen met mensen.</p>
</div>
<div style="width:220px">
<div
style="background:#fff;border-radius:12px;padding:8px;box-shadow:0 8px 20px rgba(2,6,23,0.06)">
<img src="https://www.qntsport.com/img/cms/blog/blog-zoom-sur-la-journee-mondiale-du-tennis.jpg" alt="Tennis" style="width:100%;height:110px;object-fit:cover;border-radius:8px">
<p style="font-size:13px;color:var(--muted);margin-top:8px;text-align:center">
<strong>Tennis</strong> — Tja.. Echt goed gaat dat ook weer niet :)</p>
</div>
</div>
</div>
</article>
<!-- VROEGSTE HERINNERING -->
<article class="card" id="herinnering">
<h2>Vroegste herinnering aan kunst</h2>
<p>Dat was natuurlijk op de basisschool, waar je moest knutselen, tekenen, zingen, dansen etc.</p>
<div style="margin-top:14px" class="muted"></div>
</article>
<!-- GALLERY: Polaroid / scrap style -->
<article class="card" id="gallery">
<h2>Meest recent bekeken series</h2>
<p class="muted">Dit zijn mijn meest recent bekeken series en films. Ze staan op volgorde hoe ik ze heb bekeken. (Klik op de afbeelding om hem te vregroten)</p>
<div class="polaroids" id="polaroidWrap">
<!-- polaroids with random rotation via inline style -->
<div class="polaroid" style="--rot:-6deg">
<img src="https://m.media-amazon.com/images/S/pv-target-images/91151a80f46310bbed93ce4acfb0a77b8454fb722ebfbe198c448ba0076e94b2.jpg" alt="Good Luck Guys">
<p>Good Luck Guys</p>
</div>
<div class="polaroid" style="--rot:4deg">
<img src="https://m.media-amazon.com/images/M/MV5BODQ3MTdhNTQtODk3ZC00MTNmLWEwZjEtYmFkNWM2NTI3N2IyXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg" alt="Breaking Bad">
<p>Unknown Number: The High School Catfish</p>
</div>
<div class="polaroid" style="--rot:-3deg">
<img src="https://upload.wikimedia.org/wikipedia/en/6/68/Hostage_%28TV_series%29.jpg" alt="Stranger Things">
<p>Hostage</p>
</div>
<div class="polaroid" style="--rot:8deg">
<img src="https://www.kijkwijzer.nl/media/twrkyiri/knokke-off.jpg?anchor=center&mode=crop&width=480&height=720&quality=80&token=%2FuG5JRriBl" alt="Fast & Furious">
<p>Knokke Off</p>
</div>
<div class="polaroid" style="--rot:-10deg">
<img src="https://m.media-amazon.com/images/S/pv-target-images/f35400cd771573f81531b4f563c4933d25ed3ab91434fa451f2accc8675d5a0c.jpg" alt="Call of Duty">
<p>Shameless</p>
</div>
<div class="polaroid" style="--rot:2deg">
<img src="https://cdn1.edgedatg.com/aws/v2/abc/TheRookie/showimages/d1d9e6af7b6e11c7f1c3c6159068e745/1600x900-Q90_d1d9e6af7b6e11c7f1c3c6159068e745.jpg" alt="Dark">
<p>The Rookie</p>
</div>
</div>
</article>
<!-- MUSIC & GAMES -->
<article class="card" id="muziek">
<h2>Muziek & Games — waar ik mijn tijd aan besteed</h2>
<p class="muted">Muziek is vaak achtergrond bij werk en sport. Mijn voorkeur: hiphop, EDM en beats
die energie geven. Games zijn sociaal: FIFA en Call of Duty met vrienden zorgt voor ontspanning
en competitie.</p>
<div style="margin-top:14px;display:flex;gap:12px;flex-wrap:wrap">
<div
style="min-width:160px;background:#fff;padding:10px;border-radius:12px;box-shadow:0 8px 20px rgba(2,6,23,0.06)">
<strong>Spotify lijst</strong>
<p class="muted" style="font-size:13px;margin:6px 0 0">Party / Work beats</p>
</div>
<div
style="min-width:160px;background:#fff;padding:10px;border-radius:12px;box-shadow:0 8px 20px rgba(2,6,23,0.06)">
<strong>Gaming crew</strong>
<p class="muted" style="font-size:13px;margin:6px 0 0">FIFA & COD avonden</p>
</div>
</div>
</article>
<!-- REFLECTIE -->
<article class="card" id="reflectie">
<h2>Reflectie — wat cultuur voor mij betekent</h2>
<p class="muted">Cultuur is voor mij minder een museumstuk en meer iets dat je voelt: de beat van
een nummer, de adrenaline van een film, de sfeer in een café op een drukke avond. In de horeca
leer ik verhalen kennen — gasten die op bezoek komen, gesprekken en rituelen — en dat is
cultureel. Tennis leert discipline en ritme; games en series geven vriendschap en verhalen.
Alles samen vormt mijn culturele zelfbeeld.</p>
<div style="margin-top:14px" class="big-quote">"Ik kies beleving boven woorden — cultuur bestaat uit
momenten."</div>
<div style="margin-top:16px" class="muted">Toelichting (CKV-opdracht): Hieronder heb ik mijn
antwoorden uitgewerkt voor begeleiding en beoordeling.</div>
<ol style="margin-top:10px;color:#333">
<li><strong>Vroegste herinnering:</strong> tekenen op de basisschool — strips en auto’s.</li>
<li><strong>Culturele activiteiten:</strong> bioscoop, series kijken, festivals, (soms) musea
met school; games en sport zijn cultureel relevant voor mij.</li>
<li><strong>Wat maakte indruk:</strong> grote, visuele films (Oppenheimer), sterke series
(Breaking Bad), concertsfeer op festivals.</li>
<li><strong>Waarom geen boeken?</strong> lezen past minder bij mij — ik verwerk cultuur vooral
visueel en auditief.</li>
</ol>
</article>
<!-- FUTURE -->
<article class="card" id="toekomst">
<h2>Toekomst & doelen</h2>
<p class="muted">Ik wil zowel mijn horeca-vaardigheden verbeteren als mijn bedrijf laten groeien.
Droom: meer reizen (inspiratie), grotere events organiseren en misschien later iets combineren
tussen horeca en creatieve events (pop-up nights, showcases).</p>
</article>
</div>
<!-- RIGHT: SIDE COLUMN -->
<aside class="side-col">
<div class="card">
<h3 style="margin-top:0;color:var(--accent-2)">Snelle feiten</h3>
<ul class="small-list">
<li><span>Leeftijd</span><strong>16</strong></li>
<li><span>Klas</span><strong>Havo 4</strong></li>
<li><span>Werk</span><strong>Bartender & bediening</strong></li>
<li><span>Eigen bedrijf</span><strong>Ja</strong></li>
<li><span>Sport</span><strong>Tennis</strong></li>
<li><span>Favoriete series</span><strong>Stranger Things, Breaking Bad</strong></li>
</ul>
</div>
<div class="card">
<h3 style="margin-top:0;color:var(--accent-1)">Checklist CKV</h3>
<ul style="margin-top:8px;color:var(--muted)">
<li>Vragen netjes beantwoord — ✔</li>
<li>Visueel materiaal toegevoegd — ✔</li>
<li>Reflectie & toekomst — ✔</li>
<li>Privacy (wachtwoord) — basisbescherming</li>
</ul>
</div>
<div class="card">
<h3 style="margin-top:0;color:var(--accent-2)">Contact / Notities</h3>
<p class="muted">Vervang afbeeldingen door je eigen foto’s. Als je wilt kan ik ook een ZIP maken met
afbeeldingen en een printvriendelijke PDF-versie.</p>
<div style="margin-top:10px"><a class="btn" href="#" onclick="window.print();return false">Print
versie</a></div>
</div>
</aside>
</section>
<!-- playful float -->
<div class="float" aria-hidden="true">
<svg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#fff" stroke-width="8" opacity="0.9">
<circle cx="70" cy="70" r="50" stroke-opacity="0.25" />
</g>
<g transform="translate(10,10)" fill="#fff">
<circle cx="40" cy="40" r="6" />
<circle cx="90" cy="40" r="4" />
<circle cx="70" cy="90" r="5" />
</g>
</svg>
</div>
<footer style="text-align:center;margin-top:40px;color:var(--muted);padding-bottom:40px">
© 2025 Willem — Cultureel Zelfportret • Powerd by WB Webdesign and WB Cloud
</footer>
</div>
<script>
// PASSWORD check (client-side)
function checkPW(){
const val = document.getElementById('pw').value.trim();
if(val === 'ckv2025'){ // change this in the file to your own password
document.getElementById('login').classList.add('hide');
const site = document.getElementById('site');
site.classList.remove('hide');
site.removeAttribute('aria-hidden');
window.scrollTo({top:0,behavior:'smooth'});
} else {
alert('Onjuist wachtwoord — probeer opnieuw.');
}
}
// Lightbox for polaroids (simple)
document.addEventListener('click', (e)=>{
const p = e.target.closest('.polaroid');
if(p){
const img = p.querySelector('img');
if(!img) return;
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.left = 0; overlay.style.top = 0; overlay.style.right = 0; overlay.style.bottom = 0;
overlay.style.background = 'rgba(0,0,0,0.75)';
overlay.style.display = 'flex'; overlay.style.alignItems='center'; overlay.style.justifyContent='center';
overlay.style.zIndex = 9999;
overlay.onclick = ()=>overlay.remove();
const large = document.createElement('img');
large.src = img.src;
large.style.maxWidth='90%'; large.style.maxHeight='90%'; large.style.borderRadius='10px';
large.style.boxShadow='0 20px 60px rgba(0,0,0,0.6)';
overlay.appendChild(large);
document.body.appendChild(overlay);
}
});
// sprinkle: random slight rotation for polaroids (if not set)
document.querySelectorAll('.polaroid').forEach((el,i)=>{
if(!el.style.getPropertyValue('--rot')) {
const r = (Math.random()*14)-7;
el.style.setProperty('--rot', r + 'deg');
}
});
// small parallax on scroll for hero image
const hero = document.querySelector('.hero');
window.addEventListener('scroll', ()=>{
const y = window.scrollY;
const portrait = document.querySelector('.portrait');
if(portrait) portrait.style.transform = `translateY(${Math.min(y*0.05, 12)}px) rotate(-2deg)`;
});
</script>
</body>
</html>