React Portfolio Practice Project

🌐 Live Demo: Click here to visit site

Deployed on Vercel

📋 Overview

This is a personal portfolio project created using React and Chakra UI, inspired by the Meta Frontend Lab. It showcases modern web development skills including responsive design, animations, and interactive UI elements. The portfolio includes the following sections:

• 🟢 Header: Header with social links and smooth navigation
• 🖼️ Landing Section: Avatar, greeting, and animated intro
• 💻 Projects Section: Animated project cards with hover effects
• 📝 Contact Me Section: Animated, validated form using Formik & Yup
• 📜 Footer: Social icons with hover effects and heartbeat animation

All UI elements are enhanced with Framer Motion animations for a smooth and interactive user experience.

---

💻 Technologies Used

• React — Frontend library for building user interfaces.
• Chakra UI — Component library for UI design.
• Framer Motion — Animation library for React.
• JavaScript (ES6+)
• React Hooks (useState, useEffect, useRef)
• Formik & Yup — Form handling and validation.
• Create React App — Project scaffolding.
• Vercel — Planned hosting and deployment platform.

---

🚀 Features

✨ Key Enhancements

• Animations with Framer Motion:
  • Staggered form field animations
  • Scroll-triggered section animations
  • Hover effects on cards, buttons, and navigation items
  • Floating background elements
  • Smooth transitions throughout

📱 Fully Responsive Design

• Mobile-first approach
• Collapsible navigation with slide-out drawer on mobile
• Responsive typography, spacing, and touch-friendly buttons

🚀 Performance & UX Improvements

• Auto-hiding header on scroll down
• Smooth scroll navigation between sections
• Loading states with animations
• Visual feedback on interactive elements

🔧 Fixed Issues

• Proper mocks in App.test.js for Framer Motion and FontAwesome
• Responsive breakpoints
• Accessibility improvements with ARIA labels

🎯 Animation Features

ContactMeSection.js

• Staggered field appearance
• Input focus glow animations
• Button hover/tap animations
• Slide-up container animation

Card.js

• Lift-up card hover effect
• Image zoom on hover
• Arrow slides right
• Subtle glow

Header.js

• Auto-hide header on scroll
• Mobile hamburger menu
• Social icons rotate
• Navigation item underlines

LandingSection.js

• Avatar bounce with spring animation
• Staggered text appearance
• Floating background elements
• Gradient text
• Pulsing avatar animation

ProjectsSection.js

• Staggered card animations
• Background floating elements
• CTA button hover effects
• Responsive grid layout

Footer.js

• Heartbeat animation
• Social icon hover effects
• Link underline animations
• Responsive layout

🧪 Testing

• App.test.js includes mocks for Framer Motion, FontAwesome, and image imports
• All major UI components covered

---

🚀 How to Run Locally

1. Clone the repository:

git clone https://github.com/huzaifa-frontend/react-portfolio-practice.git

2. Navigate to the project folder:

cd react-portfolio-practice

3. Install dependencies:

npm install

4. Start development server:

npm start

5. Open in browser:

Visit http://localhost:3000

---

🛠️ How to Build

To create a production build, run:

npm run build

The production-ready files will be in the build/ folder.

---

✨ Credits

• Project inspired and guided by Meta Frontend Lab
• Thanks to the React, Chakra UI, and Framer Motion communities for their excellent tools and documentation.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

✍️ Author

Muhammad Huzaifa Karim
GitHub Profile

---

📬 Contact

Feel free to reach out if you have any questions or feedback!
Email: karimhuzaifa590@gmail.com

---

© 2025 Muhammad Huzaifa Karim