| --- | |
| import { Icon } from "astro-icon/components"; | |
| import ImageWrapper from "@/components/common/ImageWrapper.astro"; | |
| import { profileConfig } from "@/config/profileConfig"; | |
| import { url } from "@/utils/url-utils"; | |
| --- | |
| <div class="card-base p-3"> | |
| <a | |
| aria-label="Go to About Page" | |
| href={url("/about/")} | |
| class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3 | |
| max-w-48 lg:max-w-none overflow-hidden rounded-xl active:scale-95" | |
| > | |
| <div | |
| class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50 | |
| w-full h-full z-50 flex items-center justify-center" | |
| > | |
| <Icon | |
| name="fa7-regular:address-card" | |
| class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl" | |
| /> | |
| </div> | |
| <ImageWrapper | |
| src={profileConfig.avatar || ""} | |
| alt="Profile Image of the Author" | |
| class="mx-auto lg:w-full h-full lg:mt-0" | |
| loading="eager" | |
| fetchpriority="high" | |
| widths={[350]} | |
| sizes="350px" | |
| /> | |
| </a> | |
| <div class="px-2"> | |
| <div | |
| class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition" | |
| > | |
| {profileConfig.name} | |
| </div> | |
| <div | |
| class="h-1 w-5 bg-(--primary) mx-auto rounded-full mb-2 transition" | |
| > | |
| </div> | |
| <div class="text-center text-neutral-400 mb-2.5 transition"> | |
| {profileConfig.bio} | |
| </div> | |
| <div class="flex flex-wrap gap-2 justify-center mb-1"> | |
| {profileConfig.links.length > 1 && profileConfig.links.map(item => | |
| { | |
| const showName = item.showName; | |
| const className = showName | |
| ? "btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95" | |
| : "btn-regular rounded-lg h-10 w-10 active:scale-90"; | |
| if (item.url.startsWith("mailto:")) { | |
| const encodedEmail = Buffer.from(item.url.replace("mailto:", "")).toString("base64"); | |
| return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={` | |
| (function() { | |
| const encodedEmail = this.getAttribute('data-encoded-email'); | |
| const decodedEmail = atob(encodedEmail); | |
| this.href = 'mailto:' + decodedEmail; | |
| this.removeAttribute('data-encoded-email'); | |
| this.removeAttribute('onclick'); | |
| this.click(); | |
| return false; | |
| }).call(this); | |
| `.replace(/\s+/g, " ").trim() | |
| }, | |
| class={className}> | |
| <Icon name={item.icon} class="text-[1.5rem]"></Icon> | |
| {showName && item.name} | |
| </a> | |
| } else { | |
| return <a rel="me" aria-label={item.name} href={item.url} target="_blank" class={className}> | |
| <Icon name={item.icon} class="text-[1.5rem]"></Icon> | |
| {showName && item.name} | |
| </a> | |
| } | |
| } | |
| )} | |
| {profileConfig.links.length == 1 && (function(item){ | |
| if (item.url.startsWith("mailto:")) { | |
| const encodedEmail = Buffer.from(item.url.replace("mailto:", "")).toString("base64"); | |
| return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={` | |
| (function() { | |
| const encodedEmail = this.getAttribute('data-encoded-email'); | |
| const decodedEmail = atob(encodedEmail); | |
| this.href = 'mailto:' + decodedEmail; | |
| this.removeAttribute('data-encoded-email'); | |
| this.removeAttribute('onclick'); | |
| this.click(); | |
| return false; | |
| }).call(this); | |
| `.replace(/\s+/g, " ").trim() | |
| }, | |
| class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95"> | |
| <Icon name={item.icon} class="text-[1.5rem]"></Icon> | |
| {item.name} | |
| </a> | |
| } else { | |
| return <a rel="me" aria-label={item.name} href={item.url} target="_blank" | |
| class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95"> | |
| <Icon name={item.icon} class="text-[1.5rem]"></Icon> | |
| {item.name} | |
| </a> | |
| } | |
| })(profileConfig.links[0])} | |
| </div> | |
| </div> | |
| </div> | |