Welcome to the source code of my personal portfolio website — a digital space crafted to reflect who I am as a developer, problem solver, and tech enthusiast. This website is built using modern web technologies like React, styled-components, and Animate.css to deliver a smooth, interactive, and responsive user experience.
Take a peek under the hood to see how the entire site is structured and styled! 🛠️
- Clean, modern & fully responsive design
- Smooth entrance animations
- Modular, maintainable React components
- Contact form powered by Formspree + Google reCAPTCHA
- SEO & social media optimized meta tags
- Google Search Console verification via meta tag
- Sitemap integration for better indexing
- Dedicated sections : About Me, Skills, Experience, and more
| 🌐 Technology | 📖 Documentation |
|---|---|
| React | React Docs |
| Styled Components | Styled Docs |
| Animate.css | Animate.css Docs |
| Formspree | Formspree Docs |
| Google reCAPTCHA | reCAPTCHA Docs |
| Vite | Vite Docs |
Follow these steps to set up and run the project locally :
git clone https://github.com/Manan-Joshi750/My_Portfolio.git
cd My_Portfolio
If you face issues with yarn, use npm instead :
npm install --legacy-peer-deps
This resolves peer dependency conflicts — especially with
react-animate-on-scrollwhich expects an older React version.
-
JSX Runtime Error (react/jsx-runtime not found)
Make sure you have the latest version of React and ReactDOM installed :npm install react@latest react-dom@latest -
react-toastify "render not found" error
Downgradereact-toastifyto a compatible version if needed :npm install react-toastify@9.1.3 -
Google reCAPTCHA v2 Error (Invalid domain for site key)
Make sure you've added your deployed domain in the reCAPTCHA Admin Console and used the correct site key in your code.
npm run start
Visit 👉 http://localhost:3000 to view your portfolio live on your local machine.
During setup, if you see a folder named ~ that cannot be synced with OneDrive :
- It's safe to delete this folder.
- It does not affect project functionality.
You can deploy this portfolio on platforms like :
After deployment :
- Update your live domain in
public/sitemap.xml - Submit sitemap to Google Search Console
- Add the correct
<meta name="google-site-verification">tag to the<head>of yourindex.htmlfor ownership verification - Ensure your Formspree form ID is correctly integrated in
Form.tsx - Ensure Google reCAPTCHA site key is valid for your domain
⚠️ Do not remove thegoogle-site-verificationmeta tag after verification.
Designed and developed with ❤️ by Manan Joshi