How to Display Your CV in a User-Friendly Reader Format on (Almost) Every Browser with Hugo

hugo html

Have you been in this situation? You browse someone’s website, you click on the big, promising button displaying “CV” and … whoops, you have downloaded “someones-cv.pdf”.

Well, PDF is a somewhat suboptimal format for browsers, each browser seems to handle PDFs differently per default, as special plug-ins are required.

In this short tutorial, I propose a solution that lets almost all browsers display your CV in a nice, frictionless format - without unintentional downloads.

You can take a look at the solution here, since I recently published a public CV to this site.

How it works

The trick is that we will embed an online PDF reader inside the frame of a HTML document. At the moment, Google Docs is the only service I know of who offers a pdf reader which only requires a public URL. This means, one does not have to upload their PDF to Google Docs, but can open any publicly available PDF in their browser like this:

https://docs.google.com/viewer?url=https://website.com/directory/file.pdf&embedded=true

Now, we just embed this viewer in our HTML document. In this example, I edit my CV with GitHub in this repository, using a recommendable R-Markdown template by Daniel Anderson.

<object
    data="https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf"
    type="application/pdf">
    <iframe src="https://docs.google.com/viewer?url=https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf&embedded=true"></iframe>
</object>

Scaling the window to 100% and creating a disjunct html file in Hugo in /static/html/cv.html, the complete document looks like this and can then be linked across my website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
  <body>
<object
    data="https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf"
    type="application/pdf">
    <iframe src="https://docs.google.com/viewer?url=https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf&embedded=true"></iframe>
</object>
<em>
    <p>Did Your browser download my CV without You intending to?
    If You are using Chrome, you can disable automatic downloading
    of PDF files. Afterwards, You should see my CV in a PDF reader,
    requiring no download.</p>
    <p>
    <a href="https://cborchers.com/2021/01/03/how-to-display-your-cv-in-a-user-friendly-reader-format-on-almost-every-browser-with-hugo/" target="_blank">For more information, please refer to this blog post.</a>
    </p>
<em>
  </body>
</html>

As you can see, I added a note for users which have to turn off automatic downloading in their browser settings in order to display the page correctly.

Final thoughts

In many regards, PDF is outdated but as of now it seems like it will stick around for a while. Let’s make the best out of this situation and minimize the risk of unneccessary downloads.

Questions? Thoughts? Generate a Comment to this Post!


Enter Name:


Enter a Title for Later Reference:


If Applicable, Enter Reply Reference:


Enter Comment:



JS Code to Create and Format Comments in Static Websites like Hugo

hugo js

Code to automatically generate a search bar in JS from XML page content in Hugo

hugo js r

Code Snippet: How to Embed a Jupyter Notebook in Your Hugo Static Website

code-snippet hugo python

Search this Website