Add the Contact Component

This is the project’s final and most important component. It’s a good idea to have a contact section in the project so that people can get in touch with us if they have any questions.

Add the contacts

We provide three social media profiles, including LinkedIn, Twitter, and GitHub, to let people know more about us and how to contact us. The following snippet shows us how to add these:

const Contact = () => {
  return (
    <footer>
      <div className='social-links'>
        <a href='' target="_blank">Twitter</a>
        <a href='' target="_blank">LinkedIn</a>
        <a href='' target="_blank">Github</a>
      </div>
      <p>Built by John Doe </p>
    </footer>
  )
}

export default Contact

Import the Contact component

To display the Contact component in our portfolio, we need to import it into the App.js file.

Combining the code above produces the following:

Note: Open the output in an external tab for a better view.