Skip to content

MartinCespedes/React_Portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Portfolio

Contents

Description

User Story

Acceptance Criteria

Installation

Usage

Resources & Credit

Features

Application Screenshot Preview

License

Description

  • A React website portfolio is a collection of web pages that display a web developer's skills and experience, built using the React library.

  • It typically includes pages showcasing the developer's work, skills, and experience, as well as a blog or news section.

  • The portfolio is designed to showcase the developer's abilities in a visually appealing and interactive way, making it an essential tool for attracting new clients or job opportunities.

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 repository
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)

Installation

  • First, you'll need to have Node.js and npm installed on your computer. You can download the latest version of Node.js from the official website.

  • Clone the repository from GitHub to your local machine using the git clone command.
git clone https://github.com/MartinCespedes/React_Portfolio.git

  • Navigate to the project directory in your terminal or command prompt.
cd your-repository

  • Run the following command to install the necessary dependencies:
npm install
  • This will install all the required packages and dependencies required for your project to run.

  • Once the installation is complete, you can start the development server by running the following command:
npm start
  • This will start the development server on http://localhost:3000 by default, and you should be able to view your React website portfolio in your browser.

  • That's it! Your React website portfolio project is now installed and running on your local machine.

Usage

  • My React website portfolio is hosted on GitHub, where it serves as an online showcase of my skills and experience as a web developer.

  • Visitors can view my past projects, skills, and experience, as well as read my blog or news section to learn more about my thoughts and insights.

  • By hosting my portfolio on GitHub, I can easily share my work with others and collaborate with fellow developers on future projects.

Resources/Credit

Features

  • CSS
  • HTML
  • JavaScript
  • React

Application Screenshot Preview

Preview-1

Preview-2

Preview-3

Preview-4

Preview-5

Preview-6

License

Copyright (c) 2023 Martin Cespedes. All rights reserved.