Figma Design for Single-Page Web CV

[mblomdahl]

I noted down some thoughts here earlier today, https://github.com/mblomdahl/cv/commit/d87adc8b25b1f2a9e5c9f91db16d2bf4ce21b34a, on the purpose/scope of the CV repos. With this in mind, I would like a design that presents Liza's CV as it is now in 240822_CV--Liza-Blomdahl-Olsevskaja.pdf, but as a modern React web application.

Requirements:

• Looks as the original (or better!) on different desktop browser screen dimensions
• Easily readable on mobile/tablet, but content must be structured a bit differently than the PDF version
• Eye-pleasing in terms of CV formalities & formatting
• Printable/exportable to A4 paper/PDF somehow (most pages look really awful when you press ⌘+P to print, but I've seen good examples too, like the Skatteverket tax forms, maybe the React-pdf renderer can be used to create a PDF file instead of relying on system print dialog...?)
• Quality aim should be to eliminate any need for maintaining the original PDF side-by-side with the web-based CV

Additional nice-to-have's:

• A short bio/intro section, like they have on LinkedIn; this can (should) be excluded from PDF export to keep the "HR audience" scan un-cluttered
• A profile photo/avatar somewhere, excluded on export
• A list of reference projects, like so (possibly excludable on export):
  • https://cool-site.tech – A FinTech FX platform I spent 2 years developing (closed-source in @purple-tech)
  • https://app.owntube.tv – A Video Platform where I'm the 2nd top contributor (open-sourced in @OwnTube-tv)

[mblomdahl]

From @mkl-adsn on September 22nd:

I just finished up the first design iteration for the CV site. (4 hours spent so far). Design mostly feels done but I'm missing a photo of Liza for the start page. If one of you can send that over to me I'll isolate it and create a nice composition of it for the hero.

On desktop, the site uses a 6-col grid to arrange the elements. Max content width is 1200px and the content area should be scaling responsive down to 1023px when it should switch to the tablet/mobile layout.

As for the print design, I kept it pretty clean and simple to make the pdf generation simple. The actual font size and page size values in Figma will probably need to be tweaked to fit with the pdf generation code as Figma always uses pixels while print styling uses cm/mm and points.

Clickable prototype links below containing the start page and the project page. Let me know what you think!

Desktop: https://www.figma.com/proto/m9dxY4C87AiwRn8qyzDHs9/Liza-CV-Site?page-id=0%3A1&node-id=109-1451&node-type=canvas&viewport=1416%2C497%2C0.29&t=wI8NBA2sEe0hyPO0-8&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=109%3A1451&show-proto-sidebar=1&hide-ui=1

Mobile: https://www.figma.com/proto/m9dxY4C87AiwRn8qyzDHs9/Liza-CV-Site?page-id=0%3A1&node-id=109-2603&node-type=canvas&viewport=1416%2C497%2C0.29&t=wI8NBA2sEe0hyPO0-8&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=109%3A2603&show-proto-sidebar=1&hide-ui=1

Print: https://www.figma.com/proto/m9dxY4C87AiwRn8qyzDHs9/Liza-CV-Site?page-id=0%3A1&node-id=109-2210&node-type=canvas&viewport=1416%2C497%2C0.29&t=wI8NBA2sEe0hyPO0-8&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=109%3A2210&show-proto-sidebar=1&hide-ui=1

Ping @okaziya FYI.