88 lines
2.7 KiB
Plaintext
88 lines
2.7 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
const { name, title, bio, gitea, linkedin } = Astro.props;
|
|
---
|
|
<section id="hero" class="py-20 md:py-32 flex flex-col items-center justify-center min-h-[90vh]">
|
|
<div class="flex flex-col md:flex-row items-center md:items-center text-center md:text-left max-w-4xl w-full">
|
|
<div class="mb-6 md:mb-0 md:mr-12 flex-shrink-0 relative group">
|
|
<img
|
|
src="/avatar.webp"
|
|
alt={`${name} Avatar`}
|
|
class="w-32 h-32 md:w-48 md:h-48 rounded-full mx-auto border-4 border-gray-500 md:border-gray-300 relative z-20"
|
|
/>
|
|
<div class="absolute -inset-1 rounded-full blur-md bg-gradient-to-br from-gray-500 via-cyan-500 to-indigo-500 z-10 glow"></div>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h1
|
|
class="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-gray-100 to-gray-300 bg-clip-text text-transparent mb-4 text-balance"
|
|
>
|
|
{name}
|
|
</h1>
|
|
<h2
|
|
class="text-2xl md:text-3xl font-semibold tracking-tight bg-gradient-to-r from-cyan-500 to-indigo-500 bg-clip-text text-transparent mb-6"
|
|
>
|
|
{title}
|
|
</h2>
|
|
<p class="text-lg text-gray-300 max-w-full text-wrap">{bio}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 flex space-x-6 items-center justify-center max-w-4xl w-full">
|
|
<a
|
|
href={gitea}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-gray-400 hover:text-gray-200 transition-colors hover:scale-110 duration-500"
|
|
aria-label="Gitea"
|
|
>
|
|
<Icon name="gitea" class="w-8 h-8" />
|
|
</a>
|
|
<a
|
|
href={linkedin}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-gray-400 hover:text-gray-200 transition-colors hover:scale-110 duration-500"
|
|
aria-label="LinkedIn"
|
|
>
|
|
<Icon name="linkedin" class="w-8 h-8" />
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<style>
|
|
/* Optional: Add any additional styles for the Hero component here */
|
|
#header-nav {
|
|
animation: blur linear both;
|
|
animation-timeline: scroll();
|
|
animation-range: 0 500px;
|
|
/* height: 80px; */
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
/* Glow siempre visible */
|
|
.glow {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
|
}
|
|
|
|
/* Efecto pulsante al hacer hover */
|
|
.group:hover .glow {
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
/* Animación de pulso */
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
</style> |