A modern, performant portfolio website built with Next.js 14, featuring stunning animations, interactive elements, and optimized for exceptional user experience.
- Modern UI/UX - Clean, responsive design with smooth animations
- Dark/Light Mode - Seamless theme switching with persistent preferences
- Performance Optimized - Lazy loading, code splitting, and GPU-accelerated animations
- Interactive Animations - Canvas-based particle effects with Intersection Observer optimization
- Fully Responsive - Mobile-first design that works on all devices
- Fast Loading - Optimized for Core Web Vitals with dynamic imports
- Accessible - ARIA compliant and keyboard navigable
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Font: Montserrat (Google Fonts)
- Deployment: Vercel
rhythm-portfolio/
├── src/
│ └── app/
│ ├── components/ # Reusable components
│ │ ├── AnimatedBackground.jsx
│ │ ├── Hero.js
│ │ ├── Navbar.jsx
│ │ ├── Footer.js
│ │ └── ...
│ ├── context/ # React Context (Theme)
│ ├── about/ # About page
│ ├── skills/ # Skills page
│ ├── projects/ # Projects page
│ ├── contact/ # Contact page
│ └── styles/ # CSS modules
├── public/ # Static assets
└── ...config files
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/RhythmPahwa14/Rhythm-Portfolio.git
cd Rhythm-Portfolio- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
Create an optimized production build:
npm run build
npm start- Lazy Loading: Dynamic imports for route components
- Canvas Optimization: Animations pause when not in viewport
- GPU Acceleration: Transform and will-change CSS properties
- Code Splitting: Automatic code splitting with Next.js
- Image Optimization: Next.js Image component
- Font Optimization: next/font with Montserrat
Edit theme colors in src/app/globals.css:
.dark {
--bg-primary: #111827;
--text-primary: #f9fafb;
/* ... */
}Adjust animation speeds in components:
const speed = 4; // Ball movement speed
const numDots = 20; // Number of animated dotsThis project is open source and available under the MIT License.
Rhythm Pahwa
- Website: rhythmpahwa.tech
- GitHub: @RhythmPahwa14
- LinkedIn: pahwa-rhythm
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Give a star if you like this project!
Built with Next.js and Tailwind CSS