karlm/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(Header, globals.css, Home): update header positioning and fix background to fixed

Browse source
This commit is contained in:
Mike Karl 2026-02-08 23:13:32 +01:00
parent b24d562f6d
commit 6b4baf62d2
3 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/Header.tsx
View file

@ -3,7 +3,7 @@ export default function Header({
}: Readonly<{
children: React.ReactNode;
}>) {
return <header className="absolute flex justify-between w-full">
return <header className="fixed flex justify-between w-full z-10 backdrop-blur-sm">
{children}
</header>
}

2
app/globals.css
View file

@ -15,7 +15,7 @@ body {
.bg{
width: 100vw;
height: 100vh;
position: absolute;
position: fixed;
top: 0;
left: 0;
z-index: -999;

32
app/page.tsx
View file

@ -15,21 +15,23 @@ export default function Home() {
}, []);
return (
<section className="mx-10 mt-50 ml-50">
<h2 className="text-7xl/12 font-light">Mike</h2>
<h1 className="text-9xl font-bold">Karl</h1>
<AnimatePresence mode="wait">
<motion.h3
key={jobs[job]}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -20, opacity: 0 }}
transition={{ duration: 0.5 }}
className="absolute text-4xl mt-2"
>
{jobs[job]} Entwickler
</motion.h3>
<>
<section className="mx-10 mt-50 ml-50">
<h2 className="text-7xl/12 font-light">Mike</h2>
<h1 className="text-9xl font-bold">Karl</h1>
<AnimatePresence mode="wait">
<motion.h3
key={jobs[job]}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -20, opacity: 0 }}
transition={{ duration: 0.5 }}
className="absolute text-4xl mt-2"
>
{jobs[job]} Entwickler
</motion.h3>
</AnimatePresence>
</section>
</section>
</>
);
}