An immersive, cinematic 3D developer portfolio showcasing the skills, certificates, coding journey, and projects of Jitendra Shrestha. Built with modern web technologies including Next.js, React Three Fiber, GSAP, and Tailwind CSS.
- Immersive 3D Graphics: Interactive 3D scene featuring a laptop with a dynamic code-rain canvas texture powered by Three.js & React Three Fiber.
- Premium UX/UI:
- Dark mode by default with elegant smooth scrolling (Lenis).
- Ambient light-ray overlays and sleek glassmorphism panels.
- Custom vertical dot navigation indicating active sections on scroll.
- Dynamic Content:
- Animated stat counters (Years Coding, Projects Built, Technologies mastered).
- Categorized Skills matrix and Interactive Coding Journey.
- Certificates showcase.
- Functional Contact Form: Direct email communication using Nodemailer.
- Framework: Next.js (App Router) & TypeScript
- Styling: Tailwind CSS
- 3D & Graphics: Three.js,
@react-three/fiber,@react-three/drei - Animations: Framer Motion & GSAP
- Smooth Scroll:
@studio-freight/react-lenis - Backend / Mailer: Nodemailer
- Node.js (v18+ recommended)
- npm or yarn
-
Clone the repository:
git clone <repository-url> cd jitendra-portfolio
-
Install dependencies:
npm install
-
Configure Environment Variables: Create a
.env.localfile in the root directory and add the following keys:# Email Credentials for Contact Form EMAIL_USER=your-email@gmail.com EMAIL_PASS=your-app-password EMAIL_TO=recipient-email@domain.com
-
Run the Development Server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
-
Build for Production:
npm run build
app/- App router layouts, pages, and API routes.components/- Global components (Navbar, Loader, etc.) and UI assets.sections/- Modular portfolio sections (Hero, About, Projects, Skills, Certificates, CodingJourney, Contact, Footer).constants/- Portfolio configuration data and static assets metadata.public/- Public assets including certificates, logos, and project images.