My Portfolio

A visually immersive, parallax-driven portfolio that blends art and code — showcasing creativity, skills, and personality through motion, interactivity, and world-class design.

Comment

Inspiration

Every developer’s journey deserves a digital home — not just a page of links. I wanted to build a portfolio that feels alive, blending design, storytelling, and interactivity. Inspired by world-class portfolios like Bruno Simon and Tobias Ahlin, I set out to create something immersive, modern, and personal — a site that reflects not just what I build, but who I am.

What it does

This portfolio acts as a living resume and creative showcase. It features:

  • A parallax scrolling experience that tells my story through depth and motion.
  • A project gallery with hover animations and detailed modals.
  • An interactive skills section powered by motion-based graphics.
  • A smooth contact page that invites collaboration. Everything is designed to engage visitors emotionally and visually, making the website both functional and artistic.

How we built it

The site was built with:

  • HTML, CSS, and JavaScript for the core structure.
  • GSAP and ScrollTrigger for animations and parallax effects.
  • Locomotive Scroll for smooth, fluid motion.
  • Three.js / Canvas overlays for light 3D depth and particle effects.
  • Responsive design principles for all devices. Each section was crafted to maintain performance, clarity, and immersion while balancing aesthetic depth with usability.

Challenges we ran into

  • Performance Optimization: Animations and parallax effects can easily overload browsers if not tuned carefully.
  • Design Consistency: Keeping the color palette, typography, and motion language unified across pages.
  • Balancing Creativity with UX: Making it exciting without sacrificing readability or accessibility.
  • Responsive Parallax: Adapting 3D scroll experiences for mobile and touch devices was tricky.

Accomplishments that we're proud of

  • Designed and developed a cinematic web experience that truly feels personal.
  • Achieved a smooth, high-performance animation system.
  • Created a branded visual identity — a consistent color scheme, logo mark, and motion style.
  • Combined code, art, and emotion in a way that feels authentic.

What we learned

  • Advanced use of GSAP timelines and animation sequencing.
  • How to design for motion hierarchy — guiding the user’s eyes with movement.
  • The importance of brand storytelling and micro-interactions.
  • Managing scroll performance and animation optimization for different devices.

What's next for My Portfolio

  • Add a dynamic content system powered by a lightweight CMS (like Sanity or Strapi).
  • Integrate AI-driven personalization (e.g., adapting color themes based on user mood/time).
  • Build a dark/light adaptive theme using system preferences.
  • Add a mini 3D world or interactive avatar for visitors to explore.
  • Continue evolving it into a personal creative lab for experiments, not just a portfolio.

Built With

Share this project:

Updates