Clares 1.0

Sfera orbitala in Three.js. Pagina live: /clares/. Bundle: clares.json. Sursa: src-clares.zip.

• 12 carduri de proiect asezate pe o sfera Fibonacci, care se roteste la drag si la scroll.
• Click pe un card → pagina de proiect, cu imaginea care iese in afara sferei.
• Nav propriu, cu meniu mobil.

GSAP site-wide, plus Three.js 0.160 incarcat cu import() dinamic dintr-un script clasic:

import('https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js')n  .then(start).catch(function (e) { console.error(e); });

Asa scapi de import map si de type="module", pe care Bricks nu le permite in javascriptCode.

27 de elemente. Sectiune .cla cu elementul Code al motorului (canvas-ul), nav nativ, meniu mobil si textul proiectului ca elemente native, plus doua elemente Code mici cu noRoot (butonul hamburger si <img>-ul proiectului, pentru ca Bricks nu are element potrivit).

Setari de pagina: bodyClasses = clares.

Atasamentele 448–459 (clares-01 … clares-12), ~1,2 MB in total, versiunea optimizata din Visuals/web.

• .brxe-block este width:100%: linia despartitoare din nav iesea cu 40px in afara. width:auto a facut-o 0 (flex item care se strange la continut), align-self:stretch a fost inert. Solutia buna: width: calc(100% - 2 * var(--cla-nav-pad)).
• Acelasi motiv facea ca INFO/CONTACT sa se suprapuna peste wordmark — acolo raspunsul corect a fost width: auto, fiindca grupul e flex pe rand.
• Nu folosi ?s= ca sa spargi cache-ul: declanseaza cautarea din WordPress si primesti 404. Foloseste ?nc=.