130 lines
5.2 KiB
Plaintext
130 lines
5.2 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import { readItems } from '@directus/sdk';
|
|
|
|
import type { Education } from '@lib/directusTypes';
|
|
|
|
import directus from '@lib/directus';
|
|
|
|
const education = await directus.request(
|
|
readItems('site_education', {
|
|
fields: ['*'],
|
|
sort: ['-graduationDate'],
|
|
})
|
|
);
|
|
|
|
const certificate = await directus.request(
|
|
readItems('site_certificate', {
|
|
fields: ['*'],
|
|
sort: ['-issuerDate'],
|
|
})
|
|
);
|
|
|
|
const baseClasses = ' rounded-xl flex flex-col';
|
|
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
|
|
const bgColorClasses =
|
|
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
|
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
|
|
---
|
|
|
|
<section class:list={['order-first flex flex-col gap-4', Astro.props.className]}>
|
|
<h3
|
|
class="smooth-reveal-1 relative flex w-full items-center gap-3 pb-5 text-5xl text-neutral-800 dark:text-neutral-200"
|
|
>
|
|
Education
|
|
</h3>
|
|
<div class="ml-8">
|
|
<h4 class="smooth-reveal-1 pt-5 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
|
|
University
|
|
</h4>
|
|
<ul class="space-y-4 py-3">
|
|
{
|
|
education.map(({ institution, area, url }) => {
|
|
return (
|
|
<div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
|
|
<div>
|
|
<div
|
|
class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
|
|
>
|
|
<h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
|
|
<Icon
|
|
name="mdi:university-outline"
|
|
class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5"
|
|
/>
|
|
{institution}
|
|
</h3>
|
|
<p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
|
|
{area}
|
|
</p>
|
|
<div class="ml-6 flex">
|
|
<a
|
|
class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
|
|
href={url}
|
|
>
|
|
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
|
|
<span class="relative inline-block overflow-hidden"> Visit Page </span>
|
|
<Icon
|
|
name="mdi:keyboard-arrow-right"
|
|
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</ul>
|
|
</div>
|
|
|
|
{
|
|
certificate.length > 0 && (
|
|
<div class="ml-8">
|
|
<h4 class="smooth-reveal-1 pt-8 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
|
|
Certificates
|
|
</h4>
|
|
<ul class="space-y-4 py-3">
|
|
{certificate.map(({ name, issuer, url }) => {
|
|
return (
|
|
<div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
|
|
<div>
|
|
<div
|
|
class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
|
|
>
|
|
<h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
|
|
<Icon
|
|
name="mdi:script-text-outline"
|
|
class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5"
|
|
/>
|
|
{name}
|
|
</h3>
|
|
<p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
|
|
{issuer}
|
|
</p>
|
|
<div class="ml-6 flex">
|
|
<a
|
|
class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
|
|
href={url}
|
|
>
|
|
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
|
|
<span class="relative inline-block overflow-hidden"> Visit Page </span>
|
|
<Icon
|
|
name="mdi:keyboard-arrow-right"
|
|
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
</section>
|