Skip to content

My single-page portfolio to showcase my coding projects using React and Material UI

Notifications You must be signed in to change notification settings

lhaykus/My-React-Portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

My Portfolio

Welcome to my updated portfolio! Using React and Material UI this portfolio will be used to show off my projects, skills and let people know more about me!

Deployed App

https://lhaykus.github.io/My-React-Portfolio/#/

(Artwork for header image created by and credited to Hybridgothic)

Description

I used React and Material UI to build a responsive, unique, interactive portfolio to showcase my coding projects!

Features

  • React Parallax was used to create a fun background that 'moves' when scrolling
  • React Typed was used to create a fun animation for text that makes words look like they are being typed and erased on the page.
  • React Card Flip was used for my project page. The front side is a picture of the app with some deployment links and the title. When you click the 'Click for more info' button, the card is turned around to the other side that has a decription of the app and a GIF of the app being used.
  • Scroll Button - when a user scrolls down from the top of the page a little blue circle appears that takes users back to top of page when clicked.
  • Responsive Navbar - The navbar changes into a menu icon when screen sizes decrease.

Built With

  • React
    • React Parallax
    • React Typed
    • React Card Flip
  • Material UI

App View

Quick Walkthrough

walkthrough

Project Section with React Card flip animation and working links to Github and Deployed App

cardgif

Contact Form

contactform

React Typed animation throught the app

typedanimation

Scroll Button to scroll back to top of page

scroll

Responsive Navbar

navbar

Future Developments

  • To make the skills section and overall layout more mobile responsive
  • To get Contact Form to function
  • To create cool 3D effects
  • Get project cards to flip independently and not all together

Credits

  • Artwork for header image created by and credited to Hybridgothic
  • Creating Contact Form video
  • Parallax video
  • React Card Flip article
  • Creating scroll button that scrolls to top of page when at middle/end video
  • Responsive Navbar with MaterialUI and React video

About

My single-page portfolio to showcase my coding projects using React and Material UI

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published