Building a Modern Portfolio: The What, How, and Why Behind My Interactive Web Experience

As a computer science student passionate about pushing the boundaries of web development, I wanted to create a portfolio that would stand out from the typical template-based sites. The result is an interactive, Three.js-powered portfolio that combines modern web technologies with thoughtful design principles. Here's the story behind its creation.

The What: More Than Just Another Portfolio

When I set out to build my portfolio, I didn't want to create just another static website with the usual "About Me" sections and project cards. I wanted something that felt like me—someone who loves experimenting with technology and creating experiences that surprise and delight.

What emerged is a personal space on the web where visitors can explore my work through an interactive 3D environment. There's a floating icosahedron that dances as you scroll, responds when you hover over my projects, and even puts on a little show when you navigate between pages. It's playful yet professional, technical yet approachable.

The site showcases three projects I'm particularly proud of: an AI-powered CS2 item tracker that combines computer vision with gaming, a network security scanner built for real-world enterprise use, and yes—even a terminal-style portfolio because sometimes you just have to embrace the developer aesthetic.

But beyond the projects themselves, this portfolio is really about showing who I am as a developer: someone who cares deeply about performance, accessibility, and creating meaningful user experiences, even in something as simple as a personal website.

The How: Technical Architecture and Implementation

The Foundation: Next.js and TypeScript

I built the portfolio using Next.js 14 with the App Router, leveraging TypeScript for type safety and better developer experience. This foundation provides:

- Server-side rendering for optimal SEO and performance

- File-based routing for intuitive project organization

- Built-in optimization for images, fonts, and other assets

- TypeScript integration for catching errors early in development

3D Graphics with Three.js and React Three Fiber

The centerpiece of the site is the interactive 3D icosahedron, implemented using:

const PERFORMANCE_CONFIGS = {

  high: { frameRate: 60, quality: 1 },

  medium: { frameRate: 30, quality: 0.75 },

low: { frameRate: 20, quality: 0.5 },}

The 3D scene adapts to device capabilities, ensuring smooth performance across all devices. The icosahedron responds to:

-Scroll position: Rotates based on page scroll.

-Project hover states: Scales and changes color when projects are highlighted.

-Navigation animations: Complex multi-phase animations during page transitions

State Management and Performance

I used Zustand for lightweight state management, particularly for tracking scroll progress and managing the 3D scene's behavior. The implementation includes:

- Frame-skipping for performance optimization

- Adaptive quality settings based on device capabilities

- Smooth interpolation for all animations using lerp functions

Styling and Animation

The visual design combines:

- Tailwind CSS for utility-first styling

- Framer Motion for complex animations and page transitions

- Custom CSS animations for subtle effects like text shimmer and floating elements

- Responsive design that works seamlessly across all screen sizes

The Why: Design Philosophy and Goals

Standing Out in a Crowded Field

In a world where most portfolios look identical, I wanted to create something memorable. The interactive 3D elements immediately set the site apart while still maintaining professional credibility. The goal was to demonstrate technical capability without sacrificing usability.

Performance as a Priority

The portfolio implements several performance optimizations:

- Adaptive rendering: Automatically adjusts quality based on device capabilities

- Lazy loading: Components load only when needed

- Progressive enhancement: The site works even if JavaScript fails to load

Accessibility and User Experience

Despite the complex animations and 3D elements, the site remains accessible:

- Semantic HTML: Proper heading structure and navigation

- Keyboard navigation: All interactive elements are keyboard accessible

- Reduced motion support: Respects user preferences for reduced animations

- Screen reader compatibility: Proper ARIA labels and descriptions