CSS day-ta Hackathon

De hackathon

In de week van 25 maart werd op de minor Web Development & Design een hackthon georganiseerd. Waar wij voor het 10 jarige jubileum van CSS day een website mochten ontwerpen. Hiervoor kregen we de data van de afgelopen 10 jaar via cssday.nl/data, daar mochten we mee doen wat we wilden. Wij zijn door de jury bestaande uit Peter Paul Koch en Krijn Hoetmer als beste uitgekozen en hebben kaartjes voor CSS day gewonnen.

Onze Website

Onze website laat in 10 vlakken wat zien van de afgelopen 9 jaren CSS day, met een feestelijk blokje voor dit jaar: vuurwerk. Als navigatie hebben wij een grafiek gebruikt die per jaar de prijs, het aantal deelnemers en het aantal weergaven laat zien. De grafiek scrollt mee als je naar de verschillende jaren toe scrollt, of andersom kan je op de grafiek klikken om naar een jaar te scrollen.

Mijn Rol: Animaties

Ik heb me het meeste bezig gehouden met de vele CSS animaties in de applicatie.

• Laad scherm met logo

  

  Als opener voor de app heb ik het CSS day logo geanimeerd.

• Animatie van de grafiek op scroll

  De grafiek animeert mee op de scroll van de sectie er onder. Die twee kan je koppelen met scroll animaties in CSS. Verder is de grafiek gewoon een vlakje in de achtergrondkleur die voor de lijntjes schuift. Een hackathon moet wel hacky blijven.

  body {
      timeline-scope: --section-1;
  }
  
  main {
      scroll-timeline: --section-1;
  }
  
  .graph {
      animation-timeline: --section-1;
  }

• Vuurwerk animatie

  

  Bij het huidige jaar komt er een vuurwerk animatie om het jubileum te vieren.

Reflectie

Naast dat ik natuurlijk veel over code heb geleerd, zoals scroll animaties heb ik ook iets anders belangrijks geleerd: slordig werken. Tot nu toe werk ik altijd heel netjes en geordend, maar bij de hackathon kwam ik er achter dat door een beetje slordiger te werken, je heel snel iets werkends neer kan zetten. Het slordige werken kwam natuurlijk door de tijdsdruk, maar ik denk dat als je dus kort de tijd hebt, dit ook een goede manier is om heel snel je concept duidelijk te maken. Als dat duidelijk is en het werkt goed, kan het later altijd nog netter.