Interactive Web Portfolio

Modern Full-Stack Portfolio with 3D Graphics

January 2026

ReactNext.jsThree.jsCSSVercelJavaScript

Overview

This portfolio website itself! A modern, interactive portfolio built with Next.js 15 and Three.js, featuring stunning 3D animations, responsive design, and dynamic project pages. Deployed on Vercel with automatic CI/CD and optimized for performance.

The Challenge

Creating a visually striking portfolio that stands out while maintaining fast load times, responsive design, and showcasing technical projects in an engaging way.

The Solution

Leveraged Next.js for optimal performance with server-side rendering, Three.js for eye-catching 3D animations, and modern CSS for a cyberpunk-inspired aesthetic that reflects technical expertise.

Key Features

  • Interactive 3D tile animation with mouse interaction
  • Dynamic project pages with routing
  • Responsive design for all devices
  • Cyberpunk-inspired visual design
  • Smooth animations and transitions
  • Deployed on Vercel with automatic deployment
  • SEO optimized with Next.js metadata

Technical Details

  • Next.js 15 with App Router
  • Three.js for WebGL 3D graphics
  • React 19 with hooks and functional components
  • CSS Modules for scoped styling
  • Custom fonts (Orbitron, Space Mono)
  • Dynamic imports for code splitting
  • Vercel deployment with edge network
  • Performance optimization with Lighthouse scores
Edward Serna | Computer Engineering Portfolio