My personal website

Code Feedback
1

I would like to get some feedback on my website, it is currently only adaptable for the desktop, once content and layout is satisfactory i will move onto responsive.

Please note that the boxes on the section are temporarily used as a visual aid and will eventually be removed, here is the link

2

Congrats on building out this website! I’d recommend limiting the use of centered text. This is particularly true for full paragraphs of text like your bio and experience descriptions. I also noticed that hovering on the icons shifts all the divs below it.

3

Ooo! Nice work. Here’s a few bits of feedback as well.

Some things I like

  • I really like the font choice and overall you have very nice headings and structure.
  • I don’t mind all the centered text since you have such a strong central axis throughout your page (everything but the navigation is centered), but, as agbales mentioned, the longest lines are hard to read and because of the unusual alignment your it’s hard to tell your Experience paragraphs apart from your Education paragraphs (I want to read Experience more like a list because of Education). The single-column makes reading very linear (which is nice, there’s not information everywhere and I don’t know where to look), but you already have a lot of whitespace so making the sections less wide feels like you’re wasting space instead of judiciously using it.
  • Clear organization of sections and subheadings. Your page is informative, but not overwhelming.

Some things I think could improve

  • The links in your side navigation are very small. I’d like them to be bigger with more space.
  • Because everything is so centered, it bugs me that there’s a darker brown strip only on one side and not the other. Even if it’s empty of content, it would make things more balanced.
  • I’m not sure what you gain from alternating background colors in your sections because they’re already clearly distinguished by how much space is around them.
1 Like
4

Mobile version could use some work

Screenshot_20181117-180529
Screenshot_20181117-1805291440Ă—2880 526 KB

6

  • For some reason I don’t see any hover effect (It may be because of the browser I’m using- Firefox).

  • On my screen the text goes all the way to the edges of the container in the Experience section to where it looks like the ends are starting to disappear. Could either use better formatting or margins/padding there.

  • Ditto on the tiny web links menu- either larger size font or change it to a horizontal menu bar.

  • a lot of blank white space on the left side; either put another light color column like the one on the left or shift the main sections over more so that they aren’t squashed against the left column.

It’s a nice set up and nice colors (it may inspire me to do mine once I find a host).

7

thanks, for the feedback its really appreciated, i made some adjustments, could someone take another look and let me know wat you think.

8
  1. Add some padding at the bottom, the page ends abruptly and clips a part of the “box” with your interests.
  2. Add top/bottom padding to the containers, the content is pretty much sitting at the same height as the container’s border.
  3. Articles and other of those tags are meant for the specific type of content on the page, you’re overusing them. There’s lots of information on the internet about semantic HTML, look into it.
  4. You’re using a lot of margins and weird width values to align your content, it’s not going to work on anything besides people using the same resolution as you, and it’s gonna be hell to make responsive. This part needs a lot of work.
9

Hi Giusek,

Thank you for your input, i can resonate very much with point 4, this is a weakness of mine where i am unable to find an alternative way than paddings or margins, i was trying to use the pure flexbox approach however applying the properties would not work on the flex items (i.e align-self, flex-basis)

For point 3 i have seen many courses on udemy where they use article for the content that i am applying i don’t know what other html semantics would be best applied here.