Alumil Kranidis

Alumil Kranidis

Ανακατασκευή της ιστοσελίδας Alumil-Kranidis με τη χρήση Next.js και ενός custom, enterprise-grade CMS. Μια high-performance πλατφόρμα με luxury architectural design, εντυπωσιακά animations (Framer Motion) και αυτόματες dynamic galleries, που προσφέρει κορυφαία εμπειρία χρήστη (UX) και απόλυτο έλεγχο περιεχομένου.

Client

Νικόλαος Κρανίδης

Duration

1 Month

Technologies
Next.js 15Drizzle ORMDockerSQLiteTypeScriptFramer Motion

Full Overview

Το project Alumil-Kranidis αφορά τον πλήρη ανασχεδιασμό και την ανάπτυξη μιας σύγχρονης, high-performance ιστοσελίδας για την ανάδειξη κορυφαίων αρχιτεκτονικών συστημάτων αλουμινίου. Η πλατφόρμα δημιουργήθηκε με το πρωτοποριακό framework Next.js (App Router) και TypeScript, εξασφαλίζοντας ταχύτητα, ασφάλεια και Lighthouse scores άνω του 94.

Η σχεδιαστική φιλοσοφία βασίζεται στην πολυτέλεια και την καθαρή αρχιτεκτονική δομή (luxury architectural design), η οποία ζωντανεύει μέσα από smooth scroll εφέ και staggered entrance animations με τη χρήση Framer Motion. Στο back-end, αναπτύχθηκε ένα custom enterprise-grade CMS (βασισμένο στη λογική του συστήματος Gratsias) με SQLite και Drizzle ORM, το οποίο δίνει στους διαχειριστές τον απόλυτο έλεγχο της ιστοσελίδας —από τη διαχείριση custom SEO σελίδων on-the-fly, μέχρι integrated CRM για B2B inquiries και Google Suite settings (GA4, GTM).

The Challenge

Η βασική πρόκληση ήταν η δημιουργία μιας ιστοσελίδας που να αντικατοπτρίζει την premium ποιότητα και την αισθητική των προϊόντων Alumil, χωρίς συμβιβασμούς στην ταχύτητα και τη λειτουργικότητα. Τα παραδοσιακά ready-made CMS (όπως το WordPress) συχνά θυσιάζουν την απόδοση (performance) για τη χρηστικότητα και δυσκολεύονται να αποδώσουν premium visual εφέ με υψηλές ταχύτητες φόρτωσης. Επιπλέον, υπήρχε η ανάγκη για έναν αυτοματοποιημένο τρόπο διαχείρισης μεγάλου όγκου φωτογραφικού υλικού ( galleries αρχιτεκτονικών έργων) που να μην επιβαρύνει τον διαχειριστή, αλλά και για ένα απόλυτα ασφαλές περιβάλλον backoffice για τη διαχείριση των B2B αιτημάτων.

Our Solution

Απαντήσαμε στην πρόκληση με μια custom native λύση, χτίζοντας την εφαρμογή από το μηδέν:

  • Next.js & Vanilla CSS (CSS Modules): Για μέγιστη ταχύτητα, server-side caching, lazy-loading εικόνων και άψογο SEO.

  • Custom Enterprise Backoffice : Ένα εξελιγμένο, dark-themed glassmorphism περιβάλλον διαχείρισης που επιτρέπει inline JSON-based menu editing, full media library (drag-and-drop) και αυτόματη ανάγνωση του file system.

  • Dynamic Masonry Galleries: Οι full-screen dynamic galleries (π.χ. /anoigomena-koufomata) δημιουργούνται αυτόματα διαβάζοντας απευθείας τους φακέλους του server, εκμηδενίζοντας τον χρόνο καταχώρησης.

  • Docker-Based Deployment: Πακετάρισμα της εφαρμογής σε Docker containers για εύκολο, self-contained deployment σε VPS (Virtual Private Server) με reverse proxy (Nginx).

The Result

Το τελικό αποτέλεσμα είναι ένα state-of-the-art digital showroom που συνδυάζει την υψηλή αισθητική με την τεχνολογική υπεροχή:

  • Lighthouse Score 94+, προσφέροντας κορυφαίο Core Web Vitals και βέλτιστο SEO ranking.

  • Spectacular UX με καθηλωτικά, ομαλά animations που αναβαθμίζουν το brand status της Alumil-Kranidis.

  • Πλήρης αυτονομία μέσω του custom CMS, επιτρέποντας real-time αλλαγές στην αρχική σελίδα, το μενού πλοήγησης και τα global branding στοιχεία.

  • Αυξημένο Conversion Rate χάρη στο ενσωματωμένο CRM διαχείρισης φορμών και B2B requests, και την πλήρη ενοποίηση με Google Analytics 4 και Google Tag Manager.

Πίσω στο Portfolio