File size: 5,567 Bytes
96dd062 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | ---
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>
|