#### 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
type="application/pdf">
</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">
<style>
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.content {height:100%}
</style>
<body>
<object
type="application/pdf">
</object>
<em>
of PDF files. Afterwards, You should see my CV in a PDF reader,
<p>
</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:

Enter Comment:

hugo js

hugo js r

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

code-snippet hugo python