These are 3 steps on how I build this site: http://resume.topman.com.np

Bootstrap template

I use an official free bootstrap template and simply modify the content only. This template is a resume template. This is the link to the template: https://startbootstrap.com/themes/resume/

Popup links using CSS position property

I have used two popup links in the right side of the viewport (visible screen). In order to achieve it, I have used position property set to fixed, right to 0 and top to 50%.

According to w3schools document, there are five different position values for position property. After using the position property then only top, bottom, left and right properties can be used in order to position the selected element.

• static: it is positioned according to the normal flow of the page and it is the default value. For static value, top, bottom, right and left values doesn’t work.
• relative: it is positioned relative to its normal position in the page.
• fixed: it is positioned relative to the viewport (visible area of web page). So, here, the element which applied this value will stay at the same place even though the page is scrolled.
• absolute: it is positioned relative to the nearest positioned ancestor. But if there is no positioned ancestor, it uses the document body and it will move along with page scrolling. For an example, check it here: absolute example 
• sticky: it is positioned based on the user’s scroll position. The element switches from relative to fixed when the value given for top, bottom, right, left is met.

CSS minifier

The new css file called ‘custom.css’ is created to give design to the two popup links. But for the hosting, a minified version is used called ‘custom.min.css’ which basically doesn’t contains extra spaces and comments. You can use following links in order to minimize the css.

• https://cssminifier.com/
• https://www.freeformatter.com/css-minifier.html
• https://css.github.io/csso/csso.html