99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import IconCloud from 'vue-icon-cloud'
|
|
|
|
defineProps<{
|
|
src: string
|
|
alt: string
|
|
}>()
|
|
|
|
const techSlugs = [
|
|
'javascript',
|
|
'typescript',
|
|
'vuedotjs',
|
|
'nuxt',
|
|
'tailwindcss',
|
|
'html5',
|
|
'css',
|
|
'nodedotjs',
|
|
'go',
|
|
'docker',
|
|
'git',
|
|
'github',
|
|
'nginx',
|
|
'postgresql',
|
|
'linux',
|
|
'cloudflare',
|
|
]
|
|
|
|
const cloudImages = techSlugs.map(slug => `https://cdn.simpleicons.org/${slug}/${slug}`)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="avatar-cloud">
|
|
<IconCloud :images="cloudImages" />
|
|
|
|
<div class="avatar-core">
|
|
<img
|
|
:src="src"
|
|
:alt="alt"
|
|
class="avatar-image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.avatar-cloud {
|
|
--cloud-size: clamp(12rem, 31vw, 14rem);
|
|
--avatar-size: clamp(6.4rem, 19vw, 7.35rem);
|
|
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--cloud-size);
|
|
height: var(--cloud-size);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.avatar-cloud::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 17%;
|
|
border-radius: 9999px;
|
|
background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 64%);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.avatar-cloud :deep(canvas) {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12));
|
|
}
|
|
|
|
.avatar-core {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--avatar-size);
|
|
height: var(--avatar-size);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
|
|
border-radius: 9999px;
|
|
object-fit: cover;
|
|
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
|
|
}
|
|
|
|
.dark .avatar-image {
|
|
border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
|
|
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
|
|
}
|
|
</style>
|