Styled App Bar - Copy this React, Mui Component to your project

Here’s a full prompt that includes your request for specific pages and nested routing: **Project Prompt: Rahim Chaudhary's Personal Portfolio Website** **Objective:** Build a personal portfolio website using React and Tailwind CSS to showcase Rahim Chaudhary's skills, projects, and contact information. The site should have a clean, modern, and responsive design with navigation between different pages. Nested routing will be used to organize different sections of the portfolio. **Pages Needed:** **Home Page:** A landing page introducing Rahim as a React developer. Include a professional headshot, a brief bio, and a call to action (e.g., “View Projects” or “Download Resume”). **About Page:** A more detailed bio section that highlights Rahim's experience, skills (e.g., React, Tailwind CSS), and career journey. Optionally, display a timeline of career highlights or education. **Projects Page:** A gallery of Rahim's featured projects, including project names, descriptions, technologies used, and links to live demos or GitHub repos. Use nested routing for categories like "All Projects," "React Projects," "Full Stack Projects" to organize different project types. **Contact Page:** A form allowing visitors to reach out. Include fields for name, email, and message. Use Tailwind CSS to style the form and consider integrating a service like EmailJS or Formspree. **Routing:** Implement React Router with **nested routes** for better organization and navigation. 1. **Home** (`/`) – The landing page with a welcoming intro. 2. **About** (`/about`) – A detailed section about Rahim's skills and experience. 3. **Projects** (`/projects`) – A projects page where nested routes for different project categories (e.g., `/projects/react`, `/projects/full stack`) are implemented. 4. **Contact** (`/contact`) – A contact form for users to get in touch. **Nested Routing Structure:** Use React Router for routing between pages and nested routes within the **Projects** page: Main routes: `/home`, `/about`, `/projects`, `/contact`. Nested routes under `/projects`: `/projects/react` – Show only React based projects. `/projects/full stack` – Show full stack development projects. **Key Features:** **Responsive Design**: Ensure the portfolio is fully responsive for mobile, tablet, and desktop devices. **Smooth Scroll**: Implement smooth scrolling between page sections. **Dark Mode** (optional): Implement a light/dark mode toggle using Tailwind CSS. **Animations**: Use subtle animations like fade ins, hover effects on project cards, etc. **SEO Optimization**: Add proper meta tags, titles, and descriptions for better visibility.