Skip to content

Latest commit

 

History

History
104 lines (75 loc) · 8.03 KB

instructions.md

File metadata and controls

104 lines (75 loc) · 8.03 KB
Raw

React Portfolio Project Brief

Instructions

The portfolio will be a great test of your React, HTML and CSS skills but we will also take the opportunity to get started with accessibility and build websites for everyone -- something every frontend developer should know. Don't save until the last day to do the testing -- it's very much the task of this project and will take some time.

We've created a portfolio design for you that you should follow. You are free to change the colors and images to fit you, and of course all the content. If you have any written articles or blog posts that you feel is relevant, there's a section for that in the portfolio. If you don't have that (yet), feel free to leave that part out.

We want you to practise following a design strictly, this is normally how the work flow is for a frontend developer, to work together with a designer that provides a design file, (in Figma) for you to translate into code.

If you work as a designer and really hate our design you could pitch to us why you would make a better job, and hand in your own design file for us to evaluate. But otherwise, this design comes from an experienced designer in collaboration with the expertise from a recruiter that knows what recruiters look at.

Requirements:

  • A picture of you.
  • A presentation of the tech skills that you have.
  • A presentation of your projects linking to GitHub and Netlify.
  • A presentation of some thoughts that you have around code.
  • A clear way to get in contact with you.

Test your website 👷🏻‍♂️

A big part of this project is to test your page so that it works for all the most used browsers and works well for people with disabilities.

1. Cross-browser testing

You should make sure that your page is looking and function like you would want in the following web browsers:

  • Google Chrome
  • Firefox
  • Microsoft Edge
  • (optional Safari for Mac users)

If you're on a Mac or Linux computer, you can download Edge here.

Follow the Workflow for cross-browser testing when testing your sites.

2. Accessibility testing

The next step is to make sure your webpage works well for people with disabilities. You should follow each step on the Accessibility testing checklist at the bottom of the page and make adjustments for those errors that you find. Feel free to discuss in Slack what you find and how to solve some issues.

When you publish your website, you can use the built-in screen reader on your phone for the screen reader test. Google that, to see how to turn it on for your phone.

Stretch goals

  • Optimize your website for sharing on social media using og:tags.
  • Give your portfolio a custom domain and connect to your deployed site. Read more.
  • Implement animation on scroll as present in the design for enhanced user experience.

Concepts Applied

Congratulations on completing Sprint 2 of the boot camp! For the final phase, we will now take your skills in React to the next level by building your very own portfolio website using the concepts learned in class:

  1. Components and Props:
    • Utilise the concept of components to break down your website into reusable and manageable pieces.
    • Pass data between components efficiently using props to ensure a structured and organised project.
  2. React Hooks:
    • Harness the power of React hooks, specifically the useState hook, to manage reactive data within your portfolio.
    • Use useState to handle stateful data, making your website interactive and dynamic.
  3. Web APIs and Data Integration:
    • Implement hooks like useEffect to call specific Internal JSON objects contanining info about your projects or use Github's free web API and fetch information for your projects.
      • A. Creating Internal JSON FILE
        • Consider establishing a project.json file that encompasses all pertinent details regarding your projects. This file can serve as a local database, holding various pieces of information like project names, descriptions, images, and links. Utilizing this file, you can employ fetch or import within your React component to access and display your project details on your website without requiring an external API call. Ensure that the JSON structure is consistent and easy to map through to extract and display the project details efficiently on your website.
        • We have left you a sample json file called projects.json for you to review.
      • B. Leveraging the GitHub API
        • Utilise the GitHub API to fetch your public projects from your GitHub account.
        • Use the following URL link [https://api.github.com/users/YourGitHubProfile/repos] as an example. Replace "YourGitHubProfile" with your actual GitHub profile name to fetch your repository data.
        • Open this link to see how the array of objects belonging to the Technigo Profile looks like from Github 😉
        • ⚠️ HINT ⚠️ - Leverage the GitHub API to fetch project descriptions dynamically, ensuring your portfolio stays up-to-date and reflects your latest work effortlessly. So remember to go back to each one of your projects and fill out the description section of your repo.
        • Parse the API response to extract relevant information about your projects, such as projects, project names, descriptions, and links.
        • Display the fetched data dynamically on your portfolio website to showcase your GitHub projects alongside your other work.
  4. Responsive Design and CSS:
    • Utilise CSS Grid or Flexbox to create responsive layouts that adapt to various devices, including mobile, tablet, and desktop.
    • Pay close attention to CSS styling and make your portfolio visually appealing.
    • Consider utilising popular CSS frameworks like Tailwind CSS, Bootstrap, or Material-UI to streamline your styling process and create a consistent and professional-looking design.
    • Leverage the power of pre-built components and utility classes offered by these frameworks to save development time and effort.
    • Ensure that your CSS is well-organised and follows best practices to maintain a maintainable and scalable codebase.
    • For easy animations, consider using animate.css. It can be easily implemented in React and offers a variety of animations to enhance the user experience.
  5. Accessibility and Usability:
    • Follow accessibility guidelines to ensure your website is usable by a diverse range of users, including those with disabilities.
  6. Commenting and Code Documentation:
    • Make effective use of comments throughout your codebase to explain complex logic and functionality.
    • Document the purpose of components, functions, and hooks to aid your own understanding and for potential code review purposes.
  7. Project Setup
    • Remember to use Vite to quickly set up your project
    • npm create vite@latest my-react-portfolio --template
  8. Deploy
    • After completing your React portfolio project and pushing your code to GitHub, take the next step by deploying your website to Netlify.

Important Notes:

  • Demonstrate your proficiency in React by writing clean, efficient, and well-structured code.
  • Ensure that your website is fully functional and that all components work as intended.
  • Test your portfolio thoroughly to guarantee cross-browser compatibility and responsiveness.

Submission:

Once you complete the project, please provide the GitHub repository link containing your code. Additionally, include a live deployment link to showcase your portfolio to the world!

Remember, the journey doesn't end here. Your portfolio will continue to evolve and grow as you progress in your coding journey. Embrace the challenge, and let your creativity shine! Happy coding!