Display CV from PDF file

[DoHaiSon]

Is your feature request related to a problem? Please describe. Now, the CV page is including the icon of CV.pdf and the rest of things written by .md file. I think it becomes superfluous. The CV often in pdf format, and why we have to transform it to .md file. It looks worse.

Describe the solution you'd like I think an option that just show the CV page as page include a content (CV.pdf) is much better. Moreover, it's easier for everyone.

Additional context al-folio version: latest My github page: https://dohaison.github.io/

[josephcarragher]

Seconding this--having the CV header button go straight to a PDF is much more streamlined.

[IamShubhamGupto]

Rather than having CV as a separate tab, can we have the CV PDF icon near social integrations page? Like discord, google scholar etc

[DoHaiSon]

The easiest solution is adding a permalink to CV tab for redirecting to pdf file. Like what I did in my website: https://dohaison.github.io/

Click to More an select CV and see the result.

[IamShubhamGupto]

For now, I do not see a better implementation so I will be using your method.

Rather than having CV as a separate tab, can we have the CV PDF icon near social integrations page? Like discord, google scholar etc

This is more of a general idea for future releases of al-folio

[DoHaiSon]

For now, I do not see a better implementation so I will be using your method.

Rather than having CV as a separate tab, can we have the CV PDF icon near social integrations page? Like discord, google scholar etc

This is more of a general idea for future releases of al-folio

Thx Shubham, that looks nice..

[IamShubhamGupto]

Hey @DoHaiSon

Could you share a code snippet on how to add the permalink? I can't find it on your GitHub profile

[DoHaiSon]

Hey @DoHaiSon

Could you share a code snippet on how to add the permalink? I can't find it on your GitHub profile

Of course, I had a dropdown list named More. In this droplist, CV just a permalink as the file below: https://github.com/DoHaiSon/dohaison.github.io/blob/source/_pages/more.md

[qinlicomm]

Hi @DoHaiSon, I encountered the same issue and figured out a way by looking at other Jekyll themes. Basically if you change the layout for the CV page, you could display a PDF of your CV with a PDF reader.

1. Edit the cv.html file and replace the content with the following html content. The cv.html file should be in the _layouts folder.

<!-- cv.html -->
      <div class="post">
            <header class="post-header">
            <h1 class="post-title">{{ page.title }} {% if page.cv_pdf %}<a href="{{ page.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" class="float-right"><i class="fas fa-file-pdf"></i></a>{% endif %}</h1>
            <p class="post-description">{{ page.description }}</p>
          </header>

          <div class="clearfix">
            {{ content }}
          </div>

</div>

2. Remove the content in your cv.rm file and add the following lines instead.

<div style="width: 100%; height:800">
<iframe src="path_to_your_pdf" width="100%" height="800">
Please click on the icon on the top right to download my CV if it does not show up in your browser. 
</iframe>
</div>

[DoHaiSon]

Hi @DoHaiSon, I encountered the same issue and figured out a way by looking at other Jekyll themes. Basically if you change the layout for the CV page, you could display a PDF of your CV with a PDF reader.

1. Edit the cv.html file and replace the content with the following html content. The cv.html file should be in the _layouts folder.

<!-- cv.html -->
      <div class="post">
            <header class="post-header">
            <h1 class="post-title">{{ page.title }} {% if page.cv_pdf %}<a href="{{ page.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" class="float-right"><i class="fas fa-file-pdf"></i></a>{% endif %}</h1>
            <p class="post-description">{{ page.description }}</p>
          </header>

          <div class="clearfix">
            {{ content }}
          </div>

</div>

2. Remove the content in your cv.rm file and add the following lines instead.

<div style="width: 100%; height:800">
<iframe src="path_to_your_pdf" width="100%" height="800">
Please click on the icon on the top right to download my CV if it does not show up in your browser. 
</iframe>
</div>

Thank for ur sharing. I saw this updated from ur page. That looks good.

However, I realize that a .pdf content inside a page is worse than open new separate page for CV. The drawback is that it's not included the GG analytics js.

[IamShubhamGupto]

It would be nice if we didn't have to use the dropdown menu and directly open the pdf file from CV tab

[jmrplens]

In the meantime, I have proposed a redesign for the CV written in markdown.

More info: #1339

[IamShubhamGupto]

Hey @jmrplens the redesign looks great but I guess what me and most other people are looking for is a direct display for the pdf. It takes a lot of effort to generate the .yml file.

If possible, do you think there can be a pdf parser that approximately generates your .yml? then #1339 is still a good alternative

[jmrplens]

@IamShubhamGupto It can be done, there would be hard work to do but there are options to implement it.

In js:

• https://github.com/modesty/pdf2json

In Ruby:

• https://github.com/jameshamann/pdf-parser
• https://github.com/kei178/ruby-pdf-parser
• https://www.ruby-toolbox.com/categories/PDF_Processing

[IamShubhamGupto]

Hi @DoHaiSon, I encountered the same issue and figured out a way by looking at other Jekyll themes. Basically if you change the layout for the CV page, you could display a PDF of your CV with a PDF reader.

1. Edit the cv.html file and replace the content with the following html content. The cv.html file should be in the _layouts folder.

