Skate.

Skate.

2023

Wat was de opdracht?

In mijn tweede semester kreeg ik 3 weken de tijd om een eigen project op te zetten. Dit was een soort passie project waarin je heel veel vrijheid kreeg met wat je deed.

Destijds was ik groot van de game serie Skate, en met name Skate3. De nieuwe skate game was eindelijk aangekondigd na meer dan 10 jaar.

Daarom heb ik ervoor gekozen om mijn eigen trailer / website te maken voor dit nieuwe spel.

Trasher Magazine Cover

In de intro van de video zie je de cover van een Trasher Magazine. Het magazine voor skateboard fans. Deze heb ik ook zelf ontworpen door in Skate 3 een screenshot te maken en verder te knippen en plakken.

Ik heb veel verschillende versies gemaakt en uiteindelijk 1 gekozen door de verschillende versies te testen bij users en de skate subreddit.

Website en mijn game trailer

Voor de video ben ik in Skate 3 gegaan om mijn eigen trucs te doen en te filmen. In skate 3 kan je namelijk d.m.v. keyframes clips maken.

Deze heb ik vervolgens samengevoegd in een trailer. Voor de animatie op het begin heb ik After Effects gebruikt en voor de rest Premiere Pro. De designs die je ziet op het begin en einde zijn gemaakt in Figma.

Ik heb ook een website design gemaakt in HTML, CSS, JS. Hier kan je news bekijken, FAQ zien over Skate. en zelfs een graphic creator zodat je zelfgemaakte graphics in game kan krijgen!

Mijn Skills

HTML

CSS

JS

Figma

Research

User Testen

Premiere Pro

After Effect

Design

Plannen

Initiatief nemen

© 2025 All rights Reserved. • KVK: 96644087

<script>
(function () {
  const KEY = 'headerAnimatedOnce';

  try {
    // Set or check first visit flag
    const seen = localStorage.getItem(KEY);
    if (!seen) {
      localStorage.setItem(KEY, '1');
      return; // ✅ First visit: allow animation
    }
  } catch (e) {
    return; // Fail-safe: allow animation if localStorage blocked
  }

  // ✅ Only runs on return visits
  window.addEventListener('DOMContentLoaded', () => {
    const header = document.querySelector('.elementor-element[data-id="59dfe14"]');

    if (!header) return;

    // Remove animation-related classes if they exist
    header.classList.remove('elementor-invisible', 'animated', 'slideInDown', 'animated-fast');

    // Optional: remove animation settings from Elementor’s data-settings
    const settings = header.getAttribute('data-settings');
    if (settings) {
      try {
        const parsed = JSON.parse(settings);
        delete parsed.animation;
        delete parsed._animation;
        delete parsed._animation_delay;
        header.setAttribute('data-settings', JSON.stringify(parsed));
      } catch (e) {
        // Just remove it if it’s malformed
        header.removeAttribute('data-settings');
      }
    }

    // Inline safety override
    header.style.animation = 'none';
    header.style.transition = 'none';
    header.style.opacity = '1';
    header.style.transform = 'none';
    header.style.visibility = 'visible';
  });
})();
</script>

<style>
/* Prevent animation flicker during load for return visits */
.elementor-element[data-id="59dfe14"].elementor-invisible {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
</style>