My Personal MERN Stack Portfolio

A modern, animated, and performance-focused developer portfolio built with React and motion-first design principles.

---

Overview

This is my personal developer portfolio designed to present my work, skills, and experience in a clean and engaging way. The focus is on smooth user experience, thoughtful animations, and a responsive layout that works seamlessly across devices. Every section is intentionally crafted to reflect my approach to frontend development and UI/UX design.

---

Features

• Fully responsive layout for all screen sizes
• Custom design system built with Tailwind CSS
• Smooth page and component animations using Framer Motion
• Advanced motion effects and scroll interactions powered by GSAP
• Clean, reusable React component architecture
• Dedicated sections for projects, skills, and personal information
• Dark and light theme support

---

Tech Stack

Frontend

• React.js
• Tailwind CSS
• Framer Motion
• GSAP
• Redux
• React Icons
• & More

Tools & Workflow

• VS Code
• Git & GitHub
• Figma (design and layout planning)

---

Project Structure

───src
    │   App.css
    │   App.jsx
    │   index.css
    │   main.jsx
    │
    ├───assets
    │   │
    │   └───images
    │
    ├───components
    │   │   Cursor.jsx
    │   │   Loader.jsx
    │   │   PageTransition.jsx
    │   │
    │   ├───About Me
    │   │       AboutBan.jsx
    │   │       AboutText.jsx
    │   │       MyReview.jsx
    │   │       Review.jsx
    │   │       Services.jsx
    │   │
    │   ├───common
    │   │       ExploreMyWork.jsx
    │   │       Footer.jsx
    │   │       Navbar.jsx
    │   │       ResNavbar.jsx
    │   │
    │   ├───Contact
    │   │       ContactBan.jsx
    │   │
    │   ├───effects
    │   │       BlurText.jsx
    │   │       CircularText.jsx
    │   │       DecayCard.jsx
    │   │       Magnet.jsx
    │   │       ScrollFloat.jsx
    │   │       ScrollProgress.jsx
    │   │       ScrollReveal.jsx
    │   │       SkeletonLoader.jsx
    │   │
    │   ├───home
    │   │       AboutMe.jsx
    │   │       Banner.jsx
    │   │       ContactMe.jsx
    │   │       Counter.jsx
    │   │       HomeServices.jsx
    │   │       InfoCards.jsx
    │   │       LetsWorkTogether.jsx
    │   │       Projects.jsx
    │   │       ProjectsShow.jsx
    │   │       ScrollingGithubBall.jsx
    │   │       Skills.jsx
    │   │
    │   ├───Projects
    │   │       AllProjects.jsx
    │   │       HtmlCssProjects.jsx
    │   │       JsProjects.jsx
    │   │       NextProject.jsx
    │   │       ProjectsBanner.jsx
    │   │       ReactProjects.jsx
    │   │
    │   ├───ui
    │   └───utils
    │           PreloaderWrapper.jsx
    │           SmoothScroll.jsx
    │
    ├───layout
    │       LayoutOne.jsx
    │
    └───pages
            About.jsx
            Contact.jsx
            Home.jsx
            Projects.jsx

---

Purpose

This portfolio was built to:

• Showcase my frontend development skills
• Highlight selected projects and real-world work
• Demonstrate my interest in animations and UI/UX design
• Establish a professional online presence
• Improve personal branding with SEO-friendly structure and content

---

Live Preview

• Website: https://munna-scriptz.vercel.app

This portfolio is indexed on Google and appears in top search results under "Munna Scriptz", with SEO best practices applied for performance, accessibility, and discoverability.

---

Installation

To run this project locally:

git clone https://github.com/Munna-Scriptz/Portfolio.git
cd Portfolio
npm install
npm run dev

---

Contact

Feel free to reach out for collaboration or feedback:

• Portfolio: https://munna-scriptz.vercel.app
• Instagram: https://www.instagram.com/rexon.notfr/
• Facebook: https://www.facebook.com/rexon.notfr
• Linkdin: https://www.linkedin.com/in/munna-scriptz
• Email: munnascriptz@gmail.com

---

Support

If you find this project helpful or inspiring, consider giving it a ⭐ on GitHub. Your support means a lot.