Show DN: Redesigned my portfolio - critique welcome!(

over 6 years ago from Sam Mularczyk, Designer at Thick

  • Peng Wang, over 6 years ago (edited over 6 years ago )


    • Overall colors, type.

    Needs work:

    • The logo's stroke caps (square) stick out during animation. Maybe make them round, or start the lines at a different point and not the triangle corners?
    • The button animation (of border-width) seems a bit awkward, since the background thins into a line that sticks out. Maybe transition the background color into the red as well?

    Consider removing:

    • Text stretching, which is a bit awkward and blurs the text.
    • The hamburger menu just scrolls the page down. At least change the icon?
    1 point
    • Sam MularczykSam Mularczyk, over 6 years ago (edited over 6 years ago )

      Cheers Peng! Good feedback.

      • Round is a good idea. Will do! The way the SVG works means I can't start the lines at different points - at least not through CSS. So I guess rounding will have to do....
      • Weird, this doesn't happen on any browsers I've tested. Will add a background colour anyway and will hopefully solve your problem
      • Text stretching seems to be blurry in Chrome only, other browsers I've tested seem fine. Maybe a hack is needed
      • Hamburger icon should scroll you down to the menu (work selection). Does that not work?

      EDIT: First two should be fixed, and blurriness should at least be less apparent now. But, unfortunately, the way webkit renders 3D transforms is inherently blurry... Firefox & IE render them perfectly :/

      1 point
      • Jonathan YapJonathan Yap, over 6 years ago (edited over 6 years ago )

        What I find is the text blur is caused by the browser having to compute the css scale effect to a font size that's not a round number. Tricky bit to get right unfortunately :(

        One thing, I would say is the initial logo when you load up is blurry. I would have the logo scale down to get around that instead.

        Oh, and when I click on some of the images, it's not doing anything except fade the content. Got an error in the console "Error: Problem parsing points="0""

        Overlay I like how snappy the site is. :)

        1 point
        • Sam MularczykSam Mularczyk, over 6 years ago (edited over 6 years ago )

          That's probably it.... damn. I'll figure out the scale-down, just wanna make sure it works for old browsers without transitions! Blurry logo is finally fixed. Thanks for the advice!

          Broke the lightbox which is the reason for that fade. Can you check it and see if it's still doing that?

          Lol the parsing points thing is a bit embarrassing - Firefox wouldn't draw the logo correctly without an empty polyline element... shitty bug but only way I could find to fix it

          0 points
          • Jonathan YapJonathan Yap, over 6 years ago

            Cool stuff, lots of things seems to be fixed now. I think encountering all this bugs is probably one good way to learn. All in all, you've done a nice job :)

            0 points