![Portfolio website](https://www.nellyaa.com/assets/artworks/_1200x675_crop_center-center_100_line/portfolio_website_2021-08-03-152415_zftf.jpg 1200w, https://www.nellyaa.com/assets/artworks/_900x506_crop_center-center_100_line/portfolio_website_2021-08-03-152415_zftf.jpg 900w, https://www.nellyaa.com/assets/artworks/_600x337_crop_center-center_100_line/portfolio_website_2021-08-03-152415_zftf.jpg 600w, https://www.nellyaa.com/assets/artworks/_350x196_crop_center-center_100_line/portfolio_website_2021-08-03-152415_zftf.jpg 350w)
Nellyaa Illustration & Grafik
Meine Website auf Craft CMS
Meine aktuelle Portfolio-Website, ganz für den Eigengebrauch. Ziel war es, das eigene Schaffen ansprechend und modern in Szene zu setzen.
Vorgaben & Features
- Eine einzigartige und professionelle Erscheinung
- Den Portfolio-Stücken visuell den Vortritt lassen
- Perfekter PageSpeed-Score dank optimiertem Code und modernem CMS
- Responsiv für alle Gerätegrößen
- Zweisprachig
Umsetzung
- Designen des groben Layouts in Photoshop & Figma
- HTML, CSS & JavaScript from Scratch, kein Bootstrap oder Tailwind
- Frontend Development mit Templating-Sprache Twig
- Einrichten und Aufsetzen von Craft CMS
Themen-Filter
Reiner JavaScript-Filter mit CSS-Animationen
Für mein Portfolio wollte ich ein Filter-Feature erstellen, was die Möglichkeit bietet, Portfolio-Stücke nach bestimmten Themen (Tags) zu durchsuchen. Dazu sollte das ganze ansprechend aussehen und animiert sein. Die Animationen sind rein CSS-basiert und daher extrem performant.
Die Tags werden automatisch aus den Tags im Seiten-Content generiert und die einzelnen Elemente dann mit JavaScript angezeigt/versteckt.