I never really got your feedback! 
https://st3ps.github.io/public/
Do take in consideration that iāve only gone so far as the front-end bit, no angular, node, react, etc. with that said,
All criticism welcome.
If youād like to check the source:
Hi, good job, looks really nice! 2 things I noticed: The navigation items are barely readable (on the white background) and the contact section looks strange with everything on the left.
Heeya, thanks you!
Youāre definitely right. The first one iāll get right to.
Repositioning the contact section thoughā¦any thoughts how it should be layed out? I could center it all but I wanted to avoid āover-centeringāā¦
Alright, so far Iāve changed the top navbar, you should have no trouble reading the menu items on a white background now (do tell if itās still the case)
Iāve also changed my intro text ā Iām not sure wether I should mention āDesigner & Front End Web Developerā or just the Web Developer partā¦
I hear Designers get filtered out, yet just saying Front End Web Development feels lackingā¦
(1) Do you own the rights to the first background image? If not, you should use an image that you own the rights to.
(2) Related to (1), Iād suggest using a different image anyway, as the current photo is way too gloomy/moody. It might work as a portfolio image for a nature photographer, but an overly moody image like that doesnāt really have a place on a site for a Web developer. You should use an image that conveys either a neutral meaning or a bright/optimistic meaning.
(3) Your scrollspy doesnāt seem to work.
(4) IMO the tiles in your portfolio section are too big. You might consider condensing it down to a 2x3 matrix instead of the 3x2 matrix as it is right now, or alternately reducing the height of the tiles if you want to keep it as a 3x2 matrix.
(5) Code-related: your ātitleā tag is empty.
(6) Code-related: the contents of your H1, H2, and H3 tag arenāt semantic and donāt use the tags properly. The header tags are headersāyou should use them to sectionally divide the body of the entire page, not to arbitrarily visually differentiate lines of text. To style different lines of text, you should use SPAN instead. A more proper use of these tags would be to use H1 for the page title (something like your name), H2 for the āHi thereā, āAbout Meā, āPortfolioā, and āGet in touchā text, and H3 not at all (as you donāt have any content that calls for another header).
(7) Code-related: itās improper to use the H1 tag more than onceālike an ID attribute, you should have only one H1 on the entire page. You can have multiple H2 tags, but there should be only one H1.
(8) Code-related: you might want to consider reducing your tabs to indent 2 spaces, instead of 4: http://stackoverflow.com/questions/2167524/do-you-indent-your-html-code
(9) You should always run any HTML you write through the W3C Validator to ensure that itās error-free: https://validator.w3.org/
1, 2) It is a bit artsy, and thatās not ideal for what iām trying to come across ā iāll have it taken care of.
When I click the elements associated with the scrollspy, they scroll down to the section theyāre refering to. Thatās what itās suppossed to do right? If so, itās working for meā¦
Reviewing it, youāre right. Iāll have it changed.
5, 6, 7,8, 9) Will work on it, thank you for bringing this to my attention
Iād just like to thank you for reviewing thoroughly my portfolio-- if only I had this done before, perhaps I wouldāve had been in more interviews. Who knows.
Nice portfolio! I like the transitions you have on the portfolio items and the fonts you added in.
Suggestions:
Have the mobile nav items take up 100% width and be center-aligned.
Add a bit more description in the bio area. In addition, you could maybe have someone proofread your bio, to check for errors and get their thoughts.
Make it easier to navigate to the portfolio item demos.
Hi, thank you!
- When I click the elements associated with the scrollspy, they scroll
down to the section theyāre refering to. Thatās what itās suppossed to
do right? If so, itās working for meā¦
Actually, taking another look at your code, it seems like you donāt have scrollspy implemented at all. I previously assumed you did because itās a single-page site and most single-page sites built with Bootstrap tend to use scrollspy, but thereās no evidence of it in your code.
With Scrollspy, basically your navbar will dynamically update as you scroll down the page. Iād recommend that you add it, as it makes your site look more professional.
Bootstrapās Scrollspy example: Scrollspy Ā· Bootstrap
one more for my to-do listā¦
Interests, location, fun facts, etc.
So, Iāve got a new version of my portfolio out andā¦
I
Iāve implemented most of the suggestions around here, some iām still working aroundā¦and a particular few (that i begun through my own volition) are just making me go crazy.
The about section: I canāt for the life of me vertically align the text and I donāt know waht to do anymore.
The w3c validator is telling me i have a closing p tag without a match, but i do have a
tag, So, I donāt understand ā¦ is it because iāvegot an h2 inside the p element, is that a thing youāre not supossed to do?
if you guys wanna check the code throug that or with the browser inspector, iād just be very grateful
Yup itās happening because of h2 inside of p. Why didnāt you just put an h2 before the p ?
It is rather odd to have a h2 inside a a p tag. Usually you use a <span> instead for inline editing.
And a simple fix for your vertical about section. Remove the vertical align and add this class:
.row {
position: relative;
}
.middle {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Viola! It works!
I love your site, very nice work!
Hi, first of all thank you!
To answer you and nawazishali refering to how i used the h2 tag, honestly iāve come to a point I donāt really know why I placed it there, but i had been warned about semantics before and it makes total sense, why would you have a header inside a paragraph?
A ā¦uhmn, sleight of mind? 
As for the solution, I donāt know why, i replaced the vcenter class content with the stuff of the middle class you suggested, played around with it and I couldnāt get the result you gotā¦I think it only works from a certain resolution ( try implementing it again and resize the window and see what happens ā¦if it works as intended (text stays centered and doesnāt overflow out of the about section) then I donāt know what I did wrong. I applied it to the same element i was before with the vcenter and yes i changed the row class as suggested.
I figured a different solution.
.row {
display: flex;
align-content: center;
align-items: center;
}
Itāll center things pronto, problem is it completely breaks bootstrap functionality (cols are supossed to occupy full width, and stack on top of each other, which does not happen unfortunately) but iāll fix that with a media query
Again, thanks guys
Uploaded the almost-final version of this iterationā¦
So what I know still may need work, as suggested:
Not related to code, but perhaps I do need to add a bit more āflairā to the about section, not only talk more about myself, but refer my services better
mobile experience i imagine it not to be 100% efficient, itās closer though, need to make small ui changes, some suggested here
in code tab indentaiton could be better i guess, iāll work on that on the next go.
Iām considering this ok for now, if any of you see this and think thereās something critical i should change i would love to know, as always.
Your new solution is good. I canāt try out the class I gave you, because you changed it, but it has always worked for me on all sizes. Iāll see if I can find the old solution on your GitHub and test it out.
Well, where did you apply the .middle class?
I had a class named .vcenter applied to one of the .cols in the .row, could thatāve been it?
Yeah, Iām looking at your old code right now and playing with it. It should go in the vcenter class. If it seems to work Iāll commit it, and you can merge or look at it if you like!
Nice!
So, wait, iām kinda new with this whole git thing, if I merge your code, itāll only change the affected file, right?