Every Portmyfolio site Every Mintlify site needs a port.json file with the core configuration settings. Learn more about the properties below.

Properties

Basic configuration

websiteTitle
string
required

This is the tilte of your website, used in the Next.js metadata.

websiteDescription
string
required

This is the description of your website, used in the Next.js metadata.

websiteUrl
string
required

Used to set the metadataBase which is the base path and origin for absolute urls for various metadata links such as OpenGraph images.

name
string
required

Your name to display in the avatar card

designation
string
required

Your designation to display in the avatar card

avatar
string
required

The path to the avatar image to display in the avatar card. You just need to provide the path to the image in the public directory. You need not include public in the path.

For example:

{
  "avatar": "/images/avatar.jpg"
}
colors
object
required

The colors object serves as a comprehensive palette for defining the visual identity of the website. It includes two distinct themes: light and dark. The colors should be preferably in hex format.

Example:

{
  "colors": {
    "light": {
      "primary": "#fff",
      "secondary": "#000",
      "tertiary": "#f8f9fa",
      "accent": "#dee2e6",
      "muted": "#6c757d"
    },
    "dark": {
      "primary": "#000",
      "secondary": "#fff",
      "tertiary": "#22223b",
      "accent": "#495057",
      "muted": "#6c757d"
    }
  }
}
navigation
array
required

The navigation array is used to define the links in the navigation bar. Each object in the array can have a group and a pages property.

group
string

The group property is used to group the navigation links. Keeping it optional means that the routes are the root level.

pages
array
required

The pages array is used to define the links in the navigation bar.

Example:

{
  "pages": [
    {
      "name": "Home",
      "href": "/home",
      "icon": "Home",
      "keyBoardShortCut": "1"
    },
    {
      "name": "Journeys",
      "href": "/journey",
      "icon": "<Navigation />",
      "keyBoardShortCut": "3",
      "subNavigation": [
        {
          "name": "Stack",
          "href": "/stack",
          "description": "My tech stack"
        },
        {
          "name": "Bookmarks",
          "href": "/bookmarks",
          "description": "My bookmarks"
        }
      ]
    },
    {
      "name": "Blog",
      "href": "https://www.blogger.com/about/?bpli=1",
      "openInNewTab": true
    }
  ]
}

These are the social links which always open in a new tab.