Προσωπικό 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.
Προκλήσεις
Ένας εξερευνήσιμος χάρτης εύκολα αποπροσανατολίζει και εύκολα γίνεται μη προσβάσιμος. Έπρεπε επίσης να παραμείνει στατικό build — χωρίς server — δίνοντας παράλληλα σε 36 έργα πραγματικά URL που μοιράζονται, και το motion έπρεπε να αντέχει στο κινητό.
Λύσεις
Κάθε κόμβος του χάρτη είναι σύνδεσμος προς σελίδα που παράγεται κατά το build, οπότε ο πίνακας παραμένει πλοηγήσιμος, κοινοποιήσιμος και ανιχνεύσιμος ακόμη και με το JavaScript κλειστό. Το level of detail αλλάζει πινέζες σε κάρτες καθώς κάνεις ζουμ, και τα φίλτρα πετούν την οπτική αντί να επαναφορτώνουν. Οι ενότητες καρφιτσώνονται με GSAP ScrollTrigger και οδηγούνται από τη θέση του scroll αντί από ticker, κάτι που τις κρατά τίμιες στις συσκευές αφής. Όλο το site παραδίδεται ως στατικό HTML από το Astro, με React μόνο στο ένα component που πραγματικά το χρειάζεται.
Γκαλερί
Hero — Ένα όνομα, μια υπόσχεση και έξι τέχνες εναλλάξ
About — Scrollytelling με γέμισμα γράμμα-γράμμα
Quick Facts — Ένα στοιχείο τη φορά, που μεγεθύνεται καθώς περνά
Skills — Ανοίξτε μια ειδικότητα, περάστε πάνω από άλλη για τα εργαλεία της
Αγαπημένα έργα — Μια τροχιά που κυλά πλάγια
Επικοινωνία — Το κατάστιχο του κλεισίματος
Χάρτης έργων — Κάντε ζουμ και οι πινέζες γίνονται κάρτες
Παράθυρο έργου — Ανοίγει επιτόπου, με δικό του URL
Hero — Το ίδιο άνοιγμα, στοιβαγμένο για tablet
About — Στο tablet η ιστορία ρέει και κλείνει με το απόσπασμα
Αγαπημένα έργα — Το πλάγιο reel συνεχίζει και στο tablet
Φιλτραρισμένη προβολή — Ένα φίλτρο μεταφέρει τον χάρτη σε μία κατηγορία
Παράθυρο έργου — Ολόκληρη η μελέτη περίπτωσης χωρίς να φύγετε από τον χάρτη
Μενού — Ένα φύλλο σε όλη την οθόνη που κρατά το βιογραφικό κοντά
Quick Facts — Μια πινελιά ανοίγει δρόμο προς τη φωτογραφία
Αγαπημένα έργα — Κυλά με το scroll και στο κινητό
Χάρτης έργων — Ζουμ με δύο δάχτυλα και κάθε πινέζα γίνεται κάρτα
Παράθυρο έργου — Μια πλήρης μελέτη περίπτωσης που χωρά σε κινητό
Επικοινωνία — Κάθε κανάλι σε ένα μόνο άγγιγμα
