Personal Website

The purpose of this project is two fold:

The primary purpose is for you to have a living project where you can test/implement our daily learnings in real time on a real-world site.
Secondarily, as you advance as a developer, you can continue to build on this site. It will serve as your public portfolio/resume site and, hopefully, it will be one more artifact that you can use to showcase your proficiency to future employers.

Objective

Using the foundations that you learned during your prework, you are to create your own personal website. You are free to design the site according to your own tastes and preferences.

In the future, your site will host your portfolio and, potentially, your blog. For now, you can include:

A photo (or photos) of you.
An "About Me" section, where you can talk about your interests, hobbies, aspirations, family, and/or whatever else you'd like to share.

You may also add:

Your first blog post
A 'Favorites' section, where you can talk about your favorite food, music, TV, sports, etc.
A 'quotes' section, with quotes that inspire you.
Your social media handles

Quick Tips

For design inspiration, check out this list of developer portfolio sites.
You will notice that sometimes, less is more. For example, take a look at these minimal sites for examples of how you can create a clean, professional website with minimal styling. Or... you know... you can go all out like this guy.
Really, though. Don't get discouraged if when your site doesn't come out like the ones above. These developers been doing this for years. They are professionals. You will get there with time and persistence... but you have to start somewhere.
Lastly, from your prework, you know all of the HTML and CSS that it takes to replicate the structure of just about any of the portfolio sites above. You won't be able to get all of the interactivity without using JavaScript, but you can get some interactivity by experimenting with the CSS psuedo classes like :hover and :focus. If you really want to stretch yourself, you can explore CSS Animations but first and foremost, get a organized, well-designed, and typo-free website up.

Instructions

Fork this repo.
Clone the repo to your local environment (AWS Cloud9)
Add your HTML to the body of the index.html file.
Add your CSS to the styles.css file. (I've already linked styles.css to index.html. You're welcome. 💁🏿‍♂️)
Add any images that you would like to use in the images folder. Reference them using the relative path. For example, if you have a photo titled selfie.jpg in the images folder, you would link to it using <img src='images/selfie.jpg' />
Be sure to add, commit, and push your changes often to avoid losing your work. This also how I will be able to see it and provide you with feedback.

As always, use your peers for help. That's why we have a Slack channel 😉. Stack Overflow and MDN are also your friends. Use them!

Due Date