Personal Portfolio Website in React with Animations

Introduction

• Reload page to see initial animations
• Header with navigation links
• About section
• Skills section with a slider to showcase multiple skills
• Projects section with tabs for different projects
• Contact section with a form connected to a mail server
• Subscribe to newsletter
• Links to social media
• Single-page website with navigation links for smooth scrolling

Setting Up Your Project

1. Creating React App:
   • Use create-react-app command
   • Name project personal portfolio
   • Navigate to project directory and start the app using npm start
2. Styling with React Bootstrap
   • Install React Bootstrap
   • Run npm install react-bootstrap and other necessary packages
3. Project File Structure
   • Create a components folder in src for organizing components

Building the Navigation Bar

1. Create Navigation Component
   • Navbar.js inside components folder
   • Import necessary Bootstrap components
   • Create functional component
2. Styling and Functionality
   • Use Bootstrap classes for Navbar
   • Add state to manage active link and scroll detection using useState and useEffect
   • Dynamically apply classes based on active link and scroll state
3. Header Content
   • Logo, navigation links (Home, Skills, Projects)
   • Social media icons
   • Connect button console logs for now

Implementing Animations and Smooth Scrolling

1. Detect Scroll for Background Color Change
   • Use useState for scroll detection
   • useEffect to add event listener for scroll
   • Change Navbar background on scroll

Banner Component

1. Creation
   • Create Banner.js in components
   • Add welcome text and main image
   • Implement typing animation with state and useEffect
2. Typing Animation Function
   • Use useState for loop number, current text, and typing/deleting state
   • Cycle through array of words
   • Use useEffect with setInterval for typing effect
3. Styling the Banner
   • Custom CSS for fonts and animations
   • Add animation for main image to bounce

Skills Section

1. Build Skills Component
   • Create Skills.js in components
   • Use react-multi-carousel for slider effect
   • Display multiple skills
2. Styling Skills Section
   • Custom CSS for layout and fonts

Projects Section

1. Create Projects Component
   • Create Projects.js in components
   • Use Bootstrap Tabs for different project categories
   • Map through project list and display project cards
2. Project Card Component
   • Create ProjectCard.js to display individual projects
   • Image, title, and description on hover
3. Styling Projects Section
   • Custom CSS for tabs and project layout

Contact Form

1. Create Contact Form Component
   • Create Contact.js in components
   • Form fields for name, email, phone, and message
   • Handle form submission with connected mail server
2. Mail Server Setup
   • Use NodeMailer for email functionality
   • Setup API endpoint to receive and process form data
3. Submit Function
   • Handle form operations using axios for API call
   • Update status on success/failure

Newsletter Subscription

1. Mailchimp Integration
   • Use react-mailchimp-subscribe package
   • Setup Mailchimp form and extract necessary values
2. Subscription Form Component
   • Create Newsletter.js
   • Handle form submission and status messages
3. Styling Newsletter Section
   • Custom CSS for form and container

Footer Component

1. Footer Content
   • Social media links
   • Company name and rights reserved text
2. Styling Footer
   • Custom CSS for layout and background image

Adding Animations

1. Setup Animation Packages
   • Install animate.css and react-on-screen
   • Import and configure animations based on component visibility
2. Example: Animate Banner and Projects
   • Use TrackVisibility to wrap components
   • Add classes to trigger animations on visibility

Conclusion

• Encourage discussions and feedback through comments
• Link to Discord for community interaction and portfolio reviews

Additional Points

• Ensure all necessary packages and modules are installed
• Maintain clean and organized project structure
• Test each component individually to ensure functionality