https://github.com/prakhar-002/my-portfolio
I'm a passionate Full Stack Developer skilled in MERN, Next.js, and Motion. This 💼 dynamic portfolio showcases my 🛠️ projects, 🧠 skills, and experience. Built for ⚡ speed, 📈 scalability, and 🎨 clean design highlighting my tech journey.
https://github.com/prakhar-002/my-portfolio
framer-motion javascript nextjs reactjs tailwindcss
Last synced: 4 months ago
JSON representation
I'm a passionate Full Stack Developer skilled in MERN, Next.js, and Motion. This 💼 dynamic portfolio showcases my 🛠️ projects, 🧠 skills, and experience. Built for ⚡ speed, 📈 scalability, and 🎨 clean design highlighting my tech journey.
- Host: GitHub
- URL: https://github.com/prakhar-002/my-portfolio
- Owner: Prakhar-002
- Created: 2025-05-12T15:23:31.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-13T15:31:56.000Z (5 months ago)
- Last Synced: 2025-06-07T23:51:27.134Z (4 months ago)
- Topics: framer-motion, javascript, nextjs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://prakhar-002.vercel.app
- Size: 5.25 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nextfolio ➺ Crafted with Passion & Precision
A sleek, responsive portfolio built with `Next.js` ⚛️, `Tailwind CSS` 💨, and `Framer Motion` 🎞️. Showcasing projects 📂, skills 🧠, and awards 🏆 in a modern layout.
# 💻 Tech Stack ⛅️🏞️
 
    
# Features 🍂🧸
- 💡 Built with **Next.js 13 App Router**
- 🎨 Styled using **Tailwind CSS**
- 🌀 Smooth animations using **Framer Motion**
- 📊 Animated counters with **React CountUp**
- 🔁 Interactive sliders using **Swiper**
- 🌌 Dynamic particle effects via **tsparticles**
- 🧠 Organized, scalable project structure
- ⚙️ Custom scrollbar with `tailwind-scrollbar`
# Tech Used 👩🏻💻🤖
- **Framework**: [Next.js 15](https://nextjs.org/)
- **Styling**: [TailwindCSS](https://tailwindcss.com/)
- **Animations**: [Framer Motion](https://www.framer.com/motion/), [SwiperJS](https://swiperjs.com/)
- **Particles**: [tsparticles](https://particles.js.org/)
- **Icons**: [React Icons](https://react-icons.github.io/react-icons/)
- **Scrolling**: [tailwind-scrollbar](https://www.npmjs.com/package/tailwind-scrollbar)
# Installation Guide 🚀
## Clone 🏗️ the repository 🔍
### `For Windows` 🖥️
```bash
git clone https://github.com/Prakhar-002/My-Portfolio
cd My-Portfolio
```
### `For Linux and macOS` 🍏
```bash
git clone https://github.com/Prakhar-002/My-Portfolio
cd My-Portfolio
```
## Install 📥 dependencies 📦
```bash
npm install
```
## Start ▶️ the application 🚀
```bash
npm run dev
```
## 🌍 Access the app in your browser at ➡️
🔗 [http://localhost:3000](http://localhost:3000)
# 📁 Folder Structure
📦 NEXT-PORTFOLIO/
│
├── 🗂️ components 🔸 Reusable and animated UI components
│ │
│ ├── 📑 Avatar.js ⚛️ Avatar image with animation
│ ├── 📑 Bulb.js ⚛️ Background bulb light animation
│ ├── 📑 Circles.js ⚛️ Decorative circle animations
│ ├── 📑 Header.js ⚛️ Top navigation bar
│ ├── 📑 Layout.js ⚛️ Main layout wrapper
│ ├── 📑 Nav.js ⚛️ Sidebar / Bottom navigation
│ ├── 📑 ParticlesContainer.js ⚛️ Animated particles background using tsParticles
│ ├── 📑 ProjectsBtn.js ⚛️ Custom project call-to-action button
│ ├── 📑 ServiceSlider.js ⚛️ Slider showcasing services with motion
│ ├── 📑 Socials.js ⚛️ Social media icon list
│ ├── 📑 TestimonialSlider.js ⚛️ Testimonial slider component
│ ├── 📑 TopLeftImg.js ⚛️ Decorative top-left image
│ ├── 📑 Transition.js ⚛️ Page transition animations
│ └── 📑 WorkSlider.js ⚛️ Project showcase carousel
│
│
├── 🗂️ pages 🔸 Next.js route pages
│ │
│ ├── 🗂️ about/
| | |
│ │ └── 📑 index.js 📄 About section route
│ │
│ ├── 🗂️ contact/
| | |
│ │ └── 📑 index.js 📄 Contact form page
│ │
│ ├── 🗂️ services/
| | |
│ │ └── 📑 index.js 📄 Services offered
│ │
│ ├── 🗂️ testimonials/
| | |
│ │ └── 📑 index.js 📄 Client testimonials
│ │
│ ├── 🗂️ work/
| | |
│ │ └── 📑 index.js 📄 Project showcase
│ │
│ ├── 📑 _app.js ⚙️ Root-level component to wrap all pages
│ └── 📑 index.js 🏠 Homepage
│
│
├── 🗂️ public 🔸 Static assets served directly
│ └── 🖼️ (images, icons, animations) 🖼️ Accessible via `/public` path
│
│
├── 🗂️ styles 🔸 Global styles
│ └── 📑 globals.css 🎨 TailwindCSS + custom global styles
│
├── 📑 variants.js 🔁 Motion animation variants
│
├── 📑 .eslintrc.json 🧹 ESLint config for consistent formatting
├── 📑 .gitignore 🚫 Ignored files in version control
├── 📑 next.config.js ⚙️ Next.js config settings
├── 📑 package.json 📦 Project dependencies and metadata
├── 📑 package-lock.json 🔒 Dependency lockfile
├── 📑 postcss.config.js 🛠️ PostCSS plugin config
├── 📑 tailwind.config.js 🌬️ TailwindCSS configuration
|
└── 📑 README.md 📘 Project documentation