Dani Groupe

Nje skene WebGL kinematografike per nje ndertues nga Gjeneva

Nje uebsajt marke editorial me shume faqe per nje sipermarrje te pergjithshme ndertimi ne Gjeneve, i kryesuar nga nje hero shader Three.js i shkruar me dore dhe i ndertuar njesoj per GPU-te e desktopit dhe per mobile.

Sfida

Dani Groupe eshte nje sipermarrje e pergjithshme ndertimi dhe rinovimi me baze ne Gjeneve, qe u sherben pronareve te paluajtshmerive ne te gjithe Zvicren frengjishtfolese, krahas klienteve komerciale dhe diplomatike si misionet e OKB-se dhe ambasadat. U duhej nje prezence marke qe te perputhej me precizionin dhe peshen e punes se tyre neper rreth gjashtembedhjete profesione, nga heqja e azbestit dhe demolimi deri te izolimi i fasadave dhe kuzhinat çeles ne dore. Nje shabllon standard do t'i kishte nenvleresuar. Ata donin diçka po aq te menduar sa nje ndertese e perfunduar.

Qasja jone

Ndertuam nje uebsajt me shume faqe te personalizuar mbi Next.js 16 dhe React 19, me nje sistem dizajni editorial te ngrohte dhe te erret. E gjitha funksionon mbi nje skedar te vetem permbajtjeje, keshtu qe çdo rresht teksti ne frengjishten zvicerane, çdo sherbim, referencë dhe projekt ndodhet ne nje vend te vetem te modifikueshem, me fotografine te drejtuar permes nje harte te vetme imazhesh 4K. Pjesa qendrore eshte nje hero WebGL i personalizuar: shkruam me dore shaderet GLSL vertex dhe fragment qe renderojne fotografine ose videon 4K te heroit mbi nje plan me densitet te larte, me frymemarrje simplex-noise, nje valezim qe ndjek miun, zhvendosje sipas skrollimit, aberracion kromatik dhe nje maske qe ruan fytyren, ne menyre qe subjekti te qendroje i mprehte ndersa skajet shtremberohen. Iu qasem performancës me qellim, duke dorezuar ne mobile nje hero video HTML5 te lehte, keshtu qe telefonat te mos paguajne kurre koston e shaderit te desktopit.

Çfare dorezuam

Shtate faqe permbajtjeje plus nje faqe karriere: Home, Groupe (rreth nesh), Competences (sherbimet), References (klientet), Realisations (projektet), Partenariat (sponsorizimet) dhe Kontakt

Hero WebGL Three.js i personalizuar me shadere GLSL te shkruar me dore: frymemarrje simplex-noise, valezim qe ndjek miun, zhvendosje sipas skrollimit, aberracion kromatik, nuance e ngrohte, vinjete dhe kalim me shperberje zhurme mes teksturave

Teksture me karusel fotosh ose video MP4 4K ne hero, me nje maske radiale qe ruan fytyren dhe e mban subjektin te mprehte ndersa skajet shtremberohen

Hero video HTML5 i lehte ne pajisjet mobile dhe me prekje, qe e anashkalon plotesisht shaderin e rende per GPU-ne

Nje skene e dyte Three.js ne faqen e Kontaktit: nje monolit ikosaedër i shtremberuar qe rrotullohet ngadale dhe pjerresohet me miun

Galeri Realisations me filtra kategorish, layout parallax ne stil mozaiku dhe nje krahasues para/pas qe terhiqet

Skrollim i bute i fuqizuar nga Lenis me navigim te kapur permes spirancave hash dhe nje shirit progresi skrollimi ne krye

Kursor i animuar i personalizuar me etiketa sipas kontekstit (Voir / Ecrire / Appeler) qe fshihet ne pajisjet me prekje

Statistika qe numerojne lart te aktivizuara nga skrollimi, butona CTA magnetike, blloqe zoom kinematografike ngjitese dhe nje indeks seksioni ngjites

Seksion References qe çift logot e klienteve me misionet e perhershme te OKB-se dhe perfaqesite diplomatike, te kompletuara me flamuj shtetesh

Preloader i animuar me nje numerues te ndershem nga 0 ne 100 i kushtezuar njekohesisht nga nje kohezgjatje minimale dhe ngarkimi i plote i dritares

Forme kontakti qe harton nje mesazh te strukturuar dhe ia kalon klientit te emailit te perdoruesit permes mailto, pa asnje backend emaili ne anen e serverit

Pikat kryesore teknike

Next.js 16 (App Router) me React 19 dhe TypeScript striktPipeline shaderesh GLSL te shkruar me dore, perfshire nje implementim te plote simplex-noise te integruar, qe drejton heroin WebGLThree.js 0.171 me react-three-fiber 9 dhe drei 10Tailwind CSS v4 me teme CSS-first dhe nje sistem ngjyrash OKLCH bakri te djegur mbi gati-te-zezeAnimacion Motion (Framer Motion) dhe skrollim i bute Lenis ne te gjithe sajtinStrategji performance e ndergjegjshme per pajisjen: shader GPU ne desktop, video e thjeshte HTML5 ne mobile, me respektimin e prefers-reduced-motion ne preloader dhe efektet e skrollimitKujdes per aksesueshmerine: lidhje kapercimi te permbajtjen, tokena kontrasti OKLCH te verifikuar AA, konture focus-visible dhe zoom i ruajturBuild Docker standalone i publikuar pas Traefik me TLS nga Let's Encrypt, headera sigurie, kufizim shkalljeje, ridrejtim www dhe kompresim

Donim qe sajti te jepte te njejten ndjesi si vete puna: i sakte, me peshe dhe i ndertuar per te zgjatur. Prandaj e shkruam shaderin e heroit me dore ne vend qe te perdornim nje librari, e me pas shpenzuam po aq mund per t'u siguruar qe nje telefon te mos detyrohet kurre ta ekzekutoje. Nje skedar i vetem permbajtjeje drejton te gjithe sajtin, çka do te thote se tekstet dhe fotografia mund te evoluojne pa e prekur ne motorin poshte tyre.

Dani Groupe

Ju pelqen ajo qe shihni?

Le te ndertojme diçka po aq te mire, ose edhe me te mire, per ju.

Filloni nje projekt

Vizitoni Dani Groupe live