portfolio anim
This commit is contained in:
@@ -1,4 +1,25 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
export function HeroSection() {
|
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 (
|
return (
|
||||||
<section
|
<section
|
||||||
id="hero"
|
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="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">
|
<div className="relative z-10 max-w-4xl mx-auto px-6 py-24 text-center">
|
||||||
{/* Location badge */}
|
{/* Location badge — 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">
|
<div style={fadeUp(stage >= 3)}>
|
||||||
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
|
<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">
|
||||||
Switzerland, Bern
|
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
|
||||||
|
Switzerland, Bern
|
||||||
|
</div>
|
||||||
</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">
|
<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>
|
</h1>
|
||||||
|
|
||||||
{/* Role */}
|
{/* Role — Stage 3 */}
|
||||||
<p className="font-heading font-medium text-2xl md:text-3xl text-gradient mb-6 tracking-tight">
|
<div style={fadeUp(stage >= 3)}>
|
||||||
Java / Fullstack Developer
|
<p className="font-heading font-medium text-2xl md:text-3xl text-gradient mb-6 tracking-tight">
|
||||||
</p>
|
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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scroll hint */}
|
{/* Description — Stage 3 */}
|
||||||
<div className="mt-16 flex flex-col items-center gap-2 text-zinc-600 text-xs font-mono tracking-widest">
|
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.1s' }}>
|
||||||
<span>SCROLL</span>
|
<p className="text-zinc-400 text-lg max-w-xl mx-auto mb-10 font-body leading-relaxed">
|
||||||
<svg
|
Building backend systems and intelligent applications with{' '}
|
||||||
width="14"
|
<span className="text-zinc-200 font-mono text-base">Spring Boot</span>,{' '}
|
||||||
height="20"
|
<span className="text-zinc-200 font-mono text-base">React</span>, and{' '}
|
||||||
viewBox="0 0 14 20"
|
<span className="text-zinc-200 font-mono text-base">AI</span>.
|
||||||
fill="none"
|
</p>
|
||||||
className="animate-bounce"
|
</div>
|
||||||
>
|
|
||||||
<rect
|
{/* CTA buttons — Stage 3 */}
|
||||||
x="1"
|
<div style={{ ...fadeUp(stage >= 3), transitionDelay: '0.2s' }}>
|
||||||
y="1"
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
||||||
width="12"
|
<a
|
||||||
height="18"
|
href="/static/cv.pdf"
|
||||||
rx="6"
|
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"
|
||||||
stroke="currentColor"
|
>
|
||||||
strokeWidth="1.5"
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
/>
|
<path
|
||||||
<circle cx="7" cy="6" r="1.5" fill="currentColor" className="animate-pulse" />
|
d="M8 1v9M4 7l4 4 4-4M2 14h12"
|
||||||
</svg>
|
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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user