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<{ }: Readonly<{
children: React.ReactNode; 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} {children}
</header> </header>
} }

2
app/globals.css
View file

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

32
app/page.tsx
View file

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