https://github.com/mstephen19/my-portfolio
Portfolio website - not updated for a while.
https://github.com/mstephen19/my-portfolio
javascript react reactjs
Last synced: about 2 months ago
JSON representation
Portfolio website - not updated for a while.
- Host: GitHub
- URL: https://github.com/mstephen19/my-portfolio
- Owner: mstephen19
- Created: 2021-11-06T09:58:44.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-09T03:29:34.000Z (over 3 years ago)
- Last Synced: 2025-02-04T22:14:33.590Z (4 months ago)
- Topics: javascript, react, reactjs
- Language: JavaScript
- Homepage: https://mstephen19.github.io/my-portfolio
- Size: 31.4 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/my-portfolio)
A brand new and very much improved version of my previous portfolio design, with a new side navbar, clean animations, a better color scheme, and a carousel showing my most recent back-end, front-end, and full-stack projects. The inspiration for this design can be found [here](https://mstephen19.github.io/newestPortfolio), on my old portfolio site.
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/)
- [KeenSlider](https://keen-slider.io/)
- [EmailJS](https://www.emailjs.com/)
- [FontAwesome](https://fontawesome.com)
- [DevIcon React SVG](https://www.npmjs.com/package/devicon-react-svg)
- [Google Fonts](https://fonts.google.com/)
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
## Notable Features
### Language Toggle
```JavaScript
// App.js
export const LangContext = createContext();
// Inside App component
const [lang, setLang] = useState('en');
const toggleLang = () => {
setLang((prevLang) => (prevLang === 'en' ? 'ru' : 'en'));
lang === 'en'
? document.querySelector('html').setAttribute('lang', 'en')
: document.querySelector('html').setAttribute('lang', 'ru');
};
return (
)
```
### 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/my-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