Step 5: How to make a portfolio website that impresses hiring managers

This is step 5 of the road map to land your first (or next) job.

In this step you’ll get a walk through on why every professional needs a portfolio website these days as well as how to make one.

You’ll find guides on WordPress, Squarespace, Wix, and some quick-and-dirty pre-made portfolio sites.

“200 people applied, but he was the only one with a website.”

That’s what one of my old bosses said about me to a client (and childhood friend of his) over a celebratory beer when we kicked off the retainer. It was a content marketing job, and only 1 in 200 people had a website to showcase their skills—and a willingness to learn.

How many recent graduates do you know with their own website?

Not many, I’d wager. That’s the point.

Dive into this road map to leave the other 199 candidates behind whenever you apply for a job.

Table of Contents

The competitive advantage of a portfolio website

Choose your website platform

Option A: WordPress

Option B: Squarespace

Option C: Wix

Option D: Existing portfolio platforms

Create your homepage

Create your resume page

Create your portfolio page(s)

Create a blog (especially if you write)

Set up contact forms

f

Quality assurance (test everything)

The competitive advantage of a portfolio website

To be honest, most senior professionals in the marketing industry (my industry) are at the peak of their careers, but don’t have a portfolio website to call their own. They have connections and experience, but I have a platform to promote myself where they don’t.

I own a piece of real estate where my thoughts and my experience occupy the spotlight. Hell, I have two: one for potential employers to read my insights and one for my freelance customers to build trust with me.

I’ve been able to smirk in the face of 60-year-old consultants trying to chime in on website projects because I’ve built three of my own and they have… a LinkedIn profile with a 10-year-old picture that they’re afraid to update.

And that’s why you need a portfolio website when you’re just starting out. It’s louder than a resume or a LinkedIn profile, and it gets even more powerful when you combine it with both of those.

It says a lot about your character, including these things:

You're willing to work hard for recognition

Good websites aren’t easy or quick to make. Creating one tells hiring managers that you’ve put in a higher level of work just to get noticed in your career. Even if you don’t have as much experience as another candidate, you’ll show that you’ll more than make up for it with effort.

Your technical skills exceed other candidates'

Creating your own website means learning about website development, hosting, platform experience (with WordPress, for example), and even dabbling in graphic design. That speaks to your ability to oversee publishing, outreach campaigns, or even IT troubleshooting.

You take presentation and transparency seriously

You’d be surprised at how many people get hired just for being “presentable” instead of earning it. Show hiring managers that you check both of those boxes by displaying the best of your work in a curated portfolio. 

You have original thoughts

You’d be surprised at how few people out there actually reflect on their experiences and think critically about what they’re doing, where they’re going, and how their relationships work. Voicing your experiences and reflections makes you look smarter than 90% of other candidates out there.

You invest in profesional growth

Showing off your completed projects and skills demonstrates that you seek growth consistently. Hiring managers usually want people with that mindset in order to bring fresh ideas to the table and grow with the company.  It also speaks to an inner drive that goes beyond just cashing a cheque.

You have ambition and a vision

Job seekers with an internal compass and an idea of who they want to become are far more appealing to most hiring managers than people who will just push buttons if they’re told to do it. Employees with vision just go out and do it rather than sitting around waiting to be told.

All of those points contribute to your perceived value by hiring managers and recruiters, which goes a long, long way toward getting your foot in the door. As I mentioned in the introduction, I got a job after months of unemployment because I was the only candidate out of 200 other applicants who had a website.

After your resume and LinkedIn profile, this is probably the single best thing you can do to improve your personal brand.

Pro tip: you may be wondering why this is the fourth step in the road map instead of the second or third. That’s because building a website takes time, effort, and a learning curve.

It’s a better use of your time to and energy to upgrade your resume and then amplify it over LinkedIn and Indeed first, rather than waiting for months to start putting yourself out there just because your portfolio website isn’t done.

You can start promoting yourself while you work on your website, this way. You can even point toward it as a portfolio project you’re working on, if a hiring manager or recruiter ask.

Choosing your website platform

This is the exciting bit—choosing where your portfolio website will live and how you’ll build it. There are a lot of options out there, each with varying levels of difficulty and payoff.

A lot of prebuilt platforms out there are built for specific niches that translate to screens easily—designers and photographers, mostly. I’ll include some of those, but I want to focus on the well-rounded platforms that will let liberal arts grads do what they do best: write.

A word to the wise: start with something closest to your skill level and focus on what you want to say. You can always choose a different platform to host the text, images, and fancy visuals later, if you want.

We’re boiling it down to 3 main choices.

We’ll also cover some quick-and-dirty portfolio networks if you really are that strapped for time, but those come at a dime a dozen. Creating a real website to call your own is where the true value lies, so we’ll focus on that.

WordPress

About a third of all the websites in the world run on WordPress, and for good reason. It’s open-source software with the biggest ecosystem of themes and plugins in the world. If you want custom functionality or a free theme, you’ll find it with WordPress.

Squarespace

If you’ve ever heard an advertisement during a podcast then you’ve heard about Squarespace. It’s like the Apple of website builders: easy to use and fast to set up, but advanced users might get frustrated at being boxed into templates. It’s also a premium platform.

Wix

Wix is one of the newer kids on the block. While it has a visual builder that sounds similar to Squarespace in premise, it’s not super intuitive to use. What will draw people to it is its small price tag. If you’re willing to fiddle with options at a low price, this is a good option for you.

