009. Level up your career with a Portfolio Website
Use free resources to build your own website and impress clients.
Part 9 of the Freelancing Series, Part 1 of 2 (Maybe)
What’s a Portfolio Website?
A portfolio website is the online showcase of all the work that you’ve done as a freelancer. It’s like a digital resume but more detailed and more interactive. It’s similar to those show-and-tell sessions in pre-school where you don’t only list down your skills and experience. You also get to show off actual examples of your work in a visually appealing way.
If you’re a graphic designer, for example, your portfolio website is where you gather all the Graphic Design Projects you’re proud of in one place where potential clients could visit.
Why do you need a portfolio website?
Think of your portfolio website as your online storefront. It’s where you make your first impression on potential clients.
A good website can work for you 24/7, even while you’re sleeping or working on other projects.
But it requires a little bit more than just putting together words and images. A good portfolio website is well-designed and easy to navigate. You want to make sure that visitors can quickly find the information they’re looking for and get a sense of who you are and what you can do for them.
In this article, I will teach you how to make a good portfolio website using free resources. It’s the first of 2 parts. Buckle up and enjoy the ride.
Parts of a Portfolio Website
Home Page
- Your logo
- The title of your website — You can just use [your name]’s Website
- Website Menu Bar — Home, About Me, Portfolio, Certificates, Services, Contacts, Blog (Optional)
- Welcome Message with a Call to Action Button — like “Set a Meeting” or “Inquire”
- Your Professional Photo — see this blog for more details.
This is the Home Page of a portfolio website I did for a training project. The CTA Button (Set a Meeting) leads to my Calendly Account.
About Me Page
- Who you are
- What you can do
- What sets you apart
For a more detailed guide on making a good About Me Page, see this blog: Write a Winning “About Me” Section for your Freelancing Profile
I also made an easy-to-follow guide on How to Write your About Me Page. Download it here: I help statement, About Me Page, Skills + a Surprise Bonus
Portfolio
- Divide your work into categories. For example, Brand Identity, Retail, Social Media Graphics, Merchs and Passion Projects
- Make Case Studies by telling the behind the scenes of how you did your projects and the results.
- Provide Social Proof. For example, if you’re a graphic designer for social media, take a screenshot of how many likes, comments and shares your work have. I design graphics for restaurants, so I post photos of the printed artwork (Menu Board, Posters, Murals, Billboards, etc.) that are installed in the restaurants. You can also take screenshots of the reactions of your clients to your designs. Comments like “I like your work. This is exactly what we need.” is already a good social proof. Ask permission from your client before posting.
- Put watermarks on all your graphics and videos, including your social proof. Some people may steal your work.
- Always show your work in a mockup image. Don’t post your actual work as it is. For example, show your logo in a signage mockup or a t-shirt mockup. Never post the final artwork as is. They’re so easy to steal. You can make mockups on Canva or download Photoshop Files from Freepik or Mockup World and make your own. See the example below.
- Tell stories about the images you post. Stories add value to the artwork and also good for SEO.
- Make your photos into links. Connect it to the actual social media post or the actual website that you designed, for example. I’m gonna post more detailed articles about how to make a Portfolio for Beginners and Anatomy of a Case Study soon (April 15 and 22). Please watch out for that.
Certificates
If you have relevant trainings and certificates, include them in this section. Include only those that support your skills and experience. For example, don’t include your bobba tea training certificate from 2015 if you’re a virtual assistant. Post the most recently acquired first then add the oldest certificate last.
Add a description of the training you got, especially if the certificate doesn’t include substantial information.
Continue learning throughout your career to add to your skills and level-up your qualifications. Choose trainings with certificates to beef up your portfolio. Make sure to update your website every time you acquire a new skill.
Services
Write a transparent and convincing list of services and rate deck. I made a detailed blog about this here: How to Make a Clear and Transparent Rate Deck. Check this blog too if you don’t know how to compute your rate yet: Know your worth: How to compute your rate as a new freelancer.
I got the thumbnail images from a free online stock photo site but you can make your own and customize to your services.
Blog
This is optional but a blog helps with SEO and in establishing authority in your field. This is what I’m doing right now in this website. This is actually a portfolio website. I just decided to start with the blog. I also plan to post my projects in blog format so it will will feel like I’m just telling a story.
Contact
The contact page is usually at the last part of the website. Don’t try to reinvent the wheel or “try to be different” by putting it somewhere else. Your Contact Page should be clear, concise and easy to find. It usually includes your email address, a link to reach you via chat and a link to schedule a meeting with you. Always check if the links work and reply in a timely manner whenever someone contacts you.
I separated the “Let’s Connect” Page from the “Contact” Page so viewers won’t get confused in case they’re looking for the “Contact” Page, which is more common. The Contact Form goes straight to my email address.
Footer
The footer is the bottom part of your website. It usually includes the year your website was created. Add icon links to your social media accounts to provide another way for prospective clients to connect with you and get to know you better.
Make your own Portfolio Website Today
1. Prepare everything you need
- Professional Photo — everything you need to know is in this blog.
- Tagline or “I help” Statement — read this blog.
- Potfolio Images — Mockup images of your past work
- Social Proof — Screenshots of Insights, Data and Client Reviews or Testimonials
- A Professional Email Address — A Professional Email Address is just your name or business name. No more xxxhotguyxxx@g.mail.com.
- Professional Social Media Accounts like LinkedIn, Facebook Page, and Instagram
- A Calendly Account — where your clients can schedule meetings with you
- A Zoom Account — although some clients also prefer Skype
- A Whatsapp Account — some clients prefer Whatsapp for communication
- Images of your Certificates
- List of Services and Rate Deck
- Images to go with your Rate Deck
- Visual Branding — color palette, font, stock images, brand message. I will post about these in the future but you could start with black and white color palette and the default font of your chosen platform.
- Online Wallet — Figure out how you get paid. Set up a Paypal, Payoneer or Wise Account. Connect to your bank.
2. Choose a platform
- Strikingly.com — Simple but professional. I used this in 2022 and got clients.
- Google Sites — Open your Google Drive > New > More > Google Sites
- Wordpress.com — Best for SEO. I’m using the free version right now.
3. Write your copy
Write a Winning “About Me” Section for your Freelancing Profile.
Make a Clear and Transparent Rate Deck.
Craft a tag line or “I help” Statement.
Write descriptions for your Certificates.
Make a draft for your Case Studies.
Don’t be a perfectionist. Just start writing. Edit it later. It’s easier to edit once you already copied and pasted the texts to your website.
4. Add your images
Size guides for your images:
- Logo — 200pixels x 200pixels
- Professional Photo — 360px W
- Banner Image — 800px W x 650px H (height differs)
- Portfolio Thumbnail Images — 250px x 250px (these are also link images)
- Certificates — 357px W x 275px H (height differs)
- Thumbnail Images for your Services — 250px x 250px
- Icons for your Contact Page — 160px x 160px
- Background Image for your Sections (if any) — 795px W x 665px H (height differs)
PPI of 72 is enough for a website as long as the above dimensions were followed. Images with lower resolutions and smaller dimensions help load the website faster. Images that are too small or resolutions that are too low tend to break down and look blurred.
You can make a custom canvas on Canva based on the dimensions above and upload your image. Adjust the images to size. Then download the images as JPEG then post to your website. If it’s blurred when uploaded, try downloading in PNG. If it’s still blurred, change the size of your canvas to 150px x 150px.
Some websites already have choices for icons and images but if you can’t find anything that matches your branding, find images in other royalty-free websites and upload your own. Make sure to credit the original owners of the images.
Canva has thousands of royalty-free images but you can alse search on Pixabay, Pexels and Unsplash. Paid websites for stock images are Adobe Stock Images, Getty Images and Shutterstock. Freepik also has a lot of resources for free and paid subscribers.
5. Add a personal touch
Your client is a human being who wants to feel like they’re hiring a real person, not just a faceless freelancer. Showing a bit of your personality in your website helps build trust and rapport.
The Personal Touch can be added through the following:
- ABOUT ME PAGE. I added my MBTI, Sun Sign, Rising Sign and the meaning of my name in my About Me article but you can also add a candid, behind-the-scenes photo to make it more personal
- SIGNATURE. Notice that I add a handwritten signature at the bottom of every blog? That’s an added personal touch.
- BLOG. Unload your professional insights in your blogs. Establish your authority while being relatable.
- SKILLS AND INTERESTS SECTION. My mentor added a section after her About Me Article. It’s just a casual photo of her smiling with a peace sign. She added playfully arranged texts around the photo, saying “89 clients”, “1757 posts”, “29314972465 cups of coffee”.
For my portfolio website, I’m thinking of adding a photo with my 5 dogs with the caption “Cats rule”. (I used to own several cats and cats rule indeed, but don’t tell my dogs that.)
Your Freelancing Portfolio Canva Template
I made you a Freelancing Portfolio that you can use to start if you can’t make your own website yet. It’s a Canva Template that you can customize according to your color palette and font. It’s drag and drop and fill-in the blank template that’s perfect for Free and Pro Canva Users.
Download it here:
Reminders
Canva Websites are not real websites. Use Wordpress or Strikingly. You can also use Google Sites or even Blogspot. Linkedin is also a good option for a portfolio website for beginners. The ultimate goals is to have your own website with your own domain name.
Update your portfolio every time you finish a project.
Make sure you don’t have NDAs (Non-Disclosure Agreement) for the items you add to your portfolio. This includes graphics/images, words and company or clients’ names.
Get your website indexed on Google.
Your website won’t deliver results on its own. Add it in all your online and social media profiles and promote it on social media.
Were you expecting a step by step tutorial about how to make a website? I was thinking of including that but it’s gonna make this article too long. I’ll probably post a YouTube video. So…
If you want to learn how to make a portfolio website on Strikingly or Google Sites with all the technical detals, I’ll gladly make you a tutorial. Please tell me in the comment section if you do.
See you next week and Happy Freelancing!