<!-- cv.html -->
      <div class="post">
            <header class="post-header">
            <h1 class="post-title">{{ page.title }} {% if page.cv_pdf %}<a href="{{ page.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" class="float-right"><i class="fas fa-file-pdf"></i></a>{% endif %}</h1>
            <p class="post-description">{{ page.description }}</p>
          </header>

          <div class="clearfix">
            {{ content }}
          </div>

</div>

2. Remove the content in your cv.rm file and add the following lines instead.

<div style="width: 100%; height:800">
<iframe src="path_to_your_pdf" width="100%" height="800">
Please click on the icon on the top right to download my CV if it does not show up in your browser. 
</iframe>
</div>

Not sure how I missed this comment before, but this is the solution I was looking for. Thank you so much @qinlicomm !!

[ahmedchaudhryy]

Hi guys,

Thank you! I got a direct PDF link to my CV from the comments from this discussion.

Do you have any ideas on how to get the CV open in a new tab rather than the same tab?

Currently, I am using the following code in cv.md:

layout: page title: CV nav: true nav_order: 2 permalink: /assets/pdf/Resume_Chaudhry.pdf

[DoHaiSon]

Hi guys,

Thank you! I got a direct PDF link to my CV from the comments from this discussion.

Do you have any ideas on how to get the CV open in a new tab rather than the same tab?

Currently, I am using the following code in cv.md:

layout: page title: CV nav: true nav_order: 2 permalink: /assets/pdf/Resume_Chaudhry.pdf

Dear ahmedchaudhryy,

In my case, I put my CV into a dropdown menu, I modified a bit on header.html file to add the target="_blank" to .html file.

On the dropdown.md file, I added a small variable named newtab: true on the page that I wanna open in new tab, which is CV.pdf. The example file is as follows:

---
layout: page
title: More
nav: true
nav_order: 4
dropdown: true
children: 
    - title: Repositories
      permalink: /repositories/
    - title: Teaching
      permalink: /teaching/
    - title: CV
      newtab: true
      permalink: /assets/pdf/CV.pdf
---

And then, I modify the header.html file to check this trigger and add target="_blank" to href when the trigger is true: The old code: <a class="dropdown-item" href="{{ child.permalink | relative_url }}">{{ child.title }}</a> replaced by:

{%- if child.newtab %}
<a class="dropdown-item" href="{{ child.permalink | relative_url }}" target="_blank">{{ child.title }}</a>
{%- else %}
  <a class="dropdown-item" href="{{ child.permalink | relative_url }}">{{ child.title }}</a>
{%- endif -%}    

oke, that's all, you can check it out on my page: https://dohaison.github.io/

In your case, you don't use dropdown menu, so add a trigger and find out another part of header.html and modify it according to my method.

I hope it will work for your case.

[IamShubhamGupto]

@DoHaiSon Thanks for your help, I was able to get resume on the nav bar and open in new tab - https://iamshubhamgupto.github.io

[TheFermi0n]

I wanted the navigation bar cv to open the PDF directly in a new tab. But using the permalink method suggested above leads me to a warning as below:

Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.

Therefore, I have taken a different approach and modified my website as below:

Changes in the header.html

add the following lines below {% endfor -%} and above {%- if site.enable_darkmode %} in your header.html file

{% endfor -%}
{%- if site.cv_pdf %}

<!-- cv page -->
<li class="nav-item">
  <a class="nav-link" href="{{ site.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer">cv
    <span class="sr-only">(current)</span>
  </a>
</li>
{%- endif %}
{%- if site.enable_darkmode %}

Changes in the _config.yml

add cv_pdf: your_pdf_name.pdf somewhere in your config file

There you go, the PDF will now open in a new tab and you can safely dispose the cv.md and cv.html

Bonus: CV in the social icons

add this in your social.html

{%- if site.cv_pdf -%}
<a href="{{ site.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" title="CV"><i class="ai ai-cv"></i></a>
{% endif %}

[chongfengling]

I wanted the navigation bar cv to open the PDF directly in a new tab. But using the permalink method suggested above leads me to a warning as below:

Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.

Therefore, I have taken a different approach and modified my website as below:

Changes in the header.html

add the following lines below {% endfor -%} and above {%- if site.enable_darkmode %} in your header.html file

{% endfor -%}
{%- if site.cv_pdf %}

<!-- cv page -->
<li class="nav-item">
  <a class="nav-link" href="{{ site.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer">cv
    <span class="sr-only">(current)</span>
  </a>
</li>
{%- endif %}
{%- if site.enable_darkmode %}

Changes in the _config.yml

add cv_pdf: your_pdf_name.pdf somewhere in your config file

There you go, the PDF will now open in a new tab and you can safely dispose the cv.md and cv.html

Bonus: CV in the social icons

add this in your social.html

{%- if site.cv_pdf -%}
<a href="{{ site.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" title="CV"><i class="ai ai-cv"></i></a>
{% endif %}

Great! It works for me. BTW, if someone has header.liquid file likes me, make sure to replace "%-" and "-%" by "%". https://github.com/alshedivat/al-folio/pull/2048#issue-2068848635