Looking for feedback on my portfolio đź‘ľ

The URL is https://www.stephansantos.com

I’ve recently started to look for my first job as a developer, and I was hoping someone would give me some feedback on my website. Any feedback is welcome, but there are some things that I’m extra worried about: Are the animations choppy, and does it display correctly on other devices? I’ve tried it on 4 devices of different sizes and age, and it seemed fine, but it still worries me. The other thing is, is the navigation intuitive enough?

Thanks in advance for taking the time.

6 Likes

Looks great!

From a user point of view, your main screen confused me a bit, I wanted to scroll down by default because the blue container uses more than the middle of the page. I had to look for your portfolio tab to figure out what to do.
Maybe moving those tabs to the bottom of the page where below your networks you have a bit of white empty space.

The portfolio page looks the best, you definetely put a lot of time in it. I had to look again for a way to see the next project and all I could see where the big buttons to the sides. So maybe making the project progress bar bigger would help.

As for the contact page, it seems a bit disconected from the look your other 2 pages have, I wish it had a similar look with the same borders etc… than your portfolio one.

Other than that I think it looks great and pretty original. Good luck with job hunting!

Thanks for the kind words! I definitely agree with your comments. I think a part of me was denying that it was a problem and hoping that other people wouldn’t find it a problem so that I wouldn’t have to spend time reworking it haha. It’s good to have that cleared up though :sweat_smile:

Excellent. I like the style which seems to run through most of your projects.
I had a look at a few of the projects and found a few issues but you don’t want feedback on that.
Your cat is cute!
One thing I thought about the projects was I want to see a demo. Only when I scrolled down I found the demo link. It seems a bit out of the way. I was clicking on the image to see if that did anything.
The other thing I notice, there are no pictures of yourself. Only an HTML cartoon. Even on Linked.in. As much as you might not like pics of yourself, I don’t think it looks professional.
Consider adding a photo of yourself on Linked in at least.

Great work, but i couldn’t find right away how to see your project pages.
Only after a while i noted that i had to click the “demo” button.
Maybe the computerscreen should also be clickable/a link?

Thanks for taking the time to look through. I’m glad you mentioned the cat - did you notice that if you bring the cursor in, the cat tries to swipe it?

Since the guy below mentions it too, I’ll go ahead and try making the images links to the demo. Should be an easy enough change.

Did you notice anything glaringly wrong with the projects listed? I’m not really looking to revisit them, but I ought to if there’s something very wrong.

Point taken regarding the photo. I’ll keep it off while I look for a good photo of myself.

Thanks for all the input.

1 Like

Thanks for your input. Will be making this change.

Voting app.
When I look at a poll it says I already voted “Pineapple Burger” which I haven’t. I haven’t even logged in. I thought that was strange.

Book trading.
I tried to add some books but got fed up when it would not accept the ISBN. Therefore, I can’t trade for anything.

PS. I did see the cat paws :cat::paw_prints:

There is a problem with overflow-x, you should use it on body. I like it btw :slight_smile:

Yikes, I’m glad you mentioned this. It should be fixed now. Regarding the book thing, the API I’m using doesn’t have a very expansive collection, and the ISBN’s you used probably just weren’t in their DB yet. I might look in to switching the API for this reason.

1 Like

Sorry, I don’t understand what you mean. Are some elements overflowing?

On my laptop 1366 I see the x scrollbar:

Oh I see. You’re right, overflow-x: hidden on body would solve this, thanks for pointing it out.

Just as a quick update, I’ve asked people to try my site here, on reddit, and during meetups. The most common thing to happen is that people would be confused by the navigation. I’ve redone the site a bit to make navigation more obvious. The changes are live now, and I’d appreciate it if anyone tried it out.

Some mostly UX-based observations:

  1. The header is covering up the cat on my screen. Is this intended?
  2. The scrolling behavior is slightly off-putting e.g. I expect normal scrolling behavior, but what I get is a sort of fly to anchor animation when I scroll. It also appears to restrict me from getting to a good chunk of the project content. This needs to be fixed, but maybe also consider saving the fancy stuff for when ppl click on a project and don’t mess with their scrolling expectations too much. If this is the behavior that you want on mobile maybe indicate that a swipe up or down will take them to the next project. But I’d caution against this behavior entirely. I think you’re going to run into issues on certain devices. On my desktop this experience is pretty confusing and the fade-in effect is an inconvenience and restricts me from effectively accessing content - in the mobile responsive Chrome dev tools view once I’ve navigated to a project I am “stuck” in that project and have to click several times in a menu or mess with the mysterious bar at the top when really a simple scroll up or down is all that’s needed for someone to quickly flip through your projects.

  1. Which brings me to the project transition effect. I’d honestly just get rid of this and restore the normal behavior. If I navigate even slightly below the tools used - the scroll jumps to the TOP of the next project. If I wasn’t expecting that to happen I’d probably scroll up so I can go back to the bottom of the last project and have a second look. But what happens is I’m brought to the TOP of the page I was on and then have to scroll down again to get down to that content… but hold on WAIT not too far down!!! Or else I’ll be caught in the loop again. Make sense?
  2. Menus. This might be a personal preference but hamburger menus on desktop view feel like underutilization of screen resolution real estate. Maybe try 3 buttons with one nested list of buttons without forcing me to click on a hamburger? Otherwise when I land on the page I’m looking at a giant blue header with some sort of navigation (not entirely sure what that does until I click on it). And any other navigation requires 2-3 clicks. Also, the expected behavior for a menu is that it will close when you click on a particular item and reveal the requested content. Yours stays open so I have 2-3 clicks to get to he project I want to see first and then an extra click to close the menu. I should be clicking at most twice (and arguably only once) to get to a project on a Portfolio Site. Up to four clicks is far too many IMO.
  3. Links to source and demo are getting obscured up by your scroll effect - fix this ASAP.
  4. The expected behavior for a light box is that the small images you are showing me will increase in size. Instead I get a redirect to a demo. Not everyone is going to check out the demo or want to check out the demo. Maybe just rely on regular old buttons or links to send them there? As a user I want to know where I’m going before I click on a link and not after.

All in all I think the projects are solid. My one advice would really be to maybe not try to impress people too much with fancy transitions and interactions (that cat is damn cute though) especially if you can’t be certain how they’ll perform across browsers and devices. It was obviously designed with mobile in mind, but don’t forget about traditional desktop user’s expectations. After all there’s a good chance someone will be looking at this behind a desk and not on the line at Starbucks, but you want to be ready for both.

Separately, you clearly have some very decent skills with design and dev. But I’d possibly suggest incorporating something that doesn’t look and feel like a “student project”. Being able to remake AirBnB is cool, but I’d be more impressed by an app that does something new, shows me your personality, has some sort of significance to you, or that people can actually use.

One glaringly wrong thing on Stephan’s Book Club: clicking on a book pops open the content below it but then scrolling down scrolls across the X-axis? This is confusing and also restricts access to the “Request” button. You need to have the whole page scroll down when a scrolling action is made over the book area and not just along the side. E.g. allowing people to click and drag on the books to move across the X-axis would make sense, but scroll down = move across not so much.

Cute design, but get rid of all the fancy scrolling. Let the user control the page.

May I ask what device you tried it on? The gif you included shows the tablet version which is why the scrolling is so weird, but I take it you tried it on a PC?

  • No, the cat shouldn’t be covered. It’s been fixed.

  • I’ve since updated it to remove the scrolling effect for the tablet version. I’ve also changed the configuration so that it considers anything under 1100px width as a tablet (from 1300px).

  • The menu now also closes once you’ve clicked on an option.

  • I like your lightbox idea and I’ve implemented it

I also agree that some more personal projects would be better, but I figured it would be worth trying applying now.

Great idea! I’d been trying to figure out how to fix that. I’ve updated it now to be draggable. Thanks!

Thanks for all your input. It was very helpful. I’d appreciate it if you tried it again and let me know how it is now.

May I ask what device you tried it on? As marcaaron pointed out, when it displays the tablet version the scrolling can be annoying. I agree, and since you shouldn’t be able to scroll on tablet resolutions anyway, I’ve disabled that effect. If you’re seeing the desktop resolution version and still find it bothersome though, that’s something else, and I’d like to know whether or not that’s the case.

On a desktop, I can use the mousewheel to scroll through the different projects, but I can’t use the scroll bar. This is odd behaviour for a website and was confusing for the first couple of minutes.

1 Like