Giter Club home page Giter Club logo

react-portfolio's Introduction

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 [email protected]: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 [email protected]: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

react-portfolio's People

Contributors

tomarapetty avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.