My-Unfinished-Journey

Inspiration

I wanted my portfolio to stand out, but not just in a "check out my cool projects" kind of way. I wanted it to be an experience. I’ve always been fascinated by stories that mix the eerie and the thrilling, like Alice in Borderland and post-apocalyptic themes. So, I thought, why not turn my portfolio into a game? A dystopian adventure where visitors have to survive alien invasions, uncover hidden Easter eggs, and follow blood-trail cursor effects just to browse my work. This was my way of showing that I can think outside the box (or screen).

What it does

This isn't your typical static portfolio. The site is an interactive game that blends personal projects with a dark, immersive environment. As you navigate through the site, you're thrown into a world on the brink of collapse, filled with quirky interactions and surprises. You can find my projects hidden behind alien spaceships, escape apocalyptic weather patterns, and decode hidden messages through the Konami Code. It’s a journey that makes portfolio browsing feel like a quest. Especially the 3D survival game near the end built through webgl and Threejs.

How I built it

I built it using React (for smooth navigation), Three.js (for 3D visuals), and TypeScript (because I like being cautious). The design is a mix of apocalyptic minimalism with interactive game mechanics. Tailwind CSS helped me stay organized in the chaos, while React Three Fiber gave me the flexibility to bring my 3D ideas to life in a browser. The biggest technical feat was integrating WebGL with smooth interactivity while maintaining good performance across devices.

Challenges I ran into

The learning curve with Three.js and WebGL was brutal. I had to figure out how to keep the graphics running smoothly without crashing the browser. Plus, the 3D models and animations had to be just right to create that immersive vibe. There was also the challenge of combining an unconventional design approach with functional web elements. Balancing art and performance? It wasn’t easy, but hey, we made it work.

Accomplishments that I'm proud of

First interactive portfolio: Not just static content – it’s an experience. Visitors aren’t just scrolling; they’re actively participating.

WebGL integration: Combining interactivity and 3D elements without completely tanking performance.

The little details: Easter eggs, Konami code, and subtle interactions. It’s all about making it fun without being overwhelming.

What I learned

WebGL optimization is an art. Not everything that looks cool in a demo works well in real life.

Managing 3D graphics and performance in the browser requires constant testing and tweaking.

How important it is to balance creative freedom with user experience. A cool design can be a pain if it doesn’t work smoothly.

Time management: Juggling exams with a fun side project like this requires a lot of chai and self-discipline.

What's next for My-Unfinished-Journey-Portfolio

Honestly, the project is far from finished. I want to keep refining it, add new levels, introduce more interactive elements, and improve the 3D world. I’d love to experiment with AI-driven interactions and maybe integrate more gamified features like challenges or leaderboards. For now, it’s just a glimpse of what’s possible—so buckle up, the adventure’s just starting.

Built With

• gsap
• react
• tailwindcss
• three.js
• threefiber
• typescript
• webgl