Πίσω στο Portfolio
Προσωπικό Portfolio — Εξερευνήσιμος Χάρτης Έργων

Προσωπικό Portfolio — Εξερευνήσιμος Χάρτης Έργων

Ξαναέφτιαξα το portfolio μου από την αρχή. Η παλιά ιστοσελίδα ήταν μια σκούρα neo-brutalist σελίδα που έτρεχε ένα script Tailwind από CDN πάνω σε ένα JSON grid· αυτή είναι ένα στατικό build σε Astro 5, με React islands μόνο εκεί όπου το απαιτεί η αλληλεπίδραση. Το επίκεντρο είναι η σελίδα των έργων — ένας πίνακας τύπου χάρτη όπου 36 έργα κάθονται σε πέντε περιοχές, μία ανά ειδικότητα. Η ρόδα κάνει ζουμ στον κέρσορα, το σύρσιμο μετακινεί με ορμή, δύο δάχτυλα κάνουν pinch, και τα φίλτρα πετούν την οπτική σε μια κατηγορία και σβήνουν τις υπόλοιπες. Με το ζουμ, οι πινέζες γίνονται κάρτες. Κάθε κόμβος είναι πραγματικός σύνδεσμος, οπότε κάθε έργο χτίζεται και ως δική του στατική σελίδα που ανοίγει με το modal του ήδη στην οθόνη. Η αρχική είναι μια σειρά από ενότητες οδηγούμενες από το scroll: ένα καρφιτσωμένο hero με carousel έξι διαφανειών, μια ενότητα about όπου οι παράγραφοι γεμίζουν γράμμα-γράμμα ενώ συσσωρεύεται μια στοίβα εικόνων, ένα fisheye reel με γρήγορα στοιχεία, ένα accordion δεξιοτήτων, και ένα reel έργων του οποίου η τροχιά κυλά πλάγια καθώς κατεβαίνεις — σε κινητά όπως και σε desktop. Όλο το περιεχόμενο ζει σε ένα αρχείο JSON. Δεν υπάρχει CMS, βάση δεδομένων ή server runtime.

Τεχνολογίες

Astro 5 React 19 TypeScript GSAP Lenis Tailwind CSS View Transitions SEO

Προκλήσεις

Ένας εξερευνήσιμος χάρτης εύκολα αποπροσανατολίζει και εύκολα γίνεται μη προσβάσιμος. Έπρεπε επίσης να παραμείνει στατικό build — χωρίς server — δίνοντας παράλληλα σε 36 έργα πραγματικά URL που μοιράζονται, και το motion έπρεπε να αντέχει στο κινητό.

Λύσεις

Κάθε κόμβος του χάρτη είναι σύνδεσμος προς σελίδα που παράγεται κατά το build, οπότε ο πίνακας παραμένει πλοηγήσιμος, κοινοποιήσιμος και ανιχνεύσιμος ακόμη και με το JavaScript κλειστό. Το level of detail αλλάζει πινέζες σε κάρτες καθώς κάνεις ζουμ, και τα φίλτρα πετούν την οπτική αντί να επαναφορτώνουν. Οι ενότητες καρφιτσώνονται με GSAP ScrollTrigger και οδηγούνται από τη θέση του scroll αντί από ticker, κάτι που τις κρατά τίμιες στις συσκευές αφής. Όλο το site παραδίδεται ως στατικό HTML από το Astro, με React μόνο στο ένα component που πραγματικά το χρειάζεται.