Welcome to your portfolio assignment guide! The following information provides direction for developing an effective Professional Web Developer Portfolio. You'll be creating this web application from scratch! This week, you'll build a portfolio page, which you can add to as you complete more projects throughout and/or after the course.

A portfolio of work can showcase your skills and talents to employers looking to fill a part-time or full-time position. An effective portfolio highlights your strongest work as well as the thought processes behind it. Students who have portfolios with deployed web applications (meaning they are live on the web) are typically very successful in their career search after the boot camp. This last point can’t be stressed enough: having several deployed projects is a minimum requirement to receive an initial interview at many companies.

With these points in mind, in this assignment you’ll set yourself up for future success by applying the core skills you've recently learned: bootstrap, flexbox, media queries, and CSS variables. You may also want to include user interactivity with JavaScript: click events, conditionals, loops, and/or anything else that might enhance the user experience of whoever visits your portfolio. You'll get to practice your new skills while creating something that you will use during your job search. It’s a win-win that you'll likely be grateful for in the future!

Note: If you don't have enough web applications to showcase at this point, use placeholder images and names. You can change them to real applications as you create them later.

Let’s take a look at what a user story written from the perspective of a hiring manager might look like. We follow the AS AN / I WANT / SO THAT format.

AS AN employer
I WANT to view a potential employee's deployed portfolio of work samples
SO THAT I can review samples of their work and assess whether they're a good candidate for an open position

Here are the critical requirements necessary to develop a portfolio that satisfies a typical hiring manager’s needs:

GIVEN I need to sample a potential employee's previous work
WHEN I load their portfolio
THEN I am presented with the developer's name, a recent photo, and links to sections about them, their work, their resume, and how to contact them
WHEN I click one of the links in the navigation
THEN the UI scrolls/navigates to the corresponding section
WHEN I click on the link to the section about their work
THEN the UI scrolls/navigates to a section with titled images of the developer's applications
WHEN I click on the images of the applications
THEN I am taken to that deployed application
WHEN I resize the page or view the site on various screens and devices
THEN I am presented with a responsive layout that adapts to my viewport

The following animation shows the web application's appearance and functionality:

This assignment is based on the following criteria:

• Satisfies all of the criteria listed above.

• Application deployed at live URL. (ex. Githu Pages, Netlify, Heroku, Surge, etc)

• Application loads with no errors in the console.

• Project README contains the URL of the deployed application. *Note: It's also recommended that in the projects section of your resume, the URL of the GitHub repository that contains your code, as well as the URL of the deployed application are included for each project listed.

• Application resembles the mock-up functionality provided in the assignment instructions.

• Repository has a unique name.

• Repository follows best practices for file structure and naming conventions.

• Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.

• Repository contains multiple descriptive commit messages.

• Repository contains quality readme file that describes the project, screenshot/s or gifs, link to deployed application.

Adapted from Trilogy Education Services, LLC