<aside> 💡 Having a personal website is a fun way to have an online presence and share your projects with other people and future employers. In this project, you'll be designing a personal website in Figma and then making it with React! After creating the website, you'll be able to deploy it so that everybody will be able to find it.

</aside>

Prerequisites

Before attempting this project, be sure to read through the following lessons!

Lesson 3: Figma

Lesson 4: HTML/CSS

Lesson 5: React

Getting Started

Design

Head over to https://www.figma.com/ and create a new file to start a new design for your project.

Coding

To start a new React project, run npx create-react-app <project-name-here> as discussed in our React lesson.

In Github, create a new repository for your personal website and push to it as you're working.

Requirements

• [ ] Start by creating a low fidelity wireframe, high fidelity mockup, and a style guide on Figma. You should outline your design decisions such as primary/secondary fonts, font weights and sizes, color palette, and any style motifs. Since this is your personal website, make your design choices reflect your personal brand but also keep in mind your target audience. Make it ✨BEAUTIFUL ✨(۶ꈨຶꎁꈨຶ )۶ʸᵉᵃʰᵎ
• [ ] For now, we recommend keeping your website to one scrollable page. Have four sections on your website: About, Experiences, Projects, and Contact.
• [ ] Use React Components and props. Especially when you build repetitive elements (like your past experiences), it’ll be especially helpful to use Components and Props. We'll review your code during our next meeting!

Deployment

Once you’re done, deploy your website to Github Pages with the domain name [your-name].me or [your-github-username].github.io. Claim your free .me domain name here. Deploying a React app to Github Pages is a little tricky; make sure you’re Googling how to deploy a React app to Github Pages if you run into problems because it’s different from deploying non-React projects. There's also a difference between Github project pages (which look like [your-username].github.io/project-name) and Github user pages (which look like [your-username].github.io).

If you get stuck, check out the instructions below!