Portfolio-Resume for HR Professional

Overview

Tatiana Morgunova is an HR professional with over 13 years of experience in People Operations. As a creative person, she knew the importance of standing out, so she wanted to apply her professional knowledge as a hiring manager to her own career.

I had the pleasure of helping this innovative professional realize her dream, taking her design-inspired concept and building it to showcase her HR expertise.

Challenge

Every great career has a turning point. For Tatiana, that moment came years ago when she used a Brag Book to land a job. This powerful tool made such a lasting impression that it was the deciding factor in her hiring.

Tatiana realized that while her old Canva PDF portfolio had served her well, she now needed a more powerful, professional tool to stand out.

When she saw my recent portfolio website for a UX/Product Designer and Project Manager, she reached out on LinkedIn because she knew she needed a creative partner who could help her build a website that would be both functional and a true reflection of her skills.

Solution

For this custom project, I provided an end-to-end service to bring Tatiana’s vision to life.

My strategic design transformed her non-visual expertise into a visually attractive portfolio by creating a great structure for her content. I organized her information in a clear, logical order, designing strategic placements for visuals and images to serve as proof and highlight her achievements, and provide a strong visual experience.

I then developed a fully functional, SEO-optimized website and provided custom training videos to empower her to confidently manage and grow her digital hub herself.

The Process

This custom project was built from scratch to meet my client’s specific needs. My process for a custom build like this ensures every design and feature is a perfect fit for her content and goals, a level of detail that differs from a template-based project.

I strategically designed every element—from the layouts and pages to the content flow—to ensure every piece of information was placed for maximum impact.

1. Sitemap & Wireframes

I started with a sitemap to create a clear blueprint for the website’s structure.

Then, I developed wireframes as a visual guide to define the layout and content placement on each page. This ensured the site's user flow would be intuitive and organized for visitors.

2. Professional Design

Next, I moved into the design phase. To give my client options, I provided multiple design variations for key sections, such as the Stats and Recommendation sections, showing how they could be customized with different layouts and background colors. This process gave my client the freedom to choose the best layout for her specific content, whether it included just numbers and text or a combination of text, numbers, and images.

All of the design work was done in Figma. The Figma design was a flexible guide, not a final blueprint, as I reserved the right to make changes and adapt the design during the development phase. This ensured that the final result perfectly matched the length of the copy and followed the best design practices.

3. Webflow Development

I built this website with a Static Page Template feature, giving my client a cost-effective Webflow Basic site plan.

I developed 9 publicly-viewable pages in total:

• 2 unique Static pages: Home, About
• 1 Static page template "Project".

I crafted a single template and then manually customized it with unique content to build 7 individual project pages. This ensured that every project page was polished and professional, as the website was not using a CMS Collection for auto-generation.

My Recommendation 💡

While a Basic site plan has a lower initial cost, I would recommend a CMS site plan for any content-driven site. This is especially true for repeatable content like resources, articles, services, courses, products, or events.

This approach allows you to grow, scale, and easily create new pages without additional design and development work. A CMS is the best way to ensure your website is a long-term asset that continues to work for you.

For a CMS example, you can read the full case study of my other project, "Portfolio for UX/Product Designer and Project Manager.

4. Support Videos

I recorded a series of custom video tutorials in an unlisted YouTube playlist, giving the client private access to tutorials that empower her to easily manage her website. 

The videos cover essential tasks, including:

• How to create new projects from a template and add them to the navigation and footer
• How to add new professional references
• How to upload a resume PDF file or a link from Google Drive
• How to back up the website to keep your digital home safe.

To ensure a professional and consistent brand identity, I created a Brand Kit with instructions on how to use brand colors and fonts, and recorded a video walking the client through the document.

5. Search Engine Optimization (SEO)

Good SEO is crucial for any website because it helps the right people find you online when they search for information related to your specific skills and expertise.

✅ Site is propagating globally (DNS check)

‍

✅ Performance test

✅ Page speed = 100/100⚡️

The Result

1. Show Your Impact with Metrics 📈

Numbers are the most powerful way to show your impact and immediately capture the attention of hiring managers. To help Tatiana showcase her achievements, I designed a dedicated Results & Impact section for her portfolio. 

I created 2 (two) flexible templates with both a horizontal and a vertical layout, allowing her to present a variety of metrics and achievements in a visually compelling way.

2. A Resume Isn't Enough 🚫

In today's competitive landscape, a resume alone often falls short. A professional portfolio website gives you total control over your career and reputation by allowing you to update or remove outdated content and add relevant, evergreen information.

While it may seem like a huge effort, creating a professional portfolio website is more manageable than you think and is very rewarding in the long run. Tatiana was a pioneer in her field, using a professional portfolio to set a new trend and show that a non-creative professional can stand out in a unique way.

A portfolio website is not just a passive tool but an active part of the job search. When you send a follow-up message after a job application, a link to your website generates a clickable preview image that immediately grabs human attention. This makes your message more personal and engaging than plain text, increasing your chances of being noticed by recruiters.

3. The Hidden Advantage for Coaches & Mentors 💎

Tatiana's professional portfolio works in two powerful ways:

• As a tool for her own career advancement
• As a practical example for the job seekers she mentors.

Her About Me page highlights her expertise as a career coach, who dedicates her free time to helping Russian-speaking immigrants establish their careers in the U.S.

Tatiana's portfolio website is a great piece of evidence that can attract new clients to her coaching business. She can showcase it in her workshops and use it as a powerful, "show, don't tell" demonstration of how to be a pioneer in a tough job market.

In the new AI era, Tatiana's website empowers her clients to turn her advice into action. It's an effective tool that helps them stand out, adapt to a challenging market, and secure a job ahead of the competition.

Live website demo

This 4 min demo video gives you a quick look at the professional, easy-to-manage website I built for my client.

Note: If the live website link is unavailable, please view a development copy of the site in my Webflow profile. This version reflects the site as delivered to the client and may differ from the current production website.