My first web portfolio!

Hello guys!
I just finished my portfolio page and I want to share it with you.
Well… That was a challenge. Now when I look at my work I am quite happy, but still I feel like i didn’t do my best. I learned many things, and I have been through some really frustrating moments and maybe that is the reason I wanted to stop improving the portfolio. I deserve some JavaScript course now :smiley: . I am sure I will come back to that when I will have more experience and confidence and hopefully when I get some feedback from you :slight_smile: .

So here is the portfolio:

Zuroslaw personal portfolio

A quick brief to what I wanted to achieve and what I didn’t pay much attention to.

I didn’t want to use Bootstrap and after all it works :stuck_out_tongue:
I tried to make it responsive and I think that it works fine, at least on my phone.
I tried to create a nice design and I think that it may look fine, but I see some “design flaws”. I will be looking to improve it. There were many ideas about the design and look&feel but sometimes I couldn’t do anything but tearing my hair.
I didn’t pay much attention to browser compatibility. I know it won’t work on older IE, probably some things might not work on Safari, but I will learn how to deal with it later. It was hard enough to make it work on Chrome alone :stuck_out_tongue:

I will be very grateful if you give me any feedback! If you can write something more, maybe about my code I would be pleased!

Thank you all!
Mateusz

very nice … scales well on mobile sizes so thats good …
I have only one thing i really really dont like and that is the about section … first off that large chunk of lorem ipsum text … it looks bad … you have a strong image but that text beside it extending below the image just takes the look away from that section.

again this section looks bad as the screen gets smaller which is a shame as the rest of the page looks well and works … why do i say that … because the image gets smaller and smaller down to small mobile sizes it looks tiny and that chunk of text gets bigger looking.

I used to be a hobby photographer even done weddings and stuff so i took a look at your photo … and think you can vastly improve the look of this section especially on mobiles if you change that image from a square to a rectangle … it would mean you would have to edit it in something like photoshop … then on mobile have it full width of screen with maybe a margin of 10 on left and right.
on large screens and tablets i would go with having it in the text with the text flowing around it or else cropping it to a vertical rectangle and making sure not having more text than the size of the image div.

other than that … real nice page that works well

I see that and I certainly have to rearrange this section. I will probably make the photo surrounded by text.
Thanks for your answer.

Looking Good!! I love what you did what the background image as you scroll (parallax scrolling?) How did you achieve that effect? I’d love to add something similar to mine.

I’m also quite impressed with scaling on different screen sizes, because mine is terrible on anything but a full screen.

Here’s my portfolio page if you have any pointers to help me out:

Portfolio Codepen

Thanks!

Thank you for feedback!
Creating prallax background is simple: just define your background this way:
background: url(“your_image.jpg”) no-repeat fixed top
And make sure to cover the section fully with your image by adding background-size: cover.
I didn’t watch close on your portfolio, but if you want to make it more responsive it’s worth to use media query. You can find information on the internet.
Then you can rearrange your navbar as it is covering much space on mobile now. You can also add a button on small screens (play with media queries and display: none for hiding components). Then you can make some fancy menu list. There is a nice css trick to make it without JS. Here it is: https://bitsofco.de/the-target-trick/

Good luck!

1 Like