Πίσω στο Portfolio
Η αρχική σελίδα του kirtsos.gr: το κόκκινο λογότυπο BK, ένα μενού με Home, About, Services, Gallery και Contact και η επιλογή EL | EN, πάνω από μια φωτογραφία με δέκτη GPS σε τοπογραφικό κοντάρι με τρίποδο δίπλα σε ένα μπλε βανάκι, που από την ανοιχτή πλαϊνή του πόρτα φαίνονται όργανα τοπογραφίας, σε λιβάδι όπου βόσκουν σκουρόχρωμα βοοειδή κάτω από βουνά· από πάνω ο τίτλος «Surveying Engineer T.E.», μια φράση για τα 15 χρόνια εμπειρίας σε Ροδόπολη Σερρών και Νέα Μουδανιά Χαλκιδικής, ένα περιγραμμένο κουμπί Services και ένα κόκκινο κουμπί Contact, και από κάτω μια λωρίδα με αριθμούς: 15+ χρόνια εμπειρίας, 2 γραφεία, 3+ νομοί.
Άνοιγμα του kirtsos.gr σε νέα καρτέλα

kirtsos.gr — Τοπογράφος Μηχανικός

Επισκόπηση

Σχεδιάσαμε και αναπτύξαμε το kirtsos.gr, μια δίγλωσση (Ελληνικά/Αγγλικά) επαγγελματική ιστοσελίδα για τον Κύρτσο Βασίλειο, τοπογράφο μηχανικό με πάνω από 15 χρόνια εμπειρίας, με δύο γραφεία σε Ροδόπολη Σερρών και Νέα Μουδανιά Χαλκιδικής. Η ιστοσελίδα 8 σελίδων παρουσιάζει 9 εξειδικευμένες υπηρεσίες — από τοπογραφικά διαγράμματα και υποβολές κτηματολογίου μέχρι αδειοδότηση κτηνοτροφικών εγκαταστάσεων και εκθέσεις πυροπροστασίας. Κατασκευάστηκε με HTML5, CSS3 και vanilla JavaScript χωρίς βάση δεδομένων ή εξαρτήσεις framework — όλο το δίγλωσσο περιεχόμενο διαχειρίζεται μέσω αρχείων μετάφρασης JSON. Περιλαμβάνει ενσωμάτωση Google Maps με συγκατάθεση χρήστη, φιλτραριζόμενη γκαλερί φωτογραφιών με lightbox, φόρμα επικοινωνίας με CSRF προστασία και PHPMailer, structured data για δύο τοποθεσίες και πλήρη συμμόρφωση WCAG 2.2 AA με 100/100 βαθμολογία προσβασιμότητας στο Lighthouse.

Προκλήσεις

Παρουσίαση ενός τεχνικού τοπογραφικού γραφείου με 9 εξειδικευμένες υπηρεσίες και δύο τοποθεσίες γραφείων ως προσβάσιμο, επαγγελματικό brand, με πλήρη υποστήριξη δίγλωσσου περιεχομένου χωρίς βάση δεδομένων ή εξαρτήσεις.

Λύσεις

Χρήση JSON-based client-side i18n για δίγλωσσο περιεχόμενο με αποθήκευση γλώσσας στο localStorage, ενσωμάτωση Google Maps με συγκατάθεση χρήστη για συμμόρφωση GDPR, structured data με δύο διευθύνσεις γραφείων, critical CSS inlining για απόδοση και αρχιτεκτονική χωρίς εξαρτήσεις με βαθμολογία 100/100 Lighthouse σε όλες τις κατηγορίες.

Γκαλερί

  • Η αρχική σελίδα του kirtsos.gr: το κόκκινο λογότυπο BK, ένα μενού με Home, About, Services, Gallery και Contact και η επιλογή EL | EN, πάνω από μια φωτογραφία με δέκτη GPS σε τοπογραφικό κοντάρι με τρίποδο δίπλα σε ένα μπλε βανάκι, που από την ανοιχτή πλαϊνή του πόρτα φαίνονται όργανα τοπογραφίας, σε λιβάδι όπου βόσκουν σκουρόχρωμα βοοειδή κάτω από βουνά· από πάνω ο τίτλος «Surveying Engineer T.E.», μια φράση για τα 15 χρόνια εμπειρίας σε Ροδόπολη Σερρών και Νέα Μουδανιά Χαλκιδικής, ένα περιγραμμένο κουμπί Services και ένα κόκκινο κουμπί Contact, και από κάτω μια λωρίδα με αριθμούς: 15+ χρόνια εμπειρίας, 2 γραφεία, 3+ νομοί.

    Αρχική — Δεκαπέντε χρόνια, δύο γραφεία και ο εξοπλισμός, σε ένα κάδρο

  • Η αρχική σελίδα σε tablet: το λογότυπο, ολόκληρο το μενού και η επιλογή EL | EN σε μία γραμμή, πάνω από την ίδια φωτογραφία του λιβαδιού με το βανάκι κομμένο στη δεξιά άκρη, τον τίτλο «Surveying Engineer T.E.», την εισαγωγή, τα κουμπιά Services και Contact και τη λωρίδα με τους αριθμούς στο κάτω μέρος.

    Κεφαλίδα σε tablet — Όλο το μενού και η επιλογή γλώσσας χωράνε ακόμη σε μία γραμμή

  • Η αρχική σελίδα σε κινητό: το λογότυπο και ένα κουμπί μενού, μετά ο τίτλος «Surveying Engineer T.E.» σε δύο γραμμές, η εισαγωγή και τα κουμπιά Services και Contact το ένα κάτω από το άλλο μπροστά στο μπλε βανάκι, με ζώα να βόσκουν στο βάθος και τους τρεις αριθμούς σε μία σειρά στο κάτω μέρος.

    Hero στο κινητό — Υπηρεσίες και επικοινωνία το ένα κάτω από το άλλο, αρκετά μεγάλα για τον αντίχειρα