What you can expect from WordPress

WordPress is open-source, meaning that it’s not nearly as user-friendly as the other two options here. With that said, it’s also as customizable as it gets short of writing code yourself.

The upsides are well worth the learning curve, though. WordPress sports the largest ecosystem of software and add-ons in the world, so you’re guaranteed to find what you’re looking for. Better yet, there are a ton of free themes available. There are even a few great ones specifically for portfolio websites, which I’ll rhyme off further down the page.

If you choose WordPress, be willing to learn. Using a theme other than WordPress’ default may require you to buy your own hosting instead of using a free subdomain on WordPress.com. It’s not as sightly as a standalone website with a cystom domain name, but it’s a place to start if you’re not in a position to pay out of pocket right now.

What you can expect from Squarespace

Squarespace is the easiest to get started, but it’s also the most expensive option. I used it for my portfolio website when I was struggling to get out of the unemployment trap and it worked for me—I lacked website designing skills, but there weren’t many guides on how to use it for building a career, either.

There are a lot of plug-and-play templates for you to choose from, though in my experience most of their differences were rooted in colour palettes and typography choices rather than layouts.

We’re also talking about $12 per month for a personal website plan if you pay for a year up-front, and $16 per month if you just want to pay month-to-month. It’s essentially the price of a movie every month. Even if you’re strapped for cash, it’s pretty affordable. It just seems like a lot if you pay for a year of service at once.

Pro tip: getting your own website means getting your own domain name. That’s the “www.yourname.com” part. It’s easy to do with Squarespace, so don’t worry about having to figure out technical details. Squarespace is all about convenience and expediency. It will cost you between $11 and $20 per year to renew (and that’s the case wherever you buy your domain name).

What expect from Wix

Wix is accessible for people who aren’t familiar with WordPress or other website platforms. It’s not as expensive as Squarespace, but it’s not as slick, easy to use, or ready-out-of-the-box, either.

To be honest, the $5 price tag on the lowest tier is what will seem most appealing here. There are a few limitations of that price point, however:

  • You need to put up with a “powered by Wix” banner on your website.
  • You don’t get to change your favicon (the small logo on your browser tab).
  • You only get 500 megabytes of storage… but images and code can add up quickly.

If those things don’t matter to you right away, then go for it. Just understand this: even though they’re small details, they do contribute to the polish of your professional image. Don’t sweat that small stuff as you’re working through this step of the road map, but consider covering those details for a brighter polish after a year or two of beginning your career.

Option A: WordPress

WordPress is the single most popular content management system in the world, which is why it has the largest ecosystem of themes, plugins, and hosting solutions around it.

The first thing to worry about is hosting, and there are two ways to go about it for your first portfolio website:

  1. Creating a free subdomain on WordPress.org for yourself
  2. Self-hosting a website for yourself (like this one)

The first option is faster and easier, but the second one is much more impressive. Still, if you’re just starting out then it’s far more important to get it up and ready—and when you’re fresh out of college, it’s hard to argue with “free.” Start with a free subdomain if you’re strapped for cash—I was when I did this, too.

Creating a free WordPress portfolio site

This is even simpler than when I was going through it—you’ll have a free portfolio subdomain in no time. Here are the steps to get started right here, right now:

1) Start here

Go here to start the process. Click on the big obvious button, then confirm your email address via the email sent to you.

2) Select "professional website"

It’s one of the items on the list of website categories you can choose.

3) Enter your desired position

Enter the position you’re aiming for in the search box, and it’ll pre-arrange a basic layout for you (which can be changed with a new theme, later). 

4) Set your preferred style

WordPress will give you 4 choices of style for your free subdomain. Their differences are subtle, so think about which one will best fit your character and tone.

5) Skip the domain purchase if you're broke

You may not want to pay the $20 per year for a custom domain (or the additional $60 per year for the hosting to go with it), so choose the free subdomain for now. We’ll cover paid hosting and custom domain names right here, if that’s the route you’d prefer to take.

6) Play around with your headlines and body copy

Have a bit of fun with it! Making a basic website doesn’t need to be stressful—nothing’s permanent if you don’t want it to be. We’ll also cover the structure of your portfolio pages and what should be on each one, but take a moment to get a feel for the visual builder.

This is where things get a little more interesting! WordPress.org released version 5.0 of its software in late 2018, which includes its very own visual builder called Gutenberg (does 1451 ring a bell?). It lets you build simple layouts right inside WordPress.

It’s easy to get the hang of it. Here’s what it looks like:

You don’t even have to put much thought into the homepage layout, since WordPress creates one for you. Feel free to change it up as you see fit, but don’t sweat it if no other layout ideas come to mind. That’s what the template is there for.

At the end of it, yours will look something like this—but, having experimented with the black background, I recommend you go with one of the styles using a white background. It just looks cleaner.

As I mentioned earlier, WordPress doesn’t let you install themes on one of its free subdomains—even if that theme itself is free. You’ll need to purchase a hosting plan if you want to do that (but thankfully it’s not expensive).

You have two options from this point onward. Click on the one that you want to choose:

