#Profile Card

The profile card is a sidebar component on the homepage that introduces you to your visitors. It displays your avatar, name, a personal motto, and links to your social media profiles — all styled with the theme's signature claymorphism design.

#Configuration

The profile card is configured under the profile key in _config.modernduang.yml:

profile:
  avatar: https://example.com/avatar.png
  motto: Enjoy the moment
  social:
    - name: GitHub
      url: https://github.com/yourname
      icon: github
    - name: Bilibili
      url: https://space.bilibili.com/12345
      icon: bilibili
    - name: Email
      url: mailto:[email protected]
      icon: email

#Social Link Object

Each item in the social array has three fields:

#Display Name — profile.author

The profile card's display name is not set in the profile config directly. Instead, it is automatically pulled from Hexo's main configuration file (_config.yml):

# hexo's _config.yml
title: My Blog
author: Your Name    # ← This becomes the profile card name

If author is not set in _config.yml, the profile card will fall back to displaying the site title.

#Social Icons

ModernDuang ships with 11 built-in social icons that you can reference by name:

Using a built-in icon is as simple as setting icon: github (lowercase, no spaces). The theme automatically renders the correct SVG and applies platform-appropriate hover colors.

#Custom SVG Icons

If you need an icon for a platform not in the built-in list, you can supply an inline SVG string:

profile:
  social:
    - name: Ko-fi
      url: https://ko-fi.com/yourname
      icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.68 3.123 1.68 3.123z"/></svg>'

Tip: Make sure your custom SVG has viewBox="0 0 24 24" and fill="currentColor" for consistent sizing and theming with the built-in icons.

#Visual Design

The profile card features the claymorphism aesthetic:

• The avatar is displayed in a circular frame with a soft inner shadow
• The name uses the site's heading font at a prominent size
• The motto appears below the name in a lighter weight and subtler color
• Social icons are arranged in a row and each icon gets a colored background on hover (e.g., GitHub turns dark gray, Bilibili turns pink, Email turns blue)

#Clickable /about Link

All core elements of the profile card — the avatar, name, and motto — are clickable links that point to /about. Visitors can click anywhere on the card (avatar, name, or motto text) to navigate to your About page for a more detailed introduction.

This provides intuitive navigation — from the homepage profile card, visitors can reach the About page with a single click, without needing to use the navigation bar.

#Where the Profile Card Appears

The profile card is displayed only on the homepage, in the sidebar area alongside the main content. On mobile screens, it moves to the top of the content area.

#Complete Example

profile:
  avatar: /img/avatar.jpg
  motto: 在代码与文字之间游走
  social:
    - name: GitHub
      url: https://github.com/yourname
      icon: github
    - name: Bilibili
      url: https://space.bilibili.com/12345
      icon: bilibili
    - name: Email
      url: mailto:[email protected]
      icon: email
    - name: RSS
      url: /atom.xml
      icon: rss

#Related Pages

• Social Icons — Complete reference for all 11 built-in icons
• Navigation & Menus — Top nav bar configuration
• Footer & ICP Beian — Social icons in the footer area