Some tricks when coding your own portfolio

Why does an online portfolio matter? Because it reflects a person’s professional attitude towards working culture. When someone wants to view your work, projects or simply your profile, they need the actual information about you. Of course, you can show them a link to your LinkedIn’s profile, your GitHub’s account or even your CV if you want. But all that visual information cannot describe you fully, especially when you are a developer. An online portfolio containing your own tailored design and information will help you stand out from others. You can show your work, your aesthetic design and your coding skills with amazing effects.

I understand at some points that when you first design your page, you don’t know how to properly proportionally put your divisions <div> , so the easy way is to set the body of the HTML document to 100% of height and use it as a base for sizing elements.

But, be careful when using that technique. When you set the html and body CSS’s height property to 100%, despite the existence of the scrollbar when the main content exceeds 100% height, you cannot use the scrolling method provided from JavaScript as window.scrollTo or similar scrolling methods (even from external libraries).

The reason behind this is that the scrollbar is internal container element’s with CSS’s overflow-y: auto property.

Consider this situation as an example:

Jquery is an awesome front-end library that I love using, but we should avoid using it in React. There are many articles writing about this issue since the workflows of those two libraries inflict each other. I found a very nice article about the problem at https://medium.com/@wisecobbler/if-you-think-you-need-jquery-in-your-react-app-you-re-doing-it-wrong-77899ed7217e.

When we build our portfolio, we should build for both laptop (or larger devices) screen dimensions and mobile screen dimensions. With that responsiveness, people who visit our website will see our dedication and also profession.

There are many designs for mobile versions, but in my application, it follows a basic flow as below:

As you can see, in the ‘Extending stage’, there is a right sliding panel, which will act as a Header in the website. When a user opens this panel, you don’t want to make your screen scrollable because it will be a bad UX design. The screen should stop where it was so the user can get back to it once he or she closes the panel.

To achieve the action of stopping scrolling, there are ways. You can use JavaScript to prevent scrolling (this is not recommended as DOM events cannot be unbind and this way will work in certain contexts), use CSS to set the html and body ‘s position property to fixed (but this will transit the current screen to the very top, which means bad UX) or you can set the overflow property in the element which contains the scrollbar to hidden (but still it won’t guarantee to work in Safari or mobile browsers).

Above are some tips that I gained on the way coding my online portfolio. I hope those little tricks can help you with your own websites at some points. Thank you for reading this article 😊.

Related posts:

I loved it! I been hearing about him for a very long time. I follow Qanon posts. They love him. He is like royalty. In the Qanon world. He once said TRUST THE PLAN online. But later said it was a…

According to most estimates, two-third population of Pakistan is under the age of 30. This means that roughly 120 million people are under that age, with many of them educated, yet without any…

30-year fixed avg rate down 0.01% on week, down 0.50% on year. “Mortgage Rates Drop for Fourth Straight Week” is published by Winston Robson in Regarding Real Estate.