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

WIP

Browse source
This commit is contained in:
Mike Karl 2026-02-07 23:02:18 +01:00
parent 263611d67b
commit f62310b201
3 changed files with 70 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/globals.css
View file

@ -5,13 +5,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root{
--primary-col: #fff;
--secondary-col: #000;
--tertiary-col-1: #c50022;
--tertiary-col-2: #6d001a;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -19,32 +12,13 @@ html {
body { body {
min-height: 100vh; min-height: 100vh;
font-family: "Space Grotesk", sans-serif; font-family: "Space Grotesk", sans-serif;
color: #fff;
} }
.bg{ body{
background: var(--tertiary-col-2); background:
} radial-gradient(circle at 0% 0%, #da0202 0%, transparent 50%),
radial-gradient(circle at 25% -5%, #da0202 0%, transparent 40%),
.bg1{ radial-gradient(circle at 100% 100%, #da0202 0%, transparent 40%),
background: #000; #000
background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(245, 0, 41, 1) 100%);
width: 1000;
height: 1000;
position: fixed;
top:-500;
right: 50vw;
border-radius: 50%;
z-index: -999;
}
.bg2{
background: #6D001A;
background: linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(245, 0, 41, 1) 100%);
width: 1000;
height: 1000;
position: fixed;
bottom: -500;
left: 50vw;
border-radius: 50%;
z-index: -999;
} }

4
app/layout.tsx
View file

@ -12,9 +12,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="de"> <html lang="de">
<body className="bg"> <body>
<div className="bg1" />
<div className="bg2" />
{children} {children}
</body> </body>
</html> </html>

62
app/page.tsx
View file

@ -1,6 +1,68 @@
export default function Home() { export default function Home() {
return ( return (
<main className="p-8"> <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>
); );
} }