9

A friend of mine has a personal website, including a CV laid out on a page of that site (i.e. not a downloadable PDF/ODT/DOC) document. I want to help them spruce up that page somewhat.

Now, this could be made into a more complicated question if I said I also wanted the style of the CV to match the basic style of pages on that website, but let's forget about that for now, and just ask: Is there a utility, or web app, which can be given a CV (in any format - in a JSON file, by feeding into some web forms etc.) and lay it out elegantly in static HTML+CSS?

Notes:

  • The result must have no Javascript, animation or animation-like effects (i.e. no "onmouseover", no CSS hover pseudo-elements etc.). So, "static" in the strong sense of the word.
  • Naturally I'm interested in producing an academic CV, but if I had something for a non-academic CV I would probably be able to adapt the generated HTML for my needs, or whatever.
17
  • 4
    You can find templates from site generators like Jekyll and Hugo, for example al-folio or Hugo Academic.
    – GoodDeeds
    Commented Sep 17, 2022 at 17:50
  • 2
    I am not sure I understood you, those templates do generate fully static HTML pages from config/data files populated by the user. You can configure the output to be on a single page entirely if you like. There is no need to edit HTML directly anywhere unless you want to specifically customize something.
    – GoodDeeds
    Commented Sep 17, 2022 at 22:02
  • 1
    I have personally only used Hugo Academic, and IMHO its documentation details the steps quite well. But the example site is a static site -- there is no backend, nothing is generated dynamically -- so maybe I am still misunderstanding your requirements.
    – GoodDeeds
    Commented Sep 17, 2022 at 22:18
  • 1
    I think that ORCID is what you are looking for. However, it generates their website, not your website. If you must control the site yourself, hand written HTML is still the way to go. Commented Sep 17, 2022 at 23:25
  • 3
    @einpoklum Usually by "static" people mean "served directly from HTML/JS/CSS files on disk, not generated on-the-fly by PHP/Python/etc (and a database) when the client requests a page". If your concept of "static" includes "no Javascript", then I suggest you make it clear. Commented Sep 18, 2022 at 18:02

2 Answers 2

9

Based on your requirements, markdown-cv seems like a good option.

To use it, you write the CV in Markdown (the same format that's used in Stack Exchange), and use Jekyll to convert it to HTML. Documentation can be found here.

Screenshots for reference:

Markdown Input: Example Input

Rendered Output: Example Output


I have no affiliation with this software.

2

My read on your question suggests to me that you could start at the basic level with raw HTML. Let's stay platform agnostic in your workflow.

  • Get a text editor that promotes its ability to work in raw HTML.
  • Review an on-line tutorial that instructs how to work with the beginning elements in raw HTML.

The most basic format will have HEADER and PARAGRAPH elements as its only input. You may eventually include LIST elements. HEADERS would include such things as Education, Experience, Publications, Proposals, and Professional Affiliations. PARAGRAPHS and LIST elements would be under these headers. All the effort at this stage is simply to copy + paste the current information into the new HTML.

Once the basic HTML works and has all the content required, move to formatting. The standard approach for this is to incorporate a CSS style header or CSS style file. Will you need lots of CSS styling commands? Not really. Define the text size and font face in each ELEMENT (HEADER, LIST, PARAGRAPH). One distinct advantage with HTML (over PDF) in this case is the ability to use relative font sizes, allowing the person viewing the page to scale for their own needs. One certain reason also to include a basic CSS is to define the view for different platforms such as desktop versus tablet versus mobile device.

Can this process be automated? Perhaps. But ... for what you are asking ... the time you would invest to find, set up, and establish proficiency with an automated tool is likely not minimal. Alternatively said, you can probably find a good application that will allow you to do WYSIWYG layout designs of Webpages, but it will likely over clutter the source with its own ELEMENTS (e.g. SPAN, DIV, ID), perhaps include additional page settings (e.g. width=...), and maybe even end up putting in javascript code. By implication in you posting, you are seeking to avoid this. Also alternatively said, you may find a tool that will allow you to take the current input, run it through a filter, and have it automatically produce a new HTML to a different format. Then you will likely have to learn how to design your desired filter for old -> FILTER -> new.

You may struggle with raw HTML editing to achieve elegance in the Webpage design. Be prepared at that point to need additional CSS ELEMENTS. Rather than learn how to do this with raw HTML on your own, consider two options. Find a professionally designed template that provides what you want. Copy and paste the content from the old CV to the template. Otherwise find a WYSIWYG Web page design application, layout the content in the format that you want, push a button, and get a Webpage. The advantage is that you can format in almost any way you want.

As to adding content dynamically to HTML, the only way to do this is using a server-side script method. One example is to allow your friend to keep a CSV file for publications, download that file to the Web server, and have the Web CV automatically update with the most recent list. This avoids the need for anyone to have to re-edit the raw HTML later, e.g. simply to add a new publication to a list. This step could be a later investment in your effort, but only when you have confirmed that the server can support server-side delivery of scripts.

In summary, an automated tool to convert from an existing format to a new format may not exist or simply be too much work. Doing raw HTML coding is the most future-proof approach. It may however not provide you with an end result that you consider to be the most elegant. If so, consider copying into a template or using a WYSIWYG application. Finally, assure yourself that someone else (e.g. especially the owner of the CV) will be able to reproduce the approach that you take to put content together with format, especially if you will not be responsible to update content later.

9
  • Even if you use raw HTML, I would suggest to use a CSS framework like Bootstrap, otherwise it becomes difficult to make a website that scales well to both desktop and mobile. Commented Sep 18, 2022 at 18:09
  • 1
    I've done this (many times, many sites) and my results are anything but "elegant", especially since I have a geeky mind-set, not an artistic one. It is pretty hard for a beginner, especially a geek, to get an elegant result.
    – Buffy
    Commented Sep 18, 2022 at 18:47
  • @FedericoPoloni Added note to support your comment. Commented Sep 18, 2022 at 18:50
  • @Buffy The OP thankfully did not ask for or define a level of elegance. We might spend hours otherwise bouncing this question on and off the list because the answers for what application to use to obtain the most elegant site will always be subjective. Commented Sep 18, 2022 at 18:54
  • Hmmm. I can't define elegance, but I know it when I see it. (Misquoting Justice Potter Stewart)
    – Buffy
    Commented Sep 18, 2022 at 18:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .