Power Up Your CV With CSS(Part 2)
Impress employers with an accustomed and interactive experience
If you haven’t read Part 1, I strongly encourage you to work out the groundwork with it.
In Part 1, we’ve created a CV in A4 format using HTML and CSS and published it as a website 👈. It freed us from a word processor and opened the door of creativity to the decade’s old CV experience.
In Part 2, we’re going to power it up with a practical and fascinating function to impress your audience by presenting your remarkable achievement visually.
Table of Content
Section 1: Menu bar
Section 2: Popup window
Section 3: A small tidy-up
Section 4: Custom domain
Section 5: Secure the domain
Section 1: Menu bar
Let’s carry on the web CV created in Part 1 by git clone branch step_0 of Part 2 repository. To see the source code of the complete menu bar, here you go. 👈
Overview of the file structure.
.
├── css
│ ├── copy.css
│ ├── sidebar.css
│ └── snackbar.css
├── js
│ ├── copy.js
│ ├── print.js
│ └── snackbar.js
└── index.htmlStep 1: Sticky Menu
- sidebar.css
- sheets-of-paper.css
The key of the sticky menu is the property position: fixed in class icon-bar. Because we don’t expect the menu to include in the printout, we have to hide it with display: none; defined in the no-print class in the @media print block of sheets-of-paper.css. The rest of the styles are positioning and appearance control. Remember to import the Font Awesome CSS library for the menu icons <i class="fa fa-linkedin"> , <i class="fa fa-print"> and <i class="fa fa-clone">.
Step 2: Visit my Linkedin
- Simply a
<a>link in index.html
Step 3: One-click print
- print.js
To hook up the printer, we’ll write our first Javascript function. Don’t panic. You need to bind an onclick event to our custom function print().
In function print, window object will trigger the built-in printer function.
Hooray! We have created the first Javascript function.
Step 4: Copy url to clipboard
- copy.js
- copy.css
- snackbar.js
- snackbar.css
It is a handy function for readers to share a web CV hyperlink. First, we simulate a copy-text command. Then we send the copied value to a snack bar that pops up in an eye blink.
We add a <input> to carry the source text of the copy-text command. To hide the auxiliary field without affecting the copy-text command, we style it as opacity: 0; instead of display: none; in the class hidden-cv-url.
The notification message has two components. The CSS class governs the fade-in and fade-out effect, as well as the positioning. At the same time, the Javascript function showSnackbar manage the time control of three seconds.
Step 5: Wire up the bits
Before seeing the result, we wire up all the bits in index.html.
- Import
sidebar.css,copy.css, andsnackbar.cssin<head>section. - Import
Font Awesomeas an external link in<head>section. - Wrap the menu icons in a
<div>marked withno-printstyle. - Add a hidden
<input>with idcvUrlfor the web CV hyperlink. - Define a notification message in a
<div>with idsnackbar. - Import JS files
print.js,copy.js, andsnackbar.jsat the end.
Congratulations! 🙌 You’ve complete the first and vital milestone of the interactive web CV. In the exercise, we not only used elegant and practical CSS effects to create the sticky element, fade-in and fade-out control, and notification bar, but also wrote the first Javascript function to achieve more specific tasks.
Section 2: Popup Window
The whole idea of this tutorial is to break through the traditional CV format to present the best of you to the audience with ease. Here’s come the main course finally. This section will walk through four ways to show off the achievement in a popup window when we click on the predefined company names.
A popup window is nothing but a child window opened on top of the parent window. We ride on this feature as a container to showcase additional information besides a hyperlink. In our case, it could be a preview image of a website, and Android and iOS download preview and link, a pitch deck in a PDF format, a product video, or your popular Youtube videos. Again, we’re going to implement fundamentally. It is totally up to you to use any technical framework. And the context is only limited by your imagination.
Step 1: Website preview
Let’s implement the popup window with our first usage — to show the website/ product webpage you have contributed.
We will enhance the dull hyperlink by previewing the landing page of a website. In an interview, interviewers might not be free to navigate all the hyperlinks you’ve written. The easier interviewers to discover your work, the higher chance you catch their eyes.
.
├── css
│ ├── popup.css
├── js
│ ├── popup.js
└── index.htmlFirst thing first, in index.html we wrap ABC Company with a <button> given a unique id jobABC (line 39 in below code snippet).
Then we create a div block given a unique id popupABC. Yes, a popup is just a div block with fancy styles.
In the website preview, the popup shows an image initially. When the user mouse hovers the popup window, we dim the preview image and display a Go to website button in the centre.
Now we make the three components to build this feature. Refer to the followed code snippet.
- Add an
<img>in line 19 to carry the preview image. - Add the
Go to website<a>tag in line 25. - Add a close button in line 18.
Next, don’t forget to import popup.css in line 2 and popup.js in line 45 in the index.html.
We decorate the three ingredients with a container CSS class that dim the whole popup window by opacity: 0.7;.
To bind the cool effect to the content, we need a small piece of Javascript code. In popup.js, we instruct the ABC Company button in response to a click by setting the popupABC.style.display = "block", literally to show the popup window on the top of the parent window (line 3). The small close button on the top right corner is told to disappear by popupABC.style.display = "none"(line 4).
We always keep a mind of a comfortable user experience. In particular, an audience can close the popup by clicking any place in the parent window (line 6 to 10).
Step 2: Mobile apps preview
The followed example is specifically related to the mobile industry. We’ll show an Android and iOS app download preview in a tabbed popup window.
Similarly, in index.html, we wrap XYZ Company with a <button> given a unique id jobXYZ (line 32).
Then we create a div block given a unique id popupXYZ.(line 2)
Next an Android image is placed in a <div> given a unique id xyzAndroid (line 7) and an iOS image is placed a <div> given a unique id xyzIos(line 11).
The tabs effect is simulated with two buttons (line 16 & 20).
tabs.js controls the tabs switching effect. When a tab is clicked, the function hides all the tabs (line 4) and turn all the tabs colour to grey (line 13). Then the selected tab content is shown (line 12) and the button colour laminated to green (line 13).
Step 3: Pitch deck viewer
Contribution in side-projects is a credit to candidates. Let’s see how easy to embed a pitch deck in PDF format in a popup.
Find the project named Europe Hackathonin index.html and wrap the company name with <button id="prjDEF" class="btn">DEF Bank</button>.
An <embed> element where we specify the pdf file, alongside a close button, is added in a popup window. The behaviour of the PDF viewer is controlled by the parameters toolbar=0, navpanes=0, and scrollbar=0 . Meaning we turn it off in our case.
Step 4: Youtube viewer
How impressive if we can catch audience eyeballs by a product presentation or a tutorial in a video. Riding on our previous work, we place the iframe block obtained from the video provider alongside the close button in a new popup div block given a unique id popupDEF. Then we style the iframe container with the youtube-video-container defined in video.css.
Next, we attach the handlers for the company name button, i.e. <button id="prjIJK" class="btn">IJK library</button> and a close button respectively. As well as the popup close handler when user click places other than the popup.
.
├── css
│ ├── video.css (youtube-video-container CSS)
├── js
│ ├── popup.js (name button, close & cancel popup handlers)
└── index.html (popup block, name button, and imports)Fantastic! I hope the four kinds of presentation can help to catch the eyeballs effectively.
Section 3: A small tidy-up
Learned from part 1, we can publish the web CV straight on Github Page. It is brilliant in the sense that our CV is web accessible to anyone for free. The only flaw is the hyperlink, e.g. https://john-dow.github.io/cv, is less readable than a domain under your favourite name. In this section, we’re going to move our web CV to a personalised ❤️ web domain https://cv.johndoe.me.
Before we go further, we will update the favicon and title that appeared in the browser tab.
To make your favicon, search for favicon generator.
Place the glorious favicon.ico under the project root and tell index.html its file location. The question mark followed .ico is a little trick for Github Page to display the icon correctly. Last update <title> to your favourite choice.
At this moment, we have finished all the coding work.
Section 4: Custom domain
Domain name registration
You may know an Internet domain name is never free of charge. It is the only cost you need if you cherish an easy-to-remember URL for your web CV in this tutorial. A not popular domain name can be as cheap as a few bucks per year, while a hot one may cost you thirty bucks per year or even more. It depends on the popularity of the name and top-level-domain like .com, .net, .me, .io, etc. To register or not is totally up to you.
Custom domain
Let’s assume a domain johndoe.me has successfully registered. Next we’ll link cv.johndoe.me to <user-name>.github.io/cv2. In this case, we’ll create a sub-domain cv. You may choose any sub-domain such as the most popular www.
Step 1: In Settings > Pages, select the main branch and root.
Fill in our desired sub-domain, e.g. cv.
After we click Save, a file CNAME is created in the root folder of your Github project. This file is for Github Page routing, so we keep it intact.
Step 2: Login to your domain name provider, head to DNS Management (the location may vary from provider to provider, please consult the support team). Create a record of type CNAME, specify the sub-domain name cv , and point it to your Github URL, e.g. <user-name>.github.io. ⚡Attention! You must not include the project name in the URL.
Step 3: To verify the setup, type the followed command in your terminal to retrieve the DNS record.
dig cv.johndoe.me +nostats +nocomments +nocmdA successful response is like below.
; <<>> DiG 9.10.6 <<>> cv.johndoe.me +nostats +nocomments +nocmd
;; global options: +cmd
;cv.johndoe.me. IN A
cv.johndoe.me. 60 IN CNAME <YOUR_USER_NAME>.github.io.Beware the DNS record update can be a couple of minutes to 24 hours.
Section 5: Secure the domain
Our web CV is available on https://cv.johndoe.me, but the browser complains it is not a secure connection. Modern browsers mandate secure connections. It warns as Not safe when it talks to a website that the owner cannot authenticate by a third party Certificate Authority (CA).
There is serval paid CA services as well as a free Let’s Encrypt solution. I want to show you a completely free approach to get through this security issue. Cloudflare offers a free plan for personal use that fit our goal perfectly.
Step 1: Create an account on Cloudflare if you don’t have one. Log in and navigate to Add site. Fill in the domain, in our case, johndoe.me. It will retrieve the DNS records after a few minutes of scanning.
Step 2: It will instruct us to change the name server from our domain provider to Cloudflare. To achieve it, we’ll log on to the the domain name provider and navigate to the DNS management page (again, the location varies from different providers, please check with your provider). Remove the NStype records.
Step 3: Create the new NS record instructed by Cloudflare. Save your change. Beware it may take 24 hours to take effect.
Step 4: Head to Github Page, Settings > Pages , check the Enforce HTTPS option.
Clean browser cache and revisit the web CV.
Ta-dah, 👉https://cv.johndoe.me 👈 is protected with SSL.
Hooray! The very last thing is to update the Copy-URL-to-clipboard source field to the new URL.
Big claps to yourself! 👏 We’ve created a professional and remarkable web CV on a desired and easy-to-remember URL. It’s incredible not just because you got rid of the old fashioned CV but open the gate to bring creativity to your profile.
Let’s recap what we have done in this tutorial.
- Sticky menu bar (visit Linkedin, one-click print, copy-url-to-clipboard).
- Popup window (website preview, apps preview, PDF and YouTube viewer).
- Custom domain at
cv.johndoe.me. - Protect the website with SSL.
Complete source code of Part 2 👈
Thank you for reading ❤️, and I hope you enjoy the journey!
If you like the idea but too busy to create one, we are more than happy to help at hi@valubees.co.uk.
Disclaimer: This article is not affiliated with Github, Github Page or Cloudflare.
