Configure the Portfolio of Your Website

The portfolio is highly customizable. In this guide, we’ll walk through each configurable property and explain how to tailor it to your needs.

Website Basics

At the src/data/site.tsx file, you can customize the basic information of your website.

url: the domain of your website. Use ‘www’ as prefix for vercel recommendation.
lastUpdated: the last updated date of your website, displayed in the footer.
avatarUrl: the url of your avatar. Note /*.png will seek in the public directory. Thus replace /me.png with your own avatar image.

At the src/i18n/messages/[locale]/common.json file, you can customize the navigation and footer items of your website.

The navbar items are displayed at top on desktop and bottom on mobile. You can use external links or internal links. Icons are from src/components/icons.tsx. For example:


{ href: "/resume.pdf", icon: "fileuser", label: "CV" },
{ href: "https://www.linkedin.com/in/xxxxxx", icon: "linkedin", label: "LinkedIn" },

If /resume.pdf is used, remember to replace the /resume.pdf with your own resume file in the public directory.

To delete theme toggle or language toggle button, delete the corresponding <DockIcon> in the src/components/blocks/navbar/navbar.tsx file.

The similar configuration is available for the footer items. You can customize the footer items by modifying the footer object in the src/i18n/messages/[locale]/common.json file.

Add More Icons

To add more icons, you have two options:

Browse the icon collection at lucide and add your chosen icons to src/components/icons.tsx
Find custom SVG icons from other sources and integrate them into src/components/icons.tsx

Both approaches allow you to expand the available icons for your navbar and other UI elements.

General Information

At the src/i18n/messages/[locale]/personal.json file, you can customize the general information of your website.

name: your name. Used in visible places and metadata. The following variants are necessary for displaying purposes.
- full: your full name.
- given: your given name.
- family: your family name.
- initials: your initials.
subtitle: Displayed under your name.
headline: Your headline. Displayed at the top of the portfolio.
welcome: Your welcome message for og image.
ogImageUrl: The url to display in og image.
bioMarkdown: Your bio. Displayed at the about section.
location: Your location. Displayed at the footer.
blogTagline: Your blog tagline. Displayed at the blog section.

The social media links are defined in social object in src/i18n/messages/[locale]/collections.json. It is a list of objects with the following properties:


social: [
  {
    name: "GitHub",
    url: "https://github.com/zhengzangw",
    icon: Icons.github,
    navbar: false,
    content: true,
    footer: true,
  },
];

name: the name of the social media.
url: the url of the social media.
icon: the icon of the social media. To add more icons, see Add More Icons.
navbar: whether to display in the navbar.
content: whether to display in the portfolio under the About section.
footer: whether to display in the footer.

There are three places to display the social media links, namely navbar, portfolio and footer. You can customize the display by setting the navbar, content and footer properties to true or false.

RSS Feed

RSS feed is supported for the blog posts for each language.

Configure sections of your portfolio

After setting up the basic information of your portfolio (see Portfolio Basic), you can configure the sections of your portfolio.

The following sections are predefined in the template, and the data in src/data.tsx are easy to understand and modify.

news: News section.
projects: Projects section.
skills: Skills section.
education: Education section.
work: Work section.
awards: Awards section.
academic-services: Academic services section.
invited-talks: Invited talks section.