My try at the portfolio page - advise and feedback needed

Code Feedback
1

Hi everyone. After some tough time I managed to put a portfolio page together. I feel like it’s still pretty basic in its looks, but I got all the things working and that was the goal: http://codepen.io/IceFireCode/full/NAvVkW/

One question: I did not manage to get the text next to the picture of me in the About section to vertically align. Tried different things I found on the web but it still does not work. Can anybody advise me? The same actually for the buttons in the Contact section, it would be nice if they always vertically aligned within that picture.

Any feedback on the page is appreciated! Thanks!

2

You can simplify this code:

	display: block;
	width: 300px;
	height: 300 px;
       margin-left: auto;
        margin-right: auto;
	margin-top: 12%;
	margin-bottom: 12%;
}```

For:

``.div-gallery {
	display: block;
	width: 300px;
	height: 300px;
       margin: 12% auto 12% auto;
}``
1 Like
3

Hi,

Nice and clean. I like it. I must say i didnt notice the menu right away, perhaps better at the top?

also, your portfolio-pic-1 is a .tiff , change it to a .jpg (in the html) and the placeholder will show.

The vertical alignment issue has been a bit of a pain for web designers/developers for years I have read. There are a few work arounds if you look around the web but i found the one I liked to be native to flexbox. Flexbox is a native alternative to using a framework such as bootstrap. It has a simple verticle-align feature. Check it out :slight_smile:

Mark

2 Likes
4

I suggest you must not spend to much time on your first portfolio yet.
It is just ment as exercise to repeat the stuff you have learned.
When you will advance you might find better tools, technologies and architectures you will have to start from scratch again.
If you still want to stick to Boostrap barebones coding there will be plenty of time for it at a later stage when you will have some real projects you may put into you portfolio.
For the time being. Let it be and concentrate on learning the new tings rather than fiddling around with things that might turn out to be less relevant than you are thinking now.

1 Like
5

That is better way, thanks!

1 Like
6

Thank you MARKJ78. I changed it to .jpg, but I don’t see what should change. What changes when you change this?

Good to hear that more people find vertically aligning difficult :slight_smile: . I will check Flexbox for their solution.

7

Thanks for your comment. Definitely something to think about and I see what you mean.