bitcoin507 / react-app2

React-app

Table of Contents

• Intro
• Technologies
• How-to run-on-localhost
• Screenshots
• Video-Wlk-through

Intro

For this assignment I have refactored my Portfolio page into a React app.I have created seperate sections for my resume, homepage,contact,about,projects and footer.

I really like using React because I can see updates in realtime without the hasstle of restarting everytime.

Below are the requirments for the assignment.

GIVEN a single-page application portfolio for a web developer WHEN I load the portfolio THEN I am presented with a page containing a header, a section for content, and a footer WHEN I view the header THEN I am presented with the developer's name and navigation with titles corresponding to different sections of the portfolio WHEN I view the navigation titles THEN I am presented with the titles About Me, Portfolio, Contact, and Resume, and the title corresponding to the current section is highlighted WHEN I click on a navigation title THEN I am presented with the corresponding section below the navigation without the page reloading and that title is highlighted WHEN I load the portfolio the first time THEN the About Me title and section are selected by default WHEN I am presented with the About Me section THEN I see a recent photo or avatar of the developer and a short bio about them WHEN I am presented with the Portfolio section THEN I see titled images of six of the developer’s applications with links to both the deployed applications and the corresponding GitHub repositories WHEN I am presented with the Contact section THEN I see a contact form with fields for a name, an email address, and a message WHEN I move my cursor out of one of the form fields without entering text THEN I receive a notification that this field is required WHEN I enter text into the email address field THEN I receive a notification if I have entered an invalid email address WHEN I am presented with the Resume section THEN I see a link to a downloadable resume and a list of the developer’s proficiencies WHEN I view the footer THEN I am presented with text or icon links to the developer’s GitHub and LinkedIn profiles, and their profile on a third platform (Stack Overflow, Twitter)

Technologies

The technologies used to create this app are

*HTML *CSS *Javascript *React *Tailwind

How-to run-on-localhost

*Navigate to root folder *Run NPM install to istall dependencies *Run NPM start to run development app *Run NPM run build to launch production build

Screenshots

*App Homepage

*After clicking about me tab

*After clicking resume tab

*After clicking contact tab

*After clicking "Get in touch" button your email client will open up and populate my contact info

Video-Walkthrough

https://watch.screencastify.com/v/BjkUs5mPyzKIaNky1NWP

The Github repo can be found here: https://github.com/bitcoin507/React-app2