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

added: liks to the header

Browse source
This commit is contained in:
Le fishe au chocolat 2026-06-20 09:39:21 +02:00
parent 111438a7c7
commit 7b59cee552
1 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/header.tsx
View file

@ -1,14 +1,44 @@
import "./header.css"; import "./header.css";
import Image from "next/image" import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
function Header() { function Header() {
return ( return (
<div className="items-center header flex flex-row w-100% h-20 border-b-solid border-b-gray-700 border-b-2 bg-gray-900 " id="header container"> <div
<Image height={256} width={256} src="/pfp.png" className="ml-3.5 animate-[spin_3s_linear_infinite] rounded-full basis-15 h-15" id="pfp" alt="pfp"/> className="px-4 space-x-5 items-center header flex flex-row w-100% h-20 border-b-solid border-b-gray-700 border-b-2 bg-gray-900 sticky"
<h1 className="ml-3.5 pagetitle text-4xl text-bold text-white font-[Bitcount]" id="page-title">PERIODICBRAKE</h1> id="header container"
>
<Image
height={256}
width={256}
src="/pfp.png"
className=" animate-[spin_3s_linear_infinite] rounded-full basis-15 h-15"
id="pfp"
alt="pfp"
/>
<Link
href="/"
className="hover:text-gray-100"
>
<h1
className="pagetitle text-4xl text-bold text-white font-[Bitcount]"
id="page-title"
>
PERIODICBRAKE
</h1></Link>
<div className="basis-auto w-full" id="header-separator" /> <div className="basis-auto w-full" id="header-separator" />
<Link href="/contact" className="mr-3.5 text-3xl text-bold text-white hover:text-gray-200 font-[Bitcount]"><p>Contact</p></Link> <Link
href="/portfolio"
className=" text-3xl text-bold text-white hover:text-gray-200 font-[Bitcount]"
>
<p>Portfolio</p>
</Link>
<Link
href="/contact"
className=" text-3xl text-bold text-white hover:text-gray-200 font-[Bitcount]"
>
<p>Contact</p>
</Link>
</div> </div>
); );
} }