Would appriciate some feedback on my portfolio project

After i went through first sections and few videos about bootstrap, i created my portfolio page.
It have lot of bugs and mistakes especially on small and mobile sizes, i would appreciate feedback guides how to fix them, that bootstrap classes and understanding documentation is hard for me. :slight_smile:

Here is the link: https://codepen.io/IgorSvch/pen/KgKQGj

Haven’t viewed it on mobile, but on desktop it looks absolutely great! Great design!

Thank you my friend, i really appreciate it :slight_smile:

The white/gray-hover nav links on the pink background are a bit rough on the eyes due to the low contrast between the two colors. I recommend changing the background of the navbar to a dark color, then reducing the opacity to near transparency. So, something like

.navbar {
    background: rgba(34, 34, 34, 0.3);
    border: none;

This provides just enough contrast to improve readability.

Next, you’re navbar links are not collapsing for mobile users. To fix this, you need to add first JQuery then Bootstrap’s Javascript file in your pen’s Javascript settings (always put JQuery before Bootstrap’s own JS, as BootstrapJS depends on JQuery, so JQuery has to load first). Then, add this in your navbar-header div, right before your navbar-brand link

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

Finally, wrap your ul links in a div with the classes “collapse navbar-collapse” and an id of “navbar-collapse”. It should look like this:

<div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav navbar-right" id="links">

You’ll have to adjust the padding in your navbar after the collapse, but this is pretty standard when designing with mobile users in mind.

The “Click pls” button in the main section should really do something when clicked. I clicked it and felt confused at first when nothing happened (“Is a plugin on my browser breaking something? Something should happen, right?”) to dissatisfied when I realized nothing was going to happen. And it should be “stopping” not “stoping”, but I’m not sure if that’s deliberate.

Finally, the quote under your ‘Testimonial’ section is running off the right side of the page when the view gets smaller, and the “Read More” links are misaligned in the “About Me” section, floating to the left when they should be in the center, directly under the paragraphs . I think you need to rethink the column layout for those section when the view switches to mobile and tablet sizes. Again, this is something that’s standard when designing responsively.

Other than those things, it looks really nice. It’s very clean and modern, with a great layout and color scheme, and it looks very professional. I like it!

Looks great! Though the nav links didn’t work on my iPad

Thank you very much for your constructive reply, i really appreciate it :).

Yep i agree, hover color of nav links is awful, and i tried that background but in this project i wont go for that navbar stripe on top, so i put some background color on each link that appears when hover. I copy paste that code for collapsing navbar into “hamburger” and its working :D, just needs some positioning and color changing, thank you for that.

English is not my first language so sorry for that, i am trying to get better at it but its pretty hard :), should’ve spell check it but probably was lazy. Didnt thought about button, maybe should i put some modal with message to open when clicked. There are lot of bugs on mobile and tablet sizes i am aware of that, i will take my time to solve the issues and more important understand it why they appear.
Thanks again for you message, wish you all best! :slight_smile:

Thank you very much, it really means a lot :), yea there are lot of things that are broken at the moment.