fix: i18n for project section strings, unique SVG pattern IDs, remove hardcoded text

- Projects.tsx: use t() for title, subtitle, viewAll, noProjects
- ProjectsPageClient.tsx: use tList('title') instead of hardcoded 'Archive'
- ProjectThumbnail.tsx: useId() for unique SVG pattern IDs to avoid collisions
- Remove unused sizeClasses variable
- en.json: update project subtitle and add noProjects key
- de.json: update German translations for project section

app/components/Projects.tsx

@@ -28,7 +28,7 @@ const Projects = () => {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const locale = useLocale();
-  useTranslations("home.projects");
+  const t = useTranslations("home.projects");
 
   useEffect(() => {
     const loadProjects = async () => {
@@ -53,22 +53,22 @@ const Projects = () => {
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 sm:mb-12 md:mb-16 gap-4 sm:gap-6">
           <div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-stone-50 tracking-tighter mb-2 sm:mb-4 uppercase">
-              Selected Work<span className="text-emerald-600 dark:text-emerald-400">.</span>
+              {t("title")}<span className="text-emerald-600 dark:text-emerald-400">.</span>
             </h2>
             <p className="text-base sm:text-lg md:text-xl text-stone-500 max-w-xl font-light">
-              Projects that pushed my boundaries.
+              {t("subtitle")}
             </p>
           </div>
-          <Link href={`/${locale}/projects`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all text-xs uppercase tracking-widest">
-            View Archive <ArrowUpRight className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" size={14} />
-          </Link>
+<Link href={`/${locale}/projects`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all text-xs uppercase tracking-widest">
+              {t("viewAll")} <ArrowUpRight className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" size={14} />
+            </Link>
         </div>
 
         <Skeleton name="projects-grid" loading={loading} animate="shimmer" transition>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
           {projects.length === 0 && !loading ? (
             <div className="col-span-2 py-12 text-center text-stone-400 dark:text-stone-600 text-sm">
-              No projects yet.
+              {t("noProjects")}
             </div>
           ) : (
             projects.map((project) => (