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

feat: add dedicated Background component for tech grid

Browse source
This commit is contained in:
Chneemann 2026-07-22 06:00:11 +02:00
parent 06cbf5054b
commit f26b941dfa
4 changed files with 35 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
next.config.ts
View file

@ -1,7 +1,10 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
trailingSlash: true,
images: {
unoptimized: true,
},
};
export default nextConfig;

11
src/app/layout.tsx
View file

@ -2,10 +2,12 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Header from "../components/Header";
import Background from "@/components/Background";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
display: "swap",
});
const geistMono = Geist_Mono({
@ -15,7 +17,7 @@ const geistMono = Geist_Mono({
export const metadata: Metadata = {
title: "André Kempf | Portfolio",
description: "Mein persönliches Portfolio, gebaut mit Next.js",
description: "My personal portfolio, built with Next.js",
};
export default function RootLayout({
@ -26,11 +28,12 @@ export default function RootLayout({
return (
<html
lang="en"
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
className={`${geistSans.variable} ${geistMono.variable} h-full bg-slate-950 antialiased`}
>
<body className="min-h-full flex flex-col">
<body className="min-h-full flex flex-col relative">
<Background />
<Header />
{children}
<main className="grow">{children}</main>
</body>
</html>
);

4
src/app/page.tsx
View file

@ -4,10 +4,10 @@ import Skills from "@/components/Skills";
export default function Home() {
return (
<main className="min-h-screen bg-slate-950 text-slate-100 selection:bg-blue-500/30 selection:text-blue-200">
<section>
<Hero />
<About />
<Skills />
</main>
</section>
);
}

19
src/components/Background.tsx Normal file
View file

@ -0,0 +1,19 @@
export default function Background() {
return (
<>
<div
className="fixed inset-0 pointer-events-none z-0 opacity-[0.15]"
style={{
backgroundImage: `linear-gradient(to right, #3b82f6 1px, transparent 1px), linear-gradient(to bottom, #3b82f6 1px, transparent 1px)`,
backgroundSize: "3rem 3rem",
maskImage:
"radial-gradient(ellipse 60% 50% at 50% 40%, #000 70%, transparent 100%)",
WebkitMaskImage:
"radial-gradient(ellipse 60% 50% at 50% 40%, #000 70%, transparent 100%)",
}}
/>
<div className="fixed top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[400px] bg-linear-to-tr from-blue-600/10 to-cyan-400/10 blur-[120px] pointer-events-none z-0" />
</>
);
}