Vivard Dimension

Inspiration

I was inspired to move beyond the boundaries of a traditional, static portfolio So I wanted to build a memorable, interactive journey for visitors that was both engaging and technically impressive, demonstrating my skills in a creative way.

What it does

This project is a fully interactive 3D portfolio website. As you scroll, it takes you on a cinematic journey through a virtual room, with the camera smoothly panning to different points of interest. Each stop on the tour highlights a different aspect of my skills and projects. It's designed to be an immersive experience that tells a story about who I am as a developer and a creator.

How we built it

The portfolio was brought to life using a stack of modern web technologies:

3D Rendering:[Three.js] is the core engine, responsible for rendering the entire 3D scene, including the room model, lighting, and textures.
**Animations: The [GreenSock Animation Platform (GSAP)] was used to choreograph all the animations, from the smooth camera movements tied to the scrollbar to the subtle interactive effects.
**Build Tool:[Vite] provided a lightning-fast development environment and an optimized build process for production.
Deployment: The site is hosted on GitHub Pages

Challenges Iran into

The 3D Learning Curve: Getting comfortable with the concepts of 3D development in a browser, such as scene management, lighting, and camera controls in Three.js, was a significant but rewarding challenge.
Performance Optimization: Ensuring a smooth 60 FPS experience was critical. This involved compressing the 3D models with Draco, optimizing textures, and writing efficient animation code to prevent performance bottlenecks.

Accomplishments that we're proud of

I'm incredibly proud of creating a portfolio that feels alive and interactive. Successfully integrating 3D graphics with a smooth, scroll-based animation system is a major accomplishment for me. I'm also proud of having built a project that is not just a gallery of my work, but a piece of work in itself.

What I learned

This project was a huge learning experience. I deepened my understanding of WebGL and the 3D rendering pipeline, mastered complex animation choreography with GSAP, and learned invaluable lessons in performance optimization for web applications. I also gained practical, real-world experience in deployment pipelines .