mirror of
https://github.com/IT4Change/IT4C.dev.git
synced 2026-03-01 12:44:23 +00:00
Ulf Gebhardt
33310a43c5
* rename test:lint:eslint to lint and update eslint-config-it4c package * simplify config and make it ts * jest update & ts * suppress server logging output in tests * remove test node_env as it is default for jest * use eslint-config-it4c * packages = module * fix tailwind as ts * eslitn autofix * more fixes * tsconfig & some eslint rules * fixes * more fixes * more exceptions * do not allow warnings * fix config * ignore vuepress generated configs * ts include fix
42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<template>
|
|
<a
|
|
:href="profileUrl"
|
|
class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"
|
|
>
|
|
<div class="relative w-48 h-48 mx-auto mb-4">
|
|
<!-- Image container to control scaling bounds -->
|
|
<img
|
|
:src="image"
|
|
:alt="name"
|
|
class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"
|
|
/>
|
|
<!-- Overlay mit highlight-color-light Variable -->
|
|
<div
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"
|
|
/>
|
|
</div>
|
|
|
|
<h4
|
|
class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300"
|
|
>
|
|
{{ name }}
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">{{ role }}</p>
|
|
</a>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
name: string
|
|
role: string
|
|
image: string
|
|
profileUrl: string
|
|
}>()
|
|
</script>
|
|
|
|
<style>
|
|
.overlay-bg {
|
|
background-color: var(--highlight-color-light);
|
|
}
|
|
</style>
|