denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve hydration mismatch and NaN rendering errors
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m53s
Details

Browse Source 
Added suppressHydrationWarning to html tag and implemented safe date/number handling in project and reading components.
This commit is contained in:
denshooter
2026-02-15 22:48:47 +01:00
parent cc8fff14d2
commit 5576e41ce0
4 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/_ui/ProjectsPageClient.tsx
View File

@@ -222,7 +222,12 @@ export default function ProjectsPageClient({
</h3> </h3>
<div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100"> <div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
<Calendar size={12} /> <Calendar size={12} />
<span>{new Date(project.date).getFullYear()}</span> <span>
{(() => {
const d = new Date(project.date);
return isNaN(d.getTime()) ? project.date : d.getFullYear();
})()}
</span>
</div> </div>
</div> </div>

4
app/components/CurrentlyReading.tsx
View File

@@ -137,12 +137,12 @@ const CurrentlyReading = () => {
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between text-xs text-stone-600 dark:text-stone-400"> <div className="flex items-center justify-between text-xs text-stone-600 dark:text-stone-400">
<span>{t("progress")}</span> <span>{t("progress")}</span>
<span className="font-semibold">{book.progress}%</span> <span className="font-semibold">{isNaN(book.progress) ? 0 : book.progress}%</span>
</div> </div>
<div className="relative h-2 bg-white/50 dark:bg-stone-700 rounded-full overflow-hidden border border-white/70 dark:border-stone-600"> <div className="relative h-2 bg-white/50 dark:bg-stone-700 rounded-full overflow-hidden border border-white/70 dark:border-stone-600">
<motion.div <motion.div
initial={{ width: 0 }} initial={{ width: 0 }}
animate={{ width: `${book.progress}%` }} animate={{ width: `${isNaN(book.progress) ? 0 : book.progress}%` }}
transition={{ duration: 1, delay: 0.3 + index * 0.1, ease: "easeOut" }} transition={{ duration: 1, delay: 0.3 + index * 0.1, ease: "easeOut" }}
className="absolute left-0 top-0 h-full bg-gradient-to-r from-liquid-lavender via-liquid-pink to-liquid-rose rounded-full shadow-sm" className="absolute left-0 top-0 h-full bg-gradient-to-r from-liquid-lavender via-liquid-pink to-liquid-rose rounded-full shadow-sm"
/> />

7
app/components/Projects.tsx
View File

@@ -189,7 +189,12 @@ const Projects = () => {
</h3> </h3>
<div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100"> <div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
<Calendar size={12} /> <Calendar size={12} />
<span>{new Date(project.date).getFullYear()}</span> <span>
{(() => {
const d = new Date(project.date);
return isNaN(d.getTime()) ? project.date : d.getFullYear();
})()}
</span>
</div> </div>
</div> </div>

2
app/layout.tsx
View File

@@ -29,7 +29,7 @@ export default async function RootLayout({
const cookieStore = await cookies(); const cookieStore = await cookies();
const locale = cookieStore.get("NEXT_LOCALE")?.value || "en"; const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
return ( return (
<html lang={locale}> <html lang={locale} suppressHydrationWarning>
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
</head> </head>