Skip to content

README.md

Latest commit

 

History

History
153 lines (103 loc) · 4.04 KB

README.md

File metadata and controls

153 lines (103 loc) · 4.04 KB
Raw

3D Portfolio Website

A modern, interactive portfolio website featuring 3D graphics and smooth animations built with React, Three.js, and GSAP.

Protfolio-Preview

Overview

This portfolio website showcases a unique user experience by integrating 3D character models and environments with smooth scroll-based animations. The project leverages cutting-edge web technologies to create an immersive and engaging presentation of professional work and skills.

Features

  • 3D Character Integration: Interactive 3D character model with custom animations
  • Smooth Scroll Animations: GSAP-powered scroll-triggered animations for seamless transitions
  • Responsive Design: Optimized for all device sizes and screen resolutions
  • Performance Optimized: Efficient rendering and lazy loading for optimal performance
  • Modern Tech Stack: Built with React, TypeScript, and Three.js
  • Custom Lighting: HDR environment mapping for realistic lighting effects
  • Physics Integration: React Three Rapier for realistic physics simulations

Tech Stack

Core Technologies

  • React 18.3.1: Modern React with hooks and functional components
  • TypeScript 5.5.3: Type-safe development
  • Vite 5.4.1: Fast build tool and development server
  • Three.js 0.168.0: 3D graphics library

3D Graphics

  • @react-three/fiber: React renderer for Three.js
  • @react-three/drei: Useful helpers for react-three-fiber
  • @react-three/rapier: Physics engine integration
  • @react-three/postprocessing: Post-processing effects

Animation

  • GSAP 3.12.7: Professional-grade animation library
  • @gsap/react: GSAP React integration

Additional Libraries

  • react-icons: Icon library
  • react-fast-marquee: Marquee component for scrolling text
  • @vercel/analytics: Analytics integration

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (version 16.x or higher)
  • npm or yarn package manager

Installation

  1. Clone the repository:
git clone https://github.com/udithavithanage/3d-web.git
cd Portfolio-Website
  1. Install dependencies:
npm install

Development

Start the development server:

npm run dev

The application will be available at http://localhost:5173 (or another port if 5173 is in use).

Available Scripts

  • npm run dev: Start development server with host access
  • npm run build: Build for production
  • npm run lint: Run ESLint for code quality checks
  • npm run preview: Preview production build locally

Project Structure

src/
├── components/          # React components
│   ├── Character/      # 3D character related components
│   │   ├── data/       # Animation and bone data
│   │   └── utils/      # Character utilities
│   ├── styles/         # Component-specific styles
│   └── utils/          # General utilities
├── App.tsx             # Main application component
└── main.tsx            # Application entry point

public/
├── images/             # Static images
└── models/             # 3D models and HDR environments

Building for Production

Create an optimized production build:

npm run build

The built files will be in the dist directory and can be deployed to any static hosting service.

Deployment

This project is optimized for deployment on:

  • Vercel (recommended)
  • Netlify
  • GitHub Pages
  • Any static hosting service

Deploying to Vercel

npm install -g vercel
vercel

Performance Considerations

  • 3D models are optimized and compressed
  • Lazy loading implemented for heavy assets
  • Code splitting for optimal bundle sizes
  • HDR environment maps cached efficiently

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Note: WebGL 2.0 support required for full functionality.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the terms specified in the LICENSE file.