Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colin Poort β Creative Developer Portfolio</title>
<meta name="description"
content="Portfolio of Colin Poort, a Creative Developer specializing in unique digital experiences, web development, and UI/UX design.">
<meta property="og:title" content="Colin Poort β Creative Developer Portfolio">
<meta property="og:description"
content="Portfolio of Colin Poort, a Creative Developer specializing in unique digital experiences, web development, and UI/UX design.">
<meta property="og:image" content="image/IMG_4909.jpg">
<meta property="og:type" content="website">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="loader">
<div class="loader-content">
<div class="text-line">
<h1 class="loader-name">COLIN POORT</h1>
</div>
<div class="text-line">
<p class="loader-title">CREATIVE DEVELOPER</p>
</div>
</div>
<div class="loader-percentage">0%</div>
</div>
<nav class="navbar">
<a href="#home" class="nav-logo">Colin Poort</a>
<div class="nav-links">
<a href="#home" class="rolling-link"><span data-text="Home">Home</span></a>
<a href="#about" class="rolling-link"><span data-text="About">About</span></a>
<a href="#work" class="rolling-link"><span data-text="Work">Work</span></a>
</div>
<div class="hamburger-menu">
<span></span>
<span></span>
</div>
</nav>
<div class="mobile-nav-overlay">
<div class="mobile-nav-links">
<a href="#home" class="mobile-link">Home</a>
<a href="#about" class="mobile-link">About</a>
<a href="#work" class="mobile-link">Work</a>
<a href="#contact" class="mobile-link">Contact</a>
</div>
</div>
<div class="hero-container" id="home">
<video autoplay muted loop playsinline>
<source src="https://videos.pexels.com/video-files/3129671/3129671-uhd_2560_1440_24fps.mp4"
type="video/mp4">
</video>
<div class="video-overlay"></div>
<div class="hero-text">
<h1>I Build<br>Digital<br>
<span class="word-mask">
<span class="word-track">
<span>Experiences</span>
<span>Solutions</span>
<span>Products</span>
<span>Futures</span>
</span>
</span>
</h1>
<p>Creative Studio</p>
</div>
</div>
<div class="page-wrapper">
<div class="content-section">
<div class="content-wrapper">
<div class="about-section" id="about">
<div class="about-image reveal-on-scroll">
<img src="image/IMG_4909.jpg" alt="Profile Photo">
</div>
<div class="about-text reveal-on-scroll">
<h2>Hi, I'm Colin.</h2>
<p>
Ik ben een digital creator die de grens opzoekt tussen design en technologie. Met een focus
op detail, interactie en performance bouw ik digitale ervaringen die zowel esthetisch als
functioneel sterk zijn. Mijn werk combineert technische precisie met creatieve
conceptontwikkeling om oplossingen te creΓ«ren die impact maken.
</p>
<div class="bracket-button-wrapper" style="margin: 30px 0 0 0;">
<a href="image/CV.pdf" class="rolling-link">
<span data-text="Download CV">Download CV</span>
</a>
</div>
</div>
</div>
<!-- SKILLS SECTION -->
<div class="skills-section reveal-on-scroll">
<div class="section-header" style="font-size: 5rem; margin-bottom: 0;">CAPABILITIES</div>
<div class="skills-grid">
<div class="skill-category">
<h3>What I Do</h3>
<ul class="skill-list">
<li><strong>Web Development</strong><br>HTML, CSS, JavaScript, PHP, MySQL, API
Integratie</li>
<li><strong>UI/UX Design</strong><br>User flows, Wireframes, Prototyping, Interaction
Design</li>
<li><strong>Branding & Identity</strong><br>Logoβs, Visual Systems, Storytelling</li>
<li><strong>Creative Development</strong><br>Animaties, Micro-interacties, GSAP
Experiences</li>
</ul>
</div>
<div class="skill-category">
<h3>Tools</h3>
<ul class="skill-list">
<li>Figma</li>
<li>VS Code</li>
<li>PHP / Laravel</li>
<li>JavaScript / GSAP</li>
<li>MySQL</li>
<li>Git / GitHub</li>
</ul>
</div>
</div>
</div>
<div class="section-header reveal-on-scroll">WORK</div>
<div class="projects-grid" id="work">
<!-- Project 01 (Formerly 02) -->
<a href="#" class="project-card reveal-on-scroll">
<div class="project-content">
<span class="project-number">01</span>
<div class="project-type">Web Application</div>
<h3 class="project-title">Club Management Portal</h3>
<p class="project-description">Een dynamisch beheerplatform voor de voetbalvereniging. Maakt
het mogelijk om taken te creΓ«ren, gebruikers te beheren en de organisatie van de club
digitaal te stroomlijnen.</p>
<div class="bracket-button-wrapper">
<span class="rolling-link">
<span data-text="Bekijk Project">Bekijk Project</span>
</span>
</div>
</div>
<div class="image-wrapper">
<img src="image/voetbalschoen.png" alt="Lightweight">
</div>
</a>
<!-- Project 02 (Formerly 03) -->
<a href="#" class="project-card reveal-on-scroll">
<div class="project-content">
<span class="project-number">02</span>
<div class="project-type">Web Design & Redesign</div>
<h3 class="project-title">Heinen & Koelewijn</h3>
<p class="project-description">Volledige redesign voor marktleider Heinen & Koelewijn. Een
fris digitaal platform dat ambachtelijk vakmanschap verbindt met een moderne,
conversie-gerichte gebruikerservaring.</p>
<div class="bracket-button-wrapper">
<span class="rolling-link">
<span data-text="Bekijk Project">Bekijk Project</span>
</span>
</div>
</div>
<div class="image-wrapper">
<img src="image/h&k.png" alt="Kendrick">
</div>
</a>
<!-- Project 03 (Formerly 05) -->
<a href="/gastenboek" target="_blank" class="project-card reveal-on-scroll">
<div class="project-content">
<span class="project-number">03</span>
<div class="project-type">Web Application</div>
<h3 class="project-title">Gastenboek</h3>
<p class="project-description">Een eenvoudig gastenboek waarin je berichten kunt
achterlaten. Gemaakt met PHP en JSON.</p>
<div class="bracket-button-wrapper">
<span class="rolling-link">
<span data-text="Bekijk Project">Bekijk Project</span>
</span>
</div>
</div>
<div class="image-wrapper">
<img src="image/gastenboek.png" alt="Gastenboek">
</div>
</a>
<!-- Project 04 (Formerly 06) -->
<a href="/l3-pro-3-ergowijzer-dumble" target="_blank" class="project-card reveal-on-scroll">
<div class="image-wrapper">
<img src="image/ergowijzer.png" alt="Ergowijzer">
</div>
<div class="project-content">
<span class="project-number">04</span>
<div class="project-type">Group Project</div>
<h3 class="project-title">Ergowijzer</h3>
<p class="project-description">Een groepsproject waarbij we een website moesten maken en
inleveren via een platform.</p>
<div class="bracket-button-wrapper">
<span class="rolling-link">
<span data-text="Bekijk Project">Bekijk Project</span>
</span>
</div>
</div>
</a>
</div> <!-- Close projects-grid -->
</div> <!-- Close content-wrapper -->
</div> <!-- Close content-section -->
<!-- CONTACT SECTION -->
<div class="contact-section" id="contact">
<div class="moving-glow"></div>
<div class="corner-glow"></div>
<div class="contact-header reveal-on-scroll">Got a project in mind?</div>
<h2 class="contact-title reveal-on-scroll">Let's build<br>something together</h2>
<div class="bracket-button-wrapper">
<a href="mailto:colinpoort@hotmail.com" class="rolling-link reveal-on-scroll">
<span data-text="WRITE A MESSAGE">WRITE A MESSAGE</span>
</a>
</div>
</div>
<div class="contact-footer reveal-on-scroll">
<div class="footer-text">Send me a message or find me on</div>
<div class="footer-links">
<a href="#" target="_blank" title="My Instagram">INSTAGRAM</a> /
<a href="#" target="_blank" title="My LinkedIn Profile">LINKEDIN</a> /
<a href="#" target="_blank" title="Check my Code on GitHub">GITHUB</a>
</div>
</div>
<footer class="global-footer">
© 2025 Colin Poort. All Rights Reserved.
</footer>
</div>
<!-- SCRIPTS -->
<script src="js/kaas.js"></script>
</body>
</html>