Portfolio

A polished personal portfolio website built with React, Vite, Tailwind CSS, and React Router.

This project demonstrates a modern developer landing page with:

• Responsive navigation and mobile-friendly menu
• Animated hero section with typing effect
• Project showcase cards with interactive GitHub/Demo buttons
• About, Contact, and Projects pages
• Contact form that opens an email draft using mailto:
• Smooth visual style with dark theme and gradient accents

---

Open in browser

• 🌐 Portfolio: Portfolio Link

---

Project structure

Generated: 7/8/2026, 10:16:30 AM Root Path: /workspaces/Portfolio

├── 📁 Portfolio_Website
│   ├── 📁 public
│   │   ├── 🖼️ favicon.svg
│   │   └── 🖼️ icons.svg
│   ├── 📁 src
│   │   ├── 📁 Components
│   │   │   ├── 📁 CSS
│   │   │   │   └── 🎨 NavBar.css
│   │   │   ├── 📁 Effect
│   │   │   │   └── 📄 TypingEffect.jsx
│   │   │   ├── 📁 Footer
│   │   │   │   └── 📄 Footer.jsx
│   │   │   ├── 📁 NavBar
│   │   │   │   ├── 📄 MenuItems.jsx
│   │   │   │   └── 📄 NavBar.jsx
│   │   │   └── 📁 Projects
│   │   │       └── 📄 ProjectsCard.jsx
│   │   ├── 📁 Routes
│   │   │   ├── 📄 About.jsx
│   │   │   ├── 📄 Contact.jsx
│   │   │   ├── 📄 Home.jsx
│   │   │   └── 📄 Projects.jsx
│   │   ├── 🎨 App.css
│   │   ├── 📄 App.jsx
│   │   ├── 🎨 index.css
│   │   └── 📄 main.jsx
│   ├── ⚙️ .gitignore
│   ├── ⚙️ .oxlintrc.json
│   ├── 📝 README.md
│   ├── 🌐 index.html
│   ├── ⚙️ package-lock.json
│   ├── ⚙️ package.json
│   └── 📄 vite.config.js
└── 📝 README.md

---

Route Pages

• Home – Main landing page combining hero, trips, and destinations
• About – Company information section
• Services – Service-related page content
• Contact – Contact page with a form

---

Key technologies

• React 19
• Vite 4
• Tailwind CSS 4
• React Router DOM
• Font Awesome icons
• Oxlint for linting

---

🛠️ Tech Stack

• Framework: React.js (Vite Template), React Router
• Styling: CSS, Tailwind
• Language: JavaScript (ES6+), HTML, CSS
• Hosting: Vercel

---

Notes

• The contact form uses mailto: to open the default email client.
• Project cards include placeholder demo/code links that can be updated with real URLs.

---

Contact

For questions or updates, connect via the links shown in the portfolio site, including Email, GitHub and LinkedIn.

---

👤 Author

MehmoodCoder

• 🔗 GitHub: github.com/MehmoodCoder

---

Happy coding without chai ! ☕