Ausgangslage
Durch verschiede Projekte habe ich mich vermehrt mit dem CSS-Framework Tailwind CSS und dem JavaScript-Framework Vue.js befasst. Nach der ganzen Einarbeitungszeit ist mir aufgefallen, dass ich damit mittlerweile relativ schnell zu Prototypen von Webseiten und -Apps komme. Mit dem Projekt «Speedbuild» wollte ich dies auf die Probe stellen.
Vorgehen
Mit der Idee im Kopf startete ich zuerst nicht etwa mit dem Nachbilden der ersten Seite, sondern mit einer davon getrennten Übersichtsseite, welche als Verzeichnis aller «Speedbuilds» dienen sollte.
Speedbuild-Verzeichnis
Das Design dafür erstellte ich von Grund auf selbst. Umgesetzt habe ich das Ganze dann mit dem Vue.js Framework «Gridsome». Aus Markdown-Files mit Infos zu den Projekten wird damit eine sehr performante, statische Webseite mit Platz für Text, Videos und Details zu den einzelnen «Speedbuilds».
Video Intro, Timer, Musik
Für die Videos, welche die «Speedbuilds» festhalten, erstellte ich in After Effects ein kurzes Intro im Design des Speedbuild-Verzeichnisses. Des Weiteren benötigten die Videos natürlich einen Timer. Den Videos sollte zudem Musik unterlegt werden, welche ich ebenfalls im Vornherein suchte.
Speedbuilds
Für die «Speedbuilds» suchte ich bewusst drei sehr unterschiedliche Seiten. Schlussendlich entschied ich mich für «Digezz», «Watson» und die Webseite der «FHGR». Die reinen «Speedbuilds» dauerten von knapp zwei bis knapp drei Stunden. Dabei war es zum Teil etwas schwierig zu einem Schluss zu kommen, da man insbesondere beim Responsive Design immer noch mehr Zeit investieren könnte. Damit die Videos zwischen fünf und zehn Minuten bleiben, entschied ich mich, die Videos in 20-facher Geschwindigkeit zu exportieren.
Veröffentlichung
Das gesamte Projekt mit allen Speedbuilds ist auf GitHub gehostet. Die einzelnen Seiten sind über Netlify mit Continuous Deployment veröffentlicht.
Tools
Die folgenden Tools habe ich für dieses Projekt verwendet:
- Tailwind CSS – Utility-first CSS Framework
- Vue.js – Progressive JavaScript Framework
- Gridsome – Vue.js Framework (Speedbuild-Verzeichnis)
- Unsplash – Beautiful Free Images & Pictures
- Lorem Picsum – Lorem Ipsum for photos
- Placeholder.com – Free Image Placeholder Service
- Netlify – Platform for modern web projects
Fazit
Durch die Umsetzung des Projekts bin ich im Umgang mit Tailwind CSS gefühlt schneller geworden. Insbesondere beim letzten Speedbuild (FHGR) habe ich auch Komponenten und andere Funktionalitäten von Vue.js eingesetzt.
