Thoughts
☀️🌚

05 July 2022

Build web enabled CV

I have been constantly applying for jobs since 2014. And every time I had to update my résumé I had to locate the source file. Most of the times, I might loose it due to saving it at different locations or I might not be able to find the latest version.

In short updating a résumé was a tedious task for me. And It is!

Most of the times we have to edit our résumé in a very short period.

For all the impromptu and most awaited opportunities, I wanted to make it easy to keep my résumé updated and make it accessible to me all the time. So, I thought of hosting it on my website.

My résumé is available here. The web version gives me a lot of flexibility.

  • Edit it on the fly.
  • Pass it to anyone as a link.
  • Print it anywhere without having to access your drive on an insecure network.
  • I don’t have to remember to update the right file which has all the latest changes.
  • I can have a separate layout for printing and viewing.

Inspiration

Mac App Pages has been my source of my inspiration. I have used it extensively to create my résumé. It seamlessly adds the content to the document. We can use the GUI for the placement of the content (Everything including text is a movable object. It hold all the content in form a box-layout and these boxes can be moved with a drag and drop). It was less explored but far better than its other alternatives.

Two column layout for Screen Media

I am using flex-box as a basic layout of my resume. The left column has my experience and right column has skills. As my experience is much more verbose than the skills 😜, I have divided the page layout in 7:3 widths.

Web View

Two column split view layout for Print Media

page - 1 Left and right containers with 7:3 widths.

page - 2 To keep my résumé relevant and precise I wanted to maximize the use of the page 2. The print view has equally-spaced two columns filled with my experience information.

To achieve this I had to break the content into two different pages. Age old strategy - Enclose the content into two different containers.

jt.html

<divclass="container"><divclass="left-container">...</div><divclass="right-container">...</div></div><divclass="container pagebreak page-two"><divclass="half-width-container">...</div><divclass="half-width-container">...</div></div>

index.css

.pagebreak{clear: both;page-break-before: always;}
Page 1 and Page 2 of print view

Export as PDF

I have added a button to trigger the print view of the html page. This method initiates the browser’s interface for the print view.

<buttonid="print"onclick="window.print()">Print</button>

How and Where to host this app

Github pages are a very easy and free options. Follow these steps to host a website. I am using using Github for hosting my domain’s landing page and Firebase for hosting this blog.

Resources

* * *