feat: Add a certificates page, implement SEO, refine Supabase RLS policies for security and performance, and update project metadata to reflect Vite, React, and TypeScript.

Author: ilramdhan

app/about.tsx

@@ -1,20 +1,28 @@
 import React from 'react';
 import { useTheme } from '../lib/ThemeContext';
 import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 import * as api from '../lib/api';
 import { Navbar } from '../components/Navbar';
-import { Download, MapPin, Briefcase, GraduationCap, Mail, Github, Linkedin, Twitter, Instagram, Youtube, Award, Clock, Code2, Calendar } from 'lucide-react';
+import { Download, MapPin, Briefcase, GraduationCap, Mail, Github, Linkedin, Twitter, Instagram, Youtube, Award, Clock, Code2, Calendar, ArrowRight } from 'lucide-react';
 import { motion } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
 import WakatimeStats from '../components/WakatimeStats';
 import { ensureFullUrl } from '../lib/utils';
+import { useDocumentMeta } from '../lib/useDocumentMeta';
 
 const SocialIconMap: { [key: string]: React.ElementType } = {
     github: Github, linkedin: Linkedin, twitter: Twitter, instagram: Instagram, youtube: Youtube, mail: Mail,
 };
 
 export default function AboutPage() {
   const { theme } = useTheme();
+  const navigate = useNavigate();
+
+  useDocumentMeta({
+    title: 'About',
+    description: 'Learn more about Ilham Ramadhan — experience, education, certifications, and coding activity.',
+  });
 
   const { data: profile, isLoading: isLoadingProfile } = useQuery({ queryKey: ['profile'], queryFn: api.getProfile });
   const { data: experience, isLoading: isLoadingExp } = useQuery({ queryKey: ['resume', 'experience'], queryFn: () => api.getResume('experience') });
@@ -133,9 +141,19 @@ export default function AboutPage() {
 
         {certificates && certificates.length > 0 && (
             <div className="mb-20">
-                <h2 className="text-2xl font-bold mb-8 flex items-center gap-3"><div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 dark:text-green-400"><Award className="h-6 w-6" /></div>Certificates</h2>
+                <div className="flex items-center justify-between mb-8">
+                    <h2 className="text-2xl font-bold flex items-center gap-3"><div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 dark:text-green-400"><Award className="h-6 w-6" /></div>Certificates</h2>
+                    {certificates.length > 3 && (
+                        <button
+                            onClick={() => navigate('/certificates')}
+                            className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 font-medium text-sm flex items-center gap-1"
+                        >
+                            View All Certificates <ArrowRight className="h-4 w-4" />
+                        </button>
+                    )}
+                </div>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {certificates.map((cert, idx) => (
+                    {certificates.slice(0, 3).map((cert, idx) => (
                         <motion.div key={cert.id} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ delay: idx * 0.1 }} className="bg-white border border-slate-200 dark:bg-slate-900/50 dark:border-white/5 rounded-xl overflow-hidden hover:border-indigo-500/30 transition-all shadow-sm dark:shadow-none group flex flex-col">
                             {cert.file_url ? (
                                 <div className="h-48 bg-slate-100 dark:bg-slate-800 overflow-hidden relative">

app/blog-detail.tsx

@@ -1,13 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Navbar } from '../components/Navbar';
 import { getBlogBySlug, addComment as addCommentAPI, getComments } from '../lib/api';
+import { useDocumentMeta } from '../lib/useDocumentMeta';
 import { ArrowLeft, Calendar, Tag, MessageSquare, Send } from 'lucide-react';
 import { toast } from 'sonner';
 import { ImageCarousel } from '../components/ImageCarousel';
 import ReactMarkdown from 'react-markdown';
 
+const COMMENT_COOLDOWN = 30;
+
 export default function BlogDetailPage() {
   const { slug } = useParams<{ slug: string }>();
   const navigate = useNavigate();
@@ -19,6 +22,12 @@ export default function BlogDetailPage() {
     enabled: !!slug,
   });
 
+  useDocumentMeta({
+    title: blog?.title,
+    description: blog?.excerpt || undefined,
+    ogImage: blog?.images?.[0] || undefined,
+  });
+
   const { data: comments, isLoading: isLoadingComments } = useQuery({
     queryKey: ['comments', blog?.id],
     queryFn: () => getComments(blog!.id),
@@ -32,15 +41,33 @@ export default function BlogDetailPage() {
       queryClient.invalidateQueries({ queryKey: ['comments', blog?.id] });
       setCommentName('');
       setCommentText('');
+      startCooldown();
     },
     onError: (error) => {
       toast.error(`Failed to add comment: ${error.message}`);
     }
   });
 
-  // Comment State
+  // Comment State + Rate Limiting
   const [commentName, setCommentName] = useState('');
   const [commentText, setCommentText] = useState('');
+  const [commentHoneypot, setCommentHoneypot] = useState('');
+  const [cooldown, setCooldown] = useState(0);
+  const cooldownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    return () => { if (cooldownRef.current) clearInterval(cooldownRef.current); };
+  }, []);
+
+  const startCooldown = useCallback(() => {
+    setCooldown(COMMENT_COOLDOWN);
+    cooldownRef.current = setInterval(() => {
+      setCooldown(prev => {
+        if (prev <= 1) { clearInterval(cooldownRef.current!); return 0; }
+        return prev - 1;
+      });
+    }, 1000);
+  }, []);
 
   if (isLoading) {
     return (
@@ -61,6 +88,9 @@ export default function BlogDetailPage() {
 
   const handleCommentSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    // Honeypot
+    if (commentHoneypot) return;
+    if (cooldown > 0) { toast.error(`Please wait ${cooldown}s before posting again.`); return; }
     if (!commentName.trim() || !commentText.trim() || !blog.id) return;
 
     addComment({ postId: blog.id, name: commentName, text: commentText });
@@ -106,6 +136,10 @@ export default function BlogDetailPage() {
             <h3 className="text-2xl font-bold mb-6 flex items-center gap-2"><MessageSquare className="h-6 w-6"/> Comments ({comments?.length || 0})</h3>
 
             <form onSubmit={handleCommentSubmit} className="mb-8 bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-white/5">
+                {/* Honeypot */}
+                <div className="absolute opacity-0 pointer-events-none" aria-hidden="true" tabIndex={-1}>
+                    <input type="text" value={commentHoneypot} onChange={(e) => setCommentHoneypot(e.target.value)} tabIndex={-1} autoComplete="off" />
+                </div>
                 <div className="mb-4">
                     <label className="block text-sm font-medium mb-1">Name</label>
                     <input 
@@ -114,6 +148,7 @@ export default function BlogDetailPage() {
                         onChange={(e) => setCommentName(e.target.value)}
                         className="w-full px-4 py-2 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                         placeholder="Your Name"
+                        maxLength={100}
                         required
                     />
                 </div>
@@ -125,15 +160,16 @@ export default function BlogDetailPage() {
                         className="w-full px-4 py-2 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                         placeholder="Share your thoughts..."
                         rows={3}
+                        maxLength={2000}
                         required
                     />
                 </div>
                 <button 
                     type="submit" 
-                    disabled={isAddingComment}
+                    disabled={isAddingComment || cooldown > 0}
                     className="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors flex items-center gap-2 disabled:opacity-50"
                 >
-                    {isAddingComment ? 'Posting...' : <><Send className="h-4 w-4"/> Post Comment</>}
+                    {isAddingComment ? 'Posting...' : cooldown > 0 ? `Wait ${cooldown}s` : <><Send className="h-4 w-4"/> Post Comment</>}
                 </button>
             </form>
 

app/blog.tsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { Navbar } from '../components/Navbar';
+import { CollapsibleTagFilter } from '../components/CollapsibleTagFilter';
 import { getBlogs, getBlogTags } from '../lib/api';
 import { useDebounce } from '../lib/hooks';
+import { useDocumentMeta } from '../lib/useDocumentMeta';
 import { Calendar, Search, Tag, ChevronLeft, ChevronRight } from 'lucide-react';
 
 const ITEMS_PER_PAGE = 6;
@@ -16,6 +18,11 @@ export default function BlogPage() {
 
   const debouncedSearchQuery = useDebounce(searchQuery, 300);
 
+  useDocumentMeta({
+    title: 'Blog',
+    description: 'Insights, thoughts, and tutorials on web development, design, and technology.',
+  });
+
   const { data: allBlogTags, isLoading: isLoadingTags } = useQuery({
     queryKey: ['blogTags'],
     queryFn: getBlogTags,
@@ -64,20 +71,15 @@ export default function BlogPage() {
                 />
             </div>
 
-            <div className="flex flex-wrap justify-center gap-2">
-                {isLoadingTags ? <div className="h-6 w-20 animate-pulse bg-slate-200 dark:bg-slate-800 rounded-full" /> : allBlogTags?.map(tag => (
-                    <button
-                        key={tag}
-                        onClick={() => handleFilterChange(tag === selectedTag ? null : tag)}
-                        className={`px-3 py-1 rounded-full text-xs font-medium border transition-colors ${
-                            tag === selectedTag 
-                            ? 'bg-indigo-600 text-white border-indigo-600' 
-                            : 'bg-white dark:bg-slate-900/50 text-slate-600 dark:text-slate-400 border-slate-200 dark:border-white/10 hover:border-indigo-500 hover:text-indigo-500'
-                        }`}
-                    >
-                        #{tag}
-                    </button>
-                ))}
+            <div className="flex justify-center">
+                <CollapsibleTagFilter
+                  tags={allBlogTags ?? []}
+                  selectedTag={selectedTag}
+                  onTagClick={handleFilterChange}
+                  maxVisible={6}
+                  isLoading={isLoadingTags}
+                  prefix="#"
+                />
             </div>
         </div>
 

app/certificates.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Navbar } from '../components/Navbar';
+import { CollapsibleTagFilter } from '../components/CollapsibleTagFilter';
+import { getCertificatesPaginated, getCertificateIssuers } from '../lib/api';
+import { useDebounce } from '../lib/hooks';
+import { useDocumentMeta } from '../lib/useDocumentMeta';
+import { Award, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+import { motion } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
+
+const ITEMS_PER_PAGE = 9;
+
+export default function CertificatesPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedIssuer, setSelectedIssuer] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
+
+  useDocumentMeta({
+    title: 'Certificates',
+    description: 'Browse all professional certifications and achievements.',
+  });
+
+  const { data: allIssuers, isLoading: isLoadingIssuers } = useQuery({
+    queryKey: ['certificateIssuers'],
+    queryFn: getCertificateIssuers,
+  });
+
+  const { data: certData, isLoading: isLoadingCerts, isError } = useQuery({
+    queryKey: ['certificatesPaginated', currentPage, selectedIssuer, debouncedSearchQuery],
+    queryFn: () => getCertificatesPaginated({
+      page: currentPage,
+      limit: ITEMS_PER_PAGE,
+      query: debouncedSearchQuery,
+      issuer: selectedIssuer,
+    }),
+    placeholderData: (previousData) => previousData,
+  });
+
+  const certificates = certData?.data ?? [];
+  const totalCerts = certData?.count ?? 0;
+  const totalPages = Math.ceil(totalCerts / ITEMS_PER_PAGE);
+
+  const handlePageChange = (newPage: number) => {
+    setCurrentPage(newPage);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleIssuerFilter = (issuer: string | null) => {
+    setSelectedIssuer(issuer);
+    setCurrentPage(1);
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-white transition-colors duration-300">
+      <Navbar />
+      <div className="pt-32 pb-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">Certificates</h1>
+          <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+            Professional certifications, achievements, and credentials.
+          </p>
+        </div>
+
+        {/* Search & Filters */}
+        <div className="max-w-4xl mx-auto mb-12 space-y-6">
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-500" />
+            <input
+              type="text"
+              placeholder="Search certificates..."
+              value={searchQuery}
+              onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
+              className="w-full bg-white dark:bg-slate-900/80 border border-slate-200 dark:border-white/10 rounded-full py-3 pl-12 pr-6 text-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none backdrop-blur-sm shadow-sm"
+            />
+          </div>
+
+          <div className="flex justify-center">
+            <CollapsibleTagFilter
+              tags={allIssuers ?? []}
+              selectedTag={selectedIssuer}
+              onTagClick={handleIssuerFilter}
+              maxVisible={6}
+              isLoading={isLoadingIssuers}
+            />
+          </div>
+        </div>
+
+        {/* Certificate Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+          {isLoadingCerts && Array.from({ length: ITEMS_PER_PAGE }).map((_, i) => (
+            <div key={i} className="rounded-xl bg-slate-200 dark:bg-slate-800/50 aspect-[4/3] animate-pulse" />
+          ))}
+          {isError && <div className="col-span-full py-20 text-center text-red-500">Error loading certificates.</div>}
+          {certificates.map((cert, idx) => (
+            <motion.div
+              key={cert.id}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: idx * 0.05 }}
+              className="bg-white border border-slate-200 dark:bg-slate-900/50 dark:border-white/5 rounded-xl overflow-hidden hover:border-indigo-500/30 transition-all shadow-sm dark:shadow-none group flex flex-col"
+            >
+              {cert.file_url ? (
+                <div className="h-48 bg-slate-100 dark:bg-slate-800 overflow-hidden relative">
+                  <img src={cert.file_url} alt={cert.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                </div>
+              ) : (
+                <div className="h-48 bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400">
+                  <Award className="h-12 w-12" />
+                </div>
+              )}
+              <div className="p-6 flex-1 flex flex-col">
+                <h3 className="text-lg font-bold mb-2 text-slate-900 dark:text-white">{cert.title}</h3>
+                <p className="text-sm text-indigo-600 dark:text-indigo-400 mb-2">{cert.issued_by}</p>
+                <p className="text-xs text-slate-500 mb-4">{cert.issued_date} {cert.expiry_date ? ` - ${cert.expiry_date}` : ''}</p>
+                <div className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4 flex-1 prose prose-sm dark:prose-invert line-clamp-3">
+                  <ReactMarkdown>{cert.description || ''}</ReactMarkdown>
+                </div>
+                {cert.credential_url && (
+                  <a href={cert.credential_url} target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:underline mt-auto">
+                    View Credential &rarr;
+                  </a>
+                )}
+              </div>
+            </motion.div>
+          ))}
+          {certificates.length === 0 && !isLoadingCerts && (
+            <div className="col-span-full py-20 text-center text-slate-500">
+              No certificates found matching your criteria.
+            </div>
+          )}
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex justify-center gap-2">
+            <button
+              onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
+              disabled={currentPage === 1}
+              className="p-2 rounded-lg border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+            {Array.from({ length: totalPages }).map((_, i) => (
+              <button
+                key={i}
+                onClick={() => handlePageChange(i + 1)}
+                className={`w-10 h-10 rounded-lg font-medium transition-colors ${
+                  currentPage === i + 1
+                    ? 'bg-indigo-600 text-white'
+                    : 'border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5'
+                }`}
+              >
+                {i + 1}
+              </button>
+            ))}
+            <button
+              onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
+              disabled={currentPage === totalPages}
+              className="p-2 rounded-lg border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ChevronRight className="h-5 w-5" />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}