How to Model a Project Page for your Portfolio

This article describes how to create a custom type for a rich page that showcase on of your successful projects as a freelancer or an artist for your personal portfolio website. Creating a personal website that showcases your past projects is crucial for your online presence, as it helps you to climb the search rankings, increase your online visibility, and find new prospects and clients for your freelance or artistic activities.

Page structure

Static Fields
Dynamic Zone

We'd recommend creating a static zone for fields that should always be there (like hero banner titles, header image, author names).

  • Title field with H1 tags
  • An Image field for the hero banner main image
  • A Date field field for the project or article release date (this date can be overridden by the documents default's "first_publication_date" field in the API.)
  • A Content Relationship to link to the Author's bio
  • A Group field containing a Key Text field to assign custom tags
1 of 5
< PreviousNext >

This is your Slice zone with different sections. First section is just a paragraph of text that you can repeat

In the repeatable zone:

  • Rich text field for a paragraph
2 of 5
< PreviousNext >

This second Slice will allow you to insert a full-width image to your page

In the repeatable zone:

  • Image field

By putting this Image field in the repeatable zone, you can either stack them vertically, or create an image slider

3 of 5
< PreviousNext >

This second Slice will allow you to add a image & text component

In the non-repeatable zone:

  • Image field
  • Rich text field for a short description of the project
  • A select field with 2 options for image alignment (left or right)
4 of 5
< PreviousNext >

You can create a Slice that will feature related projects.

In the non-repeatable zone:

  • Title field with H2 tag for the component title

In the repeatable zone:

  • Content Relationship field to attach the corresponding project of your choice
  • Image field
  • Rich text field for a short description snippet of the project
5 of 5
< PreviousNext >

How to set it up in Prismic

  • Set up a new repeatable Custom Type
  • Copy the JSON below and paste it under the JSON editor of this new custom type
CopyExpand/Collapse

What editors will see

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call