83 lines
2.2 KiB
Svelte
83 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import globe_icon from '$lib/extra-icons/globe.svg';
|
|
|
|
let team = [
|
|
{
|
|
name: 'Elias',
|
|
nickname: 'MineTec',
|
|
roles: ['Gründer', 'Support', 'Organisation', 'Softwareentwicklung', 'Systemadministrator'],
|
|
links: [{ name: 'Website', href: 'https://mhsl.eu/aboutme/', icon: globe_icon }]
|
|
},
|
|
{
|
|
name: 'Jannik',
|
|
nickname: 'Goldi187',
|
|
roles: ['Support', 'Organisation']
|
|
},
|
|
{
|
|
name: 'Martin',
|
|
nickname: 'olischma',
|
|
roles: ['Support', 'Systemadministrator', 'Softwareentwicklung']
|
|
},
|
|
{
|
|
name: 'Adrian',
|
|
nickname: 'h0nny27',
|
|
roles: ['Support']
|
|
},
|
|
{
|
|
name: 'Ruben',
|
|
nickname: 'bytedream',
|
|
roles: ['Softwareentwicklung'],
|
|
links: [{ name: 'Website', href: 'https://bytedream.dev', icon: globe_icon }]
|
|
},
|
|
{
|
|
name: 'Lars',
|
|
nickname: '28Pupsi28',
|
|
roles: ['Softwareentwicklung']
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Craftattack - Team</title>
|
|
</svelte:head>
|
|
|
|
<h1 class="text-3xl lg:text-5xl mb-4">Das Team</h1>
|
|
<div class="grid grid-cols-3 gap-4 my-4 justify-center">
|
|
{#each team as member}
|
|
<div class="card w-96 bg-base-200">
|
|
<div class="card-body px-4 py-6">
|
|
<div class="flex flex-col items-center">
|
|
<div class="avatar placeholder mb-2">
|
|
<div class="bg-neutral text-neutral-content w-24 rounded-xl">
|
|
<img
|
|
style="width: 85%; height: 85%"
|
|
src={`https://mc-heads.net/head/${member.nickname}`}
|
|
alt={member.name}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p class="text-center text-lg mb-1">{member.name} · {member.nickname}</p>
|
|
<p class="text-center text-sm font-light">{member.roles.join(' · ')}</p>
|
|
{#if member.links}
|
|
<div class="w-full flex items-center flex-col">
|
|
<div class="w-1/2 h-[1px] my-3 rounded bg-base-content" />
|
|
<div class="flex gap-3">
|
|
{#each member.links as link}
|
|
<a
|
|
class="block w-9 h-9 p-2 border rounded-full border-base-content"
|
|
href={link.href}
|
|
target="_blank"
|
|
title={link.name}
|
|
>
|
|
<img class="w-full h-full invert" src={link.icon} alt={link.name} />
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|