Portfolio Site -- With Flipping Cards!

Code Feedback
1

Hiya,

I’m looking for thoughts on my my site

Any and all feedback is welcome.

Also, here are the references I used:

https://3dtransforms.desandro.com/card-flip
https://www.designrush.com/resources/designskilz/cool-css-buttons/

2

So cool. I still can’t do that card effect thing. A couple of tips.

  1. I think that a smooth-scroll effect would add a lot to it.
  2. When the nav menu is on top of text, it’s hard to see it b/c of the opacity.
  3. On my screen, the back of the card is cut off on the bottom.
  4. I would have more than three portfolio items. Great, though.
3

Hi Nolence,

the design looks nice… i can’t implement something like that yet :wink:

Have you accessed your site on different devices? The site only displays correct on large screens (I accessed via desktop, tablet, smartphone). You can fix it :wink:

Ciao.

2 Likes
4

I don’t know how I forgot about the responsiveness part! Haha, I guess I was just so excited to show the desktop version of it I forgot the mobile.

Anyways, great catch and thanks for feedback.

5

Thanks for the tips!

  1. Do you mean cutting out the parallax effect?
  2. I noticed this but I wasn’t sure if it was just me. I’ll make sure to fix this now!
  3. I’m going to add a lot more media queries for responsiveness now that juntch mentioned it, but do you mean the card is completely broken on your screen? Maybe it’s a prefix I forgot? What browser are you using?
  4. I’m slowly working on those items :wink:
1 Like
6
  1. Definitely not. Youtube smooth scroll effect jQuery. A smooth scroll is when in-page links don’t jump right to the page section, and scroll down automatically instead.
  2. Great!
  3. Firefox. Desktop. The “Me” is touching the bottom of the card.
  4. :grinning: Take your time, didn’t mean to rush you.
1 Like
8

THanks b3u,

Smooth scrolling is an awesome idea. The quick section jumping is definitely a little jarring without it.

As for the “Me” thing, I think I know how to fix it. (I manually set the buttons margin-top which might be bugging some stuff up).

1 Like
9

Hi Randell,

Thanks for the pointers!

  1. I’d love the show the image before the checkered background. The problem is that checkered background is actually a trick with CSS using linear gradients. It gets rendered before the images have a chance to be loaded in place. I could probably replace the CSS trick with a repeating image but I’m afraid of weird overlaps.

  2. I could definitely do that. I guess the main reason I didn’t was because I didn’t have any interesting buttons on the site yet. (I should probably shorten the text to just “View” though)

  3. You’re totally right. It’s weird that the second image is still visible even though site viewers would be in the contact section by then. I’ll make sure to find some more content to stuff in there to make it taller though.