mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 21:50:28 +01:00
parent eafb740b1d
commit ae303d8a5a
12 changed files with 88 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/globals.css
View File

@@ -9,9 +9,8 @@
}
body {
@apply bg-white text-slate-800 font-serif antialiased;
font-family: 'Georgia', 'Times New Roman', serif;
line-height: 1.75;
@apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
line-height: 1.8;
}
/* Typography */
@@ -20,27 +19,19 @@
}
h1 {
@apply text-3xl md:text-4xl leading-tight mb-6;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-4xl md:text-5xl leading-[1.1] mb-8 tracking-tight;
}
h2 {
@apply text-2xl md:text-3xl leading-tight mb-4 mt-8;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-3xl md:text-4xl leading-[1.2] mb-6 mt-12 tracking-tight;
}
h3 {
@apply text-xl md:text-2xl leading-tight mb-3 mt-6;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-2xl md:text-3xl leading-[1.3] mb-4 mt-8 tracking-tight;
}
h4 {
@apply text-lg md:text-xl leading-tight mb-2 mt-4;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-xl md:text-2xl leading-[1.4] mb-3 mt-6 tracking-tight;
}
p {
@@ -65,19 +56,18 @@
}
code:not([class*='language-']) {
@apply bg-slate-100 px-1 py-0.5 rounded font-mono text-sm text-slate-700;
@apply bg-slate-50 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] text-slate-800 border border-slate-100;
}
blockquote {
@apply border-l-2 border-slate-300 pl-4 italic text-slate-600 my-4;
@apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif;
}
/* Focus states */
a:focus,
button:focus,
input:focus {
outline: 2px solid #0f172a;
outline-offset: 2px;
@apply outline-none ring-2 ring-slate-900 ring-offset-2 rounded-sm;
}
}
@@ -89,26 +79,24 @@
}
.container {
@apply max-w-4xl mx-auto px-6 py-10;
@apply max-w-6xl mx-auto px-6 py-12;
}
.wide-container {
@apply max-w-5xl mx-auto px-6 py-12;
@apply max-w-7xl mx-auto px-6 py-16;
}
.narrow-container {
@apply max-w-3xl mx-auto px-6 py-8;
@apply max-w-4xl mx-auto px-6 py-10;
}
.highlighter-tag {
@apply inline-block text-xs font-bold px-2 py-0.5 rounded cursor-pointer transition-all duration-200;
@apply inline-block text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-full cursor-pointer transition-all duration-300;
position: relative;
transform: rotate(-1deg);
box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.search-box {
@apply w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-slate-900 transition-colors;
@apply w-full px-6 py-4 border border-slate-200 rounded-2xl focus:outline-none focus:border-slate-400 transition-all duration-300;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
}
@@ -136,7 +124,7 @@
/* Article page */
.article-header {
@apply mb-8;
@apply mb-12;
}
.article-title {
@@ -178,15 +166,15 @@
/* Buttons */
.btn {
@apply inline-block px-4 py-2 bg-slate-900 text-white font-sans font-medium hover:bg-slate-700 transition-colors rounded;
@apply inline-block px-6 py-3 bg-slate-900 text-white font-sans font-bold text-sm uppercase tracking-widest hover:bg-slate-800 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 rounded-full shadow-sm hover:shadow-md;
}
.btn-primary {
@apply bg-slate-900 hover:bg-slate-800 text-white px-3 py-1.5 rounded transition-colors;
@apply bg-slate-900 hover:bg-slate-800 text-white px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
}
.btn-secondary {
@apply bg-white text-slate-700 hover:bg-slate-100 border border-slate-300 px-3 py-1.5 rounded transition-colors;
@apply bg-white text-slate-900 hover:bg-slate-50 border border-slate-200 px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
}
/* Hide scrollbars */
@@ -233,8 +221,8 @@
/* Floating back to top button */
.floating-back-to-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
bottom: 2rem;
right: 2rem;
width: 2.5rem;
height: 2.5rem;
background: white;
@@ -315,25 +303,22 @@
/* Tag Styles */
.highlighter-tag {
transform: rotate(-1deg) translateY(0);
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
animation: tagPopIn 0.3s ease-out both;
animation: tagPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: calc(var(--tag-index, 0) * 0.05s);
}
.highlighter-tag:hover {
transform: rotate(-2deg) translateY(-2px) scale(1.05);
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
@apply -translate-y-0.5 scale-105 shadow-lg shadow-slate-200;
}
@keyframes tagPopIn {
from {
opacity: 0;
transform: rotate(-1deg) scale(0.8) translateY(5px);
transform: scale(0.8) translateY(10px);
}
to {
opacity: 1;
transform: rotate(-1deg) scale(1) translateY(0);
transform: scale(1) translateY(0);
}
}
@@ -374,10 +359,7 @@
}
.highlighter-tag:focus {
outline: 2px solid #0f172a;
outline-offset: 2px;
transform: rotate(-1deg) translateY(-2px) scale(1.05);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1), 3px 3px 0 rgba(0, 0, 0, 0.15);
@apply ring-2 ring-slate-900 ring-offset-2 -translate-y-0.5 scale-105;
}
/* Marker Title Styles */
@@ -500,10 +482,10 @@
/* Generic Embed Styles */
.generic-embed {
--max-width: 100%;
--border-radius: 8px;
--border-radius: 24px;
--bg-color: #ffffff;
--border-color: #e2e8f0;
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow: none;
margin: 1.5rem 0;
width: 100%;

10
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Inter, Newsreader } from 'next/font/google';
import './globals.css';
import { Footer } from '../src/components/Footer';
import { Header } from '../src/components/Header';
@@ -8,6 +8,12 @@ import { InteractiveElements } from '../src/components/InteractiveElements';
import { Analytics } from '../src/components/Analytics';
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
const newsreader = Newsreader({
subsets: ['latin'],
variable: '--font-newsreader',
style: 'italic',
display: 'swap',
});
export const metadata: Metadata = {
title: {
@@ -24,7 +30,7 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en" className={`${inter.variable}`}>
<html lang="en" className={`${inter.variable} ${newsreader.variable}`}>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

8
src/components/ArticleBlockquote.tsx
View File

@@ -20,7 +20,7 @@ interface BlockquoteProps {
}
export const Blockquote: React.FC<BlockquoteProps> = ({ children, className = '' }) => (
<blockquote className={`border-l-4 border-slate-400 pl-4 italic text-slate-600 my-6 ${className}`}>
<blockquote className={`border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif ${className}`}>
{children}
</blockquote>
);
@@ -88,12 +88,12 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
<style dangerouslySetInnerHTML={{ __html: syntaxHighlightingStyles }} />
<div className="relative my-6">
{language !== 'text' && (
<div className="absolute top-2 right-2 text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded font-sans z-10 border border-slate-200">
<div className="absolute top-3 right-3 text-[10px] font-bold uppercase tracking-widest bg-white text-slate-500 px-2 py-1 rounded-md z-10 border border-slate-100 shadow-sm">
{language}
</div>
)}
<pre
className={`m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded ${className} ${showLineNumbers ? 'pl-12' : ''}`}
className={`m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 bg-white rounded-2xl ${className} ${showLineNumbers ? 'pl-12' : ''}`}
style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
>
{showLineNumbers ? (
@@ -117,7 +117,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
};
export const InlineCode: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => (
<code className={`bg-slate-100 text-pink-600 px-1.5 py-0.5 rounded font-mono text-sm border border-pink-200 ${className}`}>
<code className={`bg-white text-slate-800 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] border border-slate-200 ${className}`}>
{children}
</code>
);

12
src/components/CTA.tsx
View File

@@ -5,16 +5,16 @@ import { Reveal } from './Reveal';
export const CTA: React.FC = () => {
return (
<section className="container relative py-32 md:py-48">
<section className="container relative py-20 md:py-32">
<Reveal width="100%">
<div className="relative p-12 md:p-24 border-2 border-slate-900 bg-white">
<div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
<div className="relative p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white">
<div className="absolute top-0 left-12 w-px h-24 bg-slate-200 -translate-y-12"></div>
<div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">?</div>
<div className="space-y-16 relative z-10">
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.8] text-slate-900">
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.9] text-slate-900">
Interesse? <br />
<span className="text-slate-200">Fragen kostet nichts.</span>
<span className="text-slate-100">Fragen kostet nichts.</span>
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
@@ -25,7 +25,7 @@ export const CTA: React.FC = () => {
<div className="flex flex-col items-start gap-8">
<Link
href="/contact"
className="group inline-flex items-center gap-4 bg-white border border-slate-200 rounded-full px-10 py-5 text-2xl font-bold text-slate-900 hover:border-slate-900 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
className="group inline-flex items-center gap-4 bg-white border border-slate-200 rounded-full px-10 py-5 text-2xl font-bold text-slate-900 hover:border-slate-400 hover:-translate-y-1 transition-all duration-300"
>
Projekt anfragen
<ArrowRight className="w-6 h-6 group-hover:translate-x-2 transition-transform" />

8
src/components/FileExample.tsx
View File

@@ -102,12 +102,12 @@ export const FileExample: React.FC<FileExampleProps> = ({
return (
<div
className="file-example w-full bg-white border border-slate-200/80 rounded-lg overflow-hidden"
className="file-example w-full bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300"
data-file-example
data-expanded={isExpanded}
>
<div
className="px-3 py-2 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50/60 transition-colors"
className="px-4 py-3 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50 transition-colors"
onClick={toggleExpand}
role="button"
tabIndex={0}
@@ -175,13 +175,13 @@ export const FileExample: React.FC<FileExampleProps> = ({
<div
ref={contentRef}
className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-slate-50 ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-white ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
id={contentId}
role="region"
aria-labelledby={headerId}
>
<pre
className="m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded"
className="m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border-t border-slate-200"
style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
>
<code className={`language-${prismLanguage}`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>

4
src/components/Footer.tsx
View File

@@ -4,12 +4,12 @@ export const Footer: React.FC = () => {
const currentYear = new Date().getFullYear();
return (
<footer className="py-24 mt-48 border-t border-slate-100">
<footer className="py-16 mt-24 border-t border-slate-100">
<div className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
<div className="space-y-8">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-slate-900 flex items-center justify-center">
<div className="w-8 h-8 bg-slate-900 rounded-lg flex items-center justify-center">
<span className="text-white text-sm font-bold">M</span>
</div>
<span className="text-xl font-bold text-slate-900 tracking-tighter">Marc Mintel</span>

8
src/components/Header.tsx
View File

@@ -10,10 +10,10 @@ export const Header: React.FC = () => {
const isActive = (path: string) => pathname === path;
return (
<header className="bg-white/80 backdrop-blur-md sticky top-0 z-50">
<div className="narrow-container py-8 flex items-center justify-between">
<header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
<div className="narrow-container py-4 flex items-center justify-between">
<Link href="/" className="flex items-center gap-3 group">
<div className="w-10 h-10 bg-slate-900 flex items-center justify-center group-hover:bg-slate-700 transition-colors">
<div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-300 shadow-sm">
<span className="text-white text-lg font-bold">M</span>
</div>
<span className="text-slate-900 font-bold tracking-tighter text-2xl">Marc Mintel</span>
@@ -38,7 +38,7 @@ export const Header: React.FC = () => {
</Link>
<Link
href="/contact"
className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border-2 border-slate-900 px-5 py-2.5 hover:bg-slate-900 hover:text-white transition-all duration-300"
className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 transition-all duration-300"
>
Anfrage
</Link>

28
src/components/Hero.tsx
View File

@@ -3,7 +3,7 @@ import * as React from 'react';
export const Hero: React.FC = () => {
return (
<section className="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white py-20 md:py-28 overflow-hidden">
<section className="relative bg-slate-900 text-white py-20 md:py-24 overflow-hidden">
{/* Background pattern */}
<div className="absolute inset-0 opacity-10">
<div className="absolute inset-0" style={{
@@ -24,22 +24,22 @@ export const Hero: React.FC = () => {
</p>
{/* Quick stats or focus areas */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10 animate-fade-in">
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<Code2 className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Code</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 animate-fade-in">
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Code2 className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Code</div>
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<Wrench className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Tools</div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Wrench className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Tools</div>
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<Terminal className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Automation</div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Terminal className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Automation</div>
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
<BookOpen className="mx-auto mb-2 text-slate-400" size={24} />
<div className="text-sm font-mono text-slate-300">Learning</div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Learning</div>
</div>
</div>

12
src/components/MediumCard.tsx
View File

@@ -24,22 +24,22 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
return (
<Link href={`/blog/${slug}`} className="group block">
<article className="space-y-3 py-8 border-b border-slate-50 group-hover:border-slate-900 transition-colors">
<time className="text-[10px] font-mono text-slate-300 uppercase tracking-widest group-hover:text-slate-900 transition-colors">
<article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
<time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
{formattedDate}
</time>
<h3 className="text-3xl font-bold text-slate-900 tracking-tighter group-hover:text-slate-900 transition-colors">
<h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
{title}
</h3>
<p className="text-xl text-slate-500 font-serif italic leading-tight line-clamp-2">
<p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
{description}
</p>
<div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-sm group/link">
<div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
Lesen
<div className="w-8 h-px bg-slate-900 group-hover:w-12 transition-all"></div>
<div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
</div>
</article>
</Link>

8
src/components/SearchBar.tsx
View File

@@ -50,10 +50,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
type="text"
placeholder="Suchen..."
value={value}
className={`w-full px-0 py-2 font-bold text-slate-900 bg-transparent border-b-2 transition-all focus:outline-none placeholder:text-slate-100 ${
size === 'large' ? 'text-2xl md:text-4xl py-4 border-b-4' : 'text-lg'
className={`w-full px-8 py-4 font-bold text-slate-900 bg-white rounded-2xl border transition-all focus:outline-none placeholder:text-slate-300 ${
size === 'large' ? 'text-2xl md:text-4xl py-6 rounded-3xl' : 'text-lg'
} ${
isFocused ? 'border-slate-900' : 'border-slate-100'
isFocused ? 'border-slate-400' : 'border-slate-200'
}`}
onChange={handleInput}
onKeyDown={handleKeyDown}
@@ -65,7 +65,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
{value && (
<button
onClick={clearSearch}
className="absolute right-0 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
className="absolute right-6 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
aria-label="Clear search"
type="button"
>

2
src/components/Tag.tsx
View File

@@ -11,7 +11,7 @@ export const Tag: React.FC<TagProps> = ({ tag, className = '' }) => {
return (
<Link
href={`/tags/${tag}`}
className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 border border-slate-100 px-3 py-1.5 hover:border-slate-900 hover:text-slate-900 transition-all duration-300 ${className}`}
className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 transition-all duration-300 ${className}`}
>
{tag}
</Link>

9
tailwind.config.js
View File

@@ -8,6 +8,12 @@ export default {
],
theme: {
extend: {
borderRadius: {
'xl': '1rem',
'2xl': '1.5rem',
'3xl': '2rem',
'full': '9999px',
},
colors: {
slate: {
850: '#1e293b',
@@ -16,7 +22,8 @@ export default {
}
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
sans: ['var(--font-inter)', 'Inter', 'system-ui', 'sans-serif'],
serif: ['var(--font-newsreader)', 'Georgia', 'serif'],
mono: ['JetBrains Mono', 'monospace'],
},
typography: (theme) => ({