Step 5: How to create 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 contract together. It was a content marketing job, and only 1 in 200 people had thought to create a portfolio website to showcase their skills… and a willingness to learn.
Spoiler alert: it was me.
How many recent graduates do you know with their own website?
Not many, I’d wager. Not many established professionals have one, either. 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
Why should you create 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
Quality assurance (test everything)
Why should you create a portfolio website?
To be honest, even most senior professionals in the marketing industry (my industry) haven’t bothered to create a portfolio website of their own. They have connections and experience, that only takes them so far.
Connections are important, but so is presentation. That’s where my website creates an advantage over them. You can acquire that advantage for yourself, too!
I own a piece of real estate where my thoughts and my experience occupy the spotlight. In fact, I have two websites: one for potential employers to read my insights, and one for my freelance customers who want to see that I know my stuff.
I’ve been able to walk confidently into meetings with experienced 60-year-old consultants 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 all three of them together.
It says a lot about your character.
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, it shows 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 who bothered to create a portfolio website. It helped me more than I realized at the time.
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.
This way, you can start promoting yourself while you work on your website. You can even point to it as a portfolio project you’re working on, if a hiring manager or recruiter asks.
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 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.
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.
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 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 an open-source platform, 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 those who want to create a portfolio website, which I’ll rhyme off further down the page.
If you choose WordPress, be willing to learn. Using a theme other than WordPress’ default one may require you to buy your own hosting instead of using a free subdomain on WordPress.com. It’s not as good-looking as a standalone website with a custom 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 at the time, 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, although in my experience most of their differences were rooted in color palettes and typography choices rather than sporting different layouts. You can also change themes whenever you want, so you’re never stuck with something if you want to try it out.
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. It’s pretty affordable even if you’re strapped for cash, like I was. It only 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 it, 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. It might not be enough storage space for anything but 3-4 pages, depending on your images’ file size.
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.
Option A: Using WordPress to create a portfolio website
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:
- Creating a free subdomain on WordPress.org for yourself.
- Self-hosting a website for yourself.
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 had to create a portfolio website—you’ll have a free portfolio subdomain in no time. Here are the steps to get started right here, right now:
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, history grads?). 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. It’s a straightforward step to create a portfolio website; don’t be intimidated by it.
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 as you start to create the portfolio website.
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.
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
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:
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 color schemes), so you don’t need to take each theme exactly as you see it, in case you’d like to make some stylistic tweaks.
Once you’ve picked the theme you want, proceed to the next numbered step.
Option B: Using Squarespace to create a portfolio website
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. Not having to worry about technical details was also handy, since it was the first time I had attempted to create a portfolio website.
The Gutenberg visual builder for WordPress hadn’t been invented at the time, so my options for intuitive design tools were 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:
- Identifying the purpose of the site.
- Choosing a theme to begin (you can switch this later).
- Building out your content using the chosen theme.
- 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” templates are better suited for photographers, designers, and fashionistas that showcase their work visually. The nomenclature is a little confusing, but you’ll notice the difference quickly.
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):
And with that, you can create a portfolio website in short order. 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: Using Wix to create a portfolio website
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 is to set up something that looks pretty good on this platform. You’re locked into 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 a purely aesthetic step as you create a portfolio website. 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 the stock photos. People don’t stand around computers or tablets 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 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 create a portfolio website in minutes. 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 almost all of us are 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 don’t carry much production value, so they might not impress hiring managers to the same extent as a fully owned website.
They’re quick and dirty—but not a substantial solution to building a professional profile or a career for the long game.
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 leaves a lot to be desired.
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 right now, but you should move up to a more professional option sooner than later.
This is a portfolio network for designers in particular (but also the most well known portfolio network). 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 many people, so take these with a grain of salt. 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 create a portfolio website without freemium branding if you’re serious about standing out from the crowd.
Create your home page
If you haven’t chosen a platform to create a portfolio website yet, then 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:
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 blog posts about your experiences.
Here’s what I included when I set out to create my portfolio website:
A headshot and introduction above the fold
The 3 biggest projects I’m working on right now
A link to read my industry experiences in my blog.
A quick link to my resume download page
Testimonials from old bosses, coworkers, and clients
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 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 want to showcase your latest projects when you create a portfolio website, obviously, so 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 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, though?
- 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.
In my first attempt to create a portfolio website, my resume page consisted of an image, a title, and a single, lonely form where people could enter their info to download my resume. 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:
- Header/Title and an image (if your theme supports it).
- Your skills, soft and/or technical.
- Your certifications and relevant courses
- Proficiency with platforms, equipment, and technology.
- Your educational program and institution.
- Your work history, prioritizing your most impressive accomplishments.
- A contact form to download your resume.
Certification: This is where you can show off your ambition and ability to learn. 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, too. Qualified recruiters will notice.
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. Let hiring managers know that you’re familiar with the tools of the trade. This matters as much for library sciences as it does for digital marketing.
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, either. 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 here. Do give some thought toward how you want this to work, though. 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.
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 to showcase when you create a portfolio 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.
There are two ways to approach your portfolio page:
- Create a single page with everything on it, or;
- 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 clients through marketing agencies and freelance work for several years.
We’ll focus on the first approach to keep things straightforward.
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, either. 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.
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 your condensed dragon-slaying stories in the Problem-Action-Result format, the blog lets you discuss your biggest project takeaways in much greater depth.
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 portfolio website with a thought leadership space for yourself. Think of it as building on “land” that you own, even if you republish it all to LinkedIn later (which isn’t a bad idea so long as it all lives on your own website first).
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 website platform has some kind of built-in blog functionality out of the box—especially 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 for this page, 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!
How to create a portfolio website 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.
We’re going to circle 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 in school, or even 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’ve worked out.
- 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 to create your portfolio website’s 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. Saying negative things will also make current acquaintances wonder if they’ll be next.
Set up contact forms
Ah, the contact form: the preferred tool of introverted marketers everywhere. It’s a nice addition to your website because creates a direct channel for people to reach you. 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.
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.
What do I do with a contact form?
Great question. First, you want to capture these pieces of information in every form when you create a portfolio website:
First and last name
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 (speaking from experience).
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.
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 is probably the easiest step to create a portfolio website. 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 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.
Don’t skip quality assurance when you create a portfolio website
This is the final stretch to create a portfolio 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:
|Forms work properly|
|Works on mobile screens|
|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 going to feel empowering, not like a chore.
By the end of this road map you should have:
Chosen a portfolio website platform
A home page for your portfolio site
A resume page with a download mechanism
A portfolio page or set of project pages
A thought leadership page (a professional blog)
Contact forms at various places on your website
Optional: hosting service for your website
Optional: a custom website domain
Now you have digital real estate that’s entirely your own. It’ll grow with you and become your home base online. It’s going to impress employers and connections alike, and you’ll be one of the few job seekers out of college with the initiative 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 profile
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.”