DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Building an A4 resume to add to your website (and making it printable)

Hi, and welcome to my first ever blog post.

I'm Cooper, a developer from Melbourne that recently started looking for a new job, so while I am redesigning and building a new Portfolio Website I thought I'd share some knowledge.

One of the main goals was to build a resume into my website, but one that would be in the A4 format, making it easier for potential recruiters or employers to save as a PDF or print off (for those truly retro organisations).

TL;DR if you just want to see the code repo, or visit the published site it's here

I recently learned a bit of SASS so I've used that, nested styles alone worked wonders rather than having to class up every individual div, so SASS is bae ๐Ÿ’๐Ÿผโ€โ™€๏ธ.

Once it was built I transposed it to my Svelte portfolio, I won't go into detail there but I will cover the Gotcha later on that tripped me up for a few hours.

First things first, you need to create the page template, in your HTML body create a container div (I called mine resumeCanvas, but you do you), in the SCSS we create a canvas to paint our masterpiece on.

Canvas

So what's happening here?

  • Box-sizing - border-box we ensure everything stays within the chosen dimensions.
  • Margin - at 0 and auto sets everything to the center.
  • Padding - this one sets 0.3 of an inch between the border and the insides, you can add a bit more like maybe 0.5 but I ended up shortening it because I ran out of enough room in the end.
  • Width & Height - these are the important ones, I did a bit of research and got the Width & Height for an A4 page (ok there might be a slight discrepancy but it won't matter when we set print properties).
  • Background-color - this should be white, you could make this any colour you want but remember it should be made with printing in mind so try not to think dark mode here.
  • Box-shadow - this give a nice little grey outline on the webpage to differentiate itself from the background page.

    grid me

    Great! at this point, we have a nice little A4 sized page, now how do we fill it?

    Well as we are using a fixed size that isn't designed to be responsive and we need a layout, a grid is the perfect solution...

    Grid you say...

    Think I just heard a collective sigh

    Well, don't worry my friend because there is a superstar out there called Sarah Drasner (who also has an amazing portfolio), that created a grid template generator site just for us.

    grid maker

    As we can see above, I went for the header for my name, a left panel for all the guts, and a right panel to display all the links (this I later changed to a set pixel length as I found things moved around as I sorted out the canvas width and height over the time of the project). But however you want to layout your project, this is how you do it.

    Now go on and click that Please may I have some code button, and get that cheddar ๐Ÿง€.

    grid code

    I went on and renamed parent to gridParent, div1 to titleHeader, div2 to leftSummary and div3 to rightInfo just to help myself from getting confused. Naming conventions and all that.

    Pop that into your CSS/SCSS file and create those divs in the HTML file and you're all set up to fill your HTML file with your resume data.

    This is the fun part ๐Ÿ™Š and I'll leave that part up to you.

    spongebob 'several days later' meme

    I won't lie, that part takes some time, not just the words but also some styling, since I hate boring black and white documents I added in some rainbow interactive elements on hover, but these won't show when a document is printed out.


    At this stage when you have your page generated and run your OS's print command you should have a perfectly A4 sized PDF/Print page.

    And it was perfect, till I transposed it into my Svelte app, then I had all sorts of problems as it didn't just grab the desired div, it started cropping from the top left-hand corner of the page.

    print offset

    This is where I learned about the print media query, and this can be done two ways but the other was a lot more heavy-handed for what I was trying to achieve.

    By adding the tag into your header you can create a whole different stylesheet, this would be good if you wanted to design a pretty website style resume and then have the alternate code in that style sheet that would only display when it was called to be printed off (and I'll explore this option later).

    <link rel="stylesheet" type="text/css" href="print.css" media="print">
    

    But since I just wanted to print it off as is we just add the @media print {} block in the section or CSS/SCSS file of the Svelte page, and target the parent div class (what I renamed resumeCanvas) and it ignores everything higher up the tree.

    The other little gotcha I mentioned earlier was getting the formatting right once I transposed everything to my Svelte app, and thanks to another CSS superstar Rachel Andrew (website), I read that the page needs to be defined according to the dimensions we set in the Canvas, as demonstrated in the code below.

    print media code

    Setting @page { size: 8.5in 12in; } to match made it fit like a glove.


    At this stage, I can't yet link the Svelte app as it's still under construction, but when it's ready it'll replace my current website, so maybe keep checking back.

    If there are any questions, or if I could've done anything better, reach out to me.

  • Top comments (8)

    Collapse
    khrome83 profile image
    Zane Milakovic

    What a great example of grid, to use html to create a page layout.

    Nice work!

    You can also have your print query hide your header and adjust margins to make it so the only thing on the print is the resume itself.

    Collapse
    coopercodes profile image
    ๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ Author

    That was what I originally tried to do when I put it in my Svelte app, but as Svelte is structured differently and changes names I couldnโ€™t target those parts to ignore.
    So after struggling with that for a while I found you can target things you only want to print.
    And it fixed my conundrum

    Collapse
    khrome83 profile image
    Zane Milakovic

    You should be able to โ€œdisplay:noneโ€ items in a print media query.

    You just need to have a class on those items. I have not see this with svelte.

    Honestly though, I typically write a print style sheet outside of svelte and just attach it globally.

    Thread Thread
    coopercodes profile image
    ๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ Author

    Yeah, it worked fine as a simple HTML and SCSS page, but I couldn't target higher up the tree in svelte I think because they are components and they just weren't being picked up.
    So I went the other way and just targeted what I needed to... ended up being less code than the other way too.

    Collapse
    ajwurts profile image
    Alexander Wurts

    I have been looking for this everywhere. I have a website theresumace.com that is a full stack resume creation software. I have a sketchy way of defining page size, but this looks like it'll work perfectly.

    Collapse
    coopercodes profile image
    ๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ Author

    Iโ€™m glad I could help ๐Ÿ˜€

    Collapse
    joshteperman profile image
    JoshTeperman

    the print media query is nice, hadn't seen that before :)

    Collapse
    coopercodes profile image
    ๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ Author

    Neither had I, there are a few other things Media Queries can actually do.

    They might actually come up in another project I'm working on.

    ๐ŸŒš Browsing with dark mode makes you a better developer by a factor of exactly 40.

    It's a scientific fact.