samira0101/React-Portfolio

React-portfolio

React-Portfolio

An interactive react portfolio with vital links for employers to see. Links include Github, projects, cv and personal details.

User Story

AS AN employer looking for candidates with experience building single-page applications
I WANT to view a potential employee's deployed React portfolio of work samples
SO THAT I can assess whether they're a good candidate for an open position

Acceptance Criteria

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)

So far what has been achieved and further improvements?

All requirements above has been achieved in code however, some icon links are not displaying on the application (could be overwritten by styling).

Challenges

Try to understand how to add my previous cv template into react components. There were many errors due to the various elements in the components.

Future development

This is a foundation of my react portfolio and will work to improve up on it. I have used my previous portfolio and integrated it with react with the use of css. Would like to use different styling framing and add more interactive pages.

Screenshots

To access Github Repository

1. https://github.com/samira0101/React-Portfolio.git

Deployement link

1. https://samira0101.github.io/React-Portfolio/

Refrences

1. https://www.w3schools.com/tags/tag_meta.asp

2. https://unsplash.com/

3. https://www.w3schools.com/css/css3_images.asp

4. https://www.w3schools.com/howto/howto_css_contact_form.asp

5. https://www.w3schools.com/howto/howto_css_social_media_buttons.asp

6. https://coding-boot-camp.github.io/full-stack/github/professional-readme-guide

7. https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

8. https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

9. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

10. https://reactjs.org/