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"; /** @type {import('next').NextConfig} */
const nextConfig = {
const nextConfig: NextConfig = { output: "export",
/* config options here */ trailingSlash: true,
images: {
unoptimized: true,
},
}; };
export default nextConfig; 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 { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import Header from "../components/Header"; import Header from "../components/Header";
import Background from "@/components/Background";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
display: "swap",
}); });
const geistMono = Geist_Mono({ const geistMono = Geist_Mono({
@ -15,7 +17,7 @@ const geistMono = Geist_Mono({
export const metadata: Metadata = { export const metadata: Metadata = {
title: "André Kempf | Portfolio", 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({ export default function RootLayout({
@ -26,11 +28,12 @@ export default function RootLayout({
return ( return (
<html <html
lang="en" 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 /> <Header />
{children} <main className="grow">{children}</main>
</body> </body>
</html> </html>
); );

4
src/app/page.tsx
View file

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