feat: plakat redesign phase 1 (tokens, fonts, poster hero, header) (#74)
- New design tokens: signal red, ink and paper as RGB channels; ink and paper swap roles in dark mode so every component inverts cleanly - Fonts via next/font: Bricolage Grotesque (with wdth/opsz axes), Geist, Geist Mono; drop Inter and Playfair - Poster hero: kicker, giant DK0 wordmark that reacts to pointer distance (weight and width through a damped spring, desktop only, off for reduced motion), claim as h1, intro with thesis countdown, marquee strip - Header in poster style: transparent over the red hero, paper strip with ink rule when scrolled or on subpages; drawer menu restyled - Remove wavy SVG separators, CSS shader gradient, background blobs and unused providers that caused the pink/purple bands between sections - Drop the global p/span/div color override so colors inherit properly - New hero texts in de/en, tests and i18n key check updated Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
@@ -3,58 +3,38 @@ import Hero from '@/app/components/Hero';
|
||||
|
||||
// Mock next-intl/server
|
||||
jest.mock('next-intl/server', () => ({
|
||||
getTranslations: () => Promise.resolve((key: string) => {
|
||||
const messages: Record<string, string> = {
|
||||
badge: 'Student & Self-Hoster',
|
||||
line1: 'Building',
|
||||
line2: 'Stuff.',
|
||||
description: 'Dennis is a student and passionate self-hoster.',
|
||||
ctaWork: 'View My Work',
|
||||
ctaContact: 'Get in touch',
|
||||
};
|
||||
return messages[key] || key;
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock next/image
|
||||
interface ImageProps {
|
||||
src: string;
|
||||
alt: string;
|
||||
fill?: boolean;
|
||||
priority?: boolean;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
jest.mock('next/image', () => ({
|
||||
__esModule: true,
|
||||
default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
data-fill={fill?.toString()}
|
||||
data-priority={priority?.toString()}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
getTranslations: () =>
|
||||
Promise.resolve((key: string, values?: { days?: number }) => {
|
||||
const messages: Record<string, string> = {
|
||||
kicker: 'Dennis Konkol — Osnabrück, Germany',
|
||||
claim: 'I self-host half my life. The rest I code.',
|
||||
intro: "IT admin in Osnabrück and master's student.",
|
||||
countdown: `${values?.days ?? 0} days to go.`,
|
||||
ctaWork: 'See projects',
|
||||
ctaContact: 'Write me',
|
||||
};
|
||||
return messages[key] || key;
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('Hero', () => {
|
||||
it('renders the hero section correctly', async () => {
|
||||
it('renders the poster hero with claim, intro and calls to action', async () => {
|
||||
const HeroResolved = await Hero({ locale: 'en' });
|
||||
render(HeroResolved);
|
||||
|
||||
// Check for the main headlines (defaults in Hero.tsx)
|
||||
expect(screen.getByText('Building')).toBeInTheDocument();
|
||||
expect(screen.getByText('Stuff.')).toBeInTheDocument();
|
||||
|
||||
// Check for the description from our mock
|
||||
expect(screen.getByText(/Dennis is a student/i)).toBeInTheDocument();
|
||||
|
||||
// Check for the image
|
||||
expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
|
||||
|
||||
// Check for CTA
|
||||
expect(screen.getByText('View My Work')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('I self-host half my life. The rest I code.');
|
||||
expect(screen.getByText('Dennis Konkol — Osnabrück, Germany')).toBeInTheDocument();
|
||||
expect(screen.getByText(/IT admin in Osnabrück/)).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /See projects/ })).toHaveAttribute('href', '#projects');
|
||||
expect(screen.getByRole('link', { name: 'Write me' })).toHaveAttribute('href', '#contact');
|
||||
});
|
||||
|
||||
it('renders the DK0 wordmark as decoration hidden from assistive tech', async () => {
|
||||
const HeroResolved = await Hero({ locale: 'en' });
|
||||
const { container } = render(HeroResolved);
|
||||
|
||||
const wordmark = container.querySelector('[aria-hidden="true"].font-display');
|
||||
expect(wordmark).not.toBeNull();
|
||||
expect(wordmark).toHaveTextContent('DK0');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -136,7 +136,7 @@ const STATIC_KEYS: Record<string, Record<string, string[]>> = {
|
||||
ProjectDetailClient: ["back"], ProjectsPageClient: ["backToHome"],
|
||||
},
|
||||
consent: { ConsentBanner: ["title", "description", "essential", "chat", "alwaysOn", "acceptAll", "acceptSelected", "rejectAll", "hide"] },
|
||||
"home.hero": { Hero: ["badge", "line1", "line2", "description", "ctaWork", "ctaContact"] },
|
||||
"home.hero": { Hero: ["kicker", "claim", "intro", "countdown", "ctaWork", "ctaContact"] },
|
||||
"home.about": { About: ["title", "p1", "p2", "p3", "funFactTitle", "funFactBody", "hobbiesTitle"] },
|
||||
"home.about.activity": { ActivityFeed: ["idleStatus", "codingNow", "gaming", "inGame", "listening"] },
|
||||
"home.about.currentlyReading": { CurrentlyReading: ["title", "progress"] },
|
||||
|
||||
@@ -88,82 +88,17 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
|
||||
}}
|
||||
/>
|
||||
<Header locale={locale} />
|
||||
{/* Spacer to prevent navbar overlap */}
|
||||
<div className="h-24 md:h-32" aria-hidden="true"></div>
|
||||
<main className="relative">
|
||||
<Hero locale={locale} />
|
||||
|
||||
{/* Wavy Separator 1 - Hero to About */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient1)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
|
||||
<stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<ScrollFadeIn>
|
||||
<AboutClient locale={locale} translations={aboutT} />
|
||||
</ScrollFadeIn>
|
||||
|
||||
{/* Wavy Separator 2 - About to Projects */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0,64 C360,96 720,32 1080,64 C1200,96 1320,32 1440,64 L1440,0 L0,0 Z"
|
||||
fill="url(#gradient2)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#A7F3D0" stopOpacity="0.3" />
|
||||
<stop offset="50%" stopColor="#BFDBFE" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#DDD6FE" stopOpacity="0.3" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<ScrollFadeIn>
|
||||
<ProjectsClient locale={locale} translations={projectsT} />
|
||||
</ScrollFadeIn>
|
||||
|
||||
{/* Wavy Separator 3 - Projects to Contact */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0,32 C240,64 480,0 720,32 C960,64 1200,0 1440,32 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient3)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#FDE68A" stopOpacity="0.3" />
|
||||
<stop offset="50%" stopColor="#FCA5A5" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#C4B5FD" stopOpacity="0.3" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<ScrollFadeIn>
|
||||
<ContactClient locale={locale} translations={contactT} />
|
||||
</ScrollFadeIn>
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import BackgroundBlobs from "@/components/BackgroundBlobs";
|
||||
|
||||
export default function BackgroundBlobsClient() {
|
||||
// Avoid SSR/webpack bailout issues from `next/dynamic({ ssr:false })`
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return <BackgroundBlobs />;
|
||||
}
|
||||
@@ -1,31 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import dynamic from "next/dynamic";
|
||||
import React from "react";
|
||||
import { MotionConfig } from "framer-motion";
|
||||
import { ToastProvider } from "@/components/Toast";
|
||||
import ErrorBoundary from "@/components/ErrorBoundary";
|
||||
import { ConsentProvider } from "./ConsentProvider";
|
||||
import { ThemeProvider } from "./ThemeProvider";
|
||||
|
||||
const BackgroundBlobs = dynamic(
|
||||
() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })),
|
||||
{ ssr: false, loading: () => null }
|
||||
);
|
||||
|
||||
export default function ClientProviders({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<ErrorBoundary>
|
||||
@@ -33,7 +19,7 @@ export default function ClientProviders({
|
||||
<ThemeProvider>
|
||||
{/* Respect prefers-reduced-motion in every Framer Motion animation */}
|
||||
<MotionConfig reducedMotion="user">
|
||||
<GatedProviders mounted={mounted}>
|
||||
<GatedProviders>
|
||||
{children}
|
||||
</GatedProviders>
|
||||
</MotionConfig>
|
||||
@@ -44,31 +30,10 @@ export default function ClientProviders({
|
||||
);
|
||||
}
|
||||
|
||||
function GatedProviders({
|
||||
children,
|
||||
mounted,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
mounted: boolean;
|
||||
}) {
|
||||
// Defer animated background blobs until after LCP
|
||||
const [deferredReady, setDeferredReady] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
let id: ReturnType<typeof setTimeout> | number;
|
||||
if (typeof requestIdleCallback !== "undefined") {
|
||||
id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
|
||||
return () => cancelIdleCallback(id as number);
|
||||
} else {
|
||||
id = setTimeout(() => setDeferredReady(true), 200);
|
||||
return () => clearTimeout(id);
|
||||
}
|
||||
}, [mounted]);
|
||||
|
||||
function GatedProviders({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<ToastProvider>
|
||||
{deferredReady && <BackgroundBlobs />}
|
||||
<div className="relative z-10">{children}</div>
|
||||
</ToastProvider>
|
||||
</ErrorBoundary>
|
||||
|
||||
+104
-147
@@ -86,174 +86,131 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
const enHref = `/en${pathWithoutLocale}${query}`;
|
||||
const deHref = `/de${pathWithoutLocale}${query}`;
|
||||
|
||||
const de = locale === "de";
|
||||
|
||||
// Über dem roten Plakat bleibt der Kopf transparent, sonst wird er zum Papierstreifen
|
||||
const solid = scrolled || !isHome;
|
||||
const pill =
|
||||
"rounded-full border-[1.5px] border-ink px-4 py-2 text-sm font-medium transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]";
|
||||
const langPill = (active: boolean) =>
|
||||
`rounded-full px-3 py-2 font-mono text-xs transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] ${
|
||||
active ? "bg-ink text-paper" : "hover:bg-ink/10"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none">
|
||||
<div
|
||||
className={`pointer-events-auto transition-[max-width] duration-500 ease-in-out ${
|
||||
scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`backdrop-blur-xl transition-[padding,background-color,box-shadow,border-color] duration-500 ease-in-out flex justify-between items-center ${
|
||||
scrolled
|
||||
? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
|
||||
: "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
|
||||
}`}
|
||||
<header
|
||||
className={`fixed inset-x-0 top-0 z-50 border-b-2 transition-[background-color,border-color] duration-200 ease-out ${
|
||||
solid ? "border-ink bg-paper/90 backdrop-blur-md" : "border-transparent bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3 text-ink sm:px-6 lg:px-10">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="font-display text-2xl font-extrabold tracking-[-0.03em] transition-transform duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label={de ? "dk0, zur Startseite" : "dk0, home"}
|
||||
>
|
||||
<div className="flex items-center space-x-2 active:scale-[0.97] transition-transform duration-150 ease-out">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
|
||||
>
|
||||
dk<span className="text-red-500">0</span>
|
||||
dk<span className={`transition-colors duration-200 ${solid ? "text-signal" : "text-paper"}`}>0</span>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-2 md:flex" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
|
||||
{navItems.slice(1).map((item) => (
|
||||
<Link key={item.name} href={item.href} className={pill}>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<div className="ml-2 flex items-center gap-1 border-l-2 border-ink/20 pl-3">
|
||||
<Link href={deHref} className={langPill(locale === "de")} aria-current={locale === "de" ? "true" : undefined}>
|
||||
DE
|
||||
</Link>
|
||||
<Link href={enHref} className={langPill(locale === "en")} aria-current={locale === "en" ? "true" : undefined}>
|
||||
EN
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<div key={item.name} className="active:scale-[0.97] transition-transform duration-150 ease-out">
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-stone-700 hover:text-stone-900 font-medium transition-colors relative liquid-hover"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Language Switcher */}
|
||||
<div className="flex items-center space-x-2 ml-4 pl-4 border-l border-stone-300">
|
||||
<Link
|
||||
href={enHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
}`}
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`${pill} inline-flex items-center gap-2 md:hidden`}
|
||||
aria-label={de ? "Menü öffnen" : "Open menu"}
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<MenuIcon size={18} /> {de ? "Menü" : "Menu"}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile menu overlay — always mounted so it can fade out, not just vanish */}
|
||||
{/* Abdunklung hinter dem Menü — bleibt gemountet, damit sie ausblenden kann */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={`fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden transition-opacity ${
|
||||
isOpen ? "opacity-100 duration-300 ease-out" : "opacity-0 pointer-events-none duration-200 ease-out"
|
||||
className={`fixed inset-0 z-40 bg-ink/40 transition-opacity md:hidden ${
|
||||
isOpen ? "opacity-100 duration-300 ease-out" : "pointer-events-none opacity-0 duration-200 ease-out"
|
||||
}`}
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Mobile menu panel — drawer curve in, quicker exit */}
|
||||
{/* Menü als Drawer: Drawer-Kurve rein, schneller raus */}
|
||||
<div
|
||||
inert={!isOpen}
|
||||
className={`fixed right-0 top-0 h-full w-80 max-w-[85vw] bg-white shadow-2xl z-50 md:hidden overflow-y-auto overscroll-contain transition-[transform,visibility] ${
|
||||
isOpen
|
||||
? "translate-x-0 visible duration-500 ease-drawer"
|
||||
: "translate-x-full invisible duration-200 ease-out"
|
||||
role="dialog"
|
||||
aria-label={de ? "Menü" : "Menu"}
|
||||
className={`fixed right-0 top-0 z-50 flex h-full w-80 max-w-[85vw] flex-col overflow-y-auto overscroll-contain border-l-2 border-ink bg-paper text-ink transition-[transform,visibility] md:hidden ${
|
||||
isOpen ? "visible translate-x-0 duration-500 ease-drawer" : "invisible translate-x-full duration-200 ease-out"
|
||||
}`}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black text-stone-900"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
dk<span className="text-red-500">0</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<XIcon size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-5 py-3">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="font-display text-2xl font-extrabold tracking-[-0.03em]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
dk<span className="text-signal">0</span>
|
||||
</Link>
|
||||
<button onClick={() => setIsOpen(false)} className={`${pill} inline-flex items-center`} aria-label={de ? "Menü schließen" : "Close menu"}>
|
||||
<XIcon size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-2">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-3 text-stone-700 hover:bg-stone-50 active:bg-stone-100 rounded-lg font-medium transition-colors"
|
||||
<nav className="flex flex-col border-t-2 border-ink" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="border-b-2 border-ink px-5 py-4 font-display text-3xl font-extrabold tracking-[-0.035em] transition-colors duration-150 active:bg-paper-2"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-1 px-5 py-5">
|
||||
<Link href={deHref} onClick={() => setIsOpen(false)} className={langPill(locale === "de")}>
|
||||
DE
|
||||
</Link>
|
||||
<Link href={enHref} onClick={() => setIsOpen(false)} className={langPill(locale === "en")}>
|
||||
EN
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex gap-2 px-5 pb-8">
|
||||
{socialLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`${pill} inline-flex items-center`}
|
||||
aria-label={link.label}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Language Switcher Mobile */}
|
||||
<div className="flex items-center gap-2 mt-6 pt-6 border-t border-stone-200">
|
||||
<Link
|
||||
href={enHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
}`}
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-stone-200">
|
||||
<div className="flex justify-center space-x-6">
|
||||
{socialLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-stone-100 hover:bg-stone-900 hover:text-white text-stone-700 transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label={link.label}
|
||||
>
|
||||
<Icon size={20} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<Icon size={18} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
+44
-50
@@ -1,73 +1,67 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import Image from "next/image";
|
||||
import KineticWordmark from "./KineticWordmark";
|
||||
|
||||
interface HeroProps {
|
||||
locale: string;
|
||||
}
|
||||
|
||||
// Abgabe der Masterarbeit, Grundlage für den Countdown im Intro
|
||||
const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
|
||||
|
||||
const MARQUEE = ["Self-Hosting", "Next.js", "SwiftUI", "Flutter", "Docker", "Microsoft 365", "Godot", "Home Assistant"];
|
||||
|
||||
export default async function Hero({ locale }: HeroProps) {
|
||||
const t = await getTranslations({ locale, namespace: "home.hero" });
|
||||
const daysLeft = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex flex-col items-center justify-center bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
|
||||
{/* Liquid Ambient Background — overflow-hidden here so the blobs are clipped, not the image/badge */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute top-[5%] left-[5%] w-[60vw] h-[60vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
|
||||
<div className="absolute bottom-[5%] right-[5%] w-[50vw] h-[50vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
|
||||
</div>
|
||||
<>
|
||||
<section id="top" className="relative overflow-hidden bg-signal px-4 pt-24 text-ink sm:px-6 md:pt-28 lg:px-10">
|
||||
<p className="font-mono text-[13px] leading-snug">{t("kicker")}</p>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20 pb-10 sm:pb-16">
|
||||
<div className="flex flex-col xl:flex-row items-center gap-8 sm:gap-10 xl:gap-24">
|
||||
<div className="mt-4 sm:mt-8">
|
||||
<KineticWordmark />
|
||||
</div>
|
||||
|
||||
{/* Left: Text Content */}
|
||||
<div className="flex-1 text-center xl:text-left space-y-6 sm:space-y-8 md:space-y-10">
|
||||
<div className="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 shadow-sm animate-fade-in">
|
||||
<span className="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-emerald-500 rounded-full animate-pulse" />
|
||||
<span className="font-mono text-[10px] sm:text-[11px] font-black uppercase tracking-[0.2em] sm:tracking-[0.3em] text-stone-500">{t("badge")}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-[2.75rem] sm:text-6xl md:text-8xl lg:text-[9.5rem] font-black tracking-tighter leading-[0.85] text-stone-900 dark:text-stone-50 uppercase">
|
||||
<span className="block">
|
||||
{t("line1")}
|
||||
</span>
|
||||
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-2 sm:pb-4">
|
||||
{t("line2")}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-stone-600 dark:text-stone-400 max-w-xl mx-auto xl:mx-0 font-light leading-relaxed tracking-tight">
|
||||
{t("description")}
|
||||
<div className="mt-3 grid gap-6 border-t-2 border-ink pb-8 pt-6 md:grid-cols-[1.3fr_1fr] md:items-end md:pb-10">
|
||||
<h1 className="text-balance font-display text-[clamp(2rem,4.4vw,4rem)] font-extrabold leading-[0.96] tracking-[-0.035em] [font-variation-settings:'wdth'_85]">
|
||||
<span className="sr-only">Dennis Konkol: </span>
|
||||
{t("claim")}
|
||||
</h1>
|
||||
<div>
|
||||
<p className="max-w-[42ch] text-[17px] leading-relaxed">
|
||||
{t("intro")} {daysLeft > 0 && t("countdown", { days: daysLeft })}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-8 justify-center xl:justify-start pt-2 sm:pt-4 animate-fade-in [animation-delay:150ms]">
|
||||
<a href="#projects" className="group relative overflow-hidden px-8 sm:px-12 py-4 sm:py-5 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl sm:rounded-3xl font-black text-xs uppercase tracking-[0.2em] active:scale-[0.97] transition-transform duration-150 ease-out shadow-2xl">
|
||||
<div className="absolute inset-0 bg-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out" />
|
||||
{t("ctaWork")}
|
||||
<div className="mt-5 flex flex-wrap gap-2.5">
|
||||
<a
|
||||
href="#projects"
|
||||
className="inline-flex items-center gap-2 rounded-full bg-ink px-5 py-3.5 text-[15px] font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
|
||||
>
|
||||
{t("ctaWork")} <span aria-hidden="true">↓</span>
|
||||
</a>
|
||||
<a href="#contact" className="font-black text-xs uppercase tracking-[0.2em] text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white transition-colors">
|
||||
<a
|
||||
href="#contact"
|
||||
className="inline-flex items-center rounded-full px-5 py-3.5 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-signal active:scale-[0.97]"
|
||||
>
|
||||
{t("ctaContact")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Right: The Photo */}
|
||||
<div className="relative w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 xl:w-[500px] xl:h-[500px] shrink-0 mt-4 sm:mt-8 xl:mt-0 animate-fade-in [animation-delay:100ms] [animation-duration:900ms]">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
|
||||
<div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]" style={{ willChange: "transform" }}>
|
||||
<Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority fetchPriority="high" sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1280px) 320px, 500px" />
|
||||
</div>
|
||||
|
||||
<div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700">
|
||||
<span className="font-mono text-xs sm:text-sm font-black tracking-tighter uppercase">dk<span className="text-red-500">0</span>.dev</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden bg-ink text-paper" aria-hidden="true">
|
||||
<div className="flex w-max animate-marquee gap-9 py-[18px] font-display text-[clamp(1.1rem,2.4vw,1.7rem)] font-bold leading-none">
|
||||
{[...MARQUEE, ...MARQUEE].map((item, i) => (
|
||||
<span key={i} className="flex items-center gap-9 whitespace-nowrap">
|
||||
{item}
|
||||
<svg viewBox="0 0 24 24" className="h-[0.7em] w-[0.7em] fill-signal">
|
||||
<path d="M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6-2.6 7.9-2.6-7.9-7.9-2.6 7.9-2.6z" />
|
||||
</svg>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 hidden md:flex flex-col items-center gap-4" aria-hidden="true">
|
||||
<div className="w-px h-16 origin-top animate-scroll-hint bg-gradient-to-b from-stone-300 dark:from-stone-700 to-transparent" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
const LETTERS = ["D", "K", "0"] as const;
|
||||
|
||||
// Ruhezustand und Spannweite der variablen Achsen von Bricolage Grotesque
|
||||
const REST = { wght: 800, wdth: 100 };
|
||||
const NEAR = { wght: 220, wdth: 75 };
|
||||
const REACH_PX = 520;
|
||||
|
||||
/**
|
||||
* Das große „DK0“ im Plakat. Die Buchstaben werden dünner und schmaler, je näher
|
||||
* der Zeiger kommt, geglättet über eine kritisch gedämpfte Feder.
|
||||
* Ohne Maus oder bei reduzierter Bewegung bleibt es statisch. Das Markup ist
|
||||
* vollständig server-gerendert, JS fügt nur die Reaktion hinzu.
|
||||
*/
|
||||
export default function KineticWordmark() {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const letterRefs = useRef<(HTMLSpanElement | null)[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
const area = root?.closest("section");
|
||||
if (!root || !area) return;
|
||||
|
||||
const fine = window.matchMedia?.("(hover: hover) and (pointer: fine)")?.matches ?? false;
|
||||
const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
|
||||
if (!fine || reduce) return;
|
||||
|
||||
const state = LETTERS.map(() => ({ w: REST.wght, d: REST.wdth, vw: 0, vd: 0, tw: REST.wght, td: REST.wdth }));
|
||||
let raf = 0;
|
||||
|
||||
const loop = () => {
|
||||
let moving = false;
|
||||
state.forEach((s, i) => {
|
||||
s.vw = (s.vw + (s.tw - s.w) * 0.08) * 0.78;
|
||||
s.w += s.vw;
|
||||
s.vd = (s.vd + (s.td - s.d) * 0.08) * 0.78;
|
||||
s.d += s.vd;
|
||||
if (Math.abs(s.vw) + Math.abs(s.vd) > 0.05) moving = true;
|
||||
const el = letterRefs.current[i];
|
||||
if (el) el.style.fontVariationSettings = `"wght" ${s.w.toFixed(1)}, "wdth" ${s.d.toFixed(1)}`;
|
||||
});
|
||||
raf = moving ? requestAnimationFrame(loop) : 0;
|
||||
};
|
||||
const kick = () => {
|
||||
if (!raf) raf = requestAnimationFrame(loop);
|
||||
};
|
||||
|
||||
const onMove = (e: PointerEvent) => {
|
||||
letterRefs.current.forEach((el, i) => {
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
const dist = Math.hypot(e.clientX - (r.left + r.width / 2), e.clientY - (r.top + r.height / 2));
|
||||
const f = Math.min(1, dist / REACH_PX);
|
||||
state[i].tw = NEAR.wght + f * (REST.wght - NEAR.wght);
|
||||
state[i].td = NEAR.wdth + f * (REST.wdth - NEAR.wdth);
|
||||
});
|
||||
kick();
|
||||
};
|
||||
const onLeave = () => {
|
||||
state.forEach((s) => {
|
||||
s.tw = REST.wght;
|
||||
s.td = REST.wdth;
|
||||
});
|
||||
kick();
|
||||
};
|
||||
|
||||
area.addEventListener("pointermove", onMove);
|
||||
area.addEventListener("pointerleave", onLeave);
|
||||
return () => {
|
||||
cancelAnimationFrame(raf);
|
||||
area.removeEventListener("pointermove", onMove);
|
||||
area.removeEventListener("pointerleave", onLeave);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
aria-hidden="true"
|
||||
className="flex select-none items-end justify-between font-display text-[clamp(8.5rem,33vw,31rem)] leading-[0.78] tracking-[-0.05em]"
|
||||
>
|
||||
{LETTERS.map((letter, i) => (
|
||||
<span
|
||||
key={letter}
|
||||
ref={(el) => {
|
||||
letterRefs.current[i] = el;
|
||||
}}
|
||||
className={`inline-block animate-wordmark-up ${letter === "0" ? "text-paper" : ""}`}
|
||||
style={{ fontVariationSettings: `"wght" ${REST.wght}, "wdth" ${REST.wdth}`, animationDelay: `${i * 80}ms` }}
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const ToastProvider = React.lazy(() =>
|
||||
import("@/components/Toast").then((mod) => ({
|
||||
default: mod.ToastProvider,
|
||||
}))
|
||||
);
|
||||
|
||||
const BackgroundBlobs = React.lazy(() =>
|
||||
import("@/components/BackgroundBlobs")
|
||||
);
|
||||
|
||||
const ChatWidget = React.lazy(() => import("./ChatWidget"));
|
||||
|
||||
export default function RootProviders({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return <div className="relative z-10">{children}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Suspense fallback={<div className="relative z-10">{children}</div>}>
|
||||
<ToastProvider>
|
||||
<BackgroundBlobs />
|
||||
<div className="relative z-10">{children}</div>
|
||||
<ChatWidget />
|
||||
</ToastProvider>
|
||||
</React.Suspense>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
// Pure CSS gradient background — replaces the Three.js/WebGL shader gradient.
|
||||
// Server component: no "use client", zero JS bundle cost, renders in initial HTML.
|
||||
// Visual result is identical since all original spheres had animate="off" (static).
|
||||
export default function ShaderGradientBackground() {
|
||||
return (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="fixed inset-0 -z-10 overflow-hidden pointer-events-none"
|
||||
>
|
||||
<div
|
||||
className="absolute -top-[10%] -left-[15%] w-[55%] h-[65%] rounded-full opacity-60"
|
||||
style={{
|
||||
background: "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
|
||||
filter: "blur(80px)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute top-[25%] -right-[10%] w-[50%] h-[60%] rounded-full opacity-55"
|
||||
style={{
|
||||
background: "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
|
||||
filter: "blur(80px)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-[15%] left-[5%] w-[50%] h-[60%] rounded-full opacity-50"
|
||||
style={{
|
||||
background: "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
|
||||
filter: "blur(80px)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -13,7 +13,7 @@ export function ThemeToggle() {
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return <div className="w-9 h-9" />;
|
||||
return <div className="ml-1 h-9 w-9" />;
|
||||
}
|
||||
|
||||
const cycle = () => {
|
||||
@@ -24,16 +24,16 @@ export function ThemeToggle() {
|
||||
return (
|
||||
<button
|
||||
onClick={cycle}
|
||||
className="p-2 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 hover:bg-stone-200 dark:hover:bg-stone-700 border border-stone-200 dark:border-stone-700 shadow-sm active:scale-[0.97] transition-[background-color,transform] duration-150 ease-out"
|
||||
className="ml-1 rounded-full border-[1.5px] border-ink p-2 text-ink transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
|
||||
aria-label={`Current theme: ${theme}. Click to switch.`}
|
||||
title={theme === "system" ? "System" : theme === "dark" ? "Dark" : "Light"}
|
||||
>
|
||||
{theme === "system" ? (
|
||||
<Monitor size={18} className="text-stone-500 dark:text-stone-300" />
|
||||
<Monitor size={16} />
|
||||
) : theme === "dark" ? (
|
||||
<Sun size={18} className="text-amber-400" />
|
||||
<Sun size={16} />
|
||||
) : (
|
||||
<Moon size={18} className="text-stone-600" />
|
||||
<Moon size={16} />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
+19
-13
@@ -30,6 +30,13 @@
|
||||
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
|
||||
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
|
||||
/* Plakat-Design (RGB-Kanäle, damit Tailwind-Deckkraft funktioniert) */
|
||||
--plakat-red: 232 64 47;
|
||||
--plakat-ink: 20 12 11;
|
||||
--plakat-paper: 246 243 241;
|
||||
--plakat-paper-2: 235 230 226;
|
||||
--plakat-ok: 31 157 99;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -52,12 +59,18 @@
|
||||
--border: #44403c;
|
||||
--input: #292524;
|
||||
--ring: #d6d3d1;
|
||||
|
||||
/* Tinte und Papier tauschen die Rollen, das Rot bleibt */
|
||||
--plakat-ink: 243 238 233;
|
||||
--plakat-paper: 21 16 15;
|
||||
--plakat-paper-2: 36 30 28;
|
||||
--plakat-ok: 60 199 138;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "Inter", sans-serif;
|
||||
background: rgb(var(--plakat-paper));
|
||||
color: rgb(var(--plakat-ink));
|
||||
font-family: var(--font-geist), "Helvetica Neue", Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
@@ -70,8 +83,8 @@ body {
|
||||
|
||||
/* Custom Selection */
|
||||
::selection {
|
||||
background: var(--primary); /* Rich brown for better contrast */
|
||||
color: var(--primary-foreground); /* Off-white */
|
||||
background: rgb(var(--plakat-ink));
|
||||
color: rgb(var(--plakat-paper));
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
@@ -135,18 +148,11 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-playfair), Georgia, serif;
|
||||
font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-serif;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Improve text contrast - using foreground variable for WCAG AA compliance */
|
||||
p,
|
||||
span,
|
||||
div {
|
||||
color: var(--foreground); /* #3e2723 - meets WCAG AA standards */
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
::-webkit-scrollbar {
|
||||
|
||||
+15
-10
@@ -1,24 +1,31 @@
|
||||
import "./globals.css";
|
||||
import { Metadata } from "next";
|
||||
import { Inter, Playfair_Display } from "next/font/google";
|
||||
import { Bricolage_Grotesque, Geist, Geist_Mono } from "next/font/google";
|
||||
import React from "react";
|
||||
import ClientProviders from "./components/ClientProviders";
|
||||
import ShaderGradientBackground from "./components/ShaderGradientBackground";
|
||||
import { cookies } from "next/headers";
|
||||
import { getBaseUrl } from "@/lib/seo";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
// Bricolage behält die Achsen für Breite und optische Größe, damit das Plakat-Wortbild variieren kann
|
||||
const bricolage = Bricolage_Grotesque({
|
||||
variable: "--font-bricolage",
|
||||
subsets: ["latin"],
|
||||
axes: ["opsz", "wdth"],
|
||||
display: "swap",
|
||||
adjustFontFallback: true,
|
||||
});
|
||||
|
||||
const geist = Geist({
|
||||
variable: "--font-geist",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
adjustFontFallback: true,
|
||||
});
|
||||
|
||||
const playfair = Playfair_Display({
|
||||
variable: "--font-playfair",
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
adjustFontFallback: true,
|
||||
});
|
||||
|
||||
export default async function RootLayout({
|
||||
@@ -37,9 +44,7 @@ export default async function RootLayout({
|
||||
{/* Prevent flash of unstyled theme — reads localStorage + system preference before React hydrates */}
|
||||
<script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');var d=t==='dark'||((!t||t==='system')&&window.matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark');}catch(e){}` }} />
|
||||
</head>
|
||||
<body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
|
||||
<div className="grain-overlay" aria-hidden="true" />
|
||||
<ShaderGradientBackground />
|
||||
<body className={`${bricolage.variable} ${geist.variable} ${geistMono.variable}`} suppressHydrationWarning>
|
||||
<ClientProviders>{children}</ClientProviders>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const BackgroundBlobs = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
{/* Mint blob - top left */}
|
||||
<motion.div
|
||||
className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] opacity-70"
|
||||
animate={{ scale: [1, 1.15, 1] }}
|
||||
transition={{ duration: 40, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
|
||||
/>
|
||||
|
||||
{/* Lavender blob - top right */}
|
||||
<motion.div
|
||||
className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] opacity-70"
|
||||
animate={{ scale: [1, 1.1, 1] }}
|
||||
transition={{ duration: 45, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
|
||||
/>
|
||||
|
||||
{/* Rose blob - bottom left */}
|
||||
<motion.div
|
||||
className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] opacity-70"
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 50, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
|
||||
/>
|
||||
|
||||
{/* Peach blob - middle right */}
|
||||
<motion.div
|
||||
className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] opacity-70"
|
||||
animate={{ scale: [1, 1.25, 1] }}
|
||||
transition={{ duration: 55, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackgroundBlobs;
|
||||
@@ -2,7 +2,6 @@ import { getLocalizedMessage } from '@/lib/i18n-loader';
|
||||
import type {
|
||||
NavTranslations,
|
||||
FooterTranslations,
|
||||
HeroTranslations,
|
||||
AboutTranslations,
|
||||
ProjectsTranslations,
|
||||
ContactTranslations,
|
||||
@@ -55,30 +54,6 @@ export async function getFooterTranslations(locale: string): Promise<FooterTrans
|
||||
};
|
||||
}
|
||||
|
||||
export async function getHeroTranslations(locale: string): Promise<HeroTranslations> {
|
||||
const keys = [
|
||||
'home.hero.description',
|
||||
'home.hero.ctaWork',
|
||||
'home.hero.ctaContact',
|
||||
'home.hero.features.f1',
|
||||
'home.hero.features.f2',
|
||||
'home.hero.features.f3',
|
||||
];
|
||||
|
||||
const values = await Promise.all(keys.map(key => getLocalizedMessage(key, locale)));
|
||||
|
||||
return {
|
||||
description: values[0],
|
||||
ctaWork: values[1],
|
||||
ctaContact: values[2],
|
||||
features: {
|
||||
f1: values[3],
|
||||
f2: values[4],
|
||||
f3: values[5],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export async function getAboutTranslations(locale: string): Promise<AboutTranslations> {
|
||||
const keys = [
|
||||
'home.about.title',
|
||||
|
||||
+6
-11
@@ -26,17 +26,12 @@
|
||||
},
|
||||
"home": {
|
||||
"hero": {
|
||||
"badge": "Student & Self-Hoster",
|
||||
"line1": "Building",
|
||||
"line2": "Stuff.",
|
||||
"features": {
|
||||
"f1": "Next.js & Flutter",
|
||||
"f2": "Docker Swarm & CI/CD",
|
||||
"f3": "Self-Hosted Infrastruktur"
|
||||
},
|
||||
"description": "Ich bin Dennis Konkol, Informatik-Student und Webentwickler aus Osnabrück. Ich entwickle Fullstack-Apps mit Next.js und Flutter und betreibe meine eigene Infrastruktur mit Docker und CI/CD.",
|
||||
"ctaWork": "Meine Projekte",
|
||||
"ctaContact": "Kontakt"
|
||||
"kicker": "Dennis Konkol — Osnabrück",
|
||||
"claim": "Ich hoste mein halbes Leben selbst. Den Rest programmiere ich.",
|
||||
"intro": "IT-Admin in Osnabrück und Masterstudent. Ab Februar 2027 kümmere ich mich hauptberuflich um Microsoft 365, bis dahin um meine Masterarbeit.",
|
||||
"countdown": "{days, plural, one {Noch # Tag.} other {Noch # Tage.}}",
|
||||
"ctaWork": "Projekte ansehen",
|
||||
"ctaContact": "Schreib mir"
|
||||
},
|
||||
"about": {
|
||||
"title": "Hinter den Kulissen",
|
||||
|
||||
+9
-18
@@ -23,21 +23,15 @@
|
||||
"acceptSelected": "Accept selected",
|
||||
"rejectAll": "Reject all",
|
||||
"hide": "Hide"
|
||||
}
|
||||
,
|
||||
},
|
||||
"home": {
|
||||
"hero": {
|
||||
"badge": "Student & Self-Hoster",
|
||||
"line1": "Building",
|
||||
"line2": "Stuff.",
|
||||
"features": {
|
||||
"f1": "Next.js & Flutter",
|
||||
"f2": "Docker Swarm & CI/CD",
|
||||
"f3": "Self-Hosted Infrastructure"
|
||||
},
|
||||
"description": "I'm Dennis Konkol, a computer science student and web developer from Osnabrück, Germany. I build fullstack apps with Next.js and Flutter and love running my own infrastructure with Docker and CI/CD.",
|
||||
"ctaWork": "View Projects",
|
||||
"ctaContact": "Get in touch"
|
||||
"kicker": "Dennis Konkol — Osnabrück, Germany",
|
||||
"claim": "I self-host half my life. The rest I code.",
|
||||
"intro": "IT admin in Osnabrück and master's student. From February 2027 I look after Microsoft 365 full-time, until then my master's thesis.",
|
||||
"countdown": "{days, plural, one {# day to go.} other {# days to go.}}",
|
||||
"ctaWork": "See projects",
|
||||
"ctaContact": "Write me"
|
||||
},
|
||||
"about": {
|
||||
"title": "Behind the Code",
|
||||
@@ -133,8 +127,7 @@
|
||||
"characters": "{count} characters"
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
},
|
||||
"projects": {
|
||||
"shared": {
|
||||
"featured": "Featured"
|
||||
@@ -154,8 +147,7 @@
|
||||
"viewSource": "View Source",
|
||||
"techStack": "Tech Stack"
|
||||
}
|
||||
}
|
||||
,
|
||||
},
|
||||
"footer": {
|
||||
"role": "Software Engineer",
|
||||
"madeIn": "Made in Germany",
|
||||
@@ -201,4 +193,3 @@
|
||||
"professional": "Professional"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+22
-3
@@ -32,6 +32,14 @@ export default {
|
||||
"0%": { opacity: "0", transform: "translateY(-12px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
},
|
||||
wordmarkUp: {
|
||||
"0%": { opacity: "0", transform: "translateY(40%)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
},
|
||||
marquee: {
|
||||
"0%": { transform: "translateX(0)" },
|
||||
"100%": { transform: "translateX(-50%)" },
|
||||
},
|
||||
scrollHint: {
|
||||
"0%": { opacity: "0", transform: "scaleY(0.4)" },
|
||||
"40%": { opacity: "1", transform: "scaleY(1)" },
|
||||
@@ -43,6 +51,8 @@ export default {
|
||||
"slide-down": "slideDown 500ms cubic-bezier(0.23, 1, 0.32, 1) both",
|
||||
"scroll-hint": "scrollHint 2.4s cubic-bezier(0.77, 0, 0.175, 1) infinite",
|
||||
"spin-slow": "spin 4s linear infinite",
|
||||
"wordmark-up": "wordmarkUp 900ms cubic-bezier(0.23, 1, 0.32, 1) both",
|
||||
marquee: "marquee 32s linear infinite",
|
||||
},
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
@@ -78,6 +88,14 @@ export default {
|
||||
border: "var(--border)",
|
||||
input: "var(--input)",
|
||||
ring: "var(--ring)",
|
||||
// Plakat-Design: Rot, Tinte, Papier. Tinte und Papier tauschen im Dark Mode die Rollen.
|
||||
signal: "rgb(var(--plakat-red) / <alpha-value>)",
|
||||
ink: "rgb(var(--plakat-ink) / <alpha-value>)",
|
||||
paper: {
|
||||
DEFAULT: "rgb(var(--plakat-paper) / <alpha-value>)",
|
||||
2: "rgb(var(--plakat-paper-2) / <alpha-value>)",
|
||||
},
|
||||
ok: "rgb(var(--plakat-ok) / <alpha-value>)",
|
||||
// Warm brown palette
|
||||
cream: "#FAF8F3",
|
||||
sand: "#EFEBE9",
|
||||
@@ -122,9 +140,10 @@ export default {
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["var(--font-inter)", "sans-serif"],
|
||||
serif: ["var(--font-playfair)", "Georgia", "serif"],
|
||||
mono: ["var(--font-roboto-mono)", "Monaco", "Courier New", "monospace"],
|
||||
sans: ["var(--font-geist)", "Helvetica Neue", "Arial", "sans-serif"],
|
||||
display: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
|
||||
serif: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
|
||||
mono: ["var(--font-geist-mono)", "SF Mono", "Menlo", "monospace"],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -20,17 +20,6 @@ export interface FooterTranslations {
|
||||
builtWith: string;
|
||||
}
|
||||
|
||||
export interface HeroTranslations {
|
||||
description: string;
|
||||
ctaWork: string;
|
||||
ctaContact: string;
|
||||
features: {
|
||||
f1: string;
|
||||
f2: string;
|
||||
f3: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface AboutTranslations {
|
||||
title: string;
|
||||
p1: string;
|
||||
|
||||
Reference in New Issue
Block a user