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://swapnil.one

Table of Contents

• Features
• Tech Stack
• Project Structure
• Getting Started
• Available Scripts
• GSAP License Note
• Customization Guide
• Troubleshooting
• Deployment
• License

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

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

2. Install dependencies:

   npm install

3. Start the local development server:

   npm run dev

4. 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

2. Validate locally:

   npm run preview

3. 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.