Our last steps will focus on setting up some base page style for our landing and project pages.

Let’s navigate back over to our home page and add a handfull of things to personalize our websites:

• A picture of ourselves (if you’d like) or whatever [keep it clean 🙏]
• Your title [what do you wanna be]
• Your name
• A paragraph about who you are
• Social media icons & links
  • Challenge → Downloadable PDF Resume

Let’s start by installing react-icons so we can use it’s social media icons with Chakra.

npm i react-icons

With that done, we have all that we need to build out our landing page.

// /pages/index.js

/*

	Make sure you swap out my information with your own! 
	We want to be ready to ship by the end of the workshop 👀

	- Name
	- Title
	- Image (if you'd like) -> put this in the public folder
	- Bio 
	- Twitter link (if you have one)
	- Github link

*/

import {
  Heading,
  Flex,
  VStack,
  HStack,
  Icon,
  Text,
  Link,
  Avatar
} from '@chakra-ui/react';

import { FaTwitter, FaGithub, } from 'react-icons/fa';

export default function Home() {
  return (
    <VStack align="center" gap="32px" justify="center">
      <Avatar src="/anime-dom.png" size="2xl" />
      <VStack>
        <Heading as="h1">Domitrius Clark</Heading>
        <Heading size="md" as="h3">DX Engineer & Community creator</Heading>
      </VStack>
      <Text textAlign="center">👋 heyo! My names Domitrius. Ive been a UI/DX Engineer over the past 5 years. Finding solutions while improving someones ability to vist or build websites is my passion. I love video games, anime, and spending my time with those I love. <br /> Lets connect 👇</Text>
      <HStack spacing="20px" justifySelf="center">
        <Link href="<https://twitter.com/domitriusclark>" target="_blank">
          <Icon color="blue.200" as={FaTwitter} />
        </Link>
        <Link href="<https://github.com/domitriusclark>" target='_blank'>
          <Icon color="black" as={FaGithub} />
        </Link>
      </HStack>
    </VStack>
  )
}

Chakra’s layout components are by far some of my favorite things to use. We’re leaning on Stacks pretty heavily, which are “just” really helpful Flex containers that allow us to add helpful things like spacing. We also get to utilize the convenience of the Icon component to plug our react-icon's into.