Updating Portfolio Looking for some feedback on the format
I've been redesigning my portfolio to improve my job hunt prospects. I recently created a new look and feel for it and would love some feedback. Heres a link to my current portfolio for reference (https://ibrahwad.github.io/)
The screenshot below is a Figma prototype. Key features include a carousel at the top for showcasing different skills, similar to an index ticker. Things like gallery would show polished 1 shots for different work, e.g., branding/ui/3D design. Blog would be a bit longer or less structured thoughts on aspects of either design or data viz.
Does this redesign feel like an upgrade or a downgrade in terms of visual fidelity and overall presentation?
29 Replies
Ended up working on it a bit more, but this is what it ended up looking a bit like in progress right now.
the text inside the images' zones randomly has rounded borders
the arrow for the "gallery" is very mobile-friendly, but super easy for a desktop user to miss it
specially with it being gray on white
the blog has the same issue, and the good ol' "read more" will be a lot more obvious
Went through another update on it the assets in the images are still going to be improved upon and I gotta figure out what to highlight.
i see 2 problems:
1- you have transitions EVERYWHERE
2- when you say "small little interactions", you make the buttons grow and move away. that can cause a flickering loop, where it is stuck going back and forth
on mobile, looks so weird that the navbar doesn't take the entire width
this is fair, I will probably tone it down a bit a more for some of the buttons. I'm just trying out a bunch of different stuff then i'll probably distill it down to a few that are consistent.
For number 2, I hadn't even thought about that if I'm being completely honest. Can you explain a bit more about what sorts of things to avoid for that?
Yeah the navbar looks a bit shit on mobile, I'll need to think it through a little more. I was messing around with padding earlier and hadn't decided yet between another format for it.
what i meant is that you have a bug. if you notice, when you resize the window, everything slowly move into place
well, i strongly avoid anything that changes the size of elements on focus or zoom, because if you find the perfect pixel, you can make it flip-flop between :hover and not :hover, at 60fps
and on mobile, the hover will be irritating because the place to touch is always moving, and it can increase the size of the page if it overflows
on the phone, you're still hidding this information
if it is behind hover, on a phone, just pretend that it doesn't exist
because, in the end, it really doesn't
it's innaccessible
yeah I was going to just make it visible and static when I went through some of the things for mobile.
that's the solution for this
and remove the things like the button going left to right
yup, and it is way more easy than you can imagine
I've split the classes up pretty well so I'm likely going to just use a media query
So I still might actually be misunderstanding what you mean for the specific resize stuff.
Because the reason some of them are going slowly into place is because I ended up choosing a clamp for the font-size instead of just static numbers.
then its just adjusting to the sizing as it goes
yes, and it transitions from the previous value to the new one
and so that is what causes the flickering loop?
because it is transitioning at every resize i guess
no, it's 2 different things
I figured out why. I straight up just had a transition on the body I forgot to comment out
https://jsfiddle.net/aLws5gh7/ <-- this is an exagerated version of your buttons
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
feels amazing, doesn't it?
I see what you mean now at the end especially. Sorry I'm a bit dense with figuring it out here
it's fine
if you compare the 1st and 2nd, you can see that the font-size changes slowly - you can see this effect in your page
this can be pretty weird, and cause a complete re-layout if something no longer overflows
I might also just change to specific fonts for screen sizes over the current thing I got going which looks something like this.
This would probably lower the number of resizes as well and reduce that problem
or remove any transaction it may have
you're not fixing the problem: you're fixing the symptom
I'll take a bit to think on it some more and respond then. I don't want to waste your time on it. Going to read over this for a bit
I'm missing something with how I'm understanding it still 😅
you can see what i mean is you temporarily just set the font size to a rem size
Yeah and then each time the screen resizes it ends up choosing a new font size, which is then causing a layout shift
its not just that, its that the size smoothly changes