mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-11-06 10:53:33 +00:00
91 lines
2.2 KiB
Text
91 lines
2.2 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
import Socials from "../socials/Socials.astro";
|
|
|
|
import pfp_new from "../images/pfp_new_medium.webp";
|
|
import pfp_light from "../images/pfp_light.webp";
|
|
import Card from "../global/Card.astro";
|
|
---
|
|
|
|
<div class="relative flex w-full items-center justify-center">
|
|
<div class="w-[90%] md:w-[600px] lg:w-2/3">
|
|
<Card
|
|
shadowColor="rgb(4, 57, 57)"
|
|
className="theme-dark-card animate-fadeIn bg-gradient-to-br from-[#101010] via-[#252525] to-[#101010]"
|
|
>
|
|
<div class="flex flex-col items-center justify-center gap-2 py-10">
|
|
<div class="mb-1 px-5">
|
|
<Image
|
|
src={pfp_new}
|
|
alt="Profile picture"
|
|
class="profile-image-dark border-accent aspect-square rounded-full border-2 border-solid object-cover"
|
|
width={150}
|
|
/>
|
|
<Image
|
|
src={pfp_light}
|
|
alt="Profile picture"
|
|
class="profile-image-light border-accent hidden aspect-square rounded-full border-2 border-solid object-cover"
|
|
width={150}
|
|
/>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="mb-2 text-3xl">Ryan Lee</div>
|
|
<div class="text-muted-foreground text-xl">
|
|
Software Developer & Content Creator
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-5 flex flex-col items-stretch justify-center gap-5 md:flex-row"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-center text-center md:text-left"
|
|
>
|
|
<div class="text-muted-foreground text-base">
|
|
Email me at:
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="mailto:hello@rython.dev"
|
|
class="hover:text-accent">hello@rython.dev</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- vertical divider -->
|
|
<div class="bg-accent h-[1px] w-full md:h-auto md:w-[1px]">
|
|
</div>
|
|
|
|
<div class="flex flex-row items-center justify-center">
|
|
<Socials />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:global(html[data-theme="light"]) .profile-image-dark {
|
|
display: none;
|
|
}
|
|
|
|
:global(html[data-theme="light"]) .profile-image-light {
|
|
display: block;
|
|
}
|
|
|
|
#title {
|
|
background: linear-gradient(
|
|
90deg,
|
|
#85e6c5 0%,
|
|
#a084e8 45%,
|
|
#33bbc5 100%
|
|
);
|
|
|
|
background-size: 300%;
|
|
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
</style>
|