Χωματουργικές Εργασίες Ευθυμίου

Έργα | 2026 | Σύνδεσμοι: Δείτε το live

Εταιρικό site για ελληνική οικογενειακή επιχείρηση χωματουργικών εργασιών: πλήρως static (Astro 5 + Tailwind CSS 4), με βασικό στοιχείο ένα gallery έργων με φίλτρα ανά υπηρεσία, έξι σελίδες υπηρεσιών και σχεδίαση mobile-first για πελάτες που το επισκέπτονται κυρίως από κινητό.

Κατάσταση: πριν τη δημοσίευση. Η κατασκευή έχει ολοκληρωθεί και το site τρέχει σε live preview (link παραπάνω). Θα δημοσιευτεί όταν οι φωτογραφίες πραγματικών έργων και τα τελικά στοιχεία της επιχείρησης αντικαταστήσουν το προσωρινό (placeholder) υλικό: οι φωτογραφίες σε όλο το site είναι προς το παρόν stock εικόνες.

Με μια ματιά

Φορέας	Οικογενειακή επιχείρηση χωματουργικών εργασιών, τρεις γενιές, με δραστηριότητα στην Αττική από το 1968
Stack	Astro 5 + Tailwind CSS 4, πλήρως static: χωρίς CMS, χωρίς βάση δεδομένων
Βασικό στοιχείο	Gallery έργων με φίλτρα ανά υπηρεσία, συνδεδεμένο με τις έξι σελίδες υπηρεσιών
Κοινό	Ελληνόφωνο, κυρίως από κινητό

Το ζητούμενο

Η επιχείρηση εκτελεί χωματουργικές εργασίες στην Αττική από το 1968: εκσκαφές, κατεδαφίσεις, διαμόρφωση γης, οδοποιία, κηπευτικά, και κατασκευές όπως γήπεδα και χώροι στάθμευσης. Το προηγούμενο site της χρειαζόταν αντικατάσταση, και το νέο έχει ξεκάθαρο στόχο: να παρουσιάζει τις υπηρεσίες και τα ολοκληρωμένα έργα καθαρά και γρήγορα, σε πελάτες που το επισκέπτονται κυρίως από κινητό.

Η κατασκευή

Ένα πλήρως static site σε Astro 5 και Tailwind CSS 4, σε Cloudflare Pages: κάθε push γίνεται αυτόματα deploy, το hosting είναι ουσιαστικά δωρεάν, και χωρίς βάση δεδομένων ή κώδικα στον server δεν χρειάζεται patching. Ως αφετηρία χρησιμοποίησα ένα ανοιχτό (MIT) Astro theme, το οποίο ξαναδούλεψα σελίδα προς σελίδα πάνω στην ταυτότητα της επιχείρησης.

• Οπτική ταυτότητα από το αντικείμενο της δουλειάς: το κίτρινο των χωματουργικών μηχανημάτων πάνω σε σκούρο μπλε, με αυστηρούς κανόνες αντίθεσης (το κίτρινο εμφανίζεται μόνο σε σκούρα φόντα) και εναλλασσόμενους τόνους στις ενότητες, ώστε οι μεγάλες σελίδες να διαβάζονται άνετα.
• Typewriter effect στην αρχική: ο τίτλος πληκτρολογείται γράμμα προς γράμμα, “Εμπειρία, Υπευθυνότητα, Συνέπεια”, πριν εμφανιστούν ο υπότιτλος και τα κουμπιά, ενώ πιο κάτω οι βασικοί αριθμοί της επιχείρησης μετρούν προοδευτικά καθώς μπαίνουν στην οθόνη.
• Mobile-first στις λεπτομέρειες: κουμπί άμεσης κλήσης στο header στα κινητά, που δεν συγκρούεται με την επωνυμία ούτε σε πολύ στενές οθόνες, και μέγεθος τίτλου υπολογισμένο ώστε η μεγαλύτερη ελληνική λέξη του (“Υπευθυνότητα”) να χωρά χωρίς να κόβεται.
• Πρακτικές λεπτομέρειες: διευθύνσεις email προστατευμένες από scrapers, κουμπί επιστροφής στην κορυφή με κυκλική ένδειξη προόδου.

Το gallery έργων

Σε μια τέτοια δουλειά, οι φωτογραφίες των έργων είναι το πιο πειστικό περιεχόμενο, και το gallery είναι το κεντρικό στοιχείο του site:

• Διάταξη masonry, από μία έως τέσσερις στήλες ανάλογα με την οθόνη.
• Φίλτρα ανά κατηγορία, αντίστοιχα με τις έξι υπηρεσίες. Το ενεργό φίλτρο ορίζεται και από το URL, ώστε κάθε σελίδα υπηρεσίας να οδηγεί κατευθείαν στις δικές της φωτογραφίες.
• Προβολή σε πλήρη οθόνη (PhotoSwipe lightbox).
• Κάθε φωτογραφία ετοιμάζεται σε δύο μεγέθη webp: ελαφρύ thumbnail για τη λίστα και μεγαλύτερη εκδοχή για το lightbox, ώστε η σελίδα να μένει γρήγορη παρά τον όγκο των εικόνων.

Gallery

Το αποτέλεσμα

Η προσθήκη του πραγματικού υλικού είναι πλέον απλή διαδικασία: κάθε νέα φωτογραφία περνά από την έτοιμη επεξεργασία δύο μεγεθών και εμφανίζεται στο gallery στην κατηγορία της, ήδη συνδεδεμένη με την αντίστοιχη σελίδα υπηρεσίας. Η επιχείρηση αποκτά ένα site γρήγορο στα κινητά από τα οποία το επισκέπτεται η πλειονότητα των πελατών της, εγγενώς ασφαλές, ουσιαστικά δωρεάν στη λειτουργία του, και με κέντρο τα ίδια της τα έργα.