1---
 2import { profileConfig } from '@/config';
 3import ImageWrapper from '@components/utils/ImageWrapper.astro';
 4import Button from '@components/widgets/Button.astro';
 5import { Icon } from 'astro-icon/components';
 6---
 7
 8<div id="profile-card" class="card border-base-300 bg-base-200 border">
 9  <figure class="px-4 pt-4">
10    <a href="/about/" class="overflow-clip rounded-xl">
11      <ImageWrapper
12        class="duration-300 hover:scale-105 hover:brightness-110"
13        src={profileConfig.avatar}
14        alt={profileConfig.name}
15      />
16    </a>
17  </figure>
18  <div class="card-body items-center p-5 text-center">
19    <div class="card-title">
20      <a href="/about/" class="hover:text-primary font-bold duration-150"
21        >{profileConfig.name}</a
22      >
23    </div>
24    <div>{profileConfig.bio}</div>
25    <div class="flex flex-row flex-wrap items-center justify-center gap-2">
26      {
27        profileConfig.socialLinks.map((link) => (
28          <Button
29            href={link.url}
30            title={link.name}
31            target="_blank"
32            class="btn-circle btn-ghost tooltip text-2xl"
33            data-tip={link.name}
34            rel="me"
35          >
36            <Icon name={link.icon} />
37          </Button>
38        ))
39      }
40    </div>
41  </div>
42</div>