The first iteration of my personal website it's a simple 3D interactive landing page 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 immerse myself in Webflow and Spline.

This early version of www.xochiworld.com serves as a creative playground where I experimented with low-code solutions to simplify the development process while maintaining creative control. Webflow's intuitive interface facilitated rapid development, allowing me to focus more on interactive and 3D elements, rather than traditional 2D UI construction. Integrating Spline added a new dimension to the experience, offering a user-friendly platform for incorporating 3D visuals.

As an experienced coder, I'm accustomed to the capabilities of Three.js and A-Frame for creating complex 3D scenes. While Spline's features are more limited in comparison, it provides a great starting point for non-coders looking to explore 3D website creation. Looking ahead, I plan to integrate more advanced scenes and interactive elements using these tools, potentially including augmented reality features to enhance the mobile experience.

For now, visitors can explore the initial design and get a sense of the creative direction of xochiworld.

And yes, my Ready Player Me avatar is part of the site—she adds a unique vibe that's very much in tune with the playful spirit of the project.

Webflow, Spline, Vanilla Javascript, Blender, Mixamo.

Web Design and Development: Single handled the design and development, focusing on the integration of fun interactive elements and .

3D Visual Integration: Utilized Spline to incorporate a simple 3D scene, with plans for further enhancement using Three.js and A-Frame.

3D Asset Integration: Integrated and edited my Ready Player Me avatar using Blender and Mixamo to customize the animation and allow for the head to be able to follow the cursor without getting in the way with the subtle idle animation in the avatar.

Custom Code Implementation: Added custom javascript code to extend the capabilities of Webflow and trigger fun animations and effects based on cursor/touch events.

Performance Optimization: Conducted performance evaluations to ensure smooth operation on various devices and for high user loads.

Analytics Integration: Integrated Google Analytics in the code to track user behavior through custom events.

Future Enhancements: Planning to introduce advanced interactive elements and potential AR features.