14 votes

Show Tildes: critique my first portfolio site

12 comments

  1. Greg
    Link
    I'll echo the positives that others have mentioned - it's clean, well designed, professional, and incredibly fast. Like, fast enough that I opened the console to see if there was any funky...

    I'll echo the positives that others have mentioned - it's clean, well designed, professional, and incredibly fast. Like, fast enough that I opened the console to see if there was any funky pre-caching going on. Nice job on that! The buy you a coffee line made me smile, too.

    Two nitpicks, the latter of which is almost laughably minor:

    • On mobile, the menu doesn't close after clicking on an item, and there's no visible change because it covers the screen. You could add a "selected" state, but I'd strongly suggest just having it close automatically when you click on an item.

    • If it were me, I'd use the accents on "Résumé" because I think it shows good attention to detail and is (arguably!) the best kind of correct - but the internet at large seems split on the matter, and honestly it comes down to personal choice.

    Even as it stands, though, I'm impressed.

    8 votes
  2. [2]
    unknown user
    Link
    Small detail I noticed: On https://www.dougmellon.com/ the page name shows up as "dougmellon.com/", but on https://www.dougmellon.com/journal/ it shows up as "Doug Mellon :) - Blog".

    Small detail I noticed: On https://www.dougmellon.com/ the page name shows up as "dougmellon.com/", but on https://www.dougmellon.com/journal/ it shows up as "Doug Mellon :) - Blog".

    6 votes
    1. [2]
      Comment deleted by author
      Link Parent
      1. noah
        Link Parent
        extra bullet point on the readings page for me as well :)

        extra bullet point on the readings page for me as well :)

        2 votes
  3. [3]
    ohyran
    Link
    My only criticism is the logo on the upper left (which is a signature I now realize) which is a bit of a smudge more than anything AND, granted I'm old etc etc, but I can't really see what it is....

    My only criticism is the logo on the upper left (which is a signature I now realize) which is a bit of a smudge more than anything AND, granted I'm old etc etc, but I can't really see what it is.

    (If you need help with logos or similar: holler. I would be glad to help a tilderinoo out)

    Its a very nice and professional looking portfoliopage

    5 votes
    1. [3]
      Comment deleted by author
      Link Parent
      1. rish
        Link Parent
        make it black like rest of the header.

        make it black like rest of the header.

        4 votes
      2. ohyran
        Link Parent
        Well holler if you wanna chat about a redesign of it (jens at ohyran.se)

        Well holler if you wanna chat about a redesign of it (jens at ohyran.se)

        2 votes
  4. [2]
    Comment deleted by author
    Link
    1. cfabbro
      (edited )
      Link Parent
      @spit-evil-olive-tips, @vivian, @Wulfsta (since they were the users who commented in your resume topic) I really like the site BTW. It's very clean and professional looking. Also love the " chat...

      @spit-evil-olive-tips, @vivian, @Wulfsta (since they were the users who commented in your resume topic)

      I really like the site BTW. It's very clean and professional looking. Also love the "buy you a coffee chat from a distance" line. :P

      The only critique I can come up with is that the grey bar at the top initially confused me a bit, since it gave the illusion of the main body being overtop of something else, and so I thought hovered over it might do something (which it didn't). Maybe making it a touch wider (or even narrower) might prevent that?

      And your signature could probably do with being a touch darker, IMO. But both of those are pretty minor issues, and mostly come down the aesthetic choices, so they're not a huge deal or anything.

      3 votes
  5. [3]
    meerific
    Link
    A few more comments that others haven't mentioned already: Fonts: Playfair Display is good for headers, but not for body text. The letters are very thin at points, which makes them harder to read...

    A few more comments that others haven't mentioned already:

    • Fonts: Playfair Display is good for headers, but not for body text. The letters are very thin at points, which makes them harder to read at smaller sizes. I notice you use Lato elsewhere, which is a fine font to use. I'd just say...try using that for everything that's not a header. (Tip: If a font has "Display" in the name, they want you to use it at large sizes only!)
    • External Links: As @mat mentioned, use target="_blank". I'd also include the rel="noopener noreferrer" attribute for reasons.
    • Accessibility: The homepage line about your internship search is hard to read for some people. Check it yourself with the Accessible Colors checker.
    • Navigation: It's a little weird to have both text links and icons in the same navigation block. You can switch those over to text, or you can put all your social links in a footer.
    4 votes
    1. [2]
      Comment deleted by author
      Link Parent
      1. meerific
        Link Parent
        On Hamburger Menu icon vs. "Menu": I think either is fine for accessibility. You can use whichever you prefer. On social locations: You only have a couple, so if it was me, I'd just turn them into...
        • On Hamburger Menu icon vs. "Menu": I think either is fine for accessibility. You can use whichever you prefer.
        • On social locations: You only have a couple, so if it was me, I'd just turn them into "GitHub" and "LinkedIn" and keep them in the header. If you had more, say 4+, I'd put them all in the footer. Then again, six links borders on the most I'd put in a portfolio site's navigation. You could just combine the GitHub/LinkedIn links with your résumé. Use that to highlight the projects/accomplishments you're most proud of, and provide links to GitHub/LinkedIn from there as proof.
        2 votes
    2. Wes
      Link Parent
      A good practice. The next version of Chrome will automatically infer noopener, thankfully. Hopefully other browsers do the same. https://blog.chromium.org/2020/12/chrome-88-digital-goods-lighting.html

      I'd also include the rel="noopener noreferrer" attribute for reasons.

      A good practice. The next version of Chrome will automatically infer noopener, thankfully. Hopefully other browsers do the same.

      https://blog.chromium.org/2020/12/chrome-88-digital-goods-lighting.html

      1 vote
  6. mat
    Link
    So, this is all super nitpicky but here are some thoughts: Heading styling is a bit inconsistent. Headings are lighter on readings (personally, headings should be heavier than the text they're...

    So, this is all super nitpicky but here are some thoughts:

    • Heading styling is a bit inconsistent. Headings are lighter on readings (personally, headings should be heavier than the text they're breaking up but that's just me), bigger on blog and I would say a little small and tightly spaced on resume. Also you use horizontal rules in some places not others.

    • Font size. Resume looks a little odd because it's smaller and tighter spaced than other pages.

    • I'd maybe put a little background colour or a bottom border or something on the top bar, just to help draw people's eyes up to where the menu options are and to help your logo feel a bit less 'floaty'. If not that, perhaps right align the logo so it's not sitting all on it's own.

    • Some slightly stronger hover styling on the links might be nice, it's a little unclear they're active right now.

    • I'd consider putting target=_blank on the external links. One click on those two and I'm off your site and elsewhere. Keep visitors looking at you.

    • Perhaps put a 'contact' link up in the nav too: if I've just read your resume and think "yeah, this dude sounds good", I have to click back to the home page to get to you, but you want to reduce the barriers to people reaching you as much as possible.

    Like I said, they are very minor points, as it stands it's perfectly good. The important bit is that the information I need about you is all there, cleanly presented and easily navigated. There's minimal fluff but it still feels personal rather than faceless, which isn't an easy balance to strike. I like the use of a serif font. I've never got the hang of using serifs.

    3 votes
  7. 0x4A
    Link
    Just noticed a simple typo.

    Just noticed a simple typo.

    according to standards presented by Roy Fielding.a

    3 votes