Configure the Portfolio of Your Website

The DATA object in src/data.tsx contains a lot of information. We will tear it down and explain each property one by one.

Website Basics

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.
navbar: Customize the navbar items.

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: Icons.fileuser, label: "CV" },
{ href: "https://www.linkedin.com/in/xxxxxx", icon: Icons.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.

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

name: your name. Used in visible places and metadata. The following variants are necessary for displaying purposes.
- surname: your surname.
- firstName: your first name.
- initials: your initials.
subtitle: Displayed under your name.
description: Your description. Displayed under your subtitle.
summary (supports markdown): Displayed at About section.
location and locationLink: Displayed at footer.

Customize Footer

The footer is defined at src/components/blocks/footer.tsx. You can customize the footer content by modifying the Footer component.

The discover column at footer can be customized by modifying discover in src/data.tsx.

The social media links are defined in contact.social. 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

There is a RSS feed at api/feed/atom.xml configured for your English blog. The feed is automatically generated from the markdown files in the content directory.

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.

Chinese Support

The main language of the website is English, and /en will be redirected to /. To modify Chinese information, you can modify chinese in src/data.tsx. The key name inside chinese is the same as the key name in DATA object.

For simplicity, the Chinese Portfolio support is only available for the basic information. If you want to add more, you can modify the corresponding file in the src/app/zh/page.tsx file.