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

style: optimize global CSS, scrollbars, and text shadow

Browse source
This commit is contained in:
Chneemann 2026-07-23 08:17:10 +02:00
parent 4f7a39628f
commit 1dd92307d6
8 changed files with 83 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/app/globals.css
View file

@ -1,26 +1,52 @@
@import "tailwindcss"; @import "tailwindcss";
:root { @theme {
--background: #ffffff; --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
--foreground: #171717; --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
} }
@theme inline { @layer base {
--color-background: var(--background); html {
--color-foreground: var(--foreground); color-scheme: dark;
--font-sans: var(--font-geist-sans); scroll-behavior: smooth;
--font-mono: var(--font-geist-mono); height: 100%;
} scrollbar-color: #1e293b #020617;
scrollbar-width: thin;
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
} }
body { body {
background: var(--background); @apply bg-slate-950 text-slate-200 font-sans text-base antialiased min-h-full flex flex-col relative overflow-x-hidden;
color: var(--foreground); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
font-family: Arial, Helvetica, sans-serif; }
::selection {
@apply bg-blue-500/30 text-blue-200;
}
:focus-visible {
@apply outline-2 outline-offset-2 outline-blue-500 rounded-sm;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #020617;
}
::-webkit-scrollbar-thumb {
background: #1e293b;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #334155;
}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
-webkit-text-fill-color: #e2e8f0;
-webkit-box-shadow: 0 0 0px 1000px #020617 inset;
transition: background-color 5000s ease-in-out 0s;
} }

10
src/app/layout.tsx
View file

@ -9,11 +9,14 @@ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
display: "swap", display: "swap",
preload: false,
}); });
const geistMono = Geist_Mono({ const geistMono = Geist_Mono({
variable: "--font-geist-mono", variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
display: "swap",
preload: false,
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
@ -27,11 +30,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
lang="en" <body>
className={`${geistSans.variable} ${geistMono.variable} h-full bg-slate-950 antialiased`}
>
<body className="min-h-full flex flex-col relative">
<Background /> <Background />
<Header /> <Header />
<main className="grow">{children}</main> <main className="grow">{children}</main>

20
src/components/About.tsx
View file

@ -2,7 +2,7 @@ export default function About() {
return ( return (
<section <section
id="aboutme" id="aboutme"
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-15" className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
> >
{/* Titel */} {/* Titel */}
<div className="mb-6 space-y-1"> <div className="mb-6 space-y-1">
@ -16,7 +16,7 @@ export default function About() {
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start"> <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
{/* Left column */} {/* Left column */}
<div className="md:col-span-7 space-y-6 text-slate-200 leading-relaxed text-base"> <div className="md:col-span-7 space-y-6 leading-relaxed">
<p> <p>
Hey there! André here—a full-stack developer based in Karlsruhe. A Hey there! André here—a full-stack developer based in Karlsruhe. A
childhood fascination with computers sparked this journey, which has childhood fascination with computers sparked this journey, which has
@ -55,11 +55,13 @@ export default function About() {
{/* Right column */} {/* Right column */}
<div className="md:col-span-5"> <div className="md:col-span-5">
<div <div
className="group relative p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 backdrop-blur-sm className="group relative p-5 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md
hover:border-blue-500/30 hover:bg-slate-900/80 hover:shadow-xl hover:shadow-blue-500/5 shadow-lg shadow-black/40 border-t-slate-600/50
transition-all duration-300 flex flex-col justify-between overflow-hidden space-y-6" hover:border-blue-500/50 hover:bg-slate-800/90
hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-0.5
transition-all duration-300 ease-out flex flex-col justify-between overflow-hidden space-y-6"
> >
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl group-hover:bg-blue-500/20 transition-all duration-500 pointer-events-none" /> <div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/15 rounded-full blur-xl group-hover:bg-blue-500/25 transition-all duration-500 pointer-events-none" />
<div> <div>
{/* Header Titel */} {/* Header Titel */}
@ -75,7 +77,7 @@ export default function About() {
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<span className="text-blue-500 font-mono">▸</span> <span className="text-blue-500 font-mono">▸</span>
<span className="text-slate-400 font-medium">Languages:</span> <span className="text-slate-400 font-medium">Languages:</span>
<span className="text-slate-200 ml-auto text-right font-mono text-xs"> <span className="ml-auto text-right font-mono text-xs">
German, English German, English
</span> </span>
</li> </li>
@ -84,7 +86,7 @@ export default function About() {
<span className="text-slate-400 font-medium"> <span className="text-slate-400 font-medium">
Core Stack: Core Stack:
</span> </span>
<span className="text-slate-200 ml-auto text-right font-mono text-xs"> <span className="ml-auto text-right font-mono text-xs">
Angular&nbsp;(TS), React&nbsp;(Next.js) Angular&nbsp;(TS), React&nbsp;(Next.js)
</span> </span>
</li> </li>
@ -93,7 +95,7 @@ export default function About() {
<span className="text-slate-400 font-medium"> <span className="text-slate-400 font-medium">
Core Focus: Core Focus:
</span> </span>
<span className="text-slate-200 ml-auto text-right font-mono text-xs"> <span className="ml-auto text-right font-mono text-xs">
Clean&nbsp;Code & Architecture Clean&nbsp;Code & Architecture
</span> </span>
</li> </li>

4
src/components/Background.tsx
View file

@ -2,7 +2,7 @@ export default function Background() {
return ( return (
<> <>
<div <div
className="fixed inset-0 pointer-events-none z-0 opacity-[0.15]" className="fixed inset-0 pointer-events-none z-0 opacity-[0.25]"
style={{ style={{
backgroundImage: `linear-gradient(to right, #3b82f6 1px, transparent 1px), linear-gradient(to bottom, #3b82f6 1px, transparent 1px)`, backgroundImage: `linear-gradient(to right, #3b82f6 1px, transparent 1px), linear-gradient(to bottom, #3b82f6 1px, transparent 1px)`,
backgroundSize: "3rem 3rem", backgroundSize: "3rem 3rem",
@ -13,7 +13,7 @@ export default function Background() {
}} }}
/> />
<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" /> <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" />
</> </>
); );
} }

2
src/components/Footer.tsx
View file

@ -2,7 +2,7 @@ import Link from "next/link";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="w-full border-t border-slate-900 bg-slate-950 text-center text-xs text-slate-500 px-4 sm:px-4 py-4"> <footer className="w-full bg-slate-950/50 text-center text-xs text-slate-500 px-4 sm:px-4 py-4">
<div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4"> <div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
<p>© {new Date().getFullYear()} André Kempf. All rights reserved.</p> <p>© {new Date().getFullYear()} André Kempf. All rights reserved.</p>
<div className="flex gap-4"> <div className="flex gap-4">

14
src/components/Header.tsx
View file

@ -14,7 +14,7 @@ export default function Header() {
]; ];
return ( return (
<header className="fixed top-0 left-0 w-full bg-slate-900/90 backdrop-blur-md border-b border-slate-800 z-50 px-4 sm:px-4 py-4"> <header className="fixed top-0 left-0 w-full bg-slate-950/50 backdrop-blur-md z-50 px-4 sm:px-4 py-4">
<div className="max-w-5xl mx-auto flex justify-between items-center"> <div className="max-w-5xl mx-auto flex justify-between items-center">
<Link <Link
href="/" href="/"
@ -25,7 +25,7 @@ export default function Header() {
</Link> </Link>
{/* Desktop navigation */} {/* Desktop navigation */}
<nav className="hidden md:flex gap-8 text-base font-medium text-slate-200"> <nav className="hidden md:flex gap-8 font-medium text-white">
{navLinks.map((link) => ( {navLinks.map((link) => (
<Link <Link
key={link.href} key={link.href}
@ -45,17 +45,17 @@ export default function Header() {
> >
{/* Animated burger icon lines */} {/* Animated burger icon lines */}
<span <span
className={`block w-6 h-0.5 bg-slate-200 transition-all duration-300 group-hover:bg-blue-400 ${ className={`block w-6 h-0.5 bg-slate-100 transition-all duration-300 group-hover:bg-blue-400 ${
isOpen ? "rotate-45 translate-y-2" : "" isOpen ? "rotate-45 translate-y-2" : ""
}`} }`}
/> />
<span <span
className={`block w-6 h-0.5 bg-slate-200 transition-all duration-300 group-hover:bg-blue-400 ${ className={`block w-6 h-0.5 bg-slate-100 transition-all duration-300 group-hover:bg-blue-400 ${
isOpen ? "opacity-0" : "" isOpen ? "opacity-0" : ""
}`} }`}
/> />
<span <span
className={`block w-6 h-0.5 bg-slate-200 transition-all duration-300 group-hover:bg-blue-400 ${ className={`block w-6 h-0.5 bg-slate-100 transition-all duration-300 group-hover:bg-blue-400 ${
isOpen ? "-rotate-45 -translate-y-2" : "" isOpen ? "-rotate-45 -translate-y-2" : ""
}`} }`}
/> />
@ -63,7 +63,7 @@ export default function Header() {
{/* Mobile fullscreen overlay */} {/* Mobile fullscreen overlay */}
<div <div
className={`fixed inset-0 w-full h-screen bg-slate-950/98 flex flex-col items-center justify-center gap-8 text-2xl font-semibold text-slate-200 transition-all duration-300 md:hidden ${ className={`fixed inset-0 w-full h-screen bg-slate-950/98 flex flex-col items-center justify-center gap-8 text-2xl font-semibold transition-all duration-300 md:hidden ${
isOpen isOpen
? "opacity-100 pointer-events-auto" ? "opacity-100 pointer-events-auto"
: "opacity-0 pointer-events-none" : "opacity-0 pointer-events-none"
@ -74,7 +74,7 @@ export default function Header() {
key={link.href} key={link.href}
href={link.href} href={link.href}
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
className="hover:text-blue-400 transition-colors" className="hover:text-blue-400 text-white transition-colors"
> >
{link.label} {link.label}
</Link> </Link>

12
src/components/Hero.tsx
View file

@ -2,10 +2,10 @@ import Link from "next/link";
export default function Hero() { export default function Hero() {
return ( return (
<section className="relative pt-20 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto border-t border-slate-900/50"> <section className="relative pt-20 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center z-10 w-full"> <div className="grid grid-cols-1 md:grid-cols-12 gap-3 items-center z-10 w-full">
{/* Left column */} {/* Left column */}
<div className="md:col-span-7 lg:space-y-5 md:space-y-4 space-y-3 text-left"> <div className="md:col-span-8 lg:space-y-5 md:space-y-4 space-y-3 text-left">
<span className="text-blue-500 font-mono text-sm tracking-wider uppercase"> <span className="text-blue-500 font-mono text-sm tracking-wider uppercase">
// Hi, my name is // Hi, my name is
</span> </span>
@ -19,7 +19,7 @@ export default function Hero() {
<span className="text-blue-400/80 font-medium">Developer</span> <span className="text-blue-400/80 font-medium">Developer</span>
</h2> </h2>
<p className="text-base sm:text-lg text-slate-200 leading-relaxed max-w-xl"> <p className="text-lg leading-relaxed max-w-xl">
I conceptualize and develop modern web applications. With a sharp I conceptualize and develop modern web applications. With a sharp
eye for detail and a focus on clean code, I bring digital ideas to eye for detail and a focus on clean code, I bring digital ideas to
life. life.
@ -41,7 +41,7 @@ export default function Hero() {
</Link> </Link>
<Link <Link
href="https://andre-kempf.com/assets/downloads/Andre_Kempf_Lebenslauf_2025.pdf" href="https://andre-kempf.com/assets/downloads/Andre_Kempf_Lebenslauf_2025.pdf"
className="px-6 py-3 bg-slate-900 border border-slate-800 hover:border-slate-700 hover:bg-slate-850 text-slate-200 font-semibold rounded-lg transition-all hover:-translate-y-0.5 duration-200" className="px-6 py-3 bg-slate-900 border border-slate-800 hover:border-slate-700 hover:bg-slate-850 font-semibold rounded-lg transition-all hover:-translate-y-0.5 duration-200"
> >
Download CV Download CV
</Link> </Link>
@ -49,7 +49,7 @@ export default function Hero() {
</div> </div>
{/* Right column */} {/* Right column */}
<div className="md:col-span-5 flex justify-center"> <div className="md:col-span-4 flex justify-center">
<div className="relative group h-auto w-64 aspect-5/6"> <div className="relative group h-auto w-64 aspect-5/6">
<div className="relative w-full h-full rounded-2xl border-5 border-slate-800 bg-slate-900 overflow-hidden flex items-center justify-center group-hover:border-blue-500/50 transition-colors duration-300"> <div className="relative w-full h-full rounded-2xl border-5 border-slate-800 bg-slate-900 overflow-hidden flex items-center justify-center group-hover:border-blue-500/50 transition-colors duration-300">
<img <img

14
src/components/Skills.tsx
View file

@ -38,7 +38,7 @@ export default function Skills() {
return ( return (
<section <section
id="myskills" id="myskills"
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-15" className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
> >
{/* Titel */} {/* Titel */}
<div className="mb-6 space-y-1 text-right flex flex-col items-end"> <div className="mb-6 space-y-1 text-right flex flex-col items-end">
@ -51,7 +51,7 @@ export default function Skills() {
</div> </div>
{/* Description */} {/* Description */}
<div className="mb-4 text-slate-200 text-base leading-relaxed"> <div className="mb-4 leading-relaxed">
<p> <p>
Through hands-on experience in various projects, I continuously expand Through hands-on experience in various projects, I continuously expand
and refine my full-stack development skills. Here is an overview of and refine my full-stack development skills. Here is an overview of
@ -70,11 +70,13 @@ export default function Skills() {
{skillCategories.map((category) => ( {skillCategories.map((category) => (
<div <div
key={category.title} key={category.title}
className="group relative p-4 rounded-2xl border border-slate-800/80 bg-slate-900/40 backdrop-blur-sm className="group relative p-5 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md
hover:border-blue-500/30 hover:bg-slate-900/80 hover:shadow-xl hover:shadow-blue-500/5 shadow-lg shadow-black/40 border-t-slate-600/50
transition-all duration-300 flex flex-col justify-between overflow-hidden" hover:border-blue-500/50 hover:bg-slate-800/90
hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-0.5
transition-all duration-300 ease-out flex flex-col justify-between overflow-hidden"
> >
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl group-hover:bg-blue-500/20 transition-all duration-500 pointer-events-none" /> <div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/15 rounded-full blur-xl group-hover:bg-blue-500/25 transition-all duration-500 pointer-events-none" />
<div> <div>
{/* Header */} {/* Header */}