style: update section titles and minor UI tweaks
This commit is contained in:
Chneemann
parent
f26b941dfa
commit
47f18f467b
4 changed files with 73 additions and 60 deletions
|
|
@ -2,14 +2,16 @@ export default function About() {
|
|||
return (
|
||||
<section
|
||||
id="aboutme"
|
||||
className="relative py-8 px-6 md:px-12 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-20"
|
||||
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-15"
|
||||
>
|
||||
{/* Titel */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="mb-6 space-y-1">
|
||||
<p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
|
||||
// 01. Introduction
|
||||
</p>
|
||||
<h2 className="text-3xl font-bold text-white tracking-tight">
|
||||
About me<span className="text-blue-500">.</span>
|
||||
</h2>
|
||||
<div className="h-px bg-slate-800 grow max-w-md" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
|
||||
|
|
@ -52,49 +54,61 @@ export default function About() {
|
|||
|
||||
{/* Right column */}
|
||||
<div className="md:col-span-5">
|
||||
<div className="relative group p-6 rounded-2xl border border-slate-800 bg-slate-900/50 backdrop-blur-sm space-y-6 hover:border-slate-700/80 transition-colors duration-300">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-blue-500/5 rounded-full blur-2xl pointer-events-none group-hover:bg-blue-500/10 transition-colors duration-300" />
|
||||
<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"
|
||||
>
|
||||
<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" />
|
||||
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> Quick
|
||||
Facts
|
||||
</h3>
|
||||
<div>
|
||||
{/* Header Titel */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span>{" "}
|
||||
Quick Facts
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 text-sm">
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</span>
|
||||
<span className="text-slate-400 font-medium">Location:</span>
|
||||
<span className="text-slate-200 ml-auto">Germany</span>
|
||||
</li>
|
||||
<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">German, English</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</span>
|
||||
<span className="text-slate-400 font-medium">Core Stack:</span>
|
||||
<span className="text-slate-200 ml-auto text-right">
|
||||
Angular (TS), React (Next.js)
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</span>
|
||||
<span className="text-slate-400 font-medium">Core Focus:</span>
|
||||
<span className="text-slate-200 ml-auto">
|
||||
Clean Code & Architecture
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</span>
|
||||
<span className="text-slate-400 font-medium">Status:</span>
|
||||
<span className="text-emerald-400 font-medium ml-auto flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||
Available for projects
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
{/* List Container */}
|
||||
<ul className="space-y-4 text-sm">
|
||||
<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">
|
||||
German, English
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</span>
|
||||
<span className="text-slate-400 font-medium">
|
||||
Core Stack:
|
||||
</span>
|
||||
<span className="text-slate-200 ml-auto text-right font-mono text-xs">
|
||||
Angular (TS), React (Next.js)
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</span>
|
||||
<span className="text-slate-400 font-medium">
|
||||
Core Focus:
|
||||
</span>
|
||||
<span className="text-slate-200 ml-auto text-right font-mono text-xs">
|
||||
Clean Code & Architecture
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-blue-500 font-mono">▸</span>
|
||||
<span className="text-slate-400 font-medium">Status:</span>
|
||||
<span className="text-emerald-400 ml-auto text-right flex items-center gap-1.5 font-mono text-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||
Available for projects
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Footer Quote */}
|
||||
<div className="pt-4 border-t border-slate-800/80 text-xs text-slate-500 font-mono text-center">
|
||||
`Keep it simple, keep it clean.`
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ 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-6 py-4">
|
||||
<div className="max-w-5xl mx-auto flex justify-between items-center">
|
||||
<header className="fixed top-0 left-0 w-full bg-slate-900/90 backdrop-blur-md border-b border-slate-800 z-50 py-4">
|
||||
<div className="max-w-5xl mx-auto flex justify-between items-center px-4 md:px-6">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xl font-bold text-white hover:text-blue-400 transition-colors tracking-wider z-50"
|
||||
|
|
|
|||
|
|
@ -2,14 +2,10 @@ import Link from "next/link";
|
|||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative flex items-start pt-32 py-8 px-6 md:px-12 max-w-5xl mx-auto overflow-hidden">
|
||||
{/* Blue background glow */}
|
||||
<div className="absolute top-2/4 left-1/6 -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute bottom-2/4 right-2/4 translate-x-1/2 translate-y-1/2 w-96 h-96 bg-blue-600/5 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<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">
|
||||
{/* Left column */}
|
||||
<div className="md:col-span-7 space-y-6 text-left">
|
||||
<div className="md:col-span-7 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>
|
||||
|
|
@ -18,8 +14,9 @@ export default function Hero() {
|
|||
André Kempf<span className="text-blue-500">.</span>
|
||||
</h1>
|
||||
|
||||
<h2 className="text-3xl sm:text-5xl font-semibold text-slate-400">
|
||||
Full-Stack Developer
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-slate-400 tracking-tight">
|
||||
Full-Stack{" "}
|
||||
<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">
|
||||
|
|
@ -35,10 +32,10 @@ export default function Hero() {
|
|||
</p>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link
|
||||
href="#contactme"
|
||||
className="px-6 py-3 border border-blue-700/30 hover:bg-blue-500 active:bg-blue-700 text-white font-semibold rounded-lg shadow-lg shadow-blue-500/40 transition-all hover:-translate-y-0.5 duration-200"
|
||||
className="px-6 py-3 bg-slate-900 text-blue-500 font-semibold rounded-lg border border-blue-500/40 hover:border-blue-400 hover:bg-blue-600 hover:text-white shadow-md shadow-blue-950/50 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20"
|
||||
>
|
||||
Contact me
|
||||
</Link>
|
||||
|
|
@ -53,12 +50,12 @@ export default function Hero() {
|
|||
|
||||
{/* Right column */}
|
||||
<div className="md:col-span-5 flex justify-center">
|
||||
<div className="relative group w-64 md:w-74 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">
|
||||
<img
|
||||
src="/me.png"
|
||||
alt="André Kempf"
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-102"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@ export default function Skills() {
|
|||
return (
|
||||
<section
|
||||
id="myskills"
|
||||
className="relative py-6 px-6 md:px-12 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-20"
|
||||
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-15"
|
||||
>
|
||||
{/* Titel */}
|
||||
<div className="flex items-center justify-end gap-4 mb-6">
|
||||
<div className="h-px bg-slate-800 grow max-w-md" />
|
||||
<div className="mb-6 space-y-1 text-right flex flex-col items-end">
|
||||
<p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
|
||||
// 02. Technical Stack
|
||||
</p>
|
||||
<h2 className="text-3xl font-bold text-white tracking-tight">
|
||||
My Skills<span className="text-blue-500">.</span>
|
||||
</h2>
|
||||
|
|
|
|||
Loading…
Reference in a new issue