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.
So what's happening here?
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.
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 🧀.
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.
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.
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.
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 (9)
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.
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
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.
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.
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.
I’m glad I could help 😀
I'm also trying to build my own resume in html, in a4 pages, but I'm encountering issues when splitting the pages. For the time being I'm trying to use js to automatically place text in one page or another.
the print media query is nice, hadn't seen that before :)
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.