diff --git a/app/background.css b/app/background.css new file mode 100644 index 0000000..b332ce6 --- /dev/null +++ b/app/background.css @@ -0,0 +1,120 @@ +/* ===== Container ===== */ +.bg-container { + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; + z-index: 0; + + opacity: 0; + transform: scale(0.95); + animation: bg-fade-in 1.2s ease-out forwards; +} + +/* ===== DOT GRID ===== */ +.bg-dots { + position: absolute; + inset: 0; + pointer-events: none; + + background-image: radial-gradient( + circle at 1px 1px, + color-mix(in oklch, var(--foreground) 25%, transparent) 1px, + transparent 0 + ); + + background-size: 35px 35px; + + -webkit-mask-image: radial-gradient( + ellipse at center, + rgba(0,0,0,1) 55%, + rgba(0,0,0,0) 100% + ); + + mask-image: radial-gradient( + ellipse at center, + rgba(0,0,0,1) 55%, + rgba(0,0,0,0) 100% + ); +} + +/* ===== GLOWS BASE ===== */ +.bg-glow { + position: absolute; + border-radius: 50%; + filter: blur(120px); + opacity: 0; + transform: scale(0.6); + + animation: bg-glow-in 1.8s cubic-bezier(.34,1.56,.64,1) forwards, + bg-glow-pulse 10s ease-in-out infinite; + + will-change: transform, opacity; +} + +/* ===== GLOW 1 ===== */ +.bg-glow-1 { + top: 20%; + left: 15%; + width: 500px; + height: 500px; + + background: radial-gradient( + circle, + color-mix(in oklch, var(--foreground) 18%, transparent) 0%, + color-mix(in oklch, var(--primary) 9%, transparent) 45%, + transparent 70% + ); + + opacity: 0.6; +} + +/* ===== GLOW 2 ===== */ +.bg-glow-2 { + bottom: 25%; + right: 20%; + width: 450px; + height: 450px; + + background: radial-gradient( + circle, + color-mix(in oklch, var(--foreground) 15%, transparent) 0%, + color-mix(in oklch, var(--primary) 6%, transparent) 50%, + transparent 75% + ); + + opacity: 0.55; +} + +/* ===== ANIMATIONS ===== */ + +@keyframes bg-fade-in { + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes bg-dot-fade { + to { + opacity: 1; + } +} + +@keyframes bg-glow-in { + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes bg-glow-pulse { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.05); + opacity: 0.8; + } +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index a58be65..71148b6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -127,4 +127,6 @@ html { @apply font-sans; } -} \ No newline at end of file +} + +@import './background.css'; \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index e159121..af64a71 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono, Inter } from "next/font/google"; import "./globals.css"; import { cn } from "@/lib/utils"; +import { ThemeProvider } from "../components/theme-provider"; +import BackgroundEffects from "../components/custom/background-effects"; const inter = Inter({subsets:['latin'],variable:'--font-sans'}); @@ -16,8 +18,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "byHaider.", + description: "Softwareentwickler deines Vertrauens.", }; export default function RootLayout({ @@ -27,10 +29,23 @@ export default function RootLayout({ }>) { return ( - {children} + + +
+ +
+ {children} +
+
+ + ); } diff --git a/app/page.tsx b/app/page.tsx index 3f36f7c..e972950 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,6 @@ -import Image from "next/image"; - export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
+
); } diff --git a/components/custom/background-effects.tsx b/components/custom/background-effects.tsx new file mode 100644 index 0000000..f711d5d --- /dev/null +++ b/components/custom/background-effects.tsx @@ -0,0 +1,9 @@ +export default function BackgroundEffects() { + return ( +