Modern Development with React: React Portfolio

My Portfolio developed using React.js, React Router and Bootstrap 5.

Table of contents

• Modern Development with React: React Portfolio
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Content Architecture
    • Built with
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

The challenge

Create the initial scaffolding for your first portfolio site, as well as create 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.

Screenshot

Links

• Solution URL: https://github.com/technoveltyco/myportfolio-react
• Live Site URL: https://technoveltyco.github.io/myportfolio-react/

My process

First, I started designing the content architecture of the different sections, content and how they will link each other on the website.

Content Architecture

On the mindmap above, I separate the content in purple, for those sections that I would deliver for this challenge, and in gray those that need work and are for future project development.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React.js

Continued development

• UX/UI Design Improvements
  • Theme switcher (Dark/Light mode)
• Accessibility checks
• Automated test

Useful resources

• UX/UI
  • 11 Best Free Wireframe Tools for UX Designers in 2023
• Accessibility
  • WCAG 2 Overview
  • Accessibility, Usability, and Inclusion
  • What is accessibility?
  • GOV.UK Design System
  • Dos and don'ts on designing for accessibility
  • Web Accessibility Standards: A Primer for UX Designers

Author

Daniel Rodriguez

• Website - Technovelty.co
• GitHub - Technoveltyco

Acknowledgments

The teacher and TAs that help us with resources and support to my questions during the development of this project.