48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
// app/components/Hero.tsx
|
||
import React, {useEffect, useState} from "react";
|
||
import Image from "next/image";
|
||
|
||
export default function Hero() {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setTimeout(() => {
|
||
setIsVisible(true);
|
||
}, 150); // Delay to start the animation
|
||
}, []);
|
||
|
||
return (
|
||
<div id="about"
|
||
className={`flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
|
||
<div
|
||
className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
|
||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
|
||
Hi, I’m Dennis
|
||
</h1>
|
||
<h2 className="mt-2 text-xl md:text-2xl font-semibold text-gray-700">
|
||
Student & Software Engineer
|
||
</h2>
|
||
<h3 className="mt-1 text-lg md:text-xl text-gray-600">
|
||
Based in Osnabrück, Germany
|
||
</h3>
|
||
<p className="mt-6 text-gray-800 text-lg leading-relaxed">
|
||
Passionate about technology, coding, and solving real-world problems.
|
||
I enjoy building innovative solutions and continuously expanding my knowledge.
|
||
</p>
|
||
<p className="mt-4 text-gray-700 text-base">
|
||
Currently working on exciting projects that merge creativity with functionality.
|
||
Always eager to learn and collaborate!
|
||
</p>
|
||
</div>
|
||
<div className="flex mt-8 md:mt-0 md:ml-12">
|
||
<Image
|
||
src="/images/me.jpg"
|
||
alt="Image of Dennis"
|
||
width={400}
|
||
height={400}
|
||
className="rounded-2xl shadow-lg shadow-gray-700 object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |