Hello there! I am back. I took some time off and this last project of responsive web design threw me to some deep rabbit holes. I understood something about myself - I am curious and I like learning. It was really fun to search for solutions without using javascript. This hurdle pushed to learn more about specifics about html and css and how to use that to achieve what you want. And now I have an immense respect for front-end developers.
So here I am once again asking for some feedback for Responsive web design last project Portfolio:
Here is the initial design in Figma, it changed while I developed the webpage:
Change the background color or font color of the nav-bar
Why: When I was scrolling through the page, I noticed that in some parts of the page, the nav-bar text would blend into the page...
here is what I mean:
I would have to agree with @Kasakapen. We need to be able to read the nav links at all times so either reduce the transparency a bit or give it a solid background.
Secondly you have a horizontal scrollbar going on as the screen shrinks. You should definately deal with that as it is never a good thing.
Seems like it’s a container causing the issue as your content seems responsive though your code is too extensive for me to hunt through.
Overall it’s a nice clean design with some nice little animations, just needs a few little tweaks
Thank you for the feedback. Yes, I knew about navbar before posting. I could not think of beautiful solution for that. Opaque background looks bad. I wanted to add scroll triggered background changing, but it is only happening with javascript. I just needed to post because I played with this page for far too long.
It was not easy to find nice looking animations and then implenmenting them, so I feel great that you noticed!
I agree on nav. I just can’t think of good solution.
I spent so much time looking for breaking points. I tested on chrome and safari. Could you please tell me the browser you are using and the width/height in pixels at which comes the horizontal bar.
I honestly hate this horizontal bar thingy. Very annoying, I do not see, but everyone sees.
Concerning the name and email inputs at the bottom, after I enter a name/email address the label floats back down over my input making the first part of it hard to read. I think this just looks bad and I would not want it on any page I created.
The submit button is also questionable. I’m not crazy about the text floating up on mouse over and I can easily trigger bugs with it. If you approach the button from the bottom you are able to make the button float up and the mouse turns into a pointer as if you can click on it but you can’t click on it. I don’t think it is a good idea to be moving an element you want people to click on like that.
Also, I am getting a horizontal scroll bar at all widths.
Wow! This portfolio has a very unique and sketchy design. I really like it but yet there are some things I would recommend updating.
Solidify the navbar color
The navbar looks nice but then looks a bit “lonely and stuck up at the top without hope” due to that dark-to-light gradient. A solid white with a small box shadow would look nice and still leave you with that nice design theme.
It just feels a bit too different than the other elements in the page, the way it is.
Project Spacing
I really like the project hover effect, but I kind of feel like the spacing between them (horizontally) is way too much. Maybe keep a grid gap of about ten pixels and then when the user hovers on one, make the text appear below the project and resize the grid vertically.
Animation speed and motion
The animations look really nice, but there’s a problem. Too many animations get a little bit annoying when you keep having to interact with them too many times. I would usually reduce the duration of an animation as well as the size.
The contact buttons sometimes glitch due to the motion. Maybe make it a similar effect like the project hover one. For better accessibility, don’t make the hover element move when the user hovers on it.
Overall, you did an amazing job.
Keep the great work rolling.
Again, thank you for your time and feedback. I took notice of your suggestions and did some fixing.
Nav. Added solid background and drop shadow to give depth.
Horizontal scrollbar. On my mac laptop I didn’t see it. Some elements have 100vw width and in codepen, because of its border, it gvies that horizontal bar. Added overflow hidden. I believe that is a problem. Hard to fix when you can’t see the problem to test it.
Contact form. Thanks @bbsmooth . I haven’t tested my form that way. You gave me a new way to look at the end product. And I succeeded to keep my idea of animation and fixing text-floating-back issue. Submit button. Again new perspective. Thanks. I wanted that button to have some interactivity, so I removed floating up idea and changed to simple letter spacing transition. It just changes the letter spacing and fits so well in the whole design.
Project spacing. Tried changing spacing and hover effect to go down and resize the grid vertically. I did not like it. All other sections has space, a lot of space and I kept it in project section. The images are not that informative to be bigger, and being smaller they become totally useless. Reducing the space project sections feels cramped and removed from the whole flow of layout. Changing the grid vertically. This is for me very annoying. It’s like turning the key in the door and the window opens in other room. That’s what happens when I hover and other projects tiles shift because I need to acomodate the hover text. That’s another reason for empty space - I have control to use whenever I need it. And if I want to use hover without affecting other project tiles, I believe I would need js or very complicated css. I decided to keep the initial design idea.
Animation. Agree on animation. Reduced all animation timing a little bit and made it ( I believe) that all animation should feel the same. They are not the same, but feel the same. Changed social icons animation. And spent two days fixing lagging thing. Until I tried my code on chrome. On chrome it works as intended. Safari lags, pauses some transition. I couldn’t find out why. And need to move on with learning, so I left where it is now. Maybe someday I understand what to change to achieve the same effect on both chrome and safari.
Thank you again. As @ConnerOw1115 said, I am going to roll now. The link to codepen is updated.
The portfolio looks amazing!! Well done…I low key love the nav-bar design you did there, but there are few things I noticed:
1.
2. (this hapenns mostly, when I resize the screen)
Thank you again for taking the time to look over my page.
I noticed that overlapping issue before posting. While I was reading about learning programming is the problem that the learners have is that they spend too much time over perfecting and nitpicking project.
That’s why I am drawing the line, leaving it as it is, and moving forward.
(this hapenns mostly, when I resize the screen)
