Giter VIP home page Giter VIP logo

react-portfolio's Introduction

Challenge 13: React Portfolio

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.

Instructions

  • Students must fullfil the requirements listed in the following sections:

Design

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.

Base Requirements

  • 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

Required Components

  • At a minium, your portfolio must render these 6 components:
    1. App
    2. Header
    3. Home
    4. Project Gallery
    5. Project
    6. Contact

Required Component Content

  • 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
  • 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

Updated Social Media Presence

LinkedIn

  • 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.

GitHub

  • Update GitHub profile with pinned repositories featuring those same projects.

Grading

This challenge is assessed on the following criteria:

Technical Acceptance Criteria: 40%

  • Satisfies all of the above acceptance criteria

Deployment: 32%

  • Application deployed at live URL (if applicable).

  • Application loads with no errors.

  • Application GitHub URL submitted (if applicable).

  • GitHub repository that contains application code.

Application Quality: 15%

  • 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 Quality: 13%

  • 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.


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.