This project will build on the technical and non-technical skills that you have learned up to now:

• Building Web sites with HTML and CSS
• Using JavaScript to make Web sites interactive
• Fundamental UI/UX principles
• Developing your personal brand and online profiles

You'll use these skills to build an MVP of your personal web site. This Web site is a place to show the tech industry who you are and what you can do.

By the time you are job ready, your personal site will probably use additional technologies and skills we have not covered yet. For now, this project will be an MVP (Minimum Viable Product) that you can continue to enhance during the course.

This sample project is far from perfect. You do not need to copy any specific feature here. You can and should use your own creativity!

For more inspiration, here are some personal sites from alums!

• Carlos Martinez (he/him)
• Uduakabasi Abasiurua (she/her)
• Isaiah Collazo (he/him)
• Peter Fiorentino (he/him)
• Suzette Islam (she/her)
• Owen Jones (he/him)
• Maria Martinez (she/her)
• More sites from the Pursuit Community here

1. Fork this repo
2. Clone the forked repo to your machine
3. cd to the cloned folder and write your code!

1. Complete the project
2. Commit and push your changes to your fork
3. Submit a pull request back to the assignment repo
4. Paste a link to your pull request (not your fork!) on Canvas and submit
5. You only need to submit for the assignment that says Acceptance Criteria

Note: Remember to git add, git commit and git push regularly

For this project, we will give you a blank Trello board and you will be responsible for creating cards this time.

Start by copying this starter Trello board.

• Instructions here: How to copy a Trello board
• Give your board a title with your name and class number (7.2, 8.3, etc...)

For past projects, we gave you a board that already had cards on it. This time, you will create the cards.

• Create a card for each user story and put it in the To Do column.
• In each card, create a checklist with the acceptance criteria for the story.

You may also want to create cards for other project milestones and criteria. For example:

• Create design mockup
• Do user testing
• Create grid layout
• Create navigation UI
• Choose accessible fonts and colors
• Prepare demo for Feedback Fair
• Make UI work for mobile devices
• Deploy site to GitHub pages in class

Also notice that you can set DEADLINES for a card, which may help you manage your time.

When you are done, replace the link below with the link to your Trello board:

Replace this link with the link to your board

• I can see your full name.
• I can see your Pursuit headshot photo.
• I can read a short description of you.

• I can learn about at least two projects that you built.
• For each project, I can see a screenshot of the project, a text description of the project, and a link to the project's GitHub repo.

• I can click a link to send a message to your Pursuit email address.
• I can click a link to visit your GitHub page.
• I can click a link to visit your LinkedIn page.

• There is a navigation UI that has links to all of the pages or sections.
• When I click on a link in the navigation UI, I can view that page/section.

• I can change the content or appearance of the site when I click or interact with elements on the page.
• Errors do not appear in the browser console when I use an interactive element.

All scored from 0-2 (Not Demonstrated, Developing, Mastered)

• M2.1: Use HTML to build websites
• M2.3: Use CSS selectors to specify display based on an element's characteristics
• M2.5: Manipulate the DOM using JavaScript
• M2.6: Manipulate content and styling on the page by utilizing DOM Events and Event Listeners
• M2.7: Use Flexbox and Grid to layout a page

All scored from 0-1 (Not Demonstrated, Demonstrated)

• Your project uses grids to organize information clearly.
• Your project has a clear and consistent structure on each section or page.
• Your project is readable on mobile devices.
• Your project uses accessible color contrast
• Your project follows font-size best practices
• Your project is limited to 3-4 font variations.
• Your project has navigation that appears in a consistent place across pages and is easy to use

Use your JavaScript and DOM skills to make your site interactive. In other words, there should be at least one place where clicking, selecting, hovering, or submitting information changes the content of the page.

Here are a few ideas to consider trying:

• Clicking on a button expands to show more details or text.
• Clicking on a button sorts a list of things (ascending or descending).
• Clicking on a button or selecting an option filters a list of things (example: show all photos, show only travel photos)
• Instead of navigating to different pages, show and hide page content using JavaScript without loading a new page.
• Entering information in a form adds content to the page or changes the page content
• Your own creative idea!

You can choose to make your site one long page broken up into sections, or your site can have a few different pages.

Your site needs to implement all user stories and meet the UI/UX criteria. There are many ways to structure your site to do this. Personal sites often have some or all of these pages:

1. Landing/Home Page: Your homepage is the first page that appears when the site loads. You know what a homepage is. You can put whatever you want here!

2. About/Intro: The about page is where you get to talk about yourself. Do you have a pop pitch? This is the place to put it. Write a bio. Show a picture. Talk about your love of cats, books, or milkshakes. Make this part personal. You can have combine this section wit your landing page if it makes sense.

3. Projects: This section is where you put projects you've worked on during your time at Pursuit and personal projects you may have. Link to each project's GitHub repo, include a screenshot, and write a description. If the project is deployed, include a link to the live version.

4. Contact links: You can put it at the bottom of your page as a footer or in a contact me section. A good font with tons of social icons is FontAwesome

5. Other: (Optional) Anything else with things you may want to include, if you write, then a blog section, if you paint or photograph then a gallery section etc.

Trello: https://trello.com/b/xh04cSUH/fsw-personal-site-project-alvi-71