https://github.com/mstephen19/react-portfolio
https://github.com/mstephen19/react-portfolio
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mstephen19/react-portfolio
- Owner: mstephen19
- Created: 2021-11-19T20:29:19.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-24T01:23:02.000Z (over 3 years ago)
- Last Synced: 2025-02-04T22:14:22.491Z (4 months ago)
- Language: JavaScript
- Size: 21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Matt Stephens Portfolio](https://mstephen19.github.io/react-portfolio)
A portfolio built entirely in React, utilizing state, context, and props. Users can read some general information about myself, see some of my recent projects, contact me, and download my CV while reading up on my technical skills.
This site is responsive, and has been tested on various screen sizes and mobile devices.
## Built With
- [React](https://reactjs.org/)
- [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [React Reveal](https://www.react-reveal.com/)
- [MaterialUI](https://mui.com/)
- [EmailJS](https://www.emailjs.com/)
- [FontAwesome](https://fontawesome.com)
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
## Notable Features
### Page switching using context
```JavaScript
// NavItems.js
const { handleNav } = useContext(PageContext);
{navItems.map(({ label, icon }) => {
return (
handleClick(label)}
key={uuidv4()}
/>
);
})}
```
### Responsive widths and font sizes using clamp()
```CSS
/* Example in contact.css */
.contactContainer input,
textarea {
width: clamp(200px, 75%, 800px);
font-size: clamp(1.25rem, 5vw, 3rem);
background: var(--main);
border: 1px solid black;
border-radius: 5px;
}
```
## Live deployed link
- [Check out the site here](https://mstephen19.github.io/react-portfolio)
## Created by
**Matt Stephens**
- [Link to Portfolio Site](https://mstephen19.github.io/newestPortfolio)
- [Link to Github](https://github.com/mstephen19)
- [Link to LinkedIn](https://www.linkedin.com/mstephen19)
### Acknowledgments
- Shoutout to [Jesse Lewis](https://www.linkedin.com/in/jesseaustinlewis/) for teaching me about component lifecycles and context within React