Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/twhite96/portfolio-v5
Portfolio using Gatsby with inspiration from Brittany Chiang 📝💼
https://github.com/twhite96/portfolio-v5
gatsby portfolio react
Last synced: 2 months ago
JSON representation
Portfolio using Gatsby with inspiration from Brittany Chiang 📝💼
- Host: GitHub
- URL: https://github.com/twhite96/portfolio-v5
- Owner: twhite96
- License: mit
- Created: 2019-06-02T03:15:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T23:53:39.000Z (almost 3 years ago)
- Last Synced: 2024-05-01T12:55:10.171Z (8 months ago)
- Topics: gatsby, portfolio, react
- Language: JavaScript
- Homepage: https://twhite-portfolio.netlify.app/
- Size: 28.9 MB
- Stars: 2
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
www.tiffanyrwhite.com - v5
The fifth iteration of tiffanyrwhite.com built with Gatsby and hosted with Netlify
Previous versions:
v1,
v2,
v3,
v4
How to use:
1. 🌀 Clone the repo at ``
2. 🏃 Run: `npm i` to install dependencies.
3. 🎊 Have fun with it.
## [](https://app.netlify.com/start/deploy?repository=https://github.com/twhite96/portfolio-v5)
## Motivation for this app
My old portfolio was a Jekyll site that was plain and not appealing. It had little personality and along with a timeline and dubious "skill level bars" I wanted something _different_, something with personality that I could call my own. The Jekyll site was a template hardly modified at all, and as I JavaScript dev, I wanted my site to be written in JavaScript, with most like React and a scaffold of a Gatsby theme.
## 🥞 Stack
I used Gatsby, plain old React, Sass, and styled-components 💅.
## 👊🏽 Wins
This portfolio is _heavily_ inspired by [Brittany Chiang](https://brittanychiang.com/)'s brilliant portfolio. I basically took a theme from the Gatsby starter repo and edited it. It took several days, over a couple of weeks, to get the look I wanted and the modifications I wanted.
## 😐 Difficulties
Adding the navigation was the most difficult part of the whole thing. Rendering the main navigation when the viewport was > 769px was a challenge for me.
At first I tried:
```js
if (isMobile) {
return ;
} else {
return ;
}
```
where `isMobile` is an effect hook that was used in the theme.
I also tried media queries:
```js
const StyledBurger = styled.div`
width: 2rem;
height: 2rem;
position: fixed;
top: 15px;
right: 20px;
z-index: 20;
display: none;
@media (max-width: 768px) {
display: flex;
justify-content: space-around;
flex-flow: column nowrap;
}
div {
width: 2rem;
height: 0.25rem;
background-color: ${({ open }) => open ? '#ccc' : '#333'};
border-radius: 10px;
transform-origin: 1px;
transition: all 0.3s linear;
&:nth-child(1) {
transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
}
&:nth-child(2) {
transform: ${({ open }) => open ? 'translateX(100%)' : 'translateX(0)'};
opacity: ${({ open }) => open ? 0 : 1};
}
&:nth-child(3) {
transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
}
}
```
This was just two solutions to the problem I tried.
I ended up searching for a way to use media queries with React navs and came across a little library called [react-socks, a React library to render components only on specific viewports](https://github.com/flexdinesh/react-socks) and was easily able to render the nav and hamburger menus only on certain viewports by simply importing the `BreakpointProvider` and `Breakpoint` components.
## 🚶♂️Next steps
This is done for now but there are still some kinks I really need to work out with the CSS.
## ⚡ Refactor ⚡
Not at the moment! This is the 5th version of this site. I'll sit on it for a little bit. 😜
### 📘 Further reading
[Real Artists Ship: Portfolio Finished | Tiffany R. White Blog](https://tiffanywhite.dev/2020/10/12/real-artists-ship/)