React PortFolio

Homework 20: React Portfolio

14th July 2020

Working Project Example

https://jkbrhome.herokuapp.com/

Aim

Update Portfolio using React

Contents

• Introduction
• Build Process
• Project Issues
• Installation
• Additional Information

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. You may we
• 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

Key Concepts for Employee Directory

• MERN
• MongoDB Atlas
• React Hooks
• React

Build Process

This project was a simple 48 hours to see if I could build a MERN stack Portfolio and experience what various areas I find difficult. The core aim was to place all my card details from the previous Portfolio projects into a database then export those details through Atlas and populate React with information both in terms of context and styles.

Project Issues

Originally I had huge issues with Mongoose and React. As I have not built a MERN stack project I needed to see how everything came together and function. I had issues with the initial Atlas, Mongoose and just how everything connect to React. I now have enough experience to feel comfortable doing the last project and scope on what can be achieved. Remaining problems are the following

1. This project is not closed to finished (maybe 50% done)
2. There is no animations
3. This project does not have the correct styles
4. There is a lack of components
5. There is no carousel
6. The Cards don't have the correct backgrounds
7. Not entirely mobile friendly
8. Even the wording in the header is bare minimum
9. No Contact Me page
10. No About Me page
11. Favicon is not working correctly

Installation

1. Download the repo from Github

https://github.com/Ryuku72/20ReactPortFolio.git

2. Inside the project folder

npm install
npm start 

Alternatively viusit the Heroku page @ https://jkbrhome.herokuapp.com/

Additional Information

Tests

• Eslint from React

License

Licenses: MIT

Resources

• NPMJS
• W3 Schools
• Medium
• Mozilla
• Stackoverflow
• Resources provided in Slack
• Youtube tutorials
• Dillinger
• React
• TailwindCSS

Technology

• TailwindCSS
• React
• React Hooks
• Javascript
• Visual Studio Code
• GitHub
• Google Chrome

Source

Code was originally supplied in the WAUS-CRAW-FSF-PT-02-2020-U-C-MW / Week 20 / Homework repository on GitLab https://waustralia.bootcampcontent.com/the-university-of-western-australia/WAUS-CRAW-FSF-PT-02-2020-U-C-MW/tree/master/Week%2020/Homework

Joshua K Bader // Ryuku72 // Bader.JoshuaK@Gmail.com