portfolio anim
This commit is contained in:
@@ -1,4 +1,25 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export function HeroSection() {
|
||||
const [stage, setStage] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const t1 = setTimeout(() => setStage(1), 300)
|
||||
const t2 = setTimeout(() => setStage(2), 1600)
|
||||
const t3 = setTimeout(() => setStage(3), 3000)
|
||||
return () => {
|
||||
clearTimeout(t1)
|
||||
clearTimeout(t2)
|
||||
clearTimeout(t3)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fadeUp = (active: boolean) => ({
|
||||
opacity: active ? 1 : 0,
|
||||
transform: active ? 'translateY(0)' : 'translateY(16px)',
|
||||
transition: 'opacity 0.8s ease, transform 0.8s ease',
|
||||
})
|
||||
|
||||
return (
|
||||
<section
|
||||
id="hero"
|
||||
@@ -18,94 +39,140 @@ export function HeroSection() {
|
||||
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full bg-accent/5 blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-6 py-24 text-center">
|
||||
{/* Location badge */}
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 mb-8 rounded-full border border-zinc-800 bg-zinc-900/60 text-xs text-zinc-400 font-mono tracking-wider">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
|
||||
Switzerland, Bern
|
||||
{/* Location badge — Stage 3 */}
|
||||
<div style={fadeUp(stage >= 3)}>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 mb-8 rounded-full border border-zinc-800 bg-zinc-900/60 text-xs text-zinc-400 font-mono tracking-wider">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
|
||||
Switzerland, Bern
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
{/* Name — animated across 3 stages */}
|
||||
<h1 className="font-heading font-extrabold text-6xl md:text-8xl tracking-tight mb-4 leading-none">
|
||||
<span className="text-white">Alexander</span>
|
||||
{/* "b" slides in from the left — Stage 2 */}
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
color: '#22d3ee',
|
||||
opacity: stage >= 2 ? 1 : 0,
|
||||
transform: stage >= 2 ? 'translateX(0)' : 'translateX(-160px)',
|
||||
transition: 'opacity 1s ease, transform 1s ease',
|
||||
}}
|
||||
>
|
||||
b
|
||||
</span>
|
||||
|
||||
{/* "Alex" fades in centered — Stage 1 */}
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
color: 'white',
|
||||
opacity: stage >= 1 ? 1 : 0,
|
||||
transition: 'opacity 0.8s ease',
|
||||
}}
|
||||
>
|
||||
Alex
|
||||
</span>
|
||||
|
||||
{/* "vic.com" slides in from the right — Stage 2 */}
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
color: '#22d3ee',
|
||||
opacity: stage >= 2 ? 1 : 0,
|
||||
transform: stage >= 2 ? 'translateX(0)' : 'translateX(160px)',
|
||||
transition: 'opacity 1s ease, transform 1s ease',
|
||||
}}
|
||||
>
|
||||
vic.com
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Role */}
|
||||
<p className="font-heading font-medium text-2xl md:text-3xl text-gradient mb-6 tracking-tight">
|
||||
Java / Fullstack Developer
|
||||
</p>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-zinc-400 text-lg max-w-xl mx-auto mb-10 font-body leading-relaxed">
|
||||
Building backend systems and intelligent applications with{' '}
|
||||
<span className="text-zinc-200 font-mono text-base">Spring Boot</span>,{' '}
|
||||
<span className="text-zinc-200 font-mono text-base">React</span>, and{' '}
|
||||
<span className="text-zinc-200 font-mono text-base">AI</span>.
|
||||
</p>
|
||||
|
||||
{/* CTA buttons */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-4">
|
||||
<a
|
||||
href="/static/cv.pdf"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 bg-accent text-zinc-950 font-heading font-semibold text-sm tracking-wide hover:bg-accent-hover transition-colors duration-200 rounded-sm glow-accent"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M8 1v9M4 7l4 4 4-4M2 14h12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Download CV
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Mirage74/post-hub-platform"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub repository"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 border border-zinc-700 text-zinc-300 font-heading font-medium text-sm tracking-wide hover:border-zinc-500 hover:text-white transition-all duration-200 rounded-sm"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
aria-label="LinkedIn profile"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 border border-zinc-700 text-zinc-300 font-heading font-medium text-sm tracking-wide hover:border-zinc-500 hover:text-white transition-all duration-200 rounded-sm"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M16.7 1.7H3.3C2.4 1.7 1.7 2.4 1.7 3.3v13.4c0 .9.7 1.6 1.6 1.6h13.4c.9 0 1.6-.7 1.6-1.6V3.3c0-.9-.7-1.6-1.6-1.6zM6.7 15H4.4V7.8h2.3V15zm-1.2-8.2c-.7 0-1.3-.6-1.3-1.3S4.8 4.2 5.5 4.2s1.3.6 1.3 1.3-.6 1.3-1.3 1.3zm10 8.2h-2.3v-3.5c0-.8 0-1.9-1.2-1.9s-1.3.9-1.3 1.8V15H8.4V7.8h2.2v1h.1c.3-.6 1-1.2 2.1-1.2 2.3 0 2.7 1.5 2.7 3.4V15z" />
|
||||
</svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
{/* Role — Stage 3 */}
|
||||
<div style={fadeUp(stage >= 3)}>
|
||||
<p className="font-heading font-medium text-2xl md:text-3xl text-gradient mb-6 tracking-tight">
|
||||
Java / Fullstack Developer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Scroll hint */}
|
||||
<div className="mt-16 flex flex-col items-center gap-2 text-zinc-600 text-xs font-mono tracking-widest">
|
||||
<span>SCROLL</span>
|
||||
<svg
|
||||
width="14"
|
||||
height="20"
|
||||
viewBox="0 0 14 20"
|
||||
fill="none"
|
||||
className="animate-bounce"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
width="12"
|
||||
height="18"
|
||||
rx="6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<circle cx="7" cy="6" r="1.5" fill="currentColor" className="animate-pulse" />
|
||||
</svg>
|
||||
{/* Description — Stage 3 */}
|
||||
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.1s' }}>
|
||||
<p className="text-zinc-400 text-lg max-w-xl mx-auto mb-10 font-body leading-relaxed">
|
||||
Building backend systems and intelligent applications with{' '}
|
||||
<span className="text-zinc-200 font-mono text-base">Spring Boot</span>,{' '}
|
||||
<span className="text-zinc-200 font-mono text-base">React</span>, and{' '}
|
||||
<span className="text-zinc-200 font-mono text-base">AI</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTA buttons — Stage 3 */}
|
||||
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.2s' }}>
|
||||
<div className="flex flex-wrap items-center justify-center gap-4">
|
||||
<a
|
||||
href="/static/cv.pdf"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 bg-accent text-zinc-950 font-heading font-semibold text-sm tracking-wide hover:bg-accent-hover transition-colors duration-200 rounded-sm glow-accent"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M8 1v9M4 7l4 4 4-4M2 14h12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Download CV
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Mirage74/post-hub-platform"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub repository"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 border border-zinc-700 text-zinc-300 font-heading font-medium text-sm tracking-wide hover:border-zinc-500 hover:text-white transition-all duration-200 rounded-sm"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
aria-label="LinkedIn profile"
|
||||
className="inline-flex items-center gap-2.5 px-6 py-3 border border-zinc-700 text-zinc-300 font-heading font-medium text-sm tracking-wide hover:border-zinc-500 hover:text-white transition-all duration-200 rounded-sm"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M16.7 1.7H3.3C2.4 1.7 1.7 2.4 1.7 3.3v13.4c0 .9.7 1.6 1.6 1.6h13.4c.9 0 1.6-.7 1.6-1.6V3.3c0-.9-.7-1.6-1.6-1.6zM6.7 15H4.4V7.8h2.3V15zm-1.2-8.2c-.7 0-1.3-.6-1.3-1.3S4.8 4.2 5.5 4.2s1.3.6 1.3 1.3-.6 1.3-1.3 1.3zm10 8.2h-2.3v-3.5c0-.8 0-1.9-1.2-1.9s-1.3.9-1.3 1.8V15H8.4V7.8h2.2v1h.1c.3-.6 1-1.2 2.1-1.2 2.3 0 2.7 1.5 2.7 3.4V15z" />
|
||||
</svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll hint — Stage 3 */}
|
||||
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.3s' }}>
|
||||
<div className="mt-16 flex flex-col items-center gap-2 text-zinc-600 text-xs font-mono tracking-widest">
|
||||
<span>SCROLL</span>
|
||||
<svg
|
||||
width="14"
|
||||
height="20"
|
||||
viewBox="0 0 14 20"
|
||||
fill="none"
|
||||
className="animate-bounce"
|
||||
>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
width="12"
|
||||
height="18"
|
||||
rx="6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<circle cx="7" cy="6" r="1.5" fill="currentColor" className="animate-pulse" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user