So, I've had my Portfolio done for a while but

I never really got your feedback! :stuck_out_tongue:

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:

1 Like

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.

1 Like

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/

2 Likes

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.

  1. 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ā€¦

  2. 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.

1 Like

Hi, thank you!

  1. Sure, I can try that out
  2. The bio area, as in, the about me part? Well, what else could I say about myself?
  3. Yeah, they are the way they are because of the animations butā€¦usability is taking a hit over it. If youā€™re on a mobile, itā€™s definitely not good. Iā€™ll have it restructured soon,
  1. 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

1 Like

:stuck_out_tongue: 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.

  1. The about section: I canā€™t for the life of me vertically align the text and I donā€™t know waht to do anymore.

  2. 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 ?

1 Like

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!

1 Like

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? :slight_smile:

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?