99 lines
2.2 KiB
Plaintext
99 lines
2.2 KiB
Plaintext
---
|
|
import MaxImg from "./Max.png";
|
|
import Image from "./Image.astro";
|
|
import GoogleyEye from "./GoogleyEye.svelte";
|
|
import { Card } from "./card";
|
|
|
|
import { useTranslations } from "@i18n/utils";
|
|
|
|
const t = useTranslations(Astro.url);
|
|
---
|
|
|
|
<Card
|
|
classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[200px_1fr] sm:grid-cols-[300px_1fr] mt-8">
|
|
<div
|
|
class="relative xs:h-full self-end items-end flex order-last xs:order-first">
|
|
<div
|
|
class="image xs:absolute inline w-1/2 xs:w-full xs:h-[110%] overflow-hidden">
|
|
<Image
|
|
src={MaxImg}
|
|
alt="its mee"
|
|
class="object-bottom h-full object-contain"
|
|
hash={false}
|
|
maxWidth={700}
|
|
loader={false}
|
|
/>
|
|
<div class="eye right">
|
|
<GoogleyEye client:load />
|
|
</div>
|
|
<div class="eye left">
|
|
<GoogleyEye client:load />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content flex flex-col p-8 pl-4 gap-3 justify-center">
|
|
<h1 class="text-2xl">{t("home.title")}</h1>
|
|
<p>{t("home.subtitle")}</p>
|
|
<a
|
|
class="bg gradient flex items-center border border-neutral gap-2 w-fit p-2 px-4 rounded-2xl"
|
|
href="/max-richter-resume.pdf">
|
|
{t("resume").toLowerCase()}.pdf
|
|
<span class="i-tabler-download w-4 h-4 dark:opacity-50"></span>
|
|
</a>
|
|
</div>
|
|
</Card>
|
|
|
|
<style>
|
|
.image {
|
|
border-bottom-left-radius: var(--border-radius-md);
|
|
}
|
|
|
|
.googley-eye-target {
|
|
height: calc(100% - 30px);
|
|
}
|
|
|
|
.image::before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 80%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
|
|
}
|
|
.image {
|
|
filter: brightness(1.1) contrast(0.9);
|
|
}
|
|
|
|
:global(.dark) .image {
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
:global(.dark) .image::before {
|
|
background: linear-gradient(
|
|
-12deg,
|
|
var(--background-dark) 0%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
|
|
.image > :global(img) {
|
|
height: 100%;
|
|
object-fit: contain;
|
|
object-position: bottom;
|
|
}
|
|
|
|
.eye {
|
|
position: absolute;
|
|
}
|
|
.eye.left {
|
|
top: 24%;
|
|
right: 27%;
|
|
}
|
|
.eye.right {
|
|
top: 26%;
|
|
right: 13%;
|
|
}
|
|
</style>
|