An immersive 3D portfolio experience built with Next.js, TypeScript, and Three.js.
My Portfolio is a modern, interactive portfolio platform inspired by the beauty of the cosmos. Designed to combine creativity with performance, the application showcases professional projects, technical expertise, and personal achievements through immersive 3D visuals, fluid animations, and a responsive user experience.
Built using Next.js App Router and TypeScript, the portfolio delivers a seamless browsing experience while maintaining scalability, accessibility, and production-grade performance.
- Dynamic 3D space environment powered by Three.js
- Real-time rendered celestial visuals
- Immersive portfolio presentation
- Fluid page transitions and micro-interactions
- Motion-driven UI powered by Framer Motion
- Enhanced user engagement and responsiveness
- Built with Next.js App Router
- Reusable and maintainable component structure
- Type-safe development workflow with TypeScript
- Tailwind CSS utility-first styling
- Consistent visual language and cosmic-themed palette
- Clean, elegant, and accessible UI
- Optimized for desktop, tablet, and mobile devices
- Adaptive layouts for various screen sizes
- Consistent experience across platforms
- Strict TypeScript configuration
- ESLint integration
- Optimized build and deployment workflow
| Category | Technologies |
|---|---|
| Frontend | Next.js 14, TypeScript |
| 3D Graphics | Three.js, React Three Fiber, Drei |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Code Quality | ESLint, TypeScript Compiler |
| Deployment | Vercel |
- Node.js 18+
- npm, yarn, pnpm, or bun
Clone the repository:
git clone https://github.com/abhijithshetty12/portfolio-abhijith.git
cd abhijith-portfolioInstall dependencies:
npm installStart the development server:
npm run devOpen your browser and visit:
http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Create optimized production build |
npm run start |
Start production server |
npm run lint |
Run ESLint checks |
abhijith-space-portfolio/
│
├── app/ # Next.js App Router pages
├── components/ # Reusable UI components
├── config/ # Application configuration
├── constants/ # Static data and constants
├── lib/ # Utility functions
├── public/ # Static assets
│
├── next.config.js # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.jsonThis project is optimized for seamless deployment on Vercel, the platform built by the creators of Next.js.
- Push your repository to GitHub.
- Sign in to Vercel.
- Click New Project and import your repository.
- Vercel will automatically detect the Next.js framework settings.
- Click Deploy and wait for the build to complete.
- Your portfolio will be live with automatic deployments enabled for future commits.
- ⚡ Optimized for Next.js applications
- 🚀 Automatic CI/CD deployments
- 🌍 Global Edge Network
- 🔒 Free SSL certificates
- 📈 Built-in analytics and performance monitoring
Front-End Web Developer
Passionate about crafting modern web experiences that blend creativity, performance, and user-centric design.
If you enjoyed this project or found it useful, consider giving it a ⭐ on GitHub.
Your support helps increase visibility and motivates continued improvements and new features.
Made with ❤️ using Next.js, TypeScript, and Three.js