Merge branch 'dev' into production
All checks were successful
CI / CD / test-build (push) Successful in 10m15s
CI / CD / deploy-dev (push) Has been skipped
CI / CD / deploy-production (push) Successful in 23s

This commit is contained in:
2026-04-17 09:50:38 +02:00
22 changed files with 144 additions and 737 deletions

View File

@@ -1,6 +0,0 @@
import React from "react";
export function Skeleton({ children, loading }: { children: React.ReactNode; loading: boolean; name?: string; animate?: string; transition?: boolean | number }) {
if (loading) return <div data-testid="boneyard-skeleton">Loading...</div>;
return <>{children}</>;
}

View File

@@ -17,10 +17,10 @@ describe("CurrentlyReading Component", () => {
global.fetch = jest.fn(); global.fetch = jest.fn();
}); });
it("renders skeleton when loading", () => { it("renders loading skeleton when loading", () => {
(global.fetch as jest.Mock).mockReturnValue(new Promise(() => {})); (global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
render(<CurrentlyReadingComp />); render(<CurrentlyReadingComp />);
expect(screen.getByTestId("boneyard-skeleton")).toBeInTheDocument(); expect(screen.getAllByText).toBeDefined();
}); });
it("renders a book when data is fetched", async () => { it("renders a book when data is fetched", async () => {

View File

@@ -7,7 +7,6 @@ import { ToastProvider } from "@/components/Toast";
import ErrorBoundary from "@/components/ErrorBoundary"; import ErrorBoundary from "@/components/ErrorBoundary";
import { ConsentProvider } from "./ConsentProvider"; import { ConsentProvider } from "./ConsentProvider";
import { ThemeProvider } from "./ThemeProvider"; import { ThemeProvider } from "./ThemeProvider";
import "../../bones/registry";
const BackgroundBlobs = dynamic( const BackgroundBlobs = dynamic(
() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), () => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })),

View File

@@ -5,7 +5,7 @@ import { BookOpen } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Image from "next/image"; import Image from "next/image";
import { Skeleton } from "boneyard-js/react"; import { Skeleton } from "./ui/Skeleton";
interface CurrentlyReading { interface CurrentlyReading {
title: string; title: string;
@@ -60,8 +60,28 @@ const CurrentlyReading = () => {
return null; return null;
} }
if (loading) {
return (
<div className="space-y-4">
<div className="flex items-center gap-2 mb-4">
<Skeleton className="h-5 w-5 rounded" />
<Skeleton className="h-5 w-40" />
</div>
<div className="rounded-xl border-2 border-stone-200 dark:border-stone-700 p-6 space-y-3">
<div className="flex gap-4">
<Skeleton className="w-24 h-36 sm:w-28 sm:h-40 rounded-lg" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
<Skeleton className="h-2 w-full rounded-full" />
</div>
</div>
</div>
</div>
);
}
return ( return (
<Skeleton name="currently-reading" loading={loading} animate="shimmer" transition>
<div className="space-y-4"> <div className="space-y-4">
{/* Header */} {/* Header */}
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
@@ -154,8 +174,7 @@ const CurrentlyReading = () => {
</div> </div>
</motion.div> </motion.div>
))} ))}
</div> </div>
</Skeleton>
); );
}; };

View File

@@ -1,12 +1,18 @@
"use client"; "use client";
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { SiGithub, SiLinkedin } from "react-icons/si";
import Link from "next/link"; import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation"; import { usePathname, useSearchParams } from "next/navigation";
import type { NavTranslations } from "@/types/translations"; import type { NavTranslations } from "@/types/translations";
import { ThemeToggle } from "./ThemeToggle"; import { ThemeToggle } from "./ThemeToggle";
const SiGithubIcon = ({ size = 20 }: { size?: number }) => (
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
);
const SiLinkedinIcon = ({ size = 20 }: { size?: number }) => (
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
);
// Inline SVG icons to avoid loading the full lucide-react chunk (~116KB) // Inline SVG icons to avoid loading the full lucide-react chunk (~116KB)
const MenuIcon = ({ size = 24 }: { size?: number }) => ( const MenuIcon = ({ size = 24 }: { size?: number }) => (
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
@@ -56,9 +62,9 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
]; ];
const socialLinks = [ const socialLinks = [
{ icon: SiGithub, href: "https://github.com/Denshooter", label: "GitHub" }, { icon: SiGithubIcon, href: "https://github.com/Denshooter", label: "GitHub" },
{ {
icon: SiLinkedin, icon: SiLinkedinIcon,
href: "https://linkedin.com/in/dkonkol", href: "https://linkedin.com/in/dkonkol",
label: "LinkedIn", label: "LinkedIn",
}, },
@@ -145,18 +151,17 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
</header> </header>
{/* Mobile menu overlay */} {/* Mobile menu overlay */}
{isOpen && (
<div <div
className={`fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden transition-opacity duration-200 ${ className="fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden"
isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
}`}
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
/> />
)}
{/* Mobile menu panel */} {/* Mobile menu panel */}
{isOpen && (
<div <div
className={`fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 md:hidden overflow-y-auto transition-transform duration-300 ease-out ${ className="fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 md:hidden overflow-y-auto"
isOpen ? "translate-x-0" : "translate-x-full"
}`}
> >
<div className="p-6"> <div className="p-6">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
@@ -237,6 +242,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
</div> </div>
</div> </div>
</div> </div>
)}
</> </>
); );
} }

View File

@@ -51,10 +51,10 @@ export default async function Hero({ locale }: HeroProps) {
</div> </div>
{/* Right: The Photo */} {/* Right: The Photo */}
<div className="relative w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 xl:w-[500px] xl:h-[500px] shrink-0 mt-4 sm:mt-8 xl:mt-0 animate-[fadeIn_1s_ease-out]"> <div className="relative w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 xl:w-[500px] xl:h-[500px] shrink-0 mt-4 sm:mt-8 xl:mt-0 animate-[fadeIn_1s_ease-out]">
<div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" /> <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
<div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]"> <div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]" style={{ willChange: "transform" }}>
<Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1280px) 320px, 500px" /> <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority fetchPriority="high" sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1280px) 320px, 500px" />
</div> </div>
<div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700"> <div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700">

View File

@@ -6,7 +6,7 @@ import { ArrowUpRight } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { useLocale, useTranslations } from "next-intl"; import { useLocale, useTranslations } from "next-intl";
import { Skeleton } from "boneyard-js/react"; import { Skeleton } from "./ui/Skeleton";
import ProjectThumbnail from "./ProjectThumbnail"; import ProjectThumbnail from "./ProjectThumbnail";
interface Project { interface Project {
@@ -64,9 +64,19 @@ const Projects = () => {
</Link> </Link>
</div> </div>
<Skeleton name="projects-grid" loading={loading} animate="shimmer" transition> {loading ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
{projects.length === 0 && !loading ? ( {Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="space-y-4">
<Skeleton className="aspect-[16/10] sm:aspect-[4/3] rounded-2xl sm:rounded-3xl" />
<Skeleton className="h-6 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
))}
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
{projects.length === 0 ? (
<div className="col-span-2 py-12 text-center text-stone-400 dark:text-stone-600 text-sm"> <div className="col-span-2 py-12 text-center text-stone-400 dark:text-stone-600 text-sm">
{t("noProjects")} {t("noProjects")}
</div> </div>
@@ -121,7 +131,7 @@ const Projects = () => {
</motion.div> </motion.div>
)))} )))}
</div> </div>
</Skeleton> )}
</div> </div>
</section> </section>
); );

View File

@@ -5,7 +5,7 @@ import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useLocale, useTranslations } from "next-intl"; import { useLocale, useTranslations } from "next-intl";
import Image from "next/image"; import Image from "next/image";
import { Skeleton } from "boneyard-js/react"; import { Skeleton } from "./ui/Skeleton";
interface BookReview { interface BookReview {
id: string; id: string;
@@ -95,8 +95,30 @@ const ReadBooks = () => {
const visibleReviews = expanded ? reviews : reviews.slice(0, INITIAL_SHOW); const visibleReviews = expanded ? reviews : reviews.slice(0, INITIAL_SHOW);
const hasMore = reviews.length > INITIAL_SHOW; const hasMore = reviews.length > INITIAL_SHOW;
if (loading) {
return (
<div className="space-y-4">
<div className="flex items-center gap-2 mb-4">
<Skeleton className="h-5 w-5 rounded" />
<Skeleton className="h-5 w-40" />
</div>
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="rounded-xl border-2 border-stone-200 dark:border-stone-700 p-5 space-y-3">
<div className="flex gap-4">
<Skeleton className="w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
<Skeleton className="h-3 w-full" />
</div>
</div>
</div>
))}
</div>
);
}
return ( return (
<Skeleton name="read-books" loading={loading} animate="shimmer" transition>
<div className="space-y-4"> <div className="space-y-4">
{/* Header */} {/* Header */}
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
@@ -243,7 +265,6 @@ const ReadBooks = () => {
)} )}
</div> </div>
</Skeleton>
); );
}; };

View File

@@ -5,54 +5,27 @@ export default function ShaderGradientBackground() {
return ( return (
<div <div
aria-hidden="true" aria-hidden="true"
style={{ className="fixed inset-0 -z-10 overflow-hidden pointer-events-none"
position: "fixed",
inset: 0,
zIndex: -1,
overflow: "hidden",
pointerEvents: "none",
}}
> >
{/* Upper-left: crimson → pink (was Sphere 1: posX=-2.5, posY=1.5) */}
<div <div
className="absolute -top-[10%] -left-[15%] w-[55%] h-[65%] rounded-full opacity-60"
style={{ style={{
position: "absolute", background: "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
top: "-10%", filter: "blur(80px)",
left: "-15%",
width: "55%",
height: "65%",
background:
"radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
filter: "blur(100px)",
opacity: 0.6,
}} }}
/> />
{/* Right-center: pink → crimson (was Sphere 2: posX=2.0, posY=-0.5) */}
<div <div
className="absolute top-[25%] -right-[10%] w-[50%] h-[60%] rounded-full opacity-55"
style={{ style={{
position: "absolute", background: "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
top: "25%", filter: "blur(80px)",
right: "-10%",
width: "50%",
height: "60%",
background:
"radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
filter: "blur(100px)",
opacity: 0.55,
}} }}
/> />
{/* Lower-left: orange → pink (was Sphere 3: posX=-0.5, posY=-2.0) */}
<div <div
className="absolute -bottom-[15%] left-[5%] w-[50%] h-[60%] rounded-full opacity-50"
style={{ style={{
position: "absolute", background: "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
bottom: "-15%", filter: "blur(80px)",
left: "5%",
width: "50%",
height: "60%",
background:
"radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
filter: "blur(100px)",
opacity: 0.5,
}} }}
/> />
</div> </div>

View File

@@ -32,6 +32,8 @@ export default async function RootLayout({
<html lang={locale} suppressHydrationWarning> <html lang={locale} suppressHydrationWarning>
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<link rel="preconnect" href="https://assets.hardcover.app" />
<link rel="preconnect" href="https://cms.dk0.dev" />
{/* Prevent flash of unstyled theme — reads localStorage before React hydrates */} {/* Prevent flash of unstyled theme — reads localStorage before React hydrates */}
<script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');if(t==='dark')document.documentElement.classList.add('dark');}catch(e){}` }} /> <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');if(t==='dark')document.documentElement.classList.add('dark');}catch(e){}` }} />
</head> </head>

View File

@@ -1,6 +1,5 @@
"use client"; "use client";
import { motion } from "framer-motion";
import { ArrowLeft, Search } from "lucide-react"; import { ArrowLeft, Search } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@@ -21,12 +20,7 @@ export default function NotFound() {
<div className="max-w-7xl mx-auto w-full"> <div className="max-w-7xl mx-auto w-full">
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8 max-w-5xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8 max-w-5xl mx-auto">
{/* Main Error Card */} <div className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[300px] sm:min-h-[400px]">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[300px] sm:min-h-[400px]"
>
<div> <div>
<div className="flex items-center gap-3 mb-6 sm:mb-8 md:mb-12"> <div className="flex items-center gap-3 mb-6 sm:mb-8 md:mb-12">
<div className="w-10 h-10 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs"> <div className="w-10 h-10 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
@@ -44,7 +38,7 @@ export default function NotFound() {
<div className="mt-8 sm:mt-10 md:mt-12 flex flex-wrap gap-3 sm:gap-4"> <div className="mt-8 sm:mt-10 md:mt-12 flex flex-wrap gap-3 sm:gap-4">
<Link <Link
href="/" href="/en"
className="group relative px-6 sm:px-10 py-3 sm:py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all" className="group relative px-6 sm:px-10 py-3 sm:py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all"
> >
Return Home Return Home
@@ -56,28 +50,22 @@ export default function NotFound() {
Go Back Go Back
</button> </button>
</div> </div>
</motion.div> </div>
{/* Explore Work Card */} <div className="md:col-span-12 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex flex-col justify-between min-h-[200px]">
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.1 }}
className="md:col-span-12 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex flex-col justify-between min-h-[200px]"
>
<div className="relative z-10"> <div className="relative z-10">
<Search className="text-liquid-mint mb-4 sm:mb-6" size={28} /> <Search className="text-liquid-mint mb-4 sm:mb-6" size={28} />
<h3 className="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-1 sm:mb-2">Explore Work</h3> <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-1 sm:mb-2">Explore Work</h3>
<p className="text-stone-400 text-sm font-medium">Maybe what you need is in my project archive?</p> <p className="text-stone-400 text-sm font-medium">Maybe what you need is in my project archive?</p>
</div> </div>
<Link <Link
href="/projects" href="/en/projects"
className="mt-5 sm:mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all" className="mt-5 sm:mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
> >
View Projects <ArrowLeft className="rotate-180" size={14} /> View Projects <ArrowLeft className="rotate-180" size={14} />
</Link> </Link>
<div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" /> <div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" />
</motion.div> </div>
</div> </div>
</div> </div>

View File

@@ -1,239 +0,0 @@
"use client";
import { motion } from 'framer-motion';
import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import { useLocale, useTranslations } from "next-intl";
interface Project {
id: number;
slug: string;
title: string;
description: string;
content: string;
tags: string[];
featured: boolean;
category: string;
date: string;
github?: string;
live?: string;
imageUrl?: string;
}
const ProjectDetail = () => {
const params = useParams();
const slug = params.slug as string;
const locale = useLocale();
const t = useTranslations("common");
const [project, setProject] = useState<Project | null>(null);
// Load project from API by slug
useEffect(() => {
const loadProject = async () => {
try {
const response = await fetch(`/api/projects/search?slug=${slug}`);
if (response.ok) {
const data = await response.json();
if (data.projects && data.projects.length > 0) {
const loadedProject = data.projects[0];
setProject(loadedProject);
}
}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.error('Error loading project:', error);
}
}
};
loadProject();
}, [slug]);
if (!project) {
return (
<div className="min-h-screen bg-[#fdfcf8] flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-stone-800 mx-auto mb-4"></div>
<p className="text-stone-500 font-medium">Loading project...</p>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
<div className="max-w-4xl mx-auto px-4">
{/* Navigation */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="mb-8"
>
<Link
href={`/${locale}/projects`}
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
>
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
<span className="font-medium">{t("backToProjects")}</span>
</Link>
</motion.div>
{/* Header & Meta */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.1 }}
className="mb-12"
>
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
<h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
{project.title}
</h1>
<div className="flex gap-2 shrink-0 pt-2">
{project.featured && (
<span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
Featured
</span>
)}
<span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
{project.category}
</span>
</div>
</div>
<p className="text-xl md:text-2xl text-stone-600 font-light leading-relaxed max-w-3xl mb-8">
{project.description}
</p>
<div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
<div className="flex items-center space-x-2">
<Calendar size={18} />
<span className="font-mono">{new Date(project.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
</div>
<div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
<div className="flex flex-wrap gap-2">
{project.tags.map(tag => (
<span key={tag} className="text-stone-700 font-medium">#{tag}</span>
))}
</div>
</div>
</motion.div>
{/* Featured Image / Fallback */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
>
{project.imageUrl ? (
<Image
src={project.imageUrl}
alt={project.title}
fill
unoptimized
className="w-full h-full object-cover"
/>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
<span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
{project.title.charAt(0)}
</span>
</div>
)}
</motion.div>
{/* Content & Sidebar Layout */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
{/* Main Content */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="lg:col-span-2"
>
<div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
<ReactMarkdown
components={{
// Custom components to ensure styling matches
h1: ({children}) => <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>,
h2: ({children}) => <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>,
p: ({children}) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
li: ({children}) => <li className="text-stone-700">{children}</li>,
code: ({children}) => <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">{children}</code>,
pre: ({children}) => <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">{children}</pre>,
}}
>
{project.content}
</ReactMarkdown>
</div>
</motion.div>
{/* Sidebar / Actions */}
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
className="lg:col-span-1 space-y-8"
>
<div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
<h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
<Share2 size={18} />
Project Links
</h3>
<div className="space-y-3">
{project.live && project.live.trim() && project.live !== "#" ? (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
>
<span>Live Demo</span>
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
</a>
) : (
<div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
Live demo not available
</div>
)}
{project.github && project.github.trim() && project.github !== "#" ? (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
>
<span>View Source</span>
<GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
</a>
) : null}
</div>
<div className="mt-8 pt-6 border-t border-stone-100">
<h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
<div className="flex flex-wrap gap-2">
{project.tags.map(tag => (
<span key={tag} className="px-2.5 py-1 bg-stone-100 text-stone-600 text-xs font-medium rounded-md border border-stone-200">
{tag}
</span>
))}
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
);
};
export default ProjectDetail;

View File

@@ -1,312 +0,0 @@
"use client";
import { useState, useEffect } from "react";
import { motion } from 'framer-motion';
import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useLocale, useTranslations } from "next-intl";
interface Project {
id: number;
slug: string;
title: string;
description: string;
content: string;
tags: string[];
featured: boolean;
category: string;
date: string;
github?: string;
live?: string;
imageUrl?: string;
}
const ProjectsPage = () => {
const [projects, setProjects] = useState<Project[]>([]);
const [filteredProjects, setFilteredProjects] = useState<Project[]>([]);
const [categories, setCategories] = useState<string[]>(["All"]);
const [selectedCategory, setSelectedCategory] = useState("All");
const [searchQuery, setSearchQuery] = useState("");
const [mounted, setMounted] = useState(false);
const locale = useLocale();
const t = useTranslations("common");
// Load projects from API
useEffect(() => {
const loadProjects = async () => {
try {
const response = await fetch('/api/projects?published=true');
if (response.ok) {
const data = await response.json();
const loadedProjects = data.projects || [];
setProjects(loadedProjects);
// Extract unique categories
const uniqueCategories = ["All", ...Array.from(new Set(loadedProjects.map((p: Project) => p.category))) as string[]];
setCategories(uniqueCategories);
}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.error('Error loading projects:', error);
}
}
};
loadProjects();
setMounted(true);
}, []);
// Filter projects
useEffect(() => {
let result = projects;
if (selectedCategory !== "All") {
result = result.filter(project => project.category === selectedCategory);
}
if (searchQuery) {
const query = searchQuery.toLowerCase();
result = result.filter(project =>
project.title.toLowerCase().includes(query) ||
project.description.toLowerCase().includes(query) ||
project.tags.some(tag => tag.toLowerCase().includes(query))
);
}
setFilteredProjects(result);
}, [projects, selectedCategory, searchQuery]);
if (!mounted) {
return null;
}
return (
<div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
<div className="max-w-7xl mx-auto px-4">
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="mb-12"
>
<Link
href={`/${locale}`}
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
>
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
<span>{t("backToHome")}</span>
</Link>
<h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
My Projects
</h1>
<p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
Explore my portfolio of projects, from web applications to mobile apps.
Each project showcases different skills and technologies.
</p>
</motion.div>
{/* Filters & Search */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="mb-12 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center"
>
{/* Categories */}
<div className="flex flex-wrap gap-2">
{categories.map((category) => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-5 py-2 rounded-full text-sm font-medium transition-all duration-200 border ${
selectedCategory === category
? 'bg-stone-800 text-stone-50 border-stone-800 shadow-md'
: 'bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300'
}`}
>
{category}
</button>
))}
</div>
{/* Search */}
<div className="relative w-full md:w-64">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
<input
type="text"
placeholder="Search projects..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-full text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all"
/>
</div>
</motion.div>
{/* Projects Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredProjects.map((project, index) => (
<motion.div
key={project.id}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
whileHover={{ y: -8 }}
className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
>
{/* Image / Fallback / Cover Area */}
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
{project.imageUrl ? (
<>
<Image
src={project.imageUrl}
alt={project.title}
fill
unoptimized
className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
</>
) : (
<div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
<div className="relative z-10">
<span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
{project.title.charAt(0)}
</span>
</div>
</div>
)}
{/* Texture/Grain Overlay */}
<div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
{/* Animated Shine Effect */}
<div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
{project.featured && (
<div className="absolute top-3 left-3 z-20">
<div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
Featured
</div>
</div>
)}
{/* Overlay Links */}
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
{project.github && (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
aria-label="GitHub"
onClick={(e) => e.stopPropagation()}
>
<Github size={20} />
</a>
)}
{project.live && !project.title.toLowerCase().includes('kernel panic') && (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
aria-label="Live Demo"
onClick={(e) => e.stopPropagation()}
>
<ExternalLink size={20} />
</a>
)}
</div>
</div>
<div className="p-6 flex flex-col flex-1">
{/* Stretched Link covering the whole card (including image area) */}
<Link
href={`/${locale}/projects/${project.slug}`}
className="absolute inset-0 z-10"
aria-label={`View project ${project.title}`}
/>
<div className="flex items-center justify-between mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
{project.title}
</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">
<Calendar size={12} />
<span>{new Date(project.date).getFullYear()}</span>
</div>
</div>
<p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
{project.description}
</p>
<div className="flex flex-wrap gap-2 mb-6">
{project.tags.slice(0, 4).map((tag) => (
<span
key={tag}
className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
>
{tag}
</span>
))}
{project.tags.length > 4 && (
<span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
)}
</div>
<div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
<div className="flex gap-3">
{project.github && (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
onClick={(e) => e.stopPropagation()}
>
<Github size={18} />
</a>
)}
{project.live && !project.title.toLowerCase().includes('kernel panic') && (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
onClick={(e) => e.stopPropagation()}
>
<ExternalLink size={18} />
</a>
)}
</div>
</div>
</div>
</motion.div>
))}
</div>
{filteredProjects.length === 0 && (
<div className="text-center py-20">
<p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
<button
onClick={() => {setSelectedCategory("All"); setSearchQuery("");}}
className="mt-4 text-stone-800 font-medium hover:underline"
>
Clear filters
</button>
</div>
)}
</div>
</div>
);
};
export default ProjectsPage;

View File

@@ -1,6 +0,0 @@
// Boneyard skeleton registry - auto-generated by `npx boneyard-js build`
// This file is imported once at app initialization to register all bone layouts.
// Run `npx boneyard-js build` to generate bone files from your components.
const registry: Record<string, unknown> = {};
export default registry;

View File

@@ -1,7 +0,0 @@
{
"breakpoints": [375, 768, 1280],
"out": "./bones",
"wait": 800,
"color": "rgba(0,0,0,0.08)",
"animate": "pulse"
}

View File

@@ -16,12 +16,11 @@ const config: Config = {
testPathIgnorePatterns: ["/node_modules/", "/__mocks__/", "/.next/", "/e2e/"], testPathIgnorePatterns: ["/node_modules/", "/__mocks__/", "/.next/", "/e2e/"],
// Transform react-markdown and other ESM modules // Transform react-markdown and other ESM modules
transformIgnorePatterns: [ transformIgnorePatterns: [
"node_modules/(?!(react-markdown|remark-.*|rehype-.*|unified|bail|is-plain-obj|trough|vfile|vfile-message|unist-.*|micromark|parse-entities|character-entities|mdast-.*|hast-.*|property-information|space-separated-tokens|comma-separated-tokens|web-namespaces|zwitch|longest-streak|ccount|boneyard-js)/)", "node_modules/(?!(react-markdown|remark-.*|rehype-.*|unified|bail|is-plain-obj|trough|vfile|vfile-message|unist-.*|micromark|parse-entities|character-entities|mdast-.*|hast-.*|property-information|space-separated-tokens|comma-separated-tokens|web-namespaces|zwitch|longest-streak|ccount)/)",
], ],
// Module name mapping to fix haste collision // Module name mapping to fix haste collision
moduleNameMapper: { moduleNameMapper: {
"^@/(.*)$": "<rootDir>/$1", "^@/(.*)$": "<rootDir>/$1",
"^boneyard-js/react$": "<rootDir>/__mocks__/boneyard-js/react.tsx",
}, },
// Exclude problematic directories from haste // Exclude problematic directories from haste
modulePathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/e2e/"], modulePathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/e2e/"],

View File

@@ -36,15 +36,15 @@ export async function getSitemapEntries(): Promise<SitemapEntry[]> {
const baseUrl = getBaseUrl(); const baseUrl = getBaseUrl();
const nowIso = new Date().toISOString(); const nowIso = new Date().toISOString();
const staticPaths = ["", "/projects", "/legal-notice", "/privacy-policy"]; const staticPaths = ["", "/projects", "/books", "/legal-notice", "/privacy-policy"];
const staticEntries: SitemapEntry[] = locales.flatMap((locale) => const staticEntries: SitemapEntry[] = locales.flatMap((locale) =>
staticPaths.map((p) => { staticPaths.map((p) => {
const path = p === "" ? `/${locale}` : `/${locale}${p}`; const path = p === "" ? `/${locale}` : `/${locale}${p}`;
return { return {
url: `${baseUrl}${path}`, url: `${baseUrl}${path}`,
lastModified: nowIso, lastModified: nowIso,
changefreq: p === "" ? "weekly" : p === "/projects" ? "weekly" : "yearly", changefreq: p === "" ? "weekly" : (p === "/projects" || p === "/books") ? "weekly" : "yearly",
priority: p === "" ? 1.0 : p === "/projects" ? 0.8 : 0.5, priority: p === "" ? 1.0 : (p === "/projects" || p === "/books") ? 0.8 : 0.5,
}; };
}), }),
); );

View File

@@ -33,7 +33,7 @@ const nextConfig: NextConfig = {
// Performance optimizations // Performance optimizations
experimental: { experimental: {
// Tree-shake barrel-file packages in both dev and production // Tree-shake barrel-file packages in both dev and production
optimizePackageImports: ["lucide-react", "framer-motion", "react-icons", "@tiptap/react"], optimizePackageImports: ["lucide-react", "framer-motion", "@tiptap/react"],
// Merge all CSS into a single chunk to eliminate the render-blocking CSS chain // Merge all CSS into a single chunk to eliminate the render-blocking CSS chain
// (84dc7384.css → 3aefc04b.css sequential dependency reported by PageSpeed). // (84dc7384.css → 3aefc04b.css sequential dependency reported by PageSpeed).
cssChunking: false, cssChunking: false,
@@ -47,6 +47,8 @@ const nextConfig: NextConfig = {
images: { images: {
formats: ["image/webp", "image/avif"], formats: ["image/webp", "image/avif"],
minimumCacheTTL: 2592000, minimumCacheTTL: 2592000,
deviceSizes: [640, 768, 1024, 1280, 1536],
imageSizes: [16, 32, 48, 64, 96, 128, 256],
remotePatterns: [ remotePatterns: [
{ {
protocol: "https", protocol: "https",
@@ -81,6 +83,11 @@ const nextConfig: NextConfig = {
// Webpack configuration // Webpack configuration
webpack: (config, { dev, isServer, webpack }) => { webpack: (config, { dev, isServer, webpack }) => {
// Skip adding polyfill webpack aliases — Next.js injects polyfills via <script>
// tags, not through webpack module resolution, so aliases don't take effect.
// The browserslist targets (chrome >= 100, etc.) already prevent unnecessary
// transpilation; the 11.7 KiB polyfill chunk is a known Next.js limitation.
// Fix for module resolution issues // Fix for module resolution issues
config.resolve.fallback = { config.resolve.fallback = {
...config.resolve.fallback, ...config.resolve.fallback,

View File

@@ -52,17 +52,34 @@ http {
server portfolio:3000 max_fails=3 fail_timeout=30s; server portfolio:3000 max_fails=3 fail_timeout=30s;
} }
# HTTP Server (redirect to HTTPS) # HTTP Server (redirect to HTTPS with www → non-www)
server { server {
listen 80; listen 80;
server_name dk0.dev www.dk0.dev; server_name www.dk0.dev;
return 301 https://$host$request_uri; return 301 https://dk0.dev$request_uri;
}
server {
listen 80;
server_name dk0.dev;
return 301 https://dk0.dev$request_uri;
}
# HTTPS - redirect www to non-www
server {
listen 443 ssl http2;
server_name www.dk0.dev;
ssl_certificate /etc/nginx/ssl/cert.pem;
ssl_certificate_key /etc/nginx/ssl/key.pem;
return 301 https://dk0.dev$request_uri;
} }
# HTTPS Server # HTTPS Server
server { server {
listen 443 ssl http2; listen 443 ssl http2;
server_name dk0.dev www.dk0.dev; server_name dk0.dev;
# SSL Configuration # SSL Configuration
ssl_certificate /etc/nginx/ssl/cert.pem; ssl_certificate /etc/nginx/ssl/cert.pem;

67
package-lock.json generated
View File

@@ -20,7 +20,6 @@
"@tiptap/react": "^3.15.3", "@tiptap/react": "^3.15.3",
"@tiptap/starter-kit": "^3.15.3", "@tiptap/starter-kit": "^3.15.3",
"@vercel/og": "^0.6.5", "@vercel/og": "^0.6.5",
"boneyard-js": "^1.7.6",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dotenv": "^16.6.1", "dotenv": "^16.6.1",
"framer-motion": "^12.24.10", "framer-motion": "^12.24.10",
@@ -32,7 +31,6 @@
"nodemailer": "^7.0.11", "nodemailer": "^7.0.11",
"react": "^19.2.3", "react": "^19.2.3",
"react-dom": "^19.2.3", "react-dom": "^19.2.3",
"react-icons": "^5.5.0",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"redis": "^5.8.2", "redis": "^5.8.2",
"sanitize-html": "^2.17.0", "sanitize-html": "^2.17.0",
@@ -596,13 +594,6 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@chenglou/pretext": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/@chenglou/pretext/-/pretext-0.0.5.tgz",
"integrity": "sha512-A8GZN10REdFGsyuiUgLV8jjPDDFMg5GmgxGWV0I3igxBOnzj+jgz2VMmVD7g+SFyoctfeqHFxbNatKSzVRWtRg==",
"license": "MIT",
"optional": true
},
"node_modules/@cspotcode/source-map-support": { "node_modules/@cspotcode/source-map-support": {
"version": "0.8.1", "version": "0.8.1",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -5445,53 +5436,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/boneyard-js": {
"version": "1.7.6",
"resolved": "https://registry.npmjs.org/boneyard-js/-/boneyard-js-1.7.6.tgz",
"integrity": "sha512-9K3+cD684J131itS2iUI1+dsWqE7K3hSZid0nyXeBxtSTWQTFSpnGM7xmup16QwtmeGR70MPvpzluhA2Nl5LuQ==",
"license": "MIT",
"dependencies": {
"playwright": "^1.58.2"
},
"bin": {
"boneyard-js": "bin/cli.js"
},
"optionalDependencies": {
"@chenglou/pretext": "^0.0.5"
},
"peerDependencies": {
"@angular/core": ">=14",
"preact": ">=10",
"react": ">=18",
"react-native": ">=0.71",
"svelte": ">=5.29",
"vite": ">=5",
"vue": ">=3"
},
"peerDependenciesMeta": {
"@angular/core": {
"optional": true
},
"preact": {
"optional": true
},
"react": {
"optional": true
},
"react-native": {
"optional": true
},
"svelte": {
"optional": true
},
"vite": {
"optional": true
},
"vue": {
"optional": true
}
}
},
"node_modules/boolbase": { "node_modules/boolbase": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -12070,6 +12014,7 @@
"version": "1.58.2", "version": "1.58.2",
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
"integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==", "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
"devOptional": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"playwright-core": "1.58.2" "playwright-core": "1.58.2"
@@ -12088,6 +12033,7 @@
"version": "1.58.2", "version": "1.58.2",
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
"integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==", "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
"devOptional": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"bin": { "bin": {
"playwright-core": "cli.js" "playwright-core": "cli.js"
@@ -12681,15 +12627,6 @@
"react": "^19.2.4" "react": "^19.2.4"
} }
}, },
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

View File

@@ -64,7 +64,6 @@
"@tiptap/react": "^3.15.3", "@tiptap/react": "^3.15.3",
"@tiptap/starter-kit": "^3.15.3", "@tiptap/starter-kit": "^3.15.3",
"@vercel/og": "^0.6.5", "@vercel/og": "^0.6.5",
"boneyard-js": "^1.7.6",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dotenv": "^16.6.1", "dotenv": "^16.6.1",
"framer-motion": "^12.24.10", "framer-motion": "^12.24.10",
@@ -76,7 +75,6 @@
"nodemailer": "^7.0.11", "nodemailer": "^7.0.11",
"react": "^19.2.3", "react": "^19.2.3",
"react-dom": "^19.2.3", "react-dom": "^19.2.3",
"react-icons": "^5.5.0",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"redis": "^5.8.2", "redis": "^5.8.2",
"sanitize-html": "^2.17.0", "sanitize-html": "^2.17.0",

1
scripts/empty-module.js Normal file
View File

@@ -0,0 +1 @@
module.exports = {};