99f4bd4fbf
- Updated Tailwind to the latest patch version for improved stability and features - No breaking changes detected in the current setup - You can review the full changelog here: https://github.com/tailwindlabs/tailwindcss/releases
104 lines
5.4 KiB
Plaintext
104 lines
5.4 KiB
Plaintext
---
|
|
import Button from "../ui/Button.astro";
|
|
import LastPost from "../blog/LastPost.astro";
|
|
import Languages from "../blog/Languages.astro";
|
|
import { Icon } from "astro-icon/components";
|
|
import Heading from "../ui/Heading.astro";
|
|
import { AstroError } from "astro/errors";
|
|
import { getCollection} from "astro:content";
|
|
|
|
const [staticData] = await getCollection('staticData');
|
|
|
|
if (!staticData) {
|
|
throw new AstroError("JSON data not found");
|
|
}
|
|
---
|
|
|
|
<section class="py-8 px-8 max-sm:px-4 max-sm:py-2">
|
|
<div
|
|
class="grid md:grid-cols-4 md:grid-rows-2 gap-4 max-sm:gap-3 grid-cols-2 grid-rows-4 max-w-7xl mx-auto max-md:h-[80vh] max-sm:h-auto max-sm:grid-rows-[auto_200px_auto_auto] max-xl:h-[550px] xl:h-[700px]"
|
|
>
|
|
<div
|
|
class="p-8 max-md:gap-0 max-xl:p-5 h-full max-md:p-4 max-lg:gap-1 gap-3 flex flex-col border border-emerald-50 rounded-2xl dark:bg-zinc-800 bg-linear-to-r from-riptide-200 to-mint-200 dark:from-riptide-500 dark:to-mint-500 dark:border-zinc-800 dark:border-2 dark:bg-gradient-radial md:col-start-4 col-start-2 row-start-2"
|
|
>
|
|
<Heading text={staticData.data.techsTitle} textGradient="" level={3}/>
|
|
|
|
<div class="overflow-y-auto">
|
|
<Languages />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
class="group hover:shadow-[0_20px_50px_rgba(13,188,130,0.4)] hover:scale-105 z-40 rounded-2xl transition-all ease-in duration-150 col-start-1 row-start-2 md:col-start-3 bg-linear-to-r from-mint-300 dark:from-mint-600 to-mint-50 dark:to-mint-200/5 hover:to-mint-300/30 dark:hover:to-mint-600/30 p-[.2rem] "
|
|
>
|
|
<div class="w-full h-full overflow-hidden rounded-2xl dark:bg-zinc-900">
|
|
<div
|
|
class="w-full h-full relative overflow-hidden rounded-2xl bg-linear-to-tr from-riptide-100 to-white dark:from-transparent dark:bg-linear-to-bl dark:to-transparent "
|
|
>
|
|
<a target="_blank" href={staticData.data.github}>
|
|
<div
|
|
class="p-8 h-full relative max-xl:p-5 max-md:p-4 flex flex-col gap-8 dark:before:bg-[radial-gradient(circle,rgba(13,188,130)_0,rgba(1,45,34)_100%)] before:bg-[radial-gradient(circle,rgba(95,255,202)_0,rgba(144,253,210)_100%)] before:h-[30%] before:absolute before:aspect-square xl:before:bottom-10 before:left-30 before:bottom-30 before:rounded-full before:blur-3xl before:opacity-90 before:transition before:z-0"
|
|
>
|
|
<div class="z-2">
|
|
<Heading
|
|
text={staticData.data.githubText}
|
|
textGradient=""
|
|
level={3}
|
|
/>
|
|
</div>
|
|
|
|
<Icon
|
|
class="group-hover:animate-pulse ease-in-out size-50 absolute -bottom-10 xl:size-56 xl:-bottom-5 left-30 max-sm:left-10 max-md:left-30 xl:-right-24 text-mint-500/30"
|
|
name="github"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex col-span-2 col-start-1 row-start-1 md:col-start-3 bg-linear-to-r rounded-2xl from-mint-300 dark:from-mint-600 to-mint-50 dark:to-mint-200/5 hover:to-mint-300/30 dark:hover:to-mint-600/30 p-[.2rem] "
|
|
>
|
|
<article
|
|
class="group hover:shadow-[0_10px_50px_rgba(13,188,130,0.2)] w-full h-full overflow-hidden p-4 max-md:p-4 gap-4 max-md:gap-1 max-lg:gap-0 rounded-2xl bg-linear-to-tr from-riptide-100 to-mint-50 flex dark:bg-linear-to-r z-0 dark:overflow-hidden relative dark:from-mint-900 dark:to-mint-950 dark:before:bg-[radial-gradient(circle,rgba(13,188,130)_0,rgba(1,45,34)_100%)] before:bg-[radial-gradient(circle,rgba(95,255,202)_0,rgba(144,253,210)_100%)] dark:before:h-[80%] before:h-[30%] before:absolute before:aspect-square dark:before:left-30 before:left-50 dark:before:-bottom-0 before:bottom-40 before:rounded-full dark:before:blur-3xl before:blur-2xl dark:before:opacity-80 before:opacity-100 before:-z-10 before:transition"
|
|
>
|
|
<div
|
|
class="group-hover:scale-103 ease-in-out duration-500 w-5/12 max-sm:w-auto flex justify-center items-center"
|
|
>
|
|
<div
|
|
aria-label={staticData.data.profileAlt}
|
|
class="h-full w-full max-sm:rounded-full rounded-2xl max-sm:size-20 bg-center bg-cover"
|
|
style={`background-image: url(${staticData.data.profileImage})`}
|
|
>
|
|
<a href={staticData.data.profileLink} class="h-full w-full flex"></a>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 w-7/12 flex flex-col justify-center gap-4 max-sm:w-fit max-md:gap-2">
|
|
<span
|
|
class="font-extrabold text-lg max-xl:text-base max-lg:text-sm max-lg:flex max-lg:flex-col-reverse max-md:flex-row leading-normal max-sm:leading-none"
|
|
><b
|
|
class="bg-linear-to-r from-riptide-400 to-mint-400 dark:from-riptide-200 dark:to-mint-400 text-transparent bg-clip-text"
|
|
>{staticData.data.profileTitle}</b
|
|
> 🚀</span
|
|
>
|
|
<Heading
|
|
text={staticData.data.profileName}
|
|
level={3}
|
|
/>
|
|
<Button
|
|
link={staticData.data.profileLink}
|
|
text="About Me"
|
|
iconName="person"
|
|
class="drop-shadow-xl"
|
|
/>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-span-2 row-span-2 md:col-start-1 md:row-start-1 bg-conic/[from_var(--border-angle)] dark:from-mint-200/30 dark:via-mint-500 dark:to-mint-200/20 from-mint-300/30 via-mint-500 to-mint-300/20 from-20% to-80% animate-rotate-border rounded-2xl p-[.2rem]">
|
|
<LastPost />
|
|
</div>
|
|
</div>
|
|
</section>
|