3d-portfolio

A personalized 3D portfolio platform that helps developers, designers, and students showcase their skills through immersive, interactive experiences.

Comment

3D Portfolio Website

This repository contains the source code for a personal 3D portfolio built with React, TypeScript, Three.js, React Three Fiber, and GSAP. It includes animated page sections, a character scene, custom cursor interactions, and smooth transitions designed for a modern portfolio experience.

Live site: https://akashrmalhotra.netlify.app/

Portfolio Preview

Table of Contents

Features

  • Responsive one-page portfolio layout with reusable section components.
  • 3D character scene rendering powered by React Three Fiber and Three.js.
  • GSAP-powered animations and transitions for interactive storytelling.
  • Custom cursor, hover interactions, and scroll-driven visual effects.
  • Organized component architecture with dedicated utilities and style modules.

Tech Stack

Core

  • React 18
  • TypeScript
  • Vite

Animation and 3D

  • GSAP + @gsap/react
  • Three.js
  • @react-three/fiber
  • @react-three/drei
  • @react-three/postprocessing
  • @react-three/cannon
  • @react-three/rapier

Supporting Libraries

  • react-icons
  • react-fast-marquee
  • @vercel/analytics

Project Structure

.
├── public/                    # Static assets
├── src/
│   ├── assets/                # Local media/assets
│   ├── components/
│   │   ├── Character/         # 3D scene + character logic/utilities
│   │   ├── styles/            # Section/component CSS files
│   │   ├── About.tsx
│   │   ├── Career.tsx
│   │   ├── Contact.tsx
│   │   ├── Landing.tsx
│   │   ├── MainContainer.tsx  # Main page composition
│   │   ├── Navbar.tsx
│   │   ├── TechStack.tsx
│   │   ├── WhatIDo.tsx
│   │   └── Work.tsx
│   ├── context/               # Global providers (loading state, etc.)
│   ├── data/                  # Static data/content definitions
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── vite.config.ts

Getting Started

Prerequisites

  • Node.js 18+ (recommended)
  • npm 9+ (or compatible)

Installation

  1. Clone the repository:
   git clone <your-repository-url>
   cd 3d-portfolio
  1. Install dependencies:
   npm install
  1. Start the local development server:
   npm run dev
  1. Open the URL shown in the terminal (typically http://localhost:5173).

Available Scripts

  • npm run dev
    Starts Vite dev server and exposes host for local network testing.

  • npm run build
    Type-checks and builds a production-ready bundle.

  • npm run preview
    Serves the production build locally for verification.

  • npm run lint
    Runs ESLint checks across the project.

GSAP License Note

This project uses the standard gsap package, including bonus plugins now available in the core package.

  • Install dependencies with npm install.
  • If migrating from older setups, remove gsap-trial from your project.

Read official installation guidance here: GSAP Installation Docs

Customization Guide

You can adapt this portfolio to your own profile by updating the following areas:

  • Content sections: Edit files in src/components/ such as About.tsx, Career.tsx, WhatIDo.tsx, and Work.tsx.
  • Data source: Update static values in files under src/data/.
  • Styling: Modify component styles in src/components/styles/ and global styles in src/index.css / src/App.css.
  • 3D scene behavior: Adjust scene logic in src/components/Character/ and related utilities.
  • Animations: Tweak GSAP utilities under src/components/utils/.

Troubleshooting

  • Blank screen in development
    Check browser console for module import errors and verify all dependencies are installed.

  • 3D performance issues on low-end devices
    Reduce scene complexity and post-processing effects in the character/scene utilities.

  • GSAP plugin errors
    Ensure you have the correct plugin package and license configuration for your target environment.

  • TypeScript build failures
    Run npm run build and address reported type errors before deploying.

Deployment

  1. Create a production build:
   npm run build
  1. Validate locally:
   npm run preview
  1. Deploy the generated dist/ folder to your hosting provider (for example Vercel, Netlify, or Cloudflare Pages).

License

This project is open source and available under the MIT License.

Share this project:

Updates