(

Path A: buy a domain name, hosting, and a free portfolio WordPress theme

'

Path B: keep working on this free subdomain and skip ahead to filling out your portfolio

Setting up hosting on WordPress

There are plenty of third-party hosting services out there, but we’ll focus on setting up WordPress’ own hosting service here just to keep things simple.

If you really, really want to explore other hosting options, then try out some of these options:

Otherwise we’ll focus on WordPress’ hosting plans. The good news is that it’s about as cheap as shared hosting plans come—and straightforward to set up. You’ll want to choose the Personal Plan at the far left of the pricing page’s menu (currently $4 per month, paid annually).

Alternatively, you can upgrade to a paid hosting plan by following these steps:

Step A) Reach the WordPress menu by clicking on “My Sites” beside the logo in the top left corner.

Step B) Click on the “Manage Purchases” menu item third down from the top of the left-hand menu, then click on the big pink button that says “Upgrade Now.”

Step C) Select the subdomain you’ve been working on, if you have more than one. Most likely you don’t have multiples, so don’t worry if it skips this step for you.

Step D) Click on “Blogs and Personal Sites” near the top of the page (pictured here), then choose the Personal Plan.

From there you’ll be taken to an ecommerce page. You’ll have the choice of connecting your PayPal account or just filling out credit card information.

Good news: While domains do cost a bit of money, WordPress gives you a free one for the first year of your hosting plan! Not a bad deal at all. You’ll have to choose your domain name. I recommend your name (just add a middle name, middle initials, or a dash if it’s already taken).

Pick and apply a free theme

There are a lot of great free portfolio themes out there that will do exactly what you need them to do, which means you’ll only need to pay for basic hosting—fantastic for recent graduates.

Purpose-built WordPress themes tend to look substantially snazzier than what you’d be able to create with the Gutenberg visual builder as well, so I’d recommend that you apply one. It’s not a deal-breaker, but it can give you an extra edge when going head-to-head with another candidate for the job you want.

Several themes have been shortlisted for you below, but there are a ton of places to find free themes if you want to browse for one on your own:

WordPress’ theme menu

aThemes

Theme Isle

Just Free Themes

The WordPress ecosystem is the largest in the world because WordPress itself powers around one-third of all websites around the globe (not counting free subdomains). That’s why there are so many themes and plugins. It’s also a lot to take in all at once, so I’ve shortlisted some free WordPres themes for you here:

Ignis

Neve Freelance

Selfgraphy

Biography

The “Portfolio Web” theme is also serviceable, though on the basic side (still, it’s hard to argue with “free”).

Try out the demos on each one. Scroll through them, envison your name in place of the examples, and get a feel for which one suits your style best. Remember that many themes also let you change some stuff (like typography or colour schemes), so you don’t need to take each theme exactly as you see it if you’d like to make some stylistic tweaks.

Once you’ve picked the theme you want, proceed to the next numbered step.

Option B: Squarespace

I started out with Squarespace, but it’s not for everyone. I needed something that was a cut above what everyone else in the digital marketing space had already, so I went for its premium feel and ease of use. The Gutenberg visual builder for WordPress hadn’t been invented at the time, so my options for intuitive design tools was limited compared to what’s available today. Squarespace has improved as a product during that time too, and it’s definitely a good place to start.

Here’s what you need to know about the platform:

It costs $12 per month

It’s easy to use

Themes are mostly ready-made

You can’t customize themes too much

It’s the iPod of website builders: it’s easy to use and it takes care of everything under the hood (like hosting, SSL certificates, and mobile-responsive themes), but trying to customize it too much will drive you crazy. I’m speaking from experience.

If you have some money, need a website now, and don’t want to get bogged down with the details of website creation, then this is the solution for you.

Squarespace walks you through the process pretty easily:

  1. Identifying the purpose of the site.
  2. Choosing a theme to begin (you can switch this later).
  3. Building out your content using the chosen theme.
  4. Choosing and buying your domain name.

Note: While we’re using the term “portfolio website” here, Squarespace actually has a separate category of templates called “Personal and CV” that works much better for your purposes as a liberal arts graduate. Its “Portfolio” sites are better suited for photographers, designers, and fashionistas that showcase their work visually, but you’ll probably benefit more from templates that cater toward writing-centric projects.

With that in mind, these Squarespace themes will likely work best for you as a liberal arts graduate with a focus on literary skills (rather than visual design):

Sofia

Pursuit

Ready

And with that, you can get started tweaking your website. It starts you off in the Design section, but if you hit the Home button and then the Pages item on the left-hand navigation menu, you can see exactly how each section of a Squarespace page is stitched together.

Here are some quick tips to jump right into the fun part of building your website!

Click on the + sign for new pages

Don’t get intimidated by Squarespace’s options or layouts. Under the “Pages” section from the right hand menu’s top level, you can just click on the plus sign beside “Primary Navigation” to create a new page for your website. That’ll bring up a sub-menu of premade layouts for frequently used pages, like “About” and “Contact” pages. Try creating one.

Get started by filling out templates.

As you can see from the picture of the About template, you don’t need to worry about banging your head against a brick wall trying to figure out layout or design. Just fill out the image slot with images you’ve sourced (try Pexels or Unsplash if you need free images) and whatever you want to write about in the text module below it.

Disable the Squarespace badge

Nobody wants a footer on the bottom of their website giving credit to something or someone else. It’s distracts the visitor from what this site is all about: your value as a growing professional. Disable it under the Design menu, then click “Squarespace Badge.”

Use a cover page if you're building for a while

You don’t have to worry about letting a half-completed website sit there publicly for a month while you work on it. Throw up a cover page while you tweak everything! The template even comes with a “coming soon” message, so you don’t really have to do much else here.

You’ll have 14 days to play around with it and figure out if you want to commit to it or not. It used to be 30 days when I originally signed up in 2016, but you’ll still be able to get a feel for it in that time frame.

