MAZIMATES

Το Mazimates είναι ένα κινηματογραφικό, μονοσέλιδο portfolio site για μια ομάδα κριτικών escape rooms. Το site παρουσιάζει τα ολοκληρωμένα δωμάτια, τις αναλυτικές κριτικές, τα προφίλ των μελών και ένα διαδραστικό timeline μέσα από μια σκοτεινή, υψηλής αντίθεσης διεπιφάνεια με GSAP animations βασισμένες στο scroll, ένα spotlight effect που ακολουθεί τον κέρσορα και ένα overlay γραμμιδίου ταινίας. Χτίστηκε με Next.js 16 App Router, React 19, TypeScript, Tailwind CSS v4, shadcn/ui components και GSAP με ScrollTrigger για όλες τις animations. Το project είναι ένα πλήρως client-rendered μονοσέλιδο application με static generation, με αποτέλεσμα γρήγορους χρόνους φόρτωσης, βελτιστοποιημένα assets και ένα ελαφρύ runtime που περιορίζεται στο GSAP και ελάχιστα UI dependencies.

Challenge & Solution

Η κύρια πρόκληση ήταν η δημιουργία ενός οπτικά απορροφητικού, παραγωγής portfolio site που να φέγγει κινηματογραφικό χωρίς να πέφτει σε τετριμμένα horror στοιχεία ή να θυσιάζει την απόδοση. Το site χρειαζόταν ένα συνεκτικό σκοτεινό σύστημα σχεδίασης βασισμένο σε συγκεκριμένη παλέτα χρωμάτων, μια responsive floating glassmorphism μπάρα πλοήγησης που κινείται με το scroll, μια hero ενότητα πλήρους οθόνης με animation αποκάλυψης φόντου και parallax, και πολλαπλές ενότητες περιεχομένου με ξεχωριστά scroll-triggered animations εισόδου. Για να αντιμετωπιστεί αυτό, το project χρησιμοποιεί Next.js 16 App Router για static generation και server-component αρχιτεκτονική, Tailwind CSS v4 με custom theme layer για το σύστημα σχεδίασης, και shadcn/ui για accessible, composable UI primitives. Όλες οι animations είναι χτισμένες σε GSAP με ScrollTrigger, χρησιμοποιώντας το pattern gsap.context() ανά component που περιορίζει καθαρά τις animations και αποτρέπει memory leaks κατά τον κύκλο ζωής. Η μπάρα πλοήγησης χρησιμοποιεί GSAP ScrollTrigger για να ενσωματώσει ύψος, padding και opacity φόντου με βάση τη θέση scroll, ενώ η hero χρησιμοποιεί μια διαδοχική timeline με αποκάλυψη φόντου, animation letter-spacing του τίτλου, fade-in tagline και είσοδο CTA. Η SEO ελεγχόμενη από περιβάλλον υλοποιείται μέσα από generateMetadata με μεταβλητή NEXT_PUBLIC_NOINDEX, επιτρέποντας πλήρη indexing σε παραγωγή ενώ αποκλείει crawlers κατά την ανάπτυξη. Η αρχιτεκτονική components ακολουθεί σαφή διάκριση: layout components για πλοήγηση, section components για κάθε block περιεχομένου, και compositional components για overlay effects όπως film grain και mouse spotlight.

Final Result

Το τελικό αποτέλεσμα είναι ένα πολυτελές, responsive, μόνο dark-mode portfolio site που παραδίδεται ως στατικά δημιουργημένο HTML με ελάχιστο JavaScript payload εστιασμένο σε GSAP animations. Το site περιλαμβάνει επτά ξεχωριστές ενότητες: μια floating glassmorphism μπάρα πλοήγησης, μια κινηματογραφική hero πλήρους οθόνης με background parallax και content fadeout στο scroll, cards δωματίων escape rooms με hover glow effects, animated counters στατιστικών που ενεργοποιούνται στην είσοδο viewport, cards προφίλ μελών ομάδας, μεγάλες cards κριτικών με ανάλυση βαθμολογιών και ένα χρονολογικό timeline με εναλλασσόμενη διάταξη. Κάθε ενότητα χρησιμοποιεί ScrollTrigger-based staggered fade-up reveals για ένα συνεκτικό εμπειριακό αποτέλεσμα εισόδου. Ένα μόνιμο overlay γραμμιδίου ταινίας και ένα spotlight που ακολουθεί τον κέρσορα προσθέτουν ατμοσφαιρικό βάθος χωρίς να επηρεάζουν το layout. Το site περιλαμβάνει SEO metadata ελεγχόμενα από περιβάλλον με Open Graph και Twitter Cards σε παραγωγή, noindex/nofollow στην ανάπτυξη, και σωστό semantic HTML σε όλο το εύρος. Το αποτέλεσμα είναι ένα site που σκοράρει καλά σε μετρήσεις απόδοσης παράλληλα με μια ξεχωριστή, κινηματογραφική παρουσίαση που αντικατοπτρίζει την ταυτότητα της ομάδας και την προσοχή στη λεπτομέρεια.