Change work mobile view

This commit is contained in:
2024-02-22 21:25:38 +01:00
parent efebe682fd
commit daaec3e5cf
2 changed files with 19 additions and 15 deletions

View File

@@ -204,7 +204,7 @@ async function suggest() {
<h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
<div class="absolute -inset-y-2 md:-inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
<NuxtLink :to="talent.website" target="_blank">
<span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
<span class="absolute -inset-y-2 md:-inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
<div class="flex gap-2 items-center">
<h1 class="relative z-10">
{{ talent.name }}

View File

@@ -16,26 +16,30 @@ const { data: projects } = await getProjects()
</p>
</div>
<div class="mt-16 md:mt-20">
<div class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<div
v-for="project in projects"
:key="project.name"
class="group relative flex flex-col justify-between"
>
<div class="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
<UIcon :name="project.icon" size="24" dynamic />
<div class="flex items-start gap-4">
<div class="relative z-10 flex p-2 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
<UIcon :name="project.icon" size="24" dynamic />
</div>
<div>
<h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
<div class="absolute -inset-y-4 md:-inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
<NuxtLink :to="project.link" target="_blank">
<span class="absolute -inset-y-4 md:-inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
<span class="relative z-10">{{ project.title }}</span>
</NuxtLink>
</h2>
<p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400">
{{ project.description }}
</p>
</div>
</div>
<h2 class="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100">
<div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
<NuxtLink :to="project.link" target="_blank">
<span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
<span class="relative z-10">{{ project.title }}</span>
</NuxtLink>
</h2>
<p class="relative z-10 my-2 text-sm text-zinc-600 dark:text-zinc-400">
{{ project.description }}
</p>
<div class="flex gap-2 z-10">
<div class="mt-2 flex gap-2 z-10 flex-wrap">
<UBadge
v-for="tag in project.tags"
:key="tag"