Από Portfolio σε Προϊόν

Η Αφορμή

Πριν μπει καν στη συζήτηση vanilla HTML ή React, η πρώτη σκέψη ήταν πολύ πιο απλή: ένα portfolio μέσα σε Notion pages. Γρήγορο, δωρεάν, δοκιμασμένο από χιλιάδες άλλους. Το πρόβλημα δεν ήταν ποτέ λειτουργικό — ήταν αισθητικό.

Καμία από τις έτοιμες πλατφόρμες σελίδων — Notion, Obsidian και ό,τι έμοιαζε μαζί τους — δεν άρεσε ποτέ οπτικά. Το ίδιο block-based look, τα ίδια περιθώρια, η ίδια αίσθηση «template» που θυμίζει χιλιάδες άλλες σελίδες φτιαγμένες με το ίδιο εργαλείο. Αντί να γίνει συμβιβασμός σε αυτό, η απόφαση ήταν να χτιστεί από την αρχή ένα παρόμοιο σύστημα — σελίδες, sidebar, δομή περιεχομένου — αλλά με πλήρη έλεγχο πάνω σε κάθε λεπτομέρεια.

Γιατί Καθόλου Framework

22 υποσελίδες, ένα κύριο index, χωρίς React, χωρίς build step, χωρίς npm install. Δεν είναι έλλειψη εξοικείωσης — τα περισσότερα άλλα projects στο ίδιο portfolio χρησιμοποιούν React, Docker, Python APIs. Ήταν συνειδητή επιλογή, με βάση το τι έπρεπε να κάνει αυτό το συγκεκριμένο site.

Το ρίσκο ήταν γνωστό εξαρχής: χωρίς framework, η πειθαρχία πρέπει να έρθει από αλλού — αλλιώς 22 σελίδες σημαίνει 22 αντίγραφα του ίδιου sidebar, του ίδιου cursor script, της ίδιας scroll λογικής. Αυτό ακριβώς έλυσε το refactor παρακάτω.

Ένα Config, Όχι 22 Αντίγραφα

Ο κανόνας του project είναι απλός: ποτέ μην αντιγράφεις κώδικα σε πολλαπλά HTML αρχεία. Το sidebar navigation είναι το καθαρότερο παράδειγμα — αντί να υπάρχει hardcoded σε κάθε σελίδα, ζει σε ένα αρχείο δεδομένων.

// One entry = one page. No HTML duplicated anywhere.
const NAV_CONFIG = [
  { type:'sub', href:'moodlight.html',
    icon:'lightbulb', el:'MoodLight', en:'MoodLight' },
  { type:'sub', href:'swaply.html',
    icon:'repeat', el:'Swaply', en:'Swaply' },
  // ...20 more entries, same shape
];

// subpage-common.js reads this once per page load,
// builds the sidebar DOM, and marks the active item
// by comparing NAV_CONFIG[i].href to location.pathname —
// no per-page "which link is active" logic to maintain.

Το ίδιο μοτίβο επαναλαμβάνεται σε άλλα δύο σημεία: όλο το κοινό CSS (cursor, chips, layout, scroll) ζει σε ένα αρχείο, css/style.css· και όλη η κοινή JS συμπεριφορά (custom cursor, scroll progress, back-to-top, mobile menu, fade-up animations) ζει στο subpage-common.js. Κάθε σελίδα κρατάει μόνο ό,τι είναι πραγματικά μοναδικό σε αυτήν.

i18n & Θέματα

Ελληνικά και Αγγλικά, χωρίς μηχανική μετάφραση — κάθε string γράφτηκε στο χέρι και στις δύο γλώσσες. Στο index.html, ένα κεντρικό λεξικό (i18n.js) κρατά όλα τα strings ανά κλειδί και τα εφαρμόζει με CSS selectors· στις υποσελίδες, ένα πιο ελαφρύ και γενικό μοτίβο κάνει την ίδια δουλειά χωρίς λεξικό ανά σελίδα.

<!-- Any element can carry both languages inline -->
<p data-el="Ελληνικό κείμενο" data-en="English text">
  Ελληνικό κείμενο
</p>

<!-- subpage-common.js swaps innerHTML for every
     [data-el][data-en] element based on the saved
     language — no per-page translation file needed -->

Η επιλογή γλώσσας αποθηκεύεται σε localStorage και επιβιώνει μεταξύ σελίδων. Το ίδιο μοτίβο persistence χρησιμοποιείται και για το θέμα (dark gold ή light) — εναλλαγή με το πλήκτρο T ή από τα κουμπιά του sidebar, εφαρμοσμένο πριν καν ζωγραφιστεί η σελίδα ώστε να μην υπάρχει flash λάθος θέματος.

Το Refactor σε 5 Φάσεις

Το site δεν ξεκίνησε έτσι. Πριν το refactor, κάθε νέα υποσελίδα σήμαινε copy-paste ενός ~71-γραμμών sidebar και όλης της σχετικής JS λογικής σε ένα καινούριο αρχείο — 22 φορές. Πέντε φάσεις, μία δομική αλλαγή τη φορά, το μετέτρεψαν σε αυτό που περιγράφεται παραπάνω.

Το Επόμενο Βήμα

Αυτό το site χτίστηκε αρχικά για μία ανάγκη — τη δική μου. Αλλά η αρχιτεκτονική που προέκυψε (ένα config αρχείο, κοινό CSS/JS, θέματα) είναι ήδη πολύ κοντά σε κάτι που θα μπορούσε να χρησιμοποιήσει και κάποιος άλλος. Το επόμενο βήμα είναι να γίνει ακριβώς αυτό: ένα portfolio σύστημα σαν το δικό μου, αλλά επεξεργάσιμο χωρίς να χρειάζεται ο χρήστης να ξέρει έστω και μία γραμμή κώδικα.