Deze Website

Over dit project

2026 • Website

Deze website heb ik in elkaar gezet om mijn portfolio te tonen. De website is gebouwd met HTML, CSS en JavaScript. Een creatieve manier om mijn vaardigheden als developer te showcasen - de website zelf is mijn beste werk.

Features

• Responsive design - werkt op alle apparaten
• Animaties en smooth scrolling
• Moderne dark mode design met neon accenten
• Mobile-first benadering
• Accessibility best practices (ARIA labels, semantic HTML)

Stack

Code Showcase

Hieronder zie je enkele highlights uit de code:

<section id="home" class="hero">
  <div class="container hero-grid">
    <div class="hero-content">
      <h1 class="title">Ruben Kuhne – 
        <span>Software Developer</span>
      </h1>
      <p class="lead">Ervaren softwareontwikkelaar 
        met passie voor moderne webtechnologieën...
      </p>
      <p class="cta-row">
        <a class="btn primary large" href="#contact">
          Neem contact op
        </a>
      </p>
    </div>
  </div>
</section>

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.35);
  font-weight: 600;
}

.btn.primary:hover {
  background: var(--accent-light);
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.5);
  transform: translateY(-3px);
  transition: all 200ms ease;
}

const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      observer.unobserve(entry.target);
    }
  });
}, observerOptions);

document.querySelectorAll('.section, .card').forEach(el => {
  observer.observe(el);
});

const navToggle = document.getElementById('nav-toggle');
const mainNav = document.getElementById('main-nav');

navToggle.addEventListener('click', function() {
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', String(!expanded));
  mainNav.classList.toggle('open');
});

mainNav.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', () => {
    mainNav.classList.remove('open');
    navToggle.setAttribute('aria-expanded', 'false');
  });
});

Lessons Learned

Dit project leerde me veel over modern web design, CSS animations, en JavaScript interactiviteit. Vooral het belang van accessibility en mobile-first development is me duidelijk geworden. De focus op performance en user experience zorgde ervoor dat ik beter begrijp hoe gebruikers met websites interacteren.

Terug naar projecten