www.xochiworld.com Interactive Portfolio

XOCHIWORLD is a self-hosted interactive portfolio and creative technology playground built to present selected work while also functioning as a live experimentation space. It moves beyond a static portfolio format, combining a custom Next.js front end, a Three.js character scene, real-time shader controls, animated portfolio navigation, and an in-browser content editor for maintaining project pages without touching a single JSON file.

The homepage features an animated 3D avatar prepared in Blender, loaded as an optimised GLB, and rendered through a custom Three.js pipeline with responsive camera motion, lighting controls, post-processing passes, and scroll-driven animation. The Shader Lab is an interactive desktop mode that lets visitors manipulate the live 3D scene in real time. Controls include exposure, pixel size, bloom strength, bloom radius, bloom threshold, bloom colour, chromatic aberration, hue, saturation, brightness, contrast, vignette, grain, and depth-of-field blur. Under the hood it runs a layered post-processing system with custom GLSL shaders, alpha-safe RGB shifting, alpha edge bleeding, brightness/contrast correction, bloom compositing, vignette blending, film grain, and pixel rendering. It turns the portfolio homepage into a live visual instrument.

The portfolio section includes a custom animated project browser with stacked cards, gesture and wheel navigation, hover tilt, rail transitions, and responsive layouts. It also includes a pause animations mode that lets users disable motion-heavy transitions and view work in a calmer static state, swapping animated behaviours for stable card positioning, disabling decorative motion, and using image fallback handling so the interface stays polished for users who prefer reduced movement or need better performance.

The site includes a custom portfolio editor built directly into the project system. It supports structured content blocks, inline text editing, block conversion, drag-and-drop reordering, undo history, link and text formatting, image and video uploads, card image editing, responsive image source handling, media sizing presets, and save-state tracking. The portfolio can be updated as a living archive without manually editing project files.

The media pipeline was designed for long-term maintainability and performance. Raw images and videos are processed into responsive desktop and mobile variants using FFmpeg, including WebP exports, MP4 outputs, social preview generation, and an image manifest used by the front end to serve the right asset per viewport. The 3D pipeline covers Blender preparation, GLB optimisation, Meshopt decoding, texture quality handling, lazy scene mounting, visibility-based render pausing, capped pixel ratios, and conditional post-processing to keep the experience smooth across devices.

The first version was a 3D interactive landing page built in Webflow and Spline, created to present services and selected work quickly. After a decade building interactive experiences for brands and production studios, I spent a few days exploring what low-code tools could do. Webflow kept the build fast, Spline brought in the 3D, and a Ready Player Me avatar added the personality.

It was a useful experiment in how far you can push a visually driven site without writing everything from scratch. V2 came out of wanting more: more complex scenes, more interactivity, more control over how the work is presented.

V2: Next.js, React, Three.js, GLSL, custom post-processing shaders, Blender, GLB/Meshopt optimisation, FFmpeg, WebP/MP4 media pipeline, image manifest, Google Analytics. V1: Webflow, Spline, Vanilla JavaScript, Blender, Mixamo.

Creative Direction and Design: Concept, visual direction, and design across both versions. Frontend Development: Built V2 in React and Next.js as a fully custom, self-hosted experience with complete control over structure, performance, and interaction. Three.js Scene and 3D Pipeline: Built the homepage character scene with responsive camera motion, lighting, scroll-driven animation, and post-processing. Prepared the 3D model in Blender and optimised the GLB with Meshopt, lazy mounting, visibility-based render pausing, capped pixel ratios, and conditional post-processing. Shader Lab: Designed and built the interactive shader controls system and the full layered post-processing pipeline: custom GLSL shaders, alpha-safe RGB shifting, alpha edge bleeding, brightness/contrast correction, bloom compositing, vignette blending, film grain, and pixel rendering. Portfolio Editor: Built a custom in-browser content editor supporting structured blocks, inline editing, block conversion, drag-and-drop reordering, undo history, formatting, media uploads, responsive image source handling, and save-state tracking. Media Pipeline: Designed and built the full media processing pipeline using FFmpeg for WebP exports, MP4 outputs, responsive desktop and mobile variants, social preview generation, and an image manifest for viewport-aware asset serving. Portfolio Navigation: Built the animated project browser with stacked cards, gesture and wheel navigation, hover tilt, rail transitions, pause animations mode, and image fallback handling. Performance Optimisation: Tuned 3D rendering, asset loading, and media delivery for smooth performance across devices. Analytics: Integrated Google Analytics and custom event tracking.