# Unit 20 React Homework: React Portfolio Now that you've worked with React and have multiple projects to share, you'll be updating your portfolio and other materials to build toward being employer competitive. Creating a portfolio using React will help set you apart from other developers whose portfolios do not use some of the latest technologies. If you are opting out of career services, this is *still a required assignment*. Part of being a web developer means being a part of a community. Having a place to share your projects is *necessary* if you're applying for jobs, but is still *critical* on your journey as a developer. ## Requirements * Updated portfolio featuring 6 total projects * Use React * A `Header` component that appears on multiple pages * A single `Project` component that will be used multiple times on a single page * Navigation with React Router, dynamic rendering, or another third part router * A `Footer` component that appears on multiple pages * Update GitHub profile with pinned repositories featuring those same projects * Deploy this site to GitHub Pages using the [Create React App docs for deployment.](https://create-react-app.dev/docs/deployment/#github-pages) * **Important**: Be sure to push your codebase to GitHub and **NOT** your built and deployed code. Ensure this happens by following the above instructions and using the `gh-pages` branch to host the deployed application's code. ## Grading | Requirement | Weight | | -------------- | ------ | | Portfolio | 90% | | GitHub Profile | 10% | ## Instructions * [Updated Portfolio](#updated-portfolio) * [Design](#design) * [React](#react) * [Updated LinkedIn Profile](#updated-linkedin-profile) ### Updated Portfolio Your updated site should still have all of the content it previously had: * Your name * Links to your GitHub profile & LinkedIn page as well as your email address and phone number * A link to a PDF of your resume with updated projects * A list of projects. For each project, make sure you have the following: * Project title * Link to the deployed version * Link to the GitHub repository * GIF or screenshot of the deployed application #### Design As with the previous portfolio homework, "good" design is subjective. Your site should look "polished." Here are a few guidelines on what that means: * Mobile-first design * Choose a color palette for your site so it doesn't just look like the default bootstrap theme or an unstyled HTML site. * Make sure the font size is large enough to read, and that the colors don't cause eye strain. * If you want to go above and beyond, try using animations and react component libraries. Note that this will _not_ affect your grade, but it may impact how potentials employers gauge your knowledge. ### React Additionally, this new portfolio should be created using React. At a minimum, your portfolio should include the following: * A `Header` component that appears on multiple pages * A single `Project` component that will be used multiple times on a single page * Navigation with React Router, dynamic rendering, or another third part router * A `Footer` component that appears on multiple pages * **Important**: If you use React Router, you will **NOT** be able to use the `` component on GitHub Pages. Read the [GitHub note on client-side routing](https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing) and the [React Router documentation on HashRouter](https://reactrouter.com/web/api/HashRouter) for more information. ### Updated LinkedIn Profile Make sure to update your LinkedIn Profile with the new skills you've acquired since the last time it was updated. ## Submission on BCS You are required to submit the following: * the URL to the deployed application: https://secure-woodland-41012.herokuapp.com/ * the URL to the Github repository: https://github.com/gamezsal/sg-react-portfolio ## Usage ## Live Deployment Recorded Demo https://drive.google.com/file/d/15WJ_sbCF1FoIaDIujWkAiSrxX26uy_LF/view  - - - © 2021 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved. # sag-portfolio