/PortfolioProject

A personal portfolio project webpage per the specs of freeCodeCamp found at https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage

Primary LanguageHTML

This is a personal portfolio webpage project for freeCodeCamp found at Build a Personal Portfolio Webpage: https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage


<~~~~~~~~~~* Specs per freeCodeCamp *~~~~~~~~~~~~>

1. Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/YqLyXB/.
2. Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
3. User Story: I can access all of the portfolio webpage's content just by scrolling.
4. User Story: I can click different buttons that will take me to the portfolio creator's different social media pages.
5. User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
6. User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.
7. Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the 8. next few CodePen challenges, and can come back and update your portfolio later.
8. There are many great portfolio templates out there already. However, you should consider building your portfolio page as much as you can from the ground up. Using Bootstrap can help make this process much easier for you.
9. Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.
10. Remember to use Read-Search-Ask if you get stuck.
11. When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.
12. You can get feedback on your project by sharing it with your friends on Facebook.

<~~~~~~~~~~* My personal additions & experimentation *~~~~~~~~~~~~>

1. Use of flexbox
2. Use of sticky positioning for nav bar
3. Use of @media query to make mobile-responsive page with two layouts
4. Use of pseudoclass selectors in css
5. Use of RGBa transparency
6. Use of border-radius styling
7. Use of more logos over text headings

<~~~~~~~~~~~~~~* Things to work on *~~~~~~~~~~~~~>
1. Should start with mobile layout first next time
2. Get in the habit of cleaning up redundant code and poor indentation