How to Model a Homepage for your Portfolio

This article describes how to create a custom type for a rich homepage for your personal portfolio website. Creating a personal website that showcases your skills, areas of expertise, and 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 Rich Text field for the main banner subheading
  • A Key Text field and a Link or Content Relationship field for your call-to-action
1 of 4
< PreviousNext >

This is your Slice zone with different sections. First section is this slider of your personal skills and expertise which will be a Slice, so that editors will be able to move it around.

In the non-repeatable zone:

  • Title field with H2 tag for the component title

In the repeatable zone:

  • Image field for a pictogram
  • Rich text field for a short description
2 of 4
< PreviousNext >

This second Slice will allow you to highlight the different projects that you have worked on and produced in the past.

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
  • Image field
  • Rich text field for a short description of the project
  • A select field with 2 options for image alignment (left or right)
3 of 4
< PreviousNext >

You can create a Slice that will show the next events or exhibitions that you will attend for your audience and future clients to meet you in person

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 event
  • Image field
  • Rich text field for a short description of the event
4 of 4
< 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