Feedback for Personal Portfolio Page

Feedback for Personal Portfolio Page
0

#1

Hello!

I finished my personal portfolio project and I’m looking for some project feedback. I was able to do everything I planned on doing, with maybe the exception of the contact form not going anywhere (it takes you to an error 404 instead of an actual submission). Criticism and suggestions are welcome; I had to use some crafty what I take to be workarounds to get navigation bar to work (they link to a hidden div exactly the same height as the navigation bar above their intended target). Thanks!


#2

hey man, looks clean and good! Though, why not to put a tribute page in your portfolio?)
to make navigation work you don’t need to add divs. just add your id’s to block and it will work nicely. if it goes over the text, and I suppose that’s what bothers you, add top paddings in your blocks. Although, take a look at your page in phone size. The idea with 2-8-2 columns doesn’t really work on small screens. And the text near the form looks too big. Although, rethink the idea of using 3-3-3-3 clumns for your footer. Just make it a list like a nvaigation. It will be much nicer!

This is just my personal opinion, so please don’t be angry when you read it :))) Also, I’m quite drunk now, so sorry in advance.


#3

Ah-hah, I don’t mind the beer. Thanks for the feedback! Do you have another solution for creating those 2-8-2 margins on large screens that disappear on small screens? Also with the text next to the form, do you have an idea on making it responsive to the screen size?


#4

Well, first about text. You have some serious problems with tags here. Why is everything h3? It’s not good. It’s like, really bad. For the text next to form use < p >, as well as for text in the footer. For quote use a special quote tag. Don’t use tags based on looks - you can style them any way you want, but you should choose a tag based on the content. And than style it. Use ems, rems etc.
Second, don’t use blocks to center your content. Create one block and center it with margin: 0 auto. Watch some videos about bootstrap grid, how it stacks columns. It will help.
And port your css to separate file (column, if we’re talking about codepen). It’s like a common rule, too. < style > is only for some automatically generated css, or for a really-really small amount of it. It’s not the case with whole portfolio page. And check the links to your placeholder images. Why are they so long? This makes html unreadable.

I strongly advise you to look up the code at some great pages, and figure how they did it - the grid, the small elements, the text. If you’re interested in bootstrap, then there are some examples on their page. Like “pages made with bootstrap”. Check the inside code, it’ll give you a much deeper understanding of how it works, than just reading / watching tutorials. Good luck!


#5

Thanks for the great feedback! I’ve taken a good few weeks away from this project to continue on other things, and now that I’m up to the next set of projects, I wanted to fix this up and improve on it before I continue. Just to recap between your replies on what I did: I ditched the hidden div’s, adding paddings, improved on my grids for small screens (great advice! dived right into the basics of it!), replaced the 3-3-3-3 shenanigans, replaced h3 with p and h1 as appropriate, used a quote tag, ported the css over, and overall cleaned stuff up. But now I have more questions for you!

I wasn’t quite able to figure out making the list out of the social media links, so I improvised with center and display: inline. After quite the tinkering with a list I wasn’t able to center it without some sort of invisible indent from the list, despite setting the list style to none. Is there an easier way to use a list? Also, with ems and rems, when do I use them? Do you have a helpful guide as to what should be set with them? How do I know the user’s settings won’t break the elements? Regarding the painfully long links, that’s how it copied over from “copy image address.” Is there a way to consistently get a concise address like the other ones? Lastly, I had two final things that absolutely confused me and I wasn’t able to make sense of. Whenever I use the size xs in col-xs-#, it doesn’t seem to understand that size and assumes its not there. Yet when I looked up details on Codepen’s version, v4 alpha, xs was a size? The other confusing thing was the initial quote and picture in the about section. For whatever reason, the picture wants to jump down on its own, and doesn’t scale within whatever size I set it to. When I set the quote to col-sm-9, the picture has to be set to a column size of 12 instead of 3 or else the picture is 1/4 its proper size. When I used width (75% for the quote), the picture does the same thing and requires 100%, and refuses to scale down despite its img-fluid class. What’s going on that the image keeps jumping down instead of being responsive?

Thanks!