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

layout

Browse source
This commit is contained in:
Mike Karl 2026-02-08 19:40:39 +01:00
parent c72cdfed53
commit 71b3c190df
9 changed files with 77 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/components/Header.tsx Normal file
View file

@ -0,0 +1,9 @@
export default function Header({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <header className="absolute flex justify-between w-full">
{children}
</header>
}

13
app/components/NavItem.tsx Normal file
View file

@ -0,0 +1,13 @@
import Link from "next/link";
export default function NavItem({
children,
href
}: Readonly<{
children: React.ReactNode;
href: string;
}>) {
return <Link href={href} className="text-lg mx-4">
{children}
</Link>
}

9
app/components/Navbar.tsx Normal file
View file

@ -0,0 +1,9 @@
export default function Navbar({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <nav className="p-5 flex justify-between">
{children}
</nav>
}

9
app/components/Section.tsx Normal file
View file

@ -0,0 +1,9 @@
export default function Section({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <section>
{children}
</section>
}

9
app/components/SectionContent.tsx Normal file
View file

@ -0,0 +1,9 @@
export default function SectionContent({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <div>
{children}
</div>
}

9
app/components/SectionTitle.tsx Normal file
View file

@ -0,0 +1,9 @@
export default function SectionTitle({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <div>
{children}
</div>
}

10
app/globals.css
View file

@ -5,21 +5,19 @@
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
font-family: "Space Grotesk", sans-serif;
color: #fff;
background-color: #500;
background: #000;
}
.bg{
width: 100vw;
height: 100vh;
position: fixed;
position: absolute;
top: 0;
left: 0;
z-index: -999;
background:
radial-gradient(circle at 0% 0%, #da0202 0%, transparent 50%),

15
app/layout.tsx
View file

@ -1,5 +1,8 @@
import type { Metadata } from "next";
import "./globals.css";
import Navbar from "./components/Navbar";
import NavItem from "./components/NavItem";
import Header from "./components/Header";
export const metadata: Metadata = {
title: "Portfolio - Mike Karl",
@ -12,9 +15,19 @@ export default function RootLayout({
}>) {
return (
<html lang="de">
<div className="bg"/>
<body>
<Header>
<NavItem href="/">
Logo
</NavItem>
<Navbar>
<NavItem href="/about">About</NavItem>
<NavItem href="/projects">Projekte</NavItem>
<NavItem href="/contact">Kontakt</NavItem>
</Navbar>
</Header>
{children}
<div className="bg" />
</body>
</html>
);

64
app/page.tsx
View file

@ -1,68 +1,6 @@
export default function Home() {
return (
<main className="p-8">
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<h1 className="text-2xl">Section</h1>
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
<main>
</main>
);
}