denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(package.json, next.config.ts, Hero.tsx): add bundle analyzer support and improve code formatting

Browse Source
This commit is contained in:
Denshooter
2025-02-13 19:04:32 +01:00
parent 704924208f
commit b4616234cf
4 changed files with 256 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/components/Hero.tsx
View File

@@ -1,52 +1,54 @@
// app/components/Hero.tsx
import React, { useEffect, useState } from "react";
import React, {useEffect, useState} from "react";
import Image from "next/image";
export default function Hero() {
const [isVisible, setIsVisible] = useState(false);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsVisible(true);
}, 150); // Delay to start the animation
}, []);
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"
priority={true}
style={{ width: "auto", height: "400px" }}
/>
</div>
</div>
);
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"
loading="lazy" // Lazy Loading
style={{width: "auto", height: "400px"}}
sizes="(max-width: 640px) 640px, 828px" // Definiere, welche Bildgröße bei welcher Bildschirmgröße geladen wird
/>
</div>
</div>
);
}