Creative Developer focused on premium front-end systems, multilingual websites, product prototypes, interactive storytelling, and selected WebGL/XR experiences.

I build digital products and premium web systems across hospitality, real estate, clinics, cultural platforms, internal tools, and founder-led concepts — combining visual restraint, product thinking, and production-minded implementation.

• Premium multilingual websites
• Reusable vertical web systems
• Product demos and internal tools
• Editorial / storytelling interfaces
• Selected WebGL / XR / interactive experiences

• React
• TypeScript
• Astro
• Next.js
• Vite
• Tailwind CSS
• React Router
• Motion
• Three.js / React Three Fiber
• Cloudflare Pages
• Google Sheets / CSV CMS patterns

Internal outreach CRM with import/dedup, Today workflow, pipeline, and KPI reporting.

Premium bilingual advisory demo for Barcelona property discovery with shortlist-first decision support.

Export-first content planning prototype with Smart Mix, planner flow, captions, and ZIP export.

Multilingual exhibition microsite with QR-driven artist pages and a unified digital identity for a real art event.

Interactive fashion concept with scroll-driven stage logic, synchronized progress, and motion-heavy interface design.

Premium web + XR exhibition prototype combining digital storytelling, collector flow, and immersive runtime logic.

I use an AI-augmented workflow built around Codex and GPT to accelerate prototyping, implementation, documentation, and polish — while keeping architecture, art direction, product logic, and final validation under direct manual control.

Currently focused on:

• premium vertical systems
• product prototype development
• portfolio-grade digital experiences
• reusable front-end foundations

Active work is focused on the new canonical Work case system:

• Main route pattern: /work-lab/:slug
• Main renderer: src/pages/CasePageV2.tsx
• Story data source: src/data/caseStories.ts
• Shared inspect viewer: src/ui/work/CinematicInspectReveal.tsx
• Canonical reference doc: docs/casepage-v2-reference-pattern.md

CasePageV2 is now the canonical non-immersive Work case page foundation. It should be reused for future Work cases instead of duplicating page templates.

Canonical page order:

1. Threshold / Hero
2. System walkthrough
3. Screens as Evidence
4. Proof becomes system
5. Available foundation
6. Final conversion
7. Case footer

Validated V2 cases:

• House of Lune - luxury product reference
• Barcelona Private Advisory - light advisory / real estate validation
• CreatorOps - workflow / product system validation
• SprintCRM - internal CRM / operator workflow validation
• FLUID - cultural exhibition / QR artist-page validation
• FORM INDEX - editorial motion / presentation-system validation
• ARCWAVE - bilingual service architecture validation
• Casa Nube - hospitality / multilingual local-service validation
• Print Border Studio - production tool / print workflow validation

Current public status:

• /work/:slug now renders the canonical CasePageV2 for non-immersive Work cases.
• Legacy work case detail pages are hidden under /work-classic/:slug with noindex behavior.
• /work-lab/:slug remains available as a hidden V2 lab/reference route.
• Immersive / WHISPER remains outside the Work V2 pattern and now uses its own spatial flagship case logic.

WHISPER is now the canonical flagship Immersive case:

• Public route: /immersive/whisper
• Main renderer: src/ui/immersive/WhisperCaseLayout.tsx
• Route shell: src/pages/ImmersiveCasePage.tsx
• Data source: src/data/immersive.ts
• Immersive engine data: src/data/immersiveSystems.ts
• Reference doc: docs/immersive-whisper-reference-pattern.md

Canonical Immersive page order:

1. Spatial threshold / flagship hero
2. Spatial atlas
3. Desktop web walkthrough video
4. Spatial evidence field
5. Quest XR proof
6. Collector continuation
7. Mobile proof
8. Engine ledger / canon statement

WHISPER deliberately does not reuse CasePageV2. It combines the strongest existing systems instead: spatial threshold language from Immersive, evidence-led proof from Work V2, a draggable spatial evidence field, the shared cinematic inspect reveal, complete desktop / Quest / mobile media coverage, and an engine ledger for future Immersive cases.

Current refinement pass:

• Hero collage was cleaned into a clearer primary website plane with quieter Quest, mobile, and signal overlays.
• Spatial Atlas now behaves as a living spatial map instead of a flat table of proof rows.
• Collector continuation now uses an object / print / AR chamber treatment.
• Mobile proof now uses a darker cinematic phone field instead of the lighter generic mobile showcase.
• Engine ledger final CTA now stays inside the immersive system language instead of switching to a cream marketing block.

Canonical Immersive interaction notes:

• SpatialEvidenceField turns screenshot proof into a controlled horizontal spatial field.
• Drag, wheel, dots, and next controls all snap toward one active proof frame.
• Clicking a frame centers/focuses it; focused frames can open the shared inspect reveal.
• SpatialAtlasMap is the canonical way to summarize connected Immersive surfaces without making the atlas feel like a static table.
• Collector and mobile proof sections should feel like chambers inside the same room: object handoff, AR preview, and handheld route remain atmospheric but still inspectable.
• Atmospheric color wash transitions are now a reference device for Immersive pages: the next section should feel like it enters the current room, not like a hard page break.

The Screens as Evidence section now uses the canonical Flow / Atlas system:

• Flow is the default cinematic large-frame reading path.
• Atlas is the compact grid-scan mode.
• Only the first 5 evidence frames are shown by default.
• Long cases reveal the rest through Open full evidence field ->.
• Cases with 5 or fewer evidence frames do not show the expansion CTA.
• Every evidence card opens the shared inspect modal.

This pattern is the standard way to scale screenshot-heavy case pages without turning them into heavy catalogues.

CinematicInspectReveal is shared across V2 cases and must keep the bottom thumbnail rail synchronized with the active frame.

Rules:

• The active frame can change through wheel, arrow keys, swipe, next/prev buttons, or thumbnail click.
• The bottom thumbnail rail must scroll with the active frame.
• The active thumbnail should stay visible and centered when possible.
• This behavior is canonical for all V2 cases.

CreatorOps has been upgraded into a full V2 case:

• Added as slug: "creatorops" in src/data/caseStories.ts.
• Uses the workflow-tool narrative variant in CasePageV2.
• Hero title splits as Creator / Ops.
• Hero media uses aligned rectangular cards like Barcelona Private Advisory and House of Lune.
• Hero overlays were lightened so the dark product screenshots stay readable.
• Mobile rail uses tall phone screenshots and priority-loads the active frame.
• Full desktop evidence set is included except the removed Dark staging frame.
• Full mobile set is included.
• creatorops-4.webp / desktop-4 / Dark staging was intentionally removed from the V2 evidence flow.

The remaining non-immersive Work cases have been moved into the canonical V2 data flow:

• SprintCRM
• FLUID
• FORM INDEX
• ARCWAVE
• Casa Nube
• Print Border Studio

They reuse CasePageV2 through generated story records backed by the legacy src/data/cases.ts media inventory, with case-specific story metadata in src/data/caseStories.ts.

Renderer updates:

• Evidence frames now scale generically from every non-video, non-mobile case frame.
• CreatorOps keeps its custom evidence order.
• Mobile frames remain in the dedicated mobile surface rail.
• Narrative copy now adapts by case type: workflow/tool, advisory, hospitality, service website, presentation/experimental, and luxury product.
• Available Foundation copy now adapts by case type instead of assuming luxury commerce language.

Barcelona Private Advisory has been visually audited:

• Hero collage uses clean rectangular cards instead of awkward clipped/cropped cards.
• Cream-heavy treatment was reduced.
• Phone screenshot framing was cleaned up.
• Black phone screenshot border issue was fixed.
• Advisory-specific phone aspect and object positioning were added.

House of Lune is still the primary luxury-product reference case:

• Hero card geometry was aligned with Barcelona Private Advisory.
• The case remains the reference for the V2 narrative engine, not a visual style to copy literally.

• Do not duplicate CasePageV2 per case.
• Add future cases through src/data/caseStories.ts.
• Keep visual variants case-aware through story metadata, slug checks, or case type checks.
• Keep the Flow / Atlas evidence behavior and synchronized inspect thumbnail rail as canonical.
• Preserve the site language: restrained, technical, cinematic, premium, and evidence-led.

Recent visual checks were made through local screenshots.

npm run build passes after the WHISPER Immersive case update, with only the standard Vite large chunk warning.