Build And Deploy a Personal Developer Portfolio with ReactJS and Animations | Framer Motion Tutorial

Key Concepts

ReactJS, CSS, Personal Developer Portfolio, Hero Section, Project Section, Contact Section, Brilliant (interactive learning platform), Vite, Components, Navbar, Framer Motion, Animations, Responsiveness, Media Queries, React Syntax Highlighter, EmailJS, Vercel, Deployment, Environment Variables.

Building a Modern Personal Developer Portfolio with ReactJS and CSS

Introduction

The video demonstrates how to build a modern personal developer portfolio website using ReactJS and CSS, incorporating animations and a smooth design. The portfolio includes a hero section, a project section, and a contact section. The video also promotes Brilliant, an interactive learning platform.

Setting Up the ReactJS App with Vite

1. Creating the App: The process begins by using the command npx create vite to create a new ReactJS application using Vite.
2. Project Configuration: The framework is set to React, and JavaScript is chosen as the language.
3. Installing Dependencies: The command npm install is used to install the necessary dependencies.
4. Running the Development Environment: npm run dev starts the development server, allowing the application to be viewed in the browser at localhost:5173.
5. Assets: The video provides assets (project images) to be placed in the public folder.

Structuring the Application Components

1. Creating Components Folder: A components folder is created to house the different sections of the portfolio.
2. Defining Sections: Four main sections are defined:
   • Hero Section: The initial section users see upon visiting the website.
   • Projects Section: Showcases the developer's projects.
   • Contact Section: Allows visitors to send emails.
   • Navbar: A navigation bar at the top of the app.
3. Component Files: Separate .jsx files are created for each section (e.g., Hero.jsx, Projects.jsx, Contact.jsx, Navbar.jsx).
4. Exporting Components: Each component is exported using export const [ComponentName].

Assembling the App in App.jsx

1. Importing Components: The components are imported into App.jsx using import [ComponentName] from './components/[ComponentName]'.
2. Rendering Components: The components are rendered in the desired order: Navbar, Hero, Projects, Contact.
3. Footer: A footer is added with a copyright notice using the © HTML entity.

Styling with CSS

1. Global Styles (index.css): The video provides a CSS file (index.css) with general styling for the entire website, including fonts, color schemes, and a custom scroll bar.
2. Resetting Base Styles (app.css): The app.css file begins by resetting the base styles for all elements using the universal selector (*).
3. Defining Root Colors (app.css): Custom CSS variables are defined for primary, secondary, text, navbar background, and card colors.
4. Body Styling (app.css): Generic body styles are applied, including line-height, color, and background.
5. App Container (app.css): The entire app is wrapped in a div with the class name app, and styles are applied to this container, including opacity, transform, transition, width, and min-height.

Implementing Animations with Framer Motion

1. Installing Framer Motion: The framer-motion library is installed using npm install framer-motion.
2. Importing Motion: The motion object is imported from framer-motion using import motion from 'framer-motion'.
3. Animating UI Elements: UI elements are wrapped with motion.[element] (e.g., motion.nav, motion.div) to enable animations.
4. Navbar Animation: The navbar is animated to slide down from above its original position using initial, animate, and transition properties.
   • initial: Sets the starting position (e.g., y: -100).
   • animate: Defines the final position (e.g., y: 0).
   • transition: Configures the animation's duration and easing (e.g., duration: 0.6, ease: 'easeOut').
5. Logo Hover Effect: A hover effect is added to the logo using the whileHover prop to scale the text.
6. Link Animations: Animations are added to the navigation links to fade in and move up from their initial positions.
7. Staggered Animations: The staggerChildren property is used to create a staggered animation effect for the navigation links.
8. Creating Variants: Animation configurations are stored in JavaScript objects (variants) for reusability.

Handling App Loading and API Integration

1. Using useState and useEffect: The useState hook is used to manage the loading state of the app (isLoaded). The useEffect hook is used to set isLoaded to true after the component renders.
2. Conditional Class Names: Conditional class names are used to apply styles based on the loading state.
3. Preparing for API Integration: The loading state is used to ensure that the page only renders when the API for sending emails is ready.

Building the Hero Section

1. Section Structure: The hero section is wrapped in a motion.section with an ID of home.
2. Hero Container: A div with the class name hero-container is used to structure the content.
3. Hero Content: A div with the class name hero-content contains the main text and information.
4. Hero Badge: A badge is created with the text "Hello, I am" and styled with a background, border radius, and backdrop filter.
5. Glitchy Title: An h1 tag is used to display the developer's name with a "glitch" effect using CSS.
6. Subtitle and Description: An h2 tag is used for the subtitle, and a p tag is used for the description.
7. Call to Action Buttons: Two a tags are used as call to action buttons, styled with primary and secondary styles.
8. Social Links: A div with the class name social-links contains links to social media profiles using Font Awesome icons.
9. Code Section: A div with the class name hero-image-container is used to display a code snippet using the react-syntax-highlighter library.
10. Floating Card: A div with the class name floating-card is used to display a "currently working on" message with a bouncing animation.

Implementing Responsiveness with Media Queries

1. Media Queries: Media queries are used to adjust the layout and styling for different screen sizes.
2. Medium-Sized Screens: For medium-sized screens (max-width: 1024px), the hero container is changed to a column layout, the text is centered, and the call to action buttons and social links are justified to the center.
3. Small Screens: For small screens (max-width: 768px), the code section and floating card are hidden to improve the layout.

Building the Projects Section

1. Section Structure: The projects section is wrapped in a motion.section with an ID of projects.
2. Project Grid: A div with the class name project-grid is used to display the projects in a grid layout.
3. Project Card: Each project is displayed in a div with the class name project-card.
4. Project Image: The project image is displayed using a div with the class name project-image and a background image.
5. Project Title, Description, and Tags: The project title, description, and tags are displayed using h3, p, and span tags.
6. Hover Effect: A hover effect is added to each project card to move it up slightly and change the box shadow and border color.
7. Glass Effect: A glass effect is added to the project image using CSS before and after pseudo-elements.

Building the Contact Section

1. Section Structure: The contact section is wrapped in a motion.section with an ID of contact.
2. Contact Form: A form with the class name contact-form is used to collect user input.
3. Input Fields: Input fields are created for name, email, and message using motion.input and motion.textarea.
4. Submit Button: A button with the class name submit-button is used to submit the form.
5. Styling: The contact form is styled with CSS to create a clean and modern look.
6. Glass Effect: A glass effect is added to the submit button using CSS before pseudo-elements.

Implementing Form Functionality with EmailJS

1. Setting Up EmailJS: An account is created on EmailJS, and an email service is connected.
2. Creating an Email Template: An email template is created on EmailJS with placeholders for name, email, and message.
3. Installing EmailJS Browser SDK: The EmailJS browser SDK is installed using npm install @emailjs/browser.
4. Initializing EmailJS: The EmailJS SDK is initialized in App.jsx using the public API key.
5. Handling Input Changes: The handleInputChange function is used to update the form data state as the user types.
6. Submitting the Form: The handleSubmit function is used to send the email using the EmailJS SDK.
7. Form Status: The formStatus state is used to track the status of the form submission (submitting, success, error).
8. Displaying Messages: Success and error messages are displayed based on the form status.

Deploying the Portfolio with Vercel

1. Creating a GitHub Repository: A new GitHub repository is created for the project.
2. Pushing the Code to GitHub: The code is pushed to the GitHub repository.
3. Importing the Repository to Vercel: The GitHub repository is imported into Vercel.
4. Configuring Environment Variables: The EmailJS environment variables are configured in Vercel.
5. Deploying the Project: The project is deployed to Vercel.

Conclusion

The video provides a detailed guide on building a modern personal developer portfolio website using ReactJS, CSS, Framer Motion, and EmailJS. The portfolio includes a hero section, a project section, and a contact section, and it is deployed to Vercel. The video emphasizes the importance of animations, responsiveness, and a clean design.