React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)

Introduction

In this tutorial, you'll learn how to build and deploy a fully responsive React portfolio website from scratch. This guide will walk you through each step, including setting up your development environment, creating components, styling with CSS, and deploying your site. No prior knowledge of React is required, making it perfect for beginners looking to enhance their web development skills.

Step 1: Set Up Your Development Environment

• Buy Hosting and Claim a Free Domain

  • Visit Hostinger and choose a hosting plan that suits your needs.
  • Follow the prompts to claim a free domain name during the purchase process.

• Install Node.js and Visual Studio Code

  • Download and install Node.js from the official website.
  • Install Visual Studio Code (VSCode) as your code editor.

Step 2: Create Your React App

• Open your terminal or command prompt.
• Run the following command to create a new React application:

  npx create-react-app my-portfolio
  

• Navigate into your project folder:

  cd my-portfolio
  

Step 3: Organize Your Project Files

• Create the following folder structure inside the src directory:
  • components/
  • assets/
  • styles/
• This organization helps keep your project manageable and structured.

Step 4: Build Your Components

• Create Each Component
  • Create separate files for each component in the components folder:
    • Header.js
    • FloatingNav.js
    • About.js
    • Experience.js
    • Services.js
    • Portfolio.js
    • Testimonials.js
    • Contact.js
    • Footer.js

Step 5: Style Your Website with CSS

• Use CSS Variables and General Styles

  • Define CSS variables in a separate styles.css file for colors, fonts, and layout.

• Component-Specific CSS

  • For each component, create corresponding CSS files (e.g., Header.css, About.css) and apply styles.

Step 6: Add Functionality with React Hooks

• Manage State with useState Hook
  • Import the useState hook in components where you need to manage state, for example, in the FloatingNav component to track navigation state.

Step 7: Use React Icons

• Install React Icons
  • Install the React Icons library:

    npm install react-icons
    

  • Import and use icons in your components as needed.

Step 8: Implement SwiperJS for Carousels

• Install SwiperJS
  • Install SwiperJS for creating responsive slides:

    npm install swiper
    

  • Set up the Swiper component in your Portfolio and Testimonials sections.

Step 9: Set Up the Contact Component

• Add Multiple Contact Options
  • Integrate contact methods such as WhatsApp, Facebook Messenger, and Email using the EmailJS service:

    npm install emailjs-com
    

Step 10: Build the Footer

• Create the Footer Component
  • Add relevant information and links to your footer.

Step 11: Deploy Your Website

• Deploy to Hosting
  • Build your React app for production:

    npm run build
    

  • Follow your hosting provider's instructions to upload the build folder contents to your server.

Conclusion

You've successfully built and deployed a React portfolio website! This project has equipped you with essential skills in React development, including component creation, state management, and styling. Consider customizing your website further or adding additional features to enhance your portfolio. Happy coding!