{"id":35196576,"url":"https://github.com/udithavithanage/3d-web","last_synced_at":"2026-01-13T22:55:15.254Z","repository":{"id":330927298,"uuid":"1124114194","full_name":"udithavithanage/3d-web","owner":"udithavithanage","description":"A modern portfolio website featuring an animated 3D character, smooth scroll effects, and immersive WebGL experiences. Built with React, TypeScript, Three.js, and GSAP to showcase projects, skills, and professional journey with stunning visuals and performance optimization.","archived":false,"fork":false,"pushed_at":"2025-12-29T07:01:15.000Z","size":3397,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-13T22:55:06.831Z","etag":null,"topics":["3d-models","3d-web","protfolio","react","three-js"],"latest_commit_sha":null,"homepage":"https://3d-web-seven.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/udithavithanage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-28T11:14:39.000Z","updated_at":"2026-01-11T16:28:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/udithavithanage/3d-web","commit_stats":null,"previous_names":["udithavithanage/3d-web"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/udithavithanage/3d-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udithavithanage%2F3d-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udithavithanage%2F3d-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udithavithanage%2F3d-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udithavithanage%2F3d-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/udithavithanage","download_url":"https://codeload.github.com/udithavithanage/3d-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udithavithanage%2F3d-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28405138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T21:51:37.118Z","status":"ssl_error","status_checked_at":"2026-01-13T21:45:14.585Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-models","3d-web","protfolio","react","three-js"],"created_at":"2025-12-29T07:37:45.047Z","updated_at":"2026-01-13T22:55:15.249Z","avatar_url":"https://github.com/udithavithanage.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D Portfolio Website\n\nA modern, interactive portfolio website featuring 3D graphics and smooth animations built with React, Three.js, and GSAP.\n\n![Protfolio-Preview](./public/images/banner.png)\n\n## Overview\n\nThis 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.\n\n## Features\n\n- **3D Character Integration**: Interactive 3D character model with custom animations\n- **Smooth Scroll Animations**: GSAP-powered scroll-triggered animations for seamless transitions\n- **Responsive Design**: Optimized for all device sizes and screen resolutions\n- **Performance Optimized**: Efficient rendering and lazy loading for optimal performance\n- **Modern Tech Stack**: Built with React, TypeScript, and Three.js\n- **Custom Lighting**: HDR environment mapping for realistic lighting effects\n- **Physics Integration**: React Three Rapier for realistic physics simulations\n\n## Tech Stack\n\n### Core Technologies\n\n- **React 18.3.1**: Modern React with hooks and functional components\n- **TypeScript 5.5.3**: Type-safe development\n- **Vite 5.4.1**: Fast build tool and development server\n- **Three.js 0.168.0**: 3D graphics library\n\n### 3D Graphics\n\n- **@react-three/fiber**: React renderer for Three.js\n- **@react-three/drei**: Useful helpers for react-three-fiber\n- **@react-three/rapier**: Physics engine integration\n- **@react-three/postprocessing**: Post-processing effects\n\n### Animation\n\n- **GSAP 3.12.7**: Professional-grade animation library\n- **@gsap/react**: GSAP React integration\n\n### Additional Libraries\n\n- **react-icons**: Icon library\n- **react-fast-marquee**: Marquee component for scrolling text\n- **@vercel/analytics**: Analytics integration\n\n## Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- Node.js (version 16.x or higher)\n- npm or yarn package manager\n\n## Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/udithavithanage/3d-web.git\ncd Portfolio-Website\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n## Development\n\nStart the development server:\n\n```bash\nnpm run dev\n```\n\nThe application will be available at `http://localhost:5173` (or another port if 5173 is in use).\n\n### Available Scripts\n\n- `npm run dev`: Start development server with host access\n- `npm run build`: Build for production\n- `npm run lint`: Run ESLint for code quality checks\n- `npm run preview`: Preview production build locally\n\n## Project Structure\n\n```\nsrc/\n├── components/          # React components\n│   ├── Character/      # 3D character related components\n│   │   ├── data/       # Animation and bone data\n│   │   └── utils/      # Character utilities\n│   ├── styles/         # Component-specific styles\n│   └── utils/          # General utilities\n├── App.tsx             # Main application component\n└── main.tsx            # Application entry point\n\npublic/\n├── images/             # Static images\n└── models/             # 3D models and HDR environments\n```\n\n## Building for Production\n\nCreate an optimized production build:\n\n```bash\nnpm run build\n```\n\nThe built files will be in the `dist` directory and can be deployed to any static hosting service.\n\n## Deployment\n\nThis project is optimized for deployment on:\n\n- Vercel (recommended)\n- Netlify\n- GitHub Pages\n- Any static hosting service\n\n### Deploying to Vercel\n\n```bash\nnpm install -g vercel\nvercel\n```\n\n## Performance Considerations\n\n- 3D models are optimized and compressed\n- Lazy loading implemented for heavy assets\n- Code splitting for optimal bundle sizes\n- HDR environment maps cached efficiently\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\nNote: WebGL 2.0 support required for full functionality.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the terms specified in the LICENSE file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fudithavithanage%2F3d-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fudithavithanage%2F3d-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fudithavithanage%2F3d-web/lists"}