die Libelle

Finn

Finn hat die Website für dieses Projekt komplett selbst gebaut, das Design, den Code, alles.

Web-Entwicklung & Design
Persönlichkeit

Was macht Finn aus?

Finn programmiert seit ein paar Jahren und hat dieses Projekt genutzt, um zum ersten Mal eine richtige Website von Anfang bis Ende selbst zu bauen.

Coder

HTML, CSS und JavaScript sind Finns Alltag. Alle Animationen auf dieser Seite hat er selbst geschrieben, keine Vorlagen, kein Copy-Paste.

Designer

Für Finn hängen Code und Design zusammen. Eine Seite, die technisch funktioniert, aber hässlich aussieht, zählt für ihn nicht als fertig.

Problemlöser

Wenn etwas nicht funktioniert, hört Finn nicht auf, bis er weiß woran es liegt. Das dauert manchmal länger, aber dann ist es wirklich behoben.

0 Zeilen Code
geschrieben
0 eigene CSS-
Animationen
0 Seiten von
Grund auf gebaut
Beitrag zum Projekt

Finns Beitrag

Während die anderen sich um die Inhalte und die Planung des Workshops gekümmert haben, hat Finn die Website gebaut. Die ganze Seite, die du gerade siehst, hat er von Anfang an selbst programmiert und designed.

  • Gesamte Website konzipiert, designed und von Grund auf programmiert
  • Alle Animationen und interaktiven Elemente selbst entwickelt
  • Design-System und visuelle Sprache des Projekts festgelegt
  • Barrierefreiheit und Responsivität für alle Geräte sichergestellt
HTML5 CSS3 Animations JavaScript Canvas API IntersectionObserver SVG Web Accessibility Responsive Design
// Glühwürmchen-Partikel — jedes Licht ein eigenes Leben
class Firefly {
  constructor(born) {
    this.reset();
    if (born) this.life = Math.floor(Math.random() * this.maxLife);
  }
  update(t) {
    const ang = Math.sin(t * 0.0005 + this.no) * 0.8;
    this.vx += Math.cos(ang) * 0.013;
    this.vy += Math.sin(ang) * 0.013;
    this.x  += this.vx;
    this.y  += this.vy;
  }
  draw(ctx) {
    const g = ctx.createRadialGradient(
      this.x, this.y, 0,
      this.x, this.y, this.r * 6
    );
    g.addColorStop(0, this.color);
    g.addColorStop(1, 'transparent');
    ctx.fillStyle = g;
    ctx.fill();
  }
}
Wenn Technik wirklich gut gemacht ist, fällt sie gar nicht auf. Man merkt sie nur, wenn sie nicht da ist. Finn