Remember that convenience is what you’re really paying for with Squarespace, particularly when it comes to using a premade theme. I’d recommend sticking with the core layout and design of whichever one you pick so that you keep everything cohesive, and just focus filling it out with your written content.

Just understand that choosing Squarespace means you’ll be paying $144 USD or $187 CAD per year, even after taking advantage of annual pricing. Here’s how to make the most of it if you’re sure it’s the website platform you want:

  • Go for the Personal plan for the lowest price.
  • Buy the annual plan to save 25% over the course of a year
  • Buying the annual plan also gives you a free domain (normally $12-$15 per year)

You can change the theme whenever you want, so don’t be afraid to experiment once you’ve signed up!

Option C: Wix

Wix is a competitor of Squarespace focusing on more intuitive website setup and more affordable service plans.

It has a straightforward “automatic setup” feature, which is handy when you don’t have experience making websites. Just make an account, answer some of the questions, decide if you want to import images from anywhere else on the web (like your Facebook profile), and pick your starting theme.

I use a different setup for my own websites (Divi running on WordPress) because my needs go beyond a single portfolio site, but Wix is a solid option for a new graduate trying to create a personal brand.  I was surprised at how easy it actually is to set up something that looks pretty good on this platform. You’re locked into pretty rigid templates, but that doesn’t matter to everyone.

1) Choose the "Portfolio & CV" website category

There are plenty of website templates to choose from, but most of them rely heavily on visuals. As a graduate of the humanities or liberal arts, you’ll want to pick a category that plays to your strength (the written word).

2) Pick whichever theme fits your personality

This part is entirely up to you and purely aesthetic. You can choose whatever suits your style. Experiment if you’re not sure! You can always change these things later.

3) Pick your homepage design

This will have a bigger impact on your site than the “theme” from the last screen. All of these layouts are pretty good from a design perspective, but if you’re feeling analysis paralysis then I’d recommend just choosing the first one to the left, keeping things straightforward and aesthetically bright. There’s elegance in simplicity.

4) Fill out your headline, header image, and intro

Wix has a straightforward template all ready to go—you only need to worry about filling it out. What to write is covered in a different part of this step in the road map, but I’d recommend at least filling out the title, an image you like, and some cursory bullet points to build upon later. Pro tip: find free stock images at Pexels and Unsplash.

5) Fill out your skills

This is where you can put your most powerful skills front and center. Mine are SEO and content marketing, but you could have anything like persuasive writing, research, statistical analysis, or even another skill you picked up as a hobby.

P.S. change that stock photo. People don’t stand around computers and point at them in real life.

6) Upload a photo and fill out education

If you have a good photo for your LinkedIn profile from Step 2 then you may already have a good one to use here on your website. Don’t worry about using the same one–the visual consistency sends subtle trust signals to the viewer (we call this “brand consistency” in the marketing world). Fill out your education section as well, and your homepage is more or less finished!

Your site will look something like this when you’re finished. The structure is all there—all you have to do is fill in the content, your own images, and set up the email contact forms to connect to your own email address.

You can still get the free version of Wix, but I wouldn’t recommend it. Your personal branding could come across as cheap because of the of these factors:

An "unofficial" URL

Wix gives you a free page, but it’s kind of free advertising for Wix this way. Your URL will be <email-sans-client.wixsite.com/name>. It doesn’t look professional, which is the whole point of creating a portfolio website.

A "made by Wix" banner

This is bad for two reasons. First, it distracts the viewer from your professional branding, just like the “made with Squarespace” badge. Second, it doesn’t seem as impressive when it looks like you were too cheap to pay for it on any level. This banner shows up on the $5 per month plan as well.

Despite that, Wix still makes it pretty easy to set up a portfolio website.  It’s almost as expensive as Squarespace when you want something without any Wix branding, but it’s also much easier for website newbies to pick up (and we’re all website newbies when we graduate).

Option D: Existing portfolio platforms

If you need something even faster and easier, then you can use one of these pre-existing portfolio platforms to showcase your projects. Just be aware that these portfolio networks aren’t very impressive and therefore won’t have much of an impact.

They’re quick and dirty—but not a substantial solution to building a professional profile or a career for the long game.

About.me

This is a bare-bones portfolio creation platform with an option to upgrade for $8 USD per month with your own custom domain name and a more professional-looking page. The paid option sounds pretty good if you’re just getting started, but the free version isn’t going to impress anyone.

Clippings.me

This one’s a free portfolio website that grants you a page to your name. It claims to be free forever, and it has a pretty clean layout. Not a bad option if your skills are based in writing and you need something fast, but you should move up to a more professional option sooner than later.

Behance

This is a portfolio network for designers in particular (but also the most well known). Graduating from a liberal arts program probably means that your skills lie elsewhere, but I wanted to include this just in case you end up exploring the world of art and design.

The whole point of a portfolio website is to appear professional, independent, and driven (even successful, relative to your status as a recent graduate). Going for the cheapest and fastest solution isn’t going to impress anyone. You want to show recruiters and hiring managers that you set high standards for yourself and understand the value of clean, crisp presentation.

With that in mind: feel free to create one or two free portfolio profiles on these sites, but put a plan in place to upgrade to a professional, standalone website if you’re serious about standing out from the crowd.

Create your home page

If you haven’t chosen your website platform yet, you’ll need to circle back to that at some point before completing this step in the road map.

