A polished, responsive portfolio website built to present projects, services, experience, testimonials, and contact details in one clean place.

Live Demo: mrizwandev.vercel.app
Screenshots: View the full gallery
Code: This repository

This is a modern single-page portfolio experience with routed sections for:

• Home
• About
• Projects
• Services
• Blog
• Testimonials
• Contact

It is designed to feel fast, responsive, and professional across desktop and mobile, with animated sections, reusable UI components, and an email contact form.

The screenshots below are stored in public/readmepicture and show the main sections of the website.

• React
• TypeScript
• Vite
• Tailwind CSS
• shadcn/ui
• Framer Motion
• React Router DOM
• TanStack Query
• Sonner and Radix UI components

• Strong hero section with clear call to action
• Responsive navbar with mobile menu
• Animated cards, sections, and transitions
• Dedicated pages for portfolio content
• Skill, experience, education, and project sections
• Contact form with email submission
• WhatsApp floating action button
• Toast notifications for feedback
• Vercel-ready routing configuration

• src/App.tsx - App routing and providers
• src/pages/ - Route pages such as Home, About, Projects, and Contact
• src/components/ - Shared layout, navigation, footer, and UI pieces
• src/components/ui/ - Reusable shadcn-style UI components
• src/assets/ - Static assets used by the site
• public/readmepicture/ - README screenshots for each major section

• Node.js 18+ recommended
• npm

npm install

npm run dev

npm run build

npm run preview

npm run lint

npm run test

This app is Vercel-friendly and includes a vercel.json rewrite so client-side routing works on refresh.

For deployment:

1. Build the app with npm run build
2. Deploy the generated production output with your hosting provider
3. Make sure the host supports SPA rewrites for React Router

• The contact form is wired to FormSubmit.
• Social links and WhatsApp contact are already included in the UI.
• The project is designed to be easy to extend with more portfolio content, blog posts, or service pages.