My Portfolio: -

🚀 Project overview

Roni Mandal's Personal Portfolio - Full-Stack Developer
A modern, responsive Next.js portfolio featuring:

• Interactive hero section
• Projects showcase with live + GitHub links
• Skill stack visualization
• Soft & advanced UI effects (3D globe, animated text)
• Resume link + CTA buttons
• Mobile-first responsive design

---

📍 Live Demo

https://portfolio-roni-2668s-projects.vercel.app/

---

🧩 Tech stack

• Framework: Next.js 14
• UI: React 18, Tailwind CSS, Framer Motion
• 3D effects: Three.js
• State: React hooks
• Data: Static config in index.ts
• Deployment: Vercel
• Lint & Build: ESLint, TypeScript, Next.js

---

🌟 Features

1. Hero:
   • Live text animation
   • PIcture + KIIT badge
   • Resume button + project button
2. Projects:
   • Config-driven cards
   • Multiple stack icons
   • “Check live site” and GitHub link
3. About section:
   • Grid with progress statements
4. Clients / experience cards
5. Footer with social links
6. Smooth anchor links (/#projects)
7. Dark theme style and accessible colors

---

📁 Repo structure

portfolio/
├── app/
│   ├── page.tsx
│   ├── layout.tsx
│   ├── globals.css
│   └── provider.tsx
├── components/
│   ├── Hero.tsx
│   ├── Grid.tsx
│   ├── RecentProjects.tsx
│   ├── Footer.tsx
│   ├── Clients.tsx
│   ├── Experience.tsx
│   ├── Approach.tsx
│   └── ui/
│       ├── BentoGrid.tsx
│       ├── CanvasRevealEffect.tsx
│       ├── FloatingNavbar.tsx
│       ├── Globe.tsx
│       ├── GradientBg.tsx
│       ├── HoverBorder.tsx
│       └── TextGenerateEffect.tsx
├── data/
│   └── index.ts
├── public/
│   ├── roni-photo.jpg
│   ├── kiit-logo.png
│   ├── p1.svg
│   ├── ...
│   └── roni-mandal-resume.pdf
├── package.json
├── next.config.mjs
├── README.md
└── ...

---

⚡ Quick start

1. Install

cd D:/CCodingPractice/portfolio
npm install

2. Run dev

npm run dev

3. Build

npm run build

4. Serve

npm run start

---

🛠 Helpful scripts

• npm run dev – launch local development
• npm run build – compile production assets
• npm run start – start server
• npm run lint – lint with Next.js rules
• npm run deploy – vercel --prod deployment

---

🧾 Deploy on Vercel

1. vercel login
2. vercel (if first deploy)
3. vercel --prod
4. Optional: run npm run deploy

---

🤝 Contribution

• Fork the repo
• Add/modify data in index.ts
• Improve layout in components
• Style in globals.css
• Commit & PR

---

📬 Contact

• LinkedIn: https://www.linkedin.com/in/ronimandal/
• GitHub: https://github.com/roni2668
• Email: mandalroni406@gmail.com

---

✨ Project status

Topic	Status
UI/UX	complete
Mobile friendly	complete
Code quality	in progress
Portfolio scaling	ready
GitHub + Vercel	done

---