Now we’re going to create pages for your portfolio website in a basic structure that has four main pages:

Home page

Resume page

Portfolio page

Blog page

You don’t need to get too fancy here—keeping the structure simple and straightforward lets you shine where it matters: the website’s content. We’ll look at each main page here to discuss what it should contain.

We’ll start with the home page below. There are a few ways to structure it, but I think the best way to approach it is to introduce yourself and then create preview sections that link to the other pages with more depth. This encourages visitors to read your resume, portfolio, and posts about your experiences.

Here’s what I included on mine:

A headshot and introduction above the fold

A quick link to my resume download page

The 3 biggest projects I’m working on right now

{

Testimonials from old bosses, coworkers, and clients

A link to read my industry experiences in my blog.

A contact form that delivers messages to my inbox

The homepage essentially directs people toward different parts of my website, depending on what they’re most interested in reading first. They also get to see my professional profile at the same time, which is what an introduction is all about. You can change it up to focus on writing about yourself, throwing in some impressive job stats, or showcasing your testimonials early.

It’s not a rigid structure by any means, but there should be a natural flow in how you present each section. This is where those transition sentences come into play in the working world!

Anyway, back to the homepage. Tell your story by mixing in these elements:

Example introduction: “Looking for a professional SEO, content marketing manager, and growing PPC advertiser?

Hi, I’m Andrew. Let’s talk about digital marketing.”

Example why, what and how: “I’ve spent 3 years growing in digital marketing agencies and worked alongside another 6 as a freelance content writer, not counting my experience as an in-house SEO.

My work has contributed toward the success of content enterprises, local businesses, and even a small financial technology company. Read about those challenges, successes, and the insights behind all of them here.”

Example project preview: Show your 3 most recent projects if possible, or whatever you’ve been working on recently. Even if it’s only your first project, it’s still worth showing off here.

You’ll add to this as time goes on. They’ll link to your portfolio project pages that we’ll create further into the road map.

Example testimonials: “I hired Andrew for his excellent editorial and organization skills, but he quickly became an important part of all of our marketing campaigns. He has a lot of experience with content, social media, influencer, SEO, and email marketing. It was a pleasure working with him and I would recommend him to anyone looking for a mature, hard-working digital marketer.

Example blog previews: These three blogs in the adjacent picture are accompanied by text in a banner just above it. Invite the viewer to read about your experiences, hinting at why those experiences matter. This brings us back to the core accomplishments you wrote in your resume and LinkedIn profile in steps 1 and 2, respectively.

Example contact form: Always include a contact form if you can. Some platforms make this easy (like Wix and Squarespace), but you may need to install a free plugin to get it working on WordPress if the theme doesn’t come with it.

It’s 100% worth it though, since it gives your website viewers a direct channel to speak with you and to download your resume.

The exercise here is to write an introduction that encapsulates experience, achievement, and your outlook in a convincing way. You don’t need to wear your heart on your sleeve (especially if you’re working in a conservative industry), but don’t shy away from your accomplishments.

Remember to keep things simple for now. You can always make things refined and more complex later, when you have a better handle on your platform of choice. Experiment with the order of each section, making sure that each one flows into the next, and it’ll turn out well.

Quick tip: Even though we’re linking to all of your major pages throughout your home page, all of them will be accessible in the navigation menu. Squarespace and Wix handle this automatically, but if you’re using WordPress then you can find these settings under “Appearance” and then “Menus” on the left-hand menu panel. It’ll take you to a drag-and-drop editor.

Create your resume page

Now we’re getting to the resume page, one of the pillars of your portfolio website. Why bother creating one when you already have a resume in PDF form and your history plastered on your LinkedIn profile?

 

  • Not everyone who sees your website will have read your LinkedIn profile.
  • Combined with a contact form, you can let visitors download your resume in PDF to take with them to review later.
  • It gives you an opportunity to highlight your best accomplishments with some visual flair.

Home page

Resume page

Portfolio page

Blog page

When I made the first iteration of my portfolio website, my resume page consisted of an image, a title, and a single, lonely download form. It wasn’t very pretty, and I don’t think a lot of people downloaded anything.

That’s why we’re going to walk through a basic structure for your resume page. We’ll still have a download form at the end of it, but we’re also going to create a real web page containing your actual experiences.

It’s more powerful because it shows off your skills, serves up a crisp presentation, and exudes confidence in your ability to learn, take on new challenges, and to grow.

Here’s the basic structure we’ll follow:

  1. Header/Title and an image (if your theme supports it).
  2. Your skills, soft and/or technical.
  3. Your certifications and relevant courses
  4. Proficiency with platforms, equipment, and technology.
  5. Your educational program and institution.
  6. Your work history, prioritizing your most impressive accomplishments.
  7. A contact form to download your resume.

Header Section: Start simple. Re-introduce yourself and summarize what the visitor can expect to find on this page. If you’ve accomplished something imrpessive, feel free to hint at it to draw in the visitor with intrigue and curiosity. Stop short of humble bragging, though.

This is essentially an exercise in persuasive writing.

Core Skills: How you create this section will depend on your website platform. Certain WordPress themes may let you create visuals, like the progress bars you see to the right (using Divi, if you’re curious). Squarespace will have some kind of visual elements at your disposal. If not, then just list them out for now.

You don’t need to grade yourself, but I find that it helps. You can also rate your skills out of five stars, for simplicity, if you like.

Certification: This is where you can show off your ambition and ability to learn. For example, while most people in the marketing field should have some exposure to Google Analytics, scant few of them will have 2-3 certificates of skill for it. Qualified recruiters will notice.

Don’t be afraid to start small, and include certificates from different skill areas if you haven’t decided on a focused career path yet. Your breadth of knowledge and ability to learn are the important things to show off, here.

Experience with Tools: Not all of your experience comes with a nice little certificate of completion, but you should still claim credit for your experiences.

That’s where your platform experience comes in. Let hiring managers know that you’re familiar with the tools of the trade that come with the job. This matters as much for library sciences as it does for digital marketing.

Education: You might only have one degree or post-secondary program under your belt, and that’s 100% okay.

You can use just that program for a brief section, or you can flesh it out with some detail:

  • Extracurricular activities
  • Captsone projects
  • Relevant courses and/or your GPA
  • Scholarships and exchange trips

Work History: No need to panic if you’re applying for your first “real” job out of college. The important part of this section is to quantify your achievements in any and all of your past roles, side projects, hobbies, or courses. You don’t need to use a fancy visual format if you don’t know how. Start by copying whatever you wrote in your resume and/or LinkedIn profile from Steps 1 and 2 of the roadmap to keep things straightforward.

Contact/Download Form: We’re going to cover this element in greater detail at the end of this step in the roadmap, so don’t pull your hair out trying to grapple with it. But give some thought toward how you want this to work. Do you want visitors to be able to download your resume right away, or should they have to contact you first so that you can send it to them personally?

Quick tip: Your resume page is a fantastic location to show off your recommendations—even if you already dropped a few of them into your homepage design.

If you’re in a position to include them, just sprinkle them throughout the page so that visitors read them. It creates a one-two-punch effect that raises the chance of visitors actually believing what you write about yourself.

Create your portfolio page(s)

The portfolio page is one of the two most important pages on your whole website (the resume page being the other one). This is where you can explore your accomplishments with a mix of quantitative achievements and qualitative insights, drawing a clear line between the project’s problem, solution, and your impact upon it. It’s also helpful to sprinkle some proverbial bread crumbs hinting at what you’ve learned along the way.

Home page

Resume page

Portfolio page

Blog page

There are two ways to approach your portfolio page:

  1. Create a single page with everything on it, or;
  2. Create a top-level page that houses a collection of smaller portfolio pages on a per-project basis.

If you’re a new graduate with a limited pool of experience, then it’s probably wise to create a single page that holds your major projects in one spot. While I’ve taken the other approach for myself, that’s only because I made my portfolio website after working for dozens of different clients through marketing agencies and freelance work for several years

We’ll focus on the first approach to keep things simple and straightforward.

Header Section: Write the copy for the header, just like every other page on your website. It should share the same kind of look with all other pages for brand consistency. Don’t try to reinvent the wheel, here. Just introduce your projects with a preview in the copy.

Project Introduction: Establish the problem you set out to solve, touching on its parameters. This is the first of three core sections for every portfolio project following the PAR format, which stands for Problem-Action-Result. The bigger the problem, the more important it is.

Project Highlights: This serves as the “Action” section of the project story. Pick the top 3 most important things about this project. It could be a statistic, a skill you acquired, or even an important insight that shows wisdom beyond your years. Keep it simple and quantify it wherever possible.

Project Conclusion: This is where you outline the impact of your efforts for this particular project. The introduction covered the problem you set out to solve, and the project highlights touched on the actions you took and important lessons learned. This section wraps it up with next steps and the ever-present “so what?”

Repeat that format for each project you include. I wouldn’t recommend including more than 5 projects on that page or else it’ll become too difficult to navigate. Don’t stress too much over the design for each project while you’re laying it out on the draft page. Focus on the visual presentation after you have the text and images roughly in place so that you can get a sense of the page’s size and flow, first.

Quick tip: If you’ve been gathering written recommendations and testimonials (which you should be), then use one that’s connected to the project you’re showcasing. It’s a direct quote from another stakeholder on the very thing you’re talking about, which makes it that much more powerful.

Create your blog (especially if you write)

The blog is my favourite part (you may have noticed I like to write), but it serves as a dovetail to the resume and portfolio pages. While the resume page houses your quantified achievements and the portfolio page lets you tell condensed dragon-slaying stories in the Problem-Action-Result format, the blog lets you discuss your biggest project takeaways in much greater depth.

Home page

Resume page

Portfolio page

Blog page

They’re important because they let you express your throughts, insights, lessons, and reflections in a way that few professionals ever learn to do, much less get around to actually doing.

You can write blogs on LinkedIn, and that’s fine, but there’s no guarantee that LinkedIn will be around forever. It also means that LinkedIn more or less owns whatever original thoughts you write down. That’s why it’s important to create a thought leadership space for yourself on “land” that you own, even if you republish it all to LinkedIn (which isn’t a bad idea so long as you own it all on your website).

The structure of your blog page will actually be very simple, consisting of a header (matching every other page’s style on your site) and thumbnails for the individual posts themselves.

That’s basically it.

Blogging is so common that every major or aspiring website platform has some kind of built-in blog functionality out of the box, including WordPress, Squarespace, and Wix. No guarantees on the portfolio network sites like Clippings, About.me, or Behance, though—but that’s why we’re making our own sites.

Here’s how to create the actual blog page for each of the three platforms we’ve walked through so far.

WordPress: WordPress made its name as a blogging platform, so you’re covered here. Create a page called “Blog.” Don’t even worry about styling it yet. Your theme probably has a pre-built template anyway.

On the left-hand menu, navigate to Settings > Reading. Click on the drop-down menu beside “Posts Page” and set the page you created. That’s it!

Squarespace: Squarespace makes it easy with a built-in blog functionality. Under the “Pages” menu, you’ll see a page with an “a” icon with the Blog title next to it.

It’s already there, so all you have to do is to start writing!

Wix: Wix’s blog section comes pre-built and ready to go, just like the one you find in Squarespace. From the website visual builder screen, you’ll find it near the top of the left-hand menu. It’s super straightforward from there.

The simple anatomy of a blog page

Header Section: Predictably, you’ll need to write some copy for the title. Some copy for a subheader doesn’t hurt either. It gives you a chance to tease your reader with the kind of original work you’re creating, or even just a peek into how your mind works as portrayed through these posts. Creativity, a problem-solving streak, and the ability to reflect on why things did or didn’t work are all valuable things to hint at.

Blog Thumbnails: These are just little previews of each individual post that appear on whichever page you set as your “blog” page. All of your recent posts will appear here. I’d recommend removing the publication dates from them to give your posts more of a timeless feel.

We’re going to circule back to talk about contact forms, so we’ll cover that later. That’s basically it for blogs, though. I’d recommend writing 3 posts before you start promoting your website to anyone, which brings us to our next pit stop.

Where to start writing your professional blog

You don’t need to drop your entire website project to write three blogs on the spot—in fact, please don’t. Doing that just pulls your brain in two different directions at once. Tackle this part when you need a break from your portfolio site or when you’re finished with it.

Good writing comes from experience, which could put you in that classic trap of “no experience, no job.” Don’t fret. Use the checklist and my own examples below to get started on brainstorming some topics. If in doubt, talk about everything you’ve learned and how you’ve grown through the process of making this portfolio site.

Where to start writing:

  • New tools or technology emerging in your industry.
  • Relationships, personal dynamics, and how they work in your area.
  • Your thoughts on larger developments happening in the news.
  • Reflections on a recent project (even if you don’t publish it for a while).

As a digital marketer, I’ve written about these topics:

  • How to market to Generation X
  • Marketing agency rules that nobody tells you
  • How non-techies can work with software developers
  • How to react to Facebook’s periodic algorithm overhauls
  • How to start creating a privacy law compliance checklist for your marketing team

Before I turn you loose with your blog, make sure you follow these rules for writing as a working professional to protect your reputation and personal brand.

Don't write about your current workplace

Don’t make a case study out of people you’re currently working with, even if you have good things to say. It feels weird being written about and critiqued publicly by someone you see every day, and someone that you need to trust to get things done. It puts a strain on relationships with your boss, coworkers, and clients.

Quality wins over quantity

Don’t just publish a bunch of garbage posts once per month because you feel like you should be doing “something.” Write posts about genuine reflections on your industry and projects with the understanding that sometimes those only come once every 6 months. You’re trying to impress hiring managers, so only your best work will do.

Write politely and anonymously

Write politely and diplomatically about people whenever they feature in your blogs, even if you never name them and never plan to see them again. You never know who’s reading, and you never know if you’ll run into one of those people again, or their acquaintances. Saying negative things will also make current acquaintances wonder if they’ll be next.

Set up contact forms

Ah, contact forms. The preferred tool of introverted marketers everywhere. These are a nice addition to your website because it provides you with a direct channel for people to reach out to you on your own digital real estate without having to go through a connection request in LinkedIn or anything like that. Personally, I also find it useful as a security checkpoint to see who’s downloaded my resume from my website.

The good news is that contact forms are a very common practice in the world of websites, so they aren’t difficult to implement.

Squarespace: Like most other kind of modules in Squarespace, the contact form comes as a premade option that’s easy to set up.

Just select it under “More” in the module selection menu. Just add spacer blocks and some accompanying text, which we’ll cover below.

Wix: Navigate to “website actions,” edit your site, and then—on the left-hand menu—scroll all the way do the bottom, where the forms live.

You’ll see six different form options, bt you’ll probably want a Sales Lead Form. It’s a bit more of an all-purpose option that should suit your needs.

WordPress, Gutenberg Theme: This will depend on the theme you’re running on your WordPress. If you’re running the 2019 or 2020 theme, then you can select a contact form module quite easily.

From the page you’re working on, select the “plus” icon and click on the “contact form” option. Customize it to fit your tone and voice, and you’re off to the races.

WordPress Plugins: Some plugins may or may not work with your particular theme, so don’t be afraid to try out a few from this list:

What do I do with a contact form?

Great question. First, you want to capture these pieces of information in every form:

First and last name

Email

Organization

Message

You want to capture these four pieces of information regardless of the form’s purpose. You need to be able to respond or follow up with prospective employers, clients, or connections.

Even if these people are only downloading your resume, you’ll still want to know who’s looking at it. This will earn you bonus marks if you’re interested in entering any kind of position related to marketing again, I’m speaking from experience, here).

