saima_final.zip

deploy React app to Kubernetes using Docker

External Libraries

Create Portfolio

<aside>

Create React Portfolio App

• A header with external links to social media accounts and internal links to other sections of the page.
• A landing section with an avatar picture and a short bio.
• A section to display your featured projects as cards in a grid fashion.
• A contact me section with a form to allow visitors to contact you.
• criteria </aside>

install Chakra UI and other references libraries

• [x] run npm install in terminal (installs all required missing dependencies)

Step 1

Open Header.js file. You will see a header component with black background, but no content.

Add external social media links to the header on the left side of the page

• The implementation should be placed inside the first nav element. The data is already provided in the socials array at the top of the file.
• Use the HStack component to stack the links horizontally. Each social should be a tag with a href attribute pointing to the corresponding social media page. The a tag should have as children a FontAwesomeIcon component, which is already imported for you.
• The FontAwesomeIcon component takes 2 props:
  • icon: The icon to be displayed. In this case, you should use the icon prop from the social object.
  • size : The size of the icon. You can use the 2x value.
• You can check below an example of how to render it:
  • <FontAwesomeIcon icon="fab" size="2x" />

<nav>
  <HStack spacing={4}>
    {socials.map((social, index) => (
      <a
        key={index}
        href={social.url}
        target="_blank"
        rel="noopener noreferrer"
      >
        <FontAwesomeIcon icon={social.icon} size="2x" />
      </a>
    ))}
  </HStack>
</nav>

Add internal links to the Projects section and Contact Me section

• Each link should be an a tag.
• Each a tag should have as children the name of the section: "Contact Me" and "Projects".
• When clicking on the link, the url should show the corresponding section.
• For example, when clicking on the "Contact Me" link, the url path should be /#contact-me. Also, the click should scroll to the corresponding section with a smooth animation.