What do good portfolio website examples have in common?
Good portfolio website examples share four things: a one-line statement of who you are and what you do, three to six curated projects, a short case study for each project, and an obvious way to contact you. In WordPress, you can build all four with core blocks.
This guide shows you how to read portfolio website examples, turn what works into a plan, and build that plan in WordPress with a block theme and the Site Editor. You do not need a paid page builder. Each step names the exact menu or block to use, as it appears in WordPress 7.1.
In this guide
Key Takeaways
- Study portfolio website examples for structure (positioning, project count, case studies, contact path), not for visual effects you cannot maintain.
- A block theme unlocks the Site Editor, so you can design the header, footer, templates and styles without a page builder plugin.
- The Gallery block covers most image layouts: 1 to 8 columns, Crop images to fit, Aspect ratio, and the Enlarge on click lightbox.
- Write alt text and use descriptive file names for every project image, because that is how search engines and screen readers understand your work.
- Before launch, untick “Discourage search engines from indexing this site”, set Post name permalinks, and submit your sitemap in Search Console.
Step 1: Study portfolio website examples and pick a structure
Before you open WordPress, look at 10 to 15 portfolio website examples in your field and note how each one is organised, not just how it looks. Structure is what you can copy; a custom WebGL animation is not.
Lists of the best portfolio websites are easy to find, but most are published by website builders and show work made with their own tools. Use them for ideas, then check four things on every site you save: what the first screen says, how many projects are shown, what a single project page contains, and how many clicks it takes to reach a contact form or email address.
The table below maps common types of portfolio website examples to the technique that makes them work and the WordPress block that rebuilds it.
| Portfolio type | What it does well | How to rebuild it in WordPress |
|---|---|---|
| Product or UX designer | Home page shows 3 to 6 project cards; each opens a full case study | Query Loop block showing posts from a “Projects” category, or a Grid of Cover blocks, each linking to a case study |
| Photographer | Large image grid with a full-screen viewer | Gallery block with Enlarge on click and Crop images to fit |
| Developer | One page: positioning line, projects, skills, contact | Cover block hero, Columns block for projects, Navigation links to anchors on the same page |
| Illustrator or artist | Work grouped into series or collections | One page per series, each with its own Gallery block and a fixed Aspect ratio |
| Writer or content marketer | Short list of published clips with outlet names | List block or Query Loop with titles, a one-line summary and an outbound link to each piece |
| Student or career changer | Self-initiated projects with the process explained | Case study pages built with Heading, Paragraph and Image blocks |
Pick one row as your model; a single structure keeps the first version small enough to finish.
Step 2: Prepare hosting and the core WordPress settings
Host your portfolio website on a self-hosted WordPress install, on a server that meets the current requirements, then fix two settings before you add any content.
WordPress recommends PHP 8.3 or greater, MySQL 8.0 or MariaDB 10.11 or greater, and HTTPS support. Older versions can still run WordPress, but they are past end of life and can expose your site to security problems. Ask your host which versions your plan uses, and connect a custom domain so your portfolio website has an address you own.
- Go to Settings > Permalinks, choose Post name, and click Save Changes. Your case studies get readable URLs such as example.com/brand-redesign.
- Go to Settings > General and set the Site Title to your name or studio name.
- Delete the sample post and sample page so they do not appear in your sitemap.
If server setup is not something you want to handle, our website development team can configure hosting, HTTPS and these settings for you.
Step 3: Install a block theme and open the Site Editor
Install a block theme, because the Site Editor only works when a block theme is active. The Site Editor is where you design templates, the header and footer, and site-wide styles.
According to the WordPress Site Editor documentation, you find these themes at Appearance > Themes > Add New, then select Block Themes. Type “portfolio” in the search box to narrow the list, preview two or three, and activate the one whose layout is closest to the portfolio type you chose in Step 1. Then go to Appearance > Editor.
The Site Editor menu lists Identity, Styles, Pages, Navigation, Patterns and Templates. In WordPress 7.1 the admin bar stays visible on every Site Editor screen, and you can open the Command Palette with Ctrl+K on Windows and Linux or Cmd+K on macOS to jump to any template or page.
Step 4: Set your identity and site-wide styles
Set your name, tagline and logo under Identity, then choose fonts and colours once under Styles. The best portfolio websites keep type and colour consistent on every page.
- Identity: add your Site Title, a Tagline that works as your positioning line (for example, “Brand identity designer for independent restaurants”), a Site Logo and a Site Icon.
- Styles: browse the theme’s style variations first. If one is close, apply it and adjust Typography and Colors instead of starting from zero.
- Layout: keep the content width comfortable for reading case studies, and let galleries use wide or full width.
- Backup: once you are happy, open the three-dot menu next to Styles and use Tools > Export to download a zip of the theme with your templates and template parts.
If you design layouts in Figma first, mirror your spacing and type scale in Styles so the build matches the mock-up. Our Figma UI/UX design service covers that handover if you want a designer to plan it with you.
Step 5: Build the home page and make it the front page
Create a Home page for your portfolio website with your positioning line, your project grid and a contact prompt, then set it as the static front page under Settings > Reading.
- Go to Appearance > Editor > Pages, click the plus icon, enter “Home” and click Create draft.
- Add a Cover block with your name, your one-line positioning statement and a button that jumps to your work.
- Below it, add a project grid: a Query Loop block filtered to your “Projects” category, or a Grid block with one Cover block per project, each with a heading link to its case study.
- End the page with a short contact section: one sentence and a button to your Contact page.
- Go to Settings > Reading, choose A static page (select below) under “Your homepage displays”, and pick Home as the homepage. If you also keep a blog, choose a different page as the Posts page; the two cannot be the same.
Template areas such as the header and footer are locked while you edit a page. Use Edit template when you want to change them for every page at once.
Step 6: Create project galleries with the Gallery block
Visual portfolio website examples almost always rely on a clean image grid. In WordPress, the Gallery block handles columns, cropping and a lightbox without extra plugins.
Add it with the + Block Inserter or by typing /gallery, then choose Upload, Media Library or Use attached images. The Gallery block documentation explains that Use attached images creates a dynamic gallery that updates when you attach new images to the post; click Detach to turn it back into a regular gallery. You can also drag images from the Media Library or Openverse in the inserter’s media tab.
| Setting | What it does | When to use it in a portfolio |
|---|---|---|
| Columns | 1 to 8 columns, never more than the number of images | 2 or 3 for detailed work, 4 or more for thumbnails |
| Crop images to fit | Makes images in each row the same size | Mixed portrait and landscape shots |
| Aspect ratio | Applies one ratio to every image | A tidy, uniform grid for a series |
| Resolution | Full Size, Large, Medium or Thumbnail | Large for most grids, to keep pages light |
| Link: Enlarge on click | Opens a lightbox with forward and back navigation | Photography, illustration and print work |
| Navigation button type | Icon, Text or Both for lightbox buttons | Text or Both gives visitors clear labels |
Prepare images before you upload them. Clean product or object shots with the free Soft Learn Hub background remover, and name each file after what it shows, such as cafe-menu-redesign-cover.jpg.
Step 7: Write a case study page for each project
Give each project its own page or post with a clear problem, your role, the process and the outcome, so visitors and search engines see more than a grid of pictures. Case studies are where the best portfolio websites explain the thinking behind the visuals.
Use the same heading order on every case study so the pages are quick to scan:
- Overview: client or project type, your role, tools and timeline.
- The problem: what needed to change and for whom.
- Process: sketches, wireframes or drafts, with one or two sentences per image.
- Result: what shipped. Only quote numbers you can verify and have permission to share.
- Next step: a link to the next project and to your Contact page.
For every Image block, open the Content tab and fill in Alternative text. Describe what the image shows in plain words. Use Mark as decorative only for images that add nothing, such as a background texture. Alt text set in the Media Library becomes the default when you insert that image elsewhere, so set it there for images you reuse.
Single page or separate case studies? The comparison below helps you decide.
| Factor | Single-page portfolio | Separate case study pages |
|---|---|---|
| Build time | Shortest | Longer, one page per project |
| Room to explain your process | Limited | Plenty |
| Search visibility | One URL competing for everything | Each project can rank for its own topic |
| Best for | Developers, early-career portfolios | Designers, consultants, anyone selling services |
Step 8: Add About and Contact pages
Add an About page that explains who you are and who you work with, and a Contact page with a form or email address. These two pages turn a visitor to your portfolio website into an enquiry.
Put a real photo of yourself on the About page. If your headshot needs a cleaner background, follow our guide to choosing a professional headshot background. Then add structured data: Google’s ProfilePage documentation lists “About Me” pages among suitable uses, and the markup requires a mainEntity that is a Person or an Organization. You can build the JSON-LD with our free Schema Markup Generator.
For the Contact page, use a form plugin or a plain mailto link. Keep the form short: name, email, a message field and, if useful, a budget or timeline drop-down. Add the page to your Navigation so it is reachable from every screen.
Step 9: Launch and get your portfolio indexed by Google
Before you share the link, make sure search engines are allowed to index the site, then submit your sitemap in Google Search Console.
- Go to Settings > Reading and make sure Discourage search engines from indexing this site is unticked. The Reading Settings documentation confirms that this box adds a noindex, nofollow robots meta tag.
- Open yoursite.com/wp-sitemap.xml (or your SEO plugin’s sitemap) to check that only real pages and case studies are listed.
- Add the site as a property in Search Console and submit the sitemap URL in the Sitemaps report.
- Check image SEO against Google’s image guidelines: descriptive alt text without keyword stuffing, descriptive file names, images placed near related text, and supported formats such as WebP or AVIF.
- Test every page on a phone, including galleries, the lightbox and the contact form.
For a fuller checklist of crawling, speed and indexing checks, read our technical SEO basics guide after launch.
Common mistakes and how to fix them
- The Site Editor is missing. Your active theme is a classic theme. Switch to a block theme, or use Appearance > Customize, which classic themes still provide.
- The gallery will not show more columns. Columns are capped at the number of images. Add images, or lower the column count.
- Images look stretched or uneven. Turn on Crop images to fit or set one Aspect ratio for the whole gallery.
- Your portfolio website does not appear in Google. Check that “Discourage search engines” is unticked, then use URL Inspection in Search Console on your home page.
- Case study URLs contain ?p=123 or ?page_id=45. Permalinks are still set to Plain. Switch to Post name and save.
- Too many projects. Trim to your strongest three to six. Strong portfolio website examples show a short, consistent set, not a long archive.
- Grainy or blurry photos. Re-export from the original file at a higher resolution, or see our guide on how to fix grainy photos.
Next steps
Once your portfolio website is live, follow this reading order: SEO website design basics for layout and content decisions, then technical SEO basics for crawling and speed, then the Schema Markup Generator guide to add Person and ProfilePage markup step by step.
If you would rather have the build done for you, our WordPress website development service covers block theme setup, case study templates and launch checks. Email contact@softlearnhub.com with links to two or three portfolio website examples you like.
Frequently Asked Questions
What should a portfolio website include?
Include a home page with a one-line positioning statement, three to six of your best projects, a case study for each project, an About page with a real photo, and a Contact page. Most of the best portfolio websites also link to one or two professional profiles, such as LinkedIn or Dribbble, so visitors can check your background.
How many projects should I put in my portfolio?
Three to six projects is a practical range. It is enough to show range and consistency, and short enough that each project gets a proper case study. Choose projects that match the work you want more of, and replace older pieces when stronger ones are ready rather than adding everything you have made.
Can I build a portfolio website in WordPress without a page builder?
Yes. With a block theme active, the Site Editor lets you design templates, the header, footer and styles, and core blocks such as Cover, Gallery, Grid and Query Loop handle the layouts most portfolios need. WordPress itself is free; you still pay for hosting and a domain on a self-hosted site.
Do I need a block theme for a portfolio?
You need a block theme to use the Site Editor. Filter Appearance > Themes > Add New by Block Themes and search for “portfolio” to see options built for creative work. The best theme is the one whose default layout already matches your structure, so you change styles rather than rebuild templates.
Should a portfolio be one page or have separate case studies?
A single page is faster to build and suits developers or people with only a few projects. Separate case study pages give you space to explain your process and let each project appear in search for its own topic. Many portfolio website examples combine both: a short home page that links to full case studies.
What if I have no clients yet?
Add self-initiated projects, course work or redesign concepts to your portfolio website, and label them honestly as personal or concept work. Write the same case study structure: the problem you chose, your process and what you would test next. Clear thinking on a self-set brief shows your skills as well as paid work does.