With a basic template set up (which is pretty easy with every theme or plugin I’ve used), decide if you’re going to use the form just to receive messages, or if it will be used to download your resume. It can also be both—that’s how I set mine.

Regular contact form

 The principle here is simple enough. You just want to make sure that submitted messages go to your email inbox. That’s how pretty much all contact forms work by default, so it’s not worth too much detail. Just make sure you’re using a personal address you can keep forever—not a school address, nothing from volunteer organizations, and definitely not a work address if you have one.

Download form

You still want to include everything from the regular contact form, including a “thank you” message at the end. The core difference is that your form should redirect the visitor to the URL of your PDF resume. Just about every contact form will have a redirect option upon hitting the button, living somewhere in the settings. If you want to go low-tech, you can also just email the resume manually back to the interested person.

Uploading a PDF in WordPress: This one’s super easy. Just navigate to the Media Library on the left-hand menu, then drag-and-drop your PDF file. WordPress automatically creates a page for media attachments, so click on the image you just uploaded, then click on the small blue hyperlink for “view attachment page at the bottom of the image’s pop-up window. Copy the URL to your clipboard, then paste it into your contact form’s redirect destination. Presto.

Uploading a PDF in Squarespace: Similarly to WordPress, Squarespace lets you upload a file and link to it for visitors to view and download. Its media library is just a little more hidden, but once you upload it you can your form to redirect to the PDF’s attachment URL, as pictured here.

Uploading a PDF in Wix: With Wix’s contact form, you just need to navigate to the form’s options. You’ll see button to add a new field. Click on it and then click on “upload file” at the bottom of the list. You can’t use this feature on the free Wix plan, but if you can’t pay for the plan then you can also email your resume back to people manually when they fill out the form.

f

Quality assurance (don’t skip this!)

The final stretch of creating your website!

This is the boring part, but it also tends to be the easiest part if you’ve been diligent. Simply put: you need to test everything. I suggest doing it on a page by page basis so that you don’t get too complacent. This is an exercise in detail.

There’s a simple way to set yourself up for success, though. Create a spreadsheet (Excel or Google Sheets—it doesn’t matter) and create a chart that cross-references every page with everything you need to double-check.

It’ll look something like this:

HomeAboutResumePortfolio
Spelling
Image quality
Forms work properly
Works on mobile screens
Plugins/add-ons work
Buttons work
Nav bar (menu) works
All links work properly

It’s not difficult to check everything. You’re just going over everything with a fine-tooth comb and fighting the urge to skim over everything, since you’ll be sick and tired of websites by this point.

  • Spelling and grammar
  • Image quality
  • Forms all work properly
  • Everything fits (and works) on mobile screens
  • Plugins and add-ons work
  • All buttons work
  • Nav bar (menu) works
  • All links work

You’ll apply that checklist to your homepage, about page, the resume page, and the portfolio page (and any individual project pages if you created them).

It’s not difficult to check everything. You’re just going over everything with a fine-tooth comb and fighting the urge to skim over everything, since you’ll be sick and tired of websites by this point.

What if I find something’s not working?

That happens all the time, but it’s not a bottomless pit of technical malfunctions. Since you’re only working with a basic website, the problems will be pretty basic too. Here are common issues and how to fix them.

My page loads slowly or crashes

This almost always comes back to the size of image files. You shouldn’t upload an image any larger than 400-500 KB. Don’t upload images with 1.7 MB file sizes or anything crazy. Shrink your image file sizes with compressor.io.

My navigation menu bar is wonky

You’ll most likely encounter this on a WordPress site. Navigate to Appearance > Menu, select the correct menu configuration you’ve made, then drag-and-drop pages you want into position (drag to the right to nest pages under other ones).

My form isn't working

Start by making sure it’s actually delivering the test messages to your preferred email address. If you’re using it to let people download your resume, then make sure that the “redirection upon successful submission” points to the URL where your PDF resume lives on your website.

A button doesn't work

This is most likely because there isn’t a URL attached to the button to take you anywhere when you click on it. Just plug in the URL for the page where it should direct you. If that still doesn’t work, try deleting that button and recreating it from scratch. Just write down all of the settings you had for it, first!

It doesn't look great on mobile

While all of the themes we’ve covered here should be mobile-responsive (they adapt to work on phone screens), you might have tried one that hasn’t. You might also experience a conflict between your theme and a plugin you’ve downloaded. Disable the the plugins one by one, testing if everything works on mobile screens between each one.

My blog page isn't showing my posts

Triple-check to make sure they’re all published and not in draft mode. If you’re on WordPress, then go to Settings > Reading, and click on the drop-down menu beside “Posts Page,” and select your Blog page. It has to be published to show up there.

The finished product and next steps

Take a deep breath. It’s done. You’ll need to come back to update your website with blogs and portfolio projects in the future, but that’s not an issue now that you have a handle on everything.

By the end of this road map you should have:

Z

Chosen a portfolio website platform

Z

A home page for your portfolio site

Z

A resume page with a download mechanism

Z

A portfolio page or set of project pages

Z

A thought leadership page (a professional blog)

Z

Contact forms at various places on your website

Z

Optional: hosting service for your website

Z

Optional: a custom website domain

Now you have digital real estate that’s entirely your own. It’ll grow with you as a professional and become your home base for your online presence. It’s going to impress employers and connections alike, and you’ll be one of the few job seekers out of college with the initaitive and technical skill to demonstrate that you mean business.

Here are a few things you can do with your website:

Add it to your resume

Add it to LinkedIn

Add it to your Indeed resume

Republish posts on LinkedIn

Include it on business cards

Show friends and family

Once you’re comfortable with your website, move on to the next part of the roadmap: finding your experience-building portfolio projects!

You’ll revisit your resume, website, and LinkedIn to update them with these projects once you complete them. It’s a critical step that solves the catch-22 of “no experience, no job.”