style: optimize global CSS, scrollbars, and text shadow
This commit is contained in:
Chneemann
parent
4f7a39628f
commit
1dd92307d6
8 changed files with 83 additions and 53 deletions
|
|
@ -1,26 +1,52 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
@theme {
|
||||
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
@layer base {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
scrollbar-color: #1e293b #020617;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
body {
|
||||
@apply bg-slate-950 text-slate-200 font-sans text-base antialiased min-h-full flex flex-col relative overflow-x-hidden;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,14 @@ const geistSans = Geist({
|
|||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
preload: false,
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
preload: false,
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
|
@ -27,11 +30,8 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full bg-slate-950 antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col relative">
|
||||
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
<body>
|
||||
<Background />
|
||||
<Header />
|
||||
<main className="grow">{children}</main>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export default function About() {
|
|||
return (
|
||||
<section
|
||||
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 */}
|
||||
<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">
|
||||
{/* 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>
|
||||
Hey there! André here—a full-stack developer based in Karlsruhe. A
|
||||
childhood fascination with computers sparked this journey, which has
|
||||
|
|
@ -55,11 +55,13 @@ export default function About() {
|
|||
{/* Right column */}
|
||||
<div className="md:col-span-5">
|
||||
<div
|
||||
className="group relative p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 backdrop-blur-sm
|
||||
hover:border-blue-500/30 hover:bg-slate-900/80 hover:shadow-xl hover:shadow-blue-500/5
|
||||
transition-all duration-300 flex flex-col justify-between overflow-hidden space-y-6"
|
||||
className="group relative p-5 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md
|
||||
shadow-lg shadow-black/40 border-t-slate-600/50
|
||||
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>
|
||||
{/* Header Titel */}
|
||||
|
|
@ -75,7 +77,7 @@ export default function About() {
|
|||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</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
|
||||
</span>
|
||||
</li>
|
||||
|
|
@ -84,7 +86,7 @@ export default function About() {
|
|||
<span className="text-slate-400 font-medium">
|
||||
Core Stack:
|
||||
</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 (TS), React (Next.js)
|
||||
</span>
|
||||
</li>
|
||||
|
|
@ -93,7 +95,7 @@ export default function About() {
|
|||
<span className="text-slate-400 font-medium">
|
||||
Core Focus:
|
||||
</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 Code & Architecture
|
||||
</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export default function Background() {
|
|||
return (
|
||||
<>
|
||||
<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={{
|
||||
backgroundImage: `linear-gradient(to right, #3b82f6 1px, transparent 1px), linear-gradient(to bottom, #3b82f6 1px, transparent 1px)`,
|
||||
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,7 +2,7 @@ import Link from "next/link";
|
|||
|
||||
export default function Footer() {
|
||||
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">
|
||||
<p>© {new Date().getFullYear()} André Kempf. All rights reserved.</p>
|
||||
<div className="flex gap-4">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default function Header() {
|
|||
];
|
||||
|
||||
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">
|
||||
<Link
|
||||
href="/"
|
||||
|
|
@ -25,7 +25,7 @@ export default function Header() {
|
|||
</Link>
|
||||
|
||||
{/* 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) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
|
|
@ -45,17 +45,17 @@ export default function Header() {
|
|||
>
|
||||
{/* Animated burger icon lines */}
|
||||
<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" : ""
|
||||
}`}
|
||||
/>
|
||||
<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" : ""
|
||||
}`}
|
||||
/>
|
||||
<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" : ""
|
||||
}`}
|
||||
/>
|
||||
|
|
@ -63,7 +63,7 @@ export default function Header() {
|
|||
|
||||
{/* Mobile fullscreen overlay */}
|
||||
<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
|
||||
? "opacity-100 pointer-events-auto"
|
||||
: "opacity-0 pointer-events-none"
|
||||
|
|
@ -74,7 +74,7 @@ export default function Header() {
|
|||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="hover:text-blue-400 transition-colors"
|
||||
className="hover:text-blue-400 text-white transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import Link from "next/link";
|
|||
|
||||
export default function Hero() {
|
||||
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">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center z-10 w-full">
|
||||
<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-3 items-center z-10 w-full">
|
||||
{/* 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">
|
||||
// Hi, my name is
|
||||
</span>
|
||||
|
|
@ -19,7 +19,7 @@ export default function Hero() {
|
|||
<span className="text-blue-400/80 font-medium">Developer</span>
|
||||
</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
|
||||
eye for detail and a focus on clean code, I bring digital ideas to
|
||||
life.
|
||||
|
|
@ -41,7 +41,7 @@ export default function Hero() {
|
|||
</Link>
|
||||
<Link
|
||||
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
|
||||
</Link>
|
||||
|
|
@ -49,7 +49,7 @@ export default function Hero() {
|
|||
</div>
|
||||
|
||||
{/* 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 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
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default function Skills() {
|
|||
return (
|
||||
<section
|
||||
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 */}
|
||||
<div className="mb-6 space-y-1 text-right flex flex-col items-end">
|
||||
|
|
@ -51,7 +51,7 @@ export default function Skills() {
|
|||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-4 text-slate-200 text-base leading-relaxed">
|
||||
<div className="mb-4 leading-relaxed">
|
||||
<p>
|
||||
Through hands-on experience in various projects, I continuously expand
|
||||
and refine my full-stack development skills. Here is an overview of
|
||||
|
|
@ -70,11 +70,13 @@ export default function Skills() {
|
|||
{skillCategories.map((category) => (
|
||||
<div
|
||||
key={category.title}
|
||||
className="group relative p-4 rounded-2xl border border-slate-800/80 bg-slate-900/40 backdrop-blur-sm
|
||||
hover:border-blue-500/30 hover:bg-slate-900/80 hover:shadow-xl hover:shadow-blue-500/5
|
||||
transition-all duration-300 flex flex-col justify-between overflow-hidden"
|
||||
className="group relative p-5 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md
|
||||
shadow-lg shadow-black/40 border-t-slate-600/50
|
||||
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>
|
||||
{/* Header */}
|
||||
|
|
|
|||
Loading…
Reference in a new issue