This is my first portfolio page, I have build my self. I learned a lot about lazy load, intersectionObservers, etc. But the biggest pain was to make it fully responsive. I think there are still edge cases, were it might break. But I learned a lot about that to. If you have any tips, critic or feedback how I could have improved things, I would appreciate it very much.
2 Likes
I think it looks great. I love the neon glow you implemented and the layout feels smooth. Some of the design is what I wanted to do for mine but I still have a lot to learn. I have a couple of things for feedback that might only apply to my user experience.
While in desktop and/or laptop view, I thought that the images in the photography section were too large so I scaled them down using the transform: scale(0.75) property for the img element. I gave the navbar a z-index: 1000 so it could always be seen, preventing it from popping in and out.
For the mobile phone viewport, Iām using an iPhone 13, itās a little difficult to see the dropdown menu list items (About me, Portfolio, Photography) the background and the font-weight donāt mesh together well, maybe giving the font-weight a higher value or brighten up the font or darken the background.
Finally, for the mobile phone viewport, the images of the two phones in the portfolio section. The first one is cut in half and both of them are side by side which doesnāt allow for a good flow, the images are wider than the rest of the webpage. A quick fix was to give the parent element with the class name āimg-portraitā a flex-direction of column and then give the class name āimg-portrait imgā a margin of 1rem and auto, just to fix the spacing.
Apart from my horrible critical feedback, I still think your site looks amazing and Iām kinda jealous of it. Youāve kept it super simple and itās functional.
1 Like
Hey, thanks for youre detailed Feedback. I think you are right, the image sizing on large screens is too large. I actually also got the feedback from friends with iphones about the transparent nav menue. This is really weird, because it looks totally diffrent on android. As if iphones interprete opacity diffrent than android phones. Is that a thing? Does anyone no? And itās not browser related. I tested it with one of the friends. Also the animation of āfrontend developerā is diffrent on iphones. It jerks a little at the end, while itās fine on android.
I also will check into the display of the phone images. Thatās not like intended :).
1 Like
Youāre welcome! Your site is really good as it is so I wouldnāt stress it too much. Iām not sure why itās different on the iPhone, I use the Chrome dev tool browser to test for mobile design and it looked good for the iPhone up there so, Iām not sure what could be going on with the opacity either. Iām not sure if you are using media queries for mobile devices, maybe that could be an issue? Great job on the site though, the neon vibe you have is cool!
1 Like
So far what I found is, that it might be the linear-gradient Iām using, the keyword transparent also might cause problems on iOS or the opacity. I think I just need to test it out. Sadly I donāt have an iPhone in reach right now. The testing in the dev tools does apparently not really emulate the iOS System, only the size.
Great job on your first portfolio page! For improvements, consider refining responsive design for edge cases and optimizing lazy loading for better performance. Keep up the good work
1 Like
Great job on building your first portfolio page and tackling responsive design challenges! For improvement, consider using responsive design frameworks or tools to streamline the process and test across various devices to catch edge cases.