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-30 00:27:59 +01:00
parent 5587317e9f
commit f536765b6c
10 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/globals.css
View File

@@ -166,15 +166,15 @@
/* Buttons */ /* Buttons */
.btn { .btn {
@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; @apply inline-flex items-center justify-center px-6 py-3 border border-slate-200 bg-white text-slate-600 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 active:translate-y-0 active:shadow-sm;
} }
.btn-primary { .btn-primary {
@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; @apply border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
} }
.btn-secondary { .btn-secondary {
@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; @apply border-slate-200 text-slate-500 hover:border-slate-400 hover:text-slate-900;
} }
/* Hide scrollbars */ /* Hide scrollbars */
@@ -223,20 +223,21 @@
position: fixed; position: fixed;
bottom: 2rem; bottom: 2rem;
right: 2rem; right: 2rem;
width: 2.5rem; width: 3rem;
height: 2.5rem; height: 3rem;
background: white; background: white;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 0.375rem; border-radius: 9999px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #64748b; color: #64748b;
transition: all 0.15s ease; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0; opacity: 0;
transform: translateY(8px); transform: translateY(8px);
z-index: 50;
} }
.floating-back-to-top.visible { .floating-back-to-top.visible {
@@ -247,8 +248,9 @@
.floating-back-to-top:hover { .floating-back-to-top:hover {
background: #f8fafc; background: #f8fafc;
color: #1e293b; color: #1e293b;
transform: translateY(-1px); border-color: #cbd5e1;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
} }
/* Reduced motion support */ /* Reduced motion support */

2
app/page.tsx
View File

@@ -73,7 +73,7 @@ export default function LandingPage() {
<div className="pt-8"> <div className="pt-8">
<a <a
href="#contact" href="#contact"
className="inline-flex items-center gap-4 px-8 py-4 bg-slate-900 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-slate-800 transition-all duration-300 group" className="inline-flex items-center gap-4 px-8 py-4 border border-slate-200 bg-white text-slate-900 rounded-full font-bold text-sm uppercase tracking-widest hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 group"
> >
Projekt anfragen Projekt anfragen
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />

6
src/components/BlogPostClient.tsx
View File

@@ -89,7 +89,7 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
<div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between"> <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
<button <button
onClick={handleBack} onClick={handleBack}
className="flex items-center gap-2 text-slate-700 hover:text-slate-900 transition-colors duration-200 group" className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 group"
aria-label="Back to home" aria-label="Back to home"
> >
<svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -104,7 +104,7 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
</span> </span>
<button <button
onClick={handleShare} onClick={handleShare}
className="share-button-top flex items-center gap-1.5 px-3 py-1.5 bg-slate-50 hover:bg-slate-900 hover:text-white border border-slate-100 hover:border-slate-900 transition-all duration-200" className="share-button-top flex items-center gap-1.5 px-3 py-1.5 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
aria-label="Share this post" aria-label="Share this post"
> >
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -118,7 +118,7 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
<div className="mt-16 pt-8 border-t border-slate-50 text-center"> <div className="mt-16 pt-8 border-t border-slate-50 text-center">
<button <button
onClick={handleBack} onClick={handleBack}
className="inline-flex items-center gap-2 px-8 py-4 bg-white border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white transition-all duration-300 font-bold uppercase tracking-widest text-xs group" className="btn btn-primary group"
> >
<svg className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />

4
src/components/FileExample.tsx
View File

@@ -138,7 +138,7 @@ export const FileExample: React.FC<FileExampleProps> = ({
<div className="flex items-center gap-1 flex-shrink-0"> <div className="flex items-center gap-1 flex-shrink-0">
<button <button
type="button" type="button"
className={`copy-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors ${isCopied ? 'copied' : ''}`} className={`copy-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${isCopied ? 'copied' : ''}`}
onClick={handleCopy} onClick={handleCopy}
title="Copy to clipboard" title="Copy to clipboard"
aria-label={`Copy ${filename} to clipboard`} aria-label={`Copy ${filename} to clipboard`}
@@ -156,7 +156,7 @@ export const FileExample: React.FC<FileExampleProps> = ({
<button <button
type="button" type="button"
className="download-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors" className="download-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
onClick={handleDownload} onClick={handleDownload}
title="Download file" title="Download file"
aria-label={`Download ${filename}`} aria-label={`Download ${filename}`}

2
src/components/FileExamplesList.tsx
View File

@@ -49,7 +49,7 @@ export const FileExamplesList: React.FC<FileExamplesListProps> = ({ groups }) =>
<button <button
type="button" type="button"
className="toggle-all-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white text-slate-500 hover:text-slate-900 transition-colors" className="toggle-all-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
title="Toggle all" title="Toggle all"
onClick={() => toggleAllInGroup(group.groupId, group.files)} onClick={() => toggleAllInGroup(group.groupId, group.files)}
> >

2
src/components/Header.tsx
View File

@@ -38,7 +38,7 @@ export const Header: React.FC = () => {
</Link> </Link>
<Link <Link
href="/contact" href="/contact"
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" 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 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
> >
Anfrage Anfrage
</Link> </Link>

5
src/components/PageHeader.tsx
View File

@@ -28,7 +28,10 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
)} )}
{backLink && ( {backLink && (
<Link href={backLink.href} className="inline-flex items-center gap-3 text-slate-400 hover:text-slate-900 mb-12 transition-all duration-300 font-bold text-[10px] uppercase tracking-[0.3em] group"> <Link
href={backLink.href}
className="inline-flex items-center gap-3 px-4 py-2 border border-slate-200 rounded-full text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 mb-12 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 font-bold text-[10px] uppercase tracking-[0.3em] group"
>
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" /> {backLink.label} <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" /> {backLink.label}
</Link> </Link>
)} )}

2
src/components/SearchBar.tsx
View File

@@ -65,7 +65,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
{value && ( {value && (
<button <button
onClick={clearSearch} onClick={clearSearch}
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" className="absolute right-4 top-1/2 -translate-y-1/2 px-3 py-1 border border-slate-200 rounded-full text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-[calc(50%+2px)] hover:shadow-lg hover:shadow-slate-100"
aria-label="Clear search" aria-label="Clear search"
type="button" type="button"
> >

2
src/components/Tag.tsx
View File

@@ -11,7 +11,7 @@ export const Tag: React.FC<TagProps> = ({ tag, className = '' }) => {
return ( return (
<Link <Link
href={`/tags/${tag}`} href={`/tags/${tag}`}
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}`} 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 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${className}`}
> >
{tag} {tag}
</Link> </Link>

6
src/styles/global.css
View File

@@ -178,15 +178,15 @@
/* Buttons */ /* Buttons */
.btn { .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-flex items-center justify-center px-6 py-3 border border-slate-200 bg-white text-slate-600 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 active:translate-y-0 active:shadow-sm;
} }
.btn-primary { .btn-primary {
@apply bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded transition-colors; @apply border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
} }
.btn-secondary { .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 border-slate-200 text-slate-500 hover:border-slate-400 hover:text-slate-900;
} }
/* Hide scrollbars */ /* Hide scrollbars */