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 β Portfolio Creatief Developer</title>
<meta name="description"
content="Portfolio van Colin Poort, een Creatief Developer gespecialiseerd in unieke digitale ervaringen, webontwikkeling en UI/UX-design.">
<meta property="og:title" content="Colin Poort β Portfolio Creatief Developer">
<meta property="og:description"
content="Portfolio van Colin Poort, een Creatief Developer gespecialiseerd in unieke digitale ervaringen, webontwikkeling en 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>
<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.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">CREATIEF 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="Over">Over</span></a>
<a href="#work" class="rolling-link"><span data-text="Werk">Werk</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">Over</a>
<a href="#work" class="mobile-link">Werk</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>Ik Bouw<br>Digitale<br>
<span class="word-mask">
<span class="word-track">
<span>Ervaringen</span>
<span>Oplossingen</span>
<span>Producten</span>
<span>Toekomst</span>
</span>
</span>
</h1>
<p>Creatieve 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>Hoi, ik ben 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;">VAARDIGHEDEN</div>
<div class="skills-grid">
<div class="skill-category">
<h3>Wat Ik Doe</h3>
<ul class="skill-list">
<li><strong>Webontwikkeling</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 & Identiteit</strong><br>Logoβs, Visual Systems, Storytelling</li>
<li><strong>Creatieve Ontwikkeling</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">WERK</div>
<div class="projects-grid" id="work">
<!-- Project 01 (Formerly 02) -->
<a href="/l8-pro-2-gouden-voetbalschoen-2024-post-it" class="project-card reveal-on-scroll">
<div class="project-content">
<span class="project-number">01</span>
<div class="project-type">Webapplicatie</div>
<h3 class="project-title">Voetbal</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="Club Management Portal">
</div>
</a>
<!-- Project 02 (Formerly 03) -->
<a href="/Heinen-Koelewijn/website" class="project-card reveal-on-scroll">
<div class="project-content">
<span class="project-number">02</span>
<div class="project-type">Webdesign & 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="Heinen & Koelewijn">
</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">Webapplicatie</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">Groepsproject</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">Heb je een project in gedachten?</div>
<h2 class="contact-title reveal-on-scroll">Laten we samen<br>iets bouwen</h2>
<div class="bracket-button-wrapper">
<a href="mailto:colinpoort@hotmail.com" class="rolling-link reveal-on-scroll">
<span data-text="STUUR EEN BERICHT">STUUR EEN BERICHT</span>
</a>
</div>
</div>
<div class="contact-footer reveal-on-scroll">
<div class="footer-text">Stuur me een bericht of vind me op</div>
<div class="footer-links">
<a href="https://www.instagram.com/colin_poort/" target="_blank" title="My Instagram">INSTAGRAM</a> /
<a href="https://www.linkedin.com/in/colin-poort-587a7b295/" target="_blank" title="My LinkedIn Profile">LINKEDIN</a> /
<a href="https://github.com/ColinPoort" target="_blank" title="Check my Code on GitHub">GITHUB</a>
</div>
</div>
<footer class="global-footer">
© 2025 Colin Poort. Alle Rechten Voorbehouden.
</footer>
</div>
<!-- SCRIPTS -->
<script src="js/kaas.js"></script>
</body>
</html>