/react-portfolio

Features my top projects and creations. Built on React, this single page application utilizes hooks for state management, and various react packages for an animated and reactive ui.

Primary LanguageJavaScript

Portfolio

GitHub

Link to site: https://tomarapetty.github.io/react-portfolio/

Table of Contents

Description

Overview of this project:
Tomara Petty's portfolio provides an overview of her body of work. It’s a place to highlight her creations and demonstrate her skills set. The single page application is built on React and consists of five sections: Home, About Me, Technologies, Projects with examples of work and Contact Me at the bottom.

Installation

Steps required to install project and get the development environment established:

  • Clone repository with git clone git@github.com:TomaraPetty/react-portfolio.git
  • Enter npm install or npm i into your terminal to install all required packages.
  • Enter npm run start to start your local server.
  • Go to localhost:3000/ to see the site running on your local machine.
git clone git@github.com:TomaraPetty/react-portfolio.git
npm install
npm run start

Usage

Instructions and examples for use:

  • A new user is able to visit the home page and see the animated UI. Users can skip to certain parts of the page by clicking the links in the navigation bar or from the links in the footer.
  1. Home:
    1. Home features particles animated background.
    2. An animated type section features who I am and what kind of development I do.
    3. Navigation bar at the top of the page to jump to different sections of the page.
  2. About Me:
    1. When the user clicks on About Me from the navigation bar they will jump down to the Technologies section.
    2. Features profile image and a small blurb about who I am as a professional.
  3. Technologies:
    1. When the user clicks on Technologies from the navigation bar they will jump down to the Technologies section.
    2. This section gives a summary of the technologies I use by showcasing cards with logos of the languages I know.
    3. The logos are generated using Divicons.
  4. Portfolio:
    1. When the user clicks on Portfolio from the navigation bar they will jump down to the Portfolio section.
    2. This section highlights some projects Tomara has worked on with gifs of the websites in use.
    3. When the user clicks on a project, a modal will pop up with more information about the project including:
      1. link to github
      2. link to site
      3. technologies used to build the project
  5. Contact:
    1. When the user clicks on Contact from the navigation bar they will jump down to the Contact section in the footer.
    2. The contact section features ways to contact.
    3. It also has a clickable menu to take the user back to any of the other sections.

License

  • Built under the MIT license.

Test

  • When you open the page the background should be animated.
  • Text should be animated typing at the center of the page.
  • If either of these are not working, stop your server and run npm i to install required packages.

Author

Tomara Petty

Questions?

GitHub profile image

Contact