For this challenge, you will utilize what you have learned in Module 13: React
to develop the initial scaffolding of your portfolio sites.
Now that you've worked with React and have multiple projects to share, it's time to develop the initial scaffolding for your first portfolio site as well as create and/or update other materials so that you can showcase your skills to potential employers. Creating a portfolio using React will help set you apart from other developers whose portfolios do not use some of the latest technologies.
- Students must fullfil the requirements listed in the following sections:
Remember, "good" design is subjective. Your site should look "polished" and "professional". 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.
- Technologies that must be used:
- React
- Navigation with
React Router
, dynamic rendering, or another third part router
- Your portfolio must contain the following information:
- Your name
- Links to your:
- GitHub Profile
- LinkedIn Page
- Email Address
- Phone Number - (optional)
- PDF version of your resume
- Your resume must contain up-to-date projects and professional experience
- A list of projects (Challenges or 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
- At a minium, your portfolio must render these 6 components:
- App
- Header
- Home
- Project Gallery
- Project
- Contact
- App:
- Must be your top level component and render all necessary children components
- Header:
- Must be rendered across the entire site
- Must Contain a Navbar
- Project Gallery:
- Must render dynamically 6 instances of the Project component
- Be sure to store your project data in a JSON file and import it into your project
- Must render dynamically 6 instances of the Project component
- Project:
- Must be a reusable component that ingests JSON data as a props and renders a single instance for each project.
- Must utilize router props to properly render the right project based on user selection
- Must render the following info:
- Project title
- Link to the deployed version
- Link to the GitHub repository
- GIF or screenshot of the deployed application
- Contact:
- Must have contact information
- Have a contact form for handling events
- Home:
- This should be a welcome landing page that contains:
- Your Name
- A Headshot of you
- Your brand statement
- Some indication that this is your portfolio site
- This should be a welcome landing page that contains:
- Make sure to update your LinkedIn Profile with the new skills you've acquired since the last time it was updated.
- If you do not have a LinkedIn profile, please create one.
- Update GitHub profile with pinned repositories featuring those same projects.
This challenge is assessed on the following criteria:
- Satisfies all of the above acceptance criteria
-
Application deployed at live URL (if applicable).
-
Application loads with no errors.
-
Application GitHub URL submitted (if applicable).
-
GitHub repository that contains application code.
-
User experience is intuitive and easy to navigate.
-
User interface style is clean and polished.
-
Application uses a color scheme other than the default Bootstrap color palette.
-
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 with description, screenshot, and link to deployed application.