Code Monkey home page Code Monkey logo

portfolio's Introduction

Michelle Kaplan's Portfolio Website

A fully responsive website that showcases my projects and experience.

Link to Live Site

Introduction

This website was built with mobile responsiveness in mind to create a fully responsive website, regardless of what device is being used. I also focused on styling and animations to create a more interactive, aesthetically pleasing site. I also built in a contact form at the bottom, using EmailJS, as a way to get in contact with me! If you have any questions, suggestions, or comments, feel free to reach out. Thanks for visiting!

Screenshot

mk-portfolio

Directions for Use

  • When you first land on the site, you'll notice some fun animations and links that appear. Feel free to visit my Github, LinkedIn, or even view my resume!
  • If you continue down the page, you'll notice different sections, including About, Projects, Experience, and Contact.
  • As you make your way to my projects, feel free to hover over them for a nice surprise! You can also click on the Github and Visit/Demo Video links.
  • The Experience section will tell you a little bit more about my work and education with logos for each that serve as links to the corresponding websites. You'll also see a list of my skills! More skills to come!
  • At the bottom you'll see a contact form! This uses EmailJS, so just fill out the form and your message will land right in my inbox! (Did you notice the fun colors in the inputs for input validation?)
  • The Nav bar uses react-scroll so you'll land on whichever section you select! Also, you'll notice as you scroll through the page, the active class is applied to the link in the nav bar that corresponds to the section you're on! Pretty neat huh!? That's thanks to spy from react-scroll.
  • Did you try changing the width of the viewport and on different devices? Pretty responsive! And that hamburger menu!
  • Hope you enjoy!

Technology Used

  • React
  • React Hooks
  • SASS
  • react-scroll
  • react-tsparticles
  • emailjs/browser
  • NPM

How to run on a local machine with NPM

  1. Shut down any live servers you currently have running (control + c)
  2. Clone down this repo to your desired location
  3. cd into the new repo directory
  4. Install the library dependencies by running: npm install
  5. Then, run npm start in your terminal
  6. Go to http://localhost:8080/ and you should see the page there
  7. Then, you can enter control + c in your terminal to stop the server at any time

This project was created by:

portfolio's People

Contributors

michellekaplan7 avatar

Watchers

 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.