Today I:
For the project cards I am going with a grid layout using Chakra’s SimpleGrid component, and adding a min width to each of my columns. This pretty takes care of responsiveness for me which is nice. I am passing the following props to the projectCard component: {title, description, imageURL, technologies} . I want to add project links as well, but I have to think of a good way to do that b/c the logo has to match the corresponding link. See pic 1 below to see what it looks like. I am happy with the layout, but I’m not set on the color scheme.
I want the logos to persist throughout the entire website so the user is always one click away from home/contacting me. I think they look good, and I added a shadow to the contact logo so it sticks out a little bit. What was challenging was originally I was doing this was a traditional navbar. I did not like this on my homepage since it blocked clicking on the griditems when hovering over the navbar region (but not the logo/contact button). To solve this I ditched a traditional navbar on the homepage and simply fixed the logos in the top right and left. I used zIndex to control the order in which the elements where rendered, but I had to keep in mind that it is always relative to a parent. Also zIndex means nothing unless you assign the element a position value. It can’t be statically positioned.
Finally I continued playing with how I want the work page to go. I added a darkened “W O R K” at the top of the page. I can’t decide if I want this background to be static, and the cards scroll over it, or if I want it so to scroll with the rest of the page. I am also deciding between a sticky navbar/traditional. I originally wanted a sticky one so that you could always find your way home, but I think that it actually looks better with a scroll. Also it’s not as if the scroll is super long.
Adding tony and contact logo without blocking grid item clicking outside of those logos
