xochiworld.com

The second iteration of xochiworld.com is a self-hosted React-based experience built with Next.js, expanding the original landing page into a more complete digital space that includes both my portfolio and an interactive shader lab. Alongside showcasing selected work, the site allows visitors to play with real-time visual effects that affect a 3D character directly in the browser, turning the website into both a portfolio and an experimental playground.

This new version gave me more flexibility and creative control than the first. Moving away from low-code tools into a custom React setup allowed me to shape the structure, performance, and interactions more intentionally, while keeping the experience playful and visually led. The 3D model was edited in Blender, and the character is enhanced in-browser through post-processing and shader-based visual treatments, creating a more dynamic and expressive result.

Built with Next.js, React, and Three.js, this version is designed as a self-hosted space where I can continue expanding the site over time, testing new interactive ideas while also presenting my work in a more cohesive way.

Hello

V1

The first iteration of my personal website was a simple 3D interactive landing page created to showcase my services and portfolio. After a decade of crafting interactive experiences for top brands and production studios, I dedicated a few days to immersing myself in Webflow and Spline.

This early version of xochiworld.com served as a creative playground where I experimented with low-code solutions to simplify the development process while maintaining creative control. Webflow’s intuitive interface allowed for rapid development, giving me more time to focus on interactive and 3D elements rather than traditional 2D UI construction. Integrating Spline added a new dimension to the experience, offering an accessible way to bring 3D visuals into the site.

As an experienced coder, I’m used to the flexibility of tools like Three.js and A-Frame for creating more complex 3D scenes. While Spline is more limited in comparison, it was a good starting point for exploring how low-code tools can support visually driven web experiences. Looking ahead from that first version, I wanted to expand into more advanced scenes and interactive elements, and potentially bring in augmented reality features for mobile as well.

That first version allowed visitors to explore the initial design direction of xochiworld and get a sense of its tone. And yes, my Ready Player Me avatar was part of the site too, adding a playful element that felt very much in tune with the spirit of the project.

TECHNICAL DETAILS

V2: Next.js, React, Three.js, Blender, custom shaders, post-processing, self-hosted deployment.

V1: Webflow, Spline, Vanilla JavaScript, Blender, Mixamo.

RESPONSIBILITIES

Creative Direction, Design and Development: Led the concept, design, and development of both versions of the site, shaping it as an evolving personal and professional platform.

Frontend Development: Built the second version in React and Next.js, moving from a low-code prototype into a custom-coded, self-hosted experience with greater flexibility and control.

Portfolio Integration: Expanded the original landing page into a fuller portfolio experience that presents selected projects in a more structured and cohesive way.

Shader Lab Development: Created an interactive shader lab where visitors can affect the 3D character in real time, making the website itself part portfolio, part experimentation space.

3D Asset Editing and Integration: Edited the 3D model in Blender and integrated it into the site, combining model preparation with browser-based visual treatments and post-processing effects.

Custom Interactive Features: Implemented custom interactions and visual effects to make the site feel playful, responsive, and visually distinctive.

Performance Optimization: Evaluated performance across devices and refined the experience to keep 3D elements running as smoothly as possible.

Analytics Integration: Integrated Google Analytics and custom event tracking to better understand how visitors engage with the site.

Ongoing Development: Designed the project as an evolving platform that can keep growing over time through new experiments, portfolio updates, and future interactive features.