mirror of
https://github.com/IT4Change/IT4C.dev.git
synced 2025-12-13 09:25:49 +00:00
3d5d2fff0a
* - added new site /new/README.md - added new components - added component registration "client.js" - added approach for tailwind integration (does not work yet) * Use TypeScript and script setup * No ts for .textlintrc * Make Tailwind work * include heropage contents partially fixes https://github.com/IT4Change/IT4C.dev/issues/221 * adjust contents of Services Adjust contents according to https://github.com/IT4Change/IT4C.dev/issues/222 * added Team & Values texts According to https://github.com/IT4Change/IT4C.dev/issues/223 * fixed type * fixed unreferenced styles/main.css * sample from theme-hope-docu From https://theme-hope.vuejs.press/guide/layout/home.html#project-highlights-and-features * - adapted Hope hero section - removed remaining Hero Widgets - added ContentSection - optimized layout of team section * - optimized layout/style of ContactForm * - made TeamMember functional and added some transitions - added new members as placeholder * Hero at 100vh; transparent navbar on home page * Add text and image for Max * Keep logo text in same row as logo * - added REST request to mail backend - added limitations to contact fields * - added photo and phone number to contact form * - changed contact person and phone number * - replaced hero section - replaced default layout - replaced footer * clean up * - optimized colors * - clean up AI comments * move new page from /new to / * fixed errors with contactForm * fix projects * fix merge error * corrected image for Sebastian * - improved layout * - fixed tag colors - fixed phone number color and hover --------- Co-authored-by: Sebastian Stein <git@codepassion.de> Co-authored-by: Maximilian Harz <maxharz@gmail.com> Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de> Co-authored-by: Sebastian Stein <sebastian@codepassion.de>
40 lines
1.2 KiB
Vue
40 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>
|
|
</div>
|
|
|
|
<h4 class="font-semibold text-gray-900 transition-colors duration-200 group-hover:text-gray-600">
|
|
{{ name }}
|
|
</h4>
|
|
<p class="text-sm text-gray-600">{{ 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> |