Gateway of the website
The portfolio

Inspiration

This project was inspired by the visual style of The Matrix, classic hacker aesthetics, and early 2000s computer interfaces. The goal was to turn a traditional portfolio into an interactive, futuristic digital space that merges creativity with technology. The green-coded theme symbolizes the fusion of human imagination and machine logic — a portfolio that’s alive and evolving.

What it does

Matrix Green Portfolio is a 3D interactive web portfolio that represents its creator’s work inside a virtual cyber environment. Visitors can experience transitions, animations, and glowing UI effects while viewing personal projects — all rendered in real time. A rotating retro computer model acts as a centerpiece surrounded by ambient matrix-style visual effects.

How we built it

We built the portfolio from scratch using the following technologies: Three.js — for real-time 3D graphics and lighting Sketchfab — for model sourcing and glTF integration HTML5, CSS3, JavaScript — for UI, animations, and interactive components Git and GitHub — for version control and deployment A background video effect and custom loading animation enhance immersion, while dynamic resizing ensures cross-device compatibility.

Challenges we ran into

Balancing performance and 3D model quality for smooth rendering Achieving the perfect neon glow and shader lighting effects Handling asynchronous loading of models and videos without lag Ensuring that the Three.js canvas scaled responsively on different screen sizes

Accomplishments that we're proud of

Creating a fully custom 3D web portfolio from the ground up Maintaining visual fidelity across hardware without sacrificing performance Delivering a one-of-a-kind, cinematic aesthetic inspired by pop culture and cyber design Combining creative artistry with modern front-end engineering principles

What we learned

Deep knowledge of Three.js rendering pipelines Real-world experience with WebGL shaders and model optimizations How to use 3D art and interactivity to express personal branding Importance of balancing aesthetics, usability, and web performance

What's next for our CyberFolio

Adding AI-driven interactivity that responds to user inputs through chat-like prompts Expanding the experience into a navigable 3D world Automating updates by linking GitHub API data directly Building an installable Template Generator so others can personalize it for their own portfolios