zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
EFEELE
2025-04-07 15:50:13 -06:00
commit c2421d79c5
124 changed files with 12129 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/blog/Hero.astro Normal file
View File

@@ -0,0 +1,106 @@
---
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";
const {
profileImage = "/images/efeeleprofile.webp",
profileAlt = "Photo of Fernando Aldair López Ponce (EFEELE) for the blog",
profileLink = "/about-me",
profileTitle = "FrontEnd Developer",
profileName = "Fernando Aldair López Ponce",
githubLink = "https://github.com/EFEELE/NeonMint",
githubText = "Do you like this blog's design?",
techsTitle = "TECHS"
} = Astro.props;
---
<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-gradient-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={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-gradient-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-gradient-to-tr from-riptide-100 to-white dark:from-transparent dark:bg-gradient-to-bl dark:to-transparent "
>
<a target="_blank" href={githubLink}>
<div
class="p-8 h-full relative max-xl:p-5 max-md:p-4 flex flex-col gap-8 dark:before:[background-image:radial-gradient(circle,_rgba(13,188,130)_0,_rgba(1,45,34)_100%)] before:[background-image: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={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-gradient-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-gradient-to-tr from-riptide-100 to-mint-50 flex dark:bg-gradient-to-r z-0 dark:overflow-hidden relative dark:from-mint-900 dark:to-mint-950 dark:before:[background-image:radial-gradient(circle,_rgba(13,188,130)_0,_rgba(1,45,34)_100%)] before:[background-image: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={profileAlt}
class="h-full w-full max-sm:rounded-full rounded-2xl max-sm:size-20 bg-center bg-cover"
style={`background-image: url(${profileImage})`}
>
<a href={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-gradient-to-r from-riptide-400 to-mint-400 dark:from-riptide-200 dark:to-mint-400 text-transparent bg-clip-text"
>{profileTitle}</b
> 🚀</span
>
<Heading
text={profileName}
level={3}
/>
<Button
link={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>