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

blog design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 21:13:54 +01:00
parent ec0a055c13
commit eafb740b1d
14 changed files with 291 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/MediumCard.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import Link from 'next/link';
interface Post {
@@ -14,7 +14,7 @@ interface MediumCardProps {
}
export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
const { title, description, date, slug, tags = [] } = post;
const { title, description, date, slug } = post;
const formattedDate = new Date(date).toLocaleDateString('en-US', {
month: 'short',
@@ -22,43 +22,24 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
year: 'numeric',
});
const wordCount = description.split(/\s+/).length;
const readingTime = Math.max(1, Math.ceil(wordCount / 200));
const markerSeed = Math.abs(title.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0)) % 7;
return (
<Link href={`/blog/${slug}`} className="post-link block group">
<article className="post-card bg-white border border-slate-200/80 rounded-lg px-4 py-3 transition-all duration-200 group-hover:border-slate-300 group-hover:shadow-sm">
<div className="flex items-start justify-between gap-4">
<h3 className="m-0 text-sm font-semibold leading-snug tracking-tight">
<span
className="relative inline-block text-slate-900 marker-title"
style={{ '--marker-seed': markerSeed } as React.CSSProperties}
>
{title}
</span>
</h3>
<time className="text-[11px] text-slate-500 tabular-nums whitespace-nowrap leading-none pt-0.5">
{formattedDate}
</time>
</div>
<p className="post-excerpt mt-2 mb-0 text-[13px] leading-relaxed text-slate-600 line-clamp-3">
<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">
{formattedDate}
</time>
<h3 className="text-3xl font-bold text-slate-900 tracking-tighter group-hover:text-slate-900 transition-colors">
{title}
</h3>
<p className="text-xl text-slate-500 font-serif italic leading-tight line-clamp-2">
{description}
</p>
<div className="mt-3 flex items-center justify-between gap-3">
<span className="text-[11px] text-slate-500 tabular-nums leading-none">{readingTime} min</span>
{tags.length > 0 && (
<div className="flex flex-wrap items-center justify-end gap-1">
{tags.slice(0, 3).map((tag: string) => (
<span key={tag} className="inline-flex items-center rounded-full bg-slate-100/80 border border-slate-200/60 px-2 py-0.5 text-[11px] text-slate-700 leading-none">
{tag}
</span>
))}
</div>
)}
<div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-sm group/link">
Lesen
<div className="w-8 h-px bg-slate-900 group-hover:w-12 transition-all"></div>
</div>
</article>
</Link>