first commit
This commit is contained in:
EFEELE
210
src/components/portfolio/HeroIndex.astro
Normal file
210
src/components/portfolio/HeroIndex.astro
Normal file
@@ -0,0 +1,210 @@
|
||||
---
|
||||
import Button from "../ui/Button.astro";
|
||||
import Heading from "../ui/Heading.astro";
|
||||
import Tools from "../portfolio/Tools.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Hobbies from "../portfolio/Hobbies.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 López",
|
||||
githubLink = "https://github.com/EFEELE/NeonMint",
|
||||
githubText = "Do you like this blog's design?",
|
||||
portfolioImage = "/images/portfolio.webp",
|
||||
email = "hello@efeele.dev",
|
||||
} = Astro.props;;
|
||||
---
|
||||
|
||||
<section
|
||||
class="scroll-m-16 px-8 max-sm:px-4 py-8"
|
||||
id="home"
|
||||
aria-label="Professional profile and introduction"
|
||||
>
|
||||
<div
|
||||
class="mx-auto mb-4 h-96 w-full max-w-7xl rounded-2xl 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] max-md:h-auto"
|
||||
>
|
||||
<div
|
||||
class="group relative z-0 flex h-full items-center justify-center gap-8 overflow-hidden rounded-2xl bg-gradient-to-tr from-riptide-100 to-white p-4 transition-all hover:shadow-[0_10px_50px_rgba(13,_188,_130,_0.2)] dark:bg-gradient-to-r dark:from-mint-950 dark:to-zinc-950 dark:overflow-hidden max-md:w-full max-md:gap-3 max-lg:gap-2 max-sm:flex-col 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:absolute before:left-65 before:top-10 before:h-[40%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-80 before:-z-10 before:transition hover:before:animate-pulse"
|
||||
>
|
||||
<div class="aspect-square h-4/5 max-md:size-32">
|
||||
<div
|
||||
class="group-hover:scale-105 relative z-10 flex w-full cursor-pointer items-center overflow-hidden rounded-full dark:p-[1.5px] p-[2px] transition-all duration-500"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 h-full w-full rounded-fullfrom-transparent to-riptide-500 dark:from-transparent f dark:to-mint-300 animate-rotate-border bg-conic/[from_var(--border-angle)] "
|
||||
>
|
||||
</div>
|
||||
<div class="relative z-20 flex w-full rounded-full bg-mint-900">
|
||||
<div
|
||||
class="w-full aspect-square rounded-full bg-center bg-cover"
|
||||
style={`background-image: url(${profileImage})`}
|
||||
aria-label="Photo of Fernando Aldair López Ponce (EFEELE) for the blog"
|
||||
>
|
||||
<a
|
||||
href={profileLink}
|
||||
class="flex h-full w-full"
|
||||
aria-label="View about me page"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex h-full w-7/12 flex-col justify-center gap-4 p-4 max-md:w-full max-md:gap-2"
|
||||
>
|
||||
<span
|
||||
class="relative inline-flex items-center text-xs font-semibold leading-0 dark:text-white text-blacktext max-md:font-medium max-sm:justify-center"
|
||||
>
|
||||
<span
|
||||
class="before:mr-2 before:block before:h-1.5 before:w-1.5 before:rounded-full before:bg-green-400 before:shadow-[0px_0px_0px_3px_rgba(34,_197,_94,_0.5)] before:animate-pulse before:content-['']"
|
||||
></span>
|
||||
Available for work
|
||||
</span>
|
||||
|
||||
<h1
|
||||
class="text-4xl font-black leading-none text-blacktext dark:text-white max-xl:text-3xl max-lg:text-2xl max-sm:text-center"
|
||||
>
|
||||
{profileName} 👋
|
||||
</h1>
|
||||
<p
|
||||
class="mb-0 text-lg font-semibold leading-8 text-blacktext dark:text-gray-200 max-xl:text-base"
|
||||
>
|
||||
<span
|
||||
class="bg-gradient-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent dark:from-riptide-300 dark:to-mint-200"
|
||||
>{profileTitle}</span
|
||||
> with <span
|
||||
class="bg-gradient-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent dark:from-riptide-300 dark:to-mint-200"
|
||||
>8 years of experience</span
|
||||
>, passionate about development, technology, and coffee that sparks ideas. I love bringing digital projects to life. 🚀☕
|
||||
</p>
|
||||
|
||||
<div class="flex gap-4 max-sm:flex-col max-sm:items-center">
|
||||
<Button
|
||||
link={"mailto:" + email}
|
||||
text="Contact Me"
|
||||
iconName="envelope"
|
||||
/>
|
||||
<Button
|
||||
link={profileLink}
|
||||
text="About Me"
|
||||
iconName="person"
|
||||
variant="dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx-auto grid max-w-7xl grid-cols-2 grid-rows-4 max-sm:gap-3 gap-4 max-md:h-[80vh] max-sm:h-[900px] max-xl:h-[550px] xl:h-[700px] md:grid-cols-4 md:grid-rows-2"
|
||||
>
|
||||
<div
|
||||
class="col-start-2 row-start-2 flex flex-col gap-3 rounded-2xl border border-emerald-50 bg-gradient-to-r from-riptide-200 to-mint-200 p-8 dark:border-zinc-800 dark:border-2 dark:bg-zinc-800 dark:bg-gradient-radial dark:from-riptide-500 dark:to-mint-500 max-md:gap-0 max-xl:p-5 max-md:p-4 max-lg:gap-1 md:col-start-4"
|
||||
>
|
||||
<div class="flex flex-col-reverse items-start gap-4 max-md:gap-2">
|
||||
<Heading text="Beyond the Code" level={3} />
|
||||
</div>
|
||||
|
||||
<div class="overflow-y-auto">
|
||||
<Hobbies />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-start-1 row-start-2 rounded-2xl 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] transition-all ease-in duration-150 hover:scale-105 hover:shadow-[0_20px_50px_rgba(13,_188,_130,_0.4)] z-40 md:col-start-3"
|
||||
>
|
||||
<div class="h-full w-full overflow-hidden rounded-2xl dark:bg-zinc-900">
|
||||
<div
|
||||
class="relative h-full w-full 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}
|
||||
aria-label="View this site's code repository on GitHub"
|
||||
>
|
||||
<div
|
||||
class="relative flex h-full flex-col gap-8 p-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:absolute before:left-30 before:bottom-30 before:h-[30%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-90 before:transition before:z-0 max-xl:p-5 max-md:p-4 xl:before:bottom-10"
|
||||
>
|
||||
<div class="z-2">
|
||||
<Heading text="Do you like this site's design?" level={3}/>
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
class="absolute -bottom-10 left-30 size-50 text-mint-500/30 group-hover:animate-pulse ease-in-out max-sm:left-10 max-md:left-30 xl:size-56 xl:-bottom-5 xl:-right-24"
|
||||
name="github"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-span-2 col-start-1 row-start-1 rounded-2xl 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] md:col-start-3"
|
||||
>
|
||||
<article
|
||||
class="group relative z-0 flex h-full w-full flex-col overflow-hidden rounded-2xl bg-gradient-to-tr from-riptide-100 to-mint-100 p-6 transition hover:shadow-[0_10px_50px_rgba(13,_188,_130,_0.2)] dark:bg-gradient-to-r dark:from-mint-900 dark:to-mint-950 dark:overflow-hidden max-md:p-4 gap-6 max-md:gap-3 max-lg:gap-4 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:absolute before:left-30 before:-bottom-0 before:h-[80%] before:aspect-square before:rounded-full before:blur-3xl dark:before:opacity-80 before:opacity-30 before:-z-10 before:transition"
|
||||
>
|
||||
<div class="flex items-center gap-4 max-md:gap-2">
|
||||
<Icon
|
||||
class="text-3xl dark:text-white text-mint-500 max-md:text-2xl max-sm:text-sm"
|
||||
name="dashboard"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Heading text="Tech" textGradient="Stack" level={3} />
|
||||
</div>
|
||||
<div class="overflow-y-auto">
|
||||
<Tools />
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-span-2 row-span-2 rounded-2xl bg-gradient-to-r from-mint-300 dark:from-mint-600 to-mint-50 dark:to-mint-200/5 p-[.2rem] hover:to-mint-300/30 dark:hover:to-mint-600/30 md:col-start-1 md:row-start-1"
|
||||
>
|
||||
<article
|
||||
class="group relative flex h-full flex-col justify-start overflow-hidden rounded-2xl bg-gradient-to-br from-riptide-100 to-white dark:from-mint-950 dark:to-zinc-950 p-8 transition-all hover:shadow-[0_20px_50px_rgba(13,_188,_130,_0.4)] max-md:p-6 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:absolute before:left-1/2 before:bottom-30 before:h-[30%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-70 before:transition before:-z-0 hover:before:animate-pulse xl:before:bottom-2/5"
|
||||
>
|
||||
<a
|
||||
href="#projects"
|
||||
class="absolute left-0 top-0 z-50 h-full w-full bg-transparent"
|
||||
aria-label="View projects section"></a>
|
||||
<div class="flex items-center gap-4 max-md:gap-2">
|
||||
<Icon
|
||||
class="text-3xl dark:text-white text-mint-500 max-md:text-2xl max-sm:text-xl"
|
||||
name="code"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Heading text="Projects" level={3}/>
|
||||
</div>
|
||||
<p
|
||||
class="z-2 my-6 text-lg font-semibold leading-6 dark:text-gray-200 text-blacktext max-xl:text-base max-w-[90%] max-md:max-w-[85%]"
|
||||
>
|
||||
I love <span
|
||||
class="bg-gradient-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent dark:from-riptide-300 dark:to-mint-200"
|
||||
>turning ideas into real projects.</span
|
||||
>
|
||||
<br /> Here I show you some of the <span
|
||||
class="bg-gradient-to-r from-riptide-500 to-mint-500 bg-clip-text font-black text-transparent dark:from-riptide-300 dark:to-mint-200"
|
||||
>developments</span
|
||||
> I've worked on, applying technology, design, and lots of creativity.
|
||||
<span
|
||||
class="bg-gradient-to-r from-riptide-500 to-mint-500 font-black bg-clip-text text-transparent dark:from-riptide-300 dark:to-mint-200"
|
||||
>Check them out!</span
|
||||
>
|
||||
</p>
|
||||
<img
|
||||
class="relative left-0 z-0 mt-40 w-full object-cover transition-all ease-in-out duration-500 group-hover:rotate-2 group-hover:scale-185 max-xl:mt-28 max-lg:mt-10 max-sm:mt-0 max-md:scale-100 max-sm:scale-125 scale-180 max-md:group-hover:scale-105 before:[background-image:radial-gradient(circle,_rgba(13,188,130)_0,_rgba(1,45,34)_100%)] before:absolute before:left-30 before:-bottom-0 before:h-[80%] before:aspect-square before:rounded-full before:blur-3xl before:opacity-80 before:-z-10 before:transition"
|
||||
src={portfolioImage}
|
||||
alt="View of two website interfaces with modern and dark design. The first screen shows the title 'Behind the Code' with a rocket and dark background, explaining the origin of a community software project. The second screen presents a platform for finding speakers, with an attractive design, expert photos, and a prominent search button."
|
||||
loading="lazy"
|
||||
width="480"
|
||||
height="320"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user