style: modernize project pages with warm organic design and improved readability

app/projects/page.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-
 import { motion } from 'framer-motion';
-import { ExternalLink, Github, Calendar, ArrowLeft } from 'lucide-react';
+import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
 import Link from 'next/link';
 
 interface Project {
@@ -17,10 +16,16 @@ interface Project {
   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);
 
   // Load projects from API
   useEffect(() => {
@@ -29,7 +34,12 @@ const ProjectsPage = () => {
         const response = await fetch('/api/projects?published=true');
         if (response.ok) {
           const data = await response.json();
-          setProjects(data.projects || []);
+          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') {
@@ -39,31 +49,36 @@ const ProjectsPage = () => {
     };
 
     loadProjects();
-  }, []);
-
-  const categories = ["All", "Web Development", "Full-Stack", "Web Application", "Mobile App"];
-  const [selectedCategory, setSelectedCategory] = useState("All");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
     setMounted(true);
   }, []);
 
-  if (!mounted) {
-    return null;
-  }
+  // Filter projects
+  useEffect(() => {
+    let result = projects;
 
-  const filteredProjects = selectedCategory === "All" 
-    ? projects 
-    : projects.filter(project => project.category === selectedCategory);
+    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 animated-bg">
-      <div className="max-w-7xl mx-auto px-4 pt-32 pb-20">
+    <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 }}
@@ -73,43 +88,56 @@ const ProjectsPage = () => {
         >
           <Link
             href="/"
-            className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
+            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
           >
-            <ArrowLeft size={20} />
+            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
             <span>Back to Home</span>
           </Link>
           
-          <h1 className="text-5xl md:text-6xl font-bold mb-6 gradient-text">
+          <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-gray-400 max-w-3xl">
+          <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>
 
-        {/* Category Filter */}
+        {/* Filters & Search */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
-          className="mb-12"
+          className="mb-12 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center"
         >
-          <div className="flex flex-wrap gap-3">
+          {/* Categories */}
+          <div className="flex flex-wrap gap-2">
             {categories.map((category) => (
               <button
                 key={category}
                 onClick={() => setSelectedCategory(category)}
-                className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+                className={`px-5 py-2 rounded-full text-sm font-medium transition-all duration-200 border ${
                   selectedCategory === category
-                    ? 'bg-gray-800 text-cream shadow-lg'
-                    : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white'
+                    ? '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 */}
@@ -120,98 +148,102 @@ const ProjectsPage = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: index * 0.1 }}
-              whileHover={{ y: -10 }}
-              className="group relative overflow-hidden rounded-2xl glass-card card-hover"
+              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"
             >
-              <div className="relative h-48 overflow-hidden">
-                <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20" />
-                <div className="absolute inset-0 bg-gray-800/50 flex flex-col items-center justify-center p-4">
-                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center mb-2">
-                    <span className="text-2xl font-bold text-white">
-                      {project.title.split(' ').map(word => word[0]).join('').toUpperCase()}
+              {/* Image / Fallback */}
+              <div className="relative h-56 overflow-hidden bg-stone-100">
+                {project.imageUrl ? (
+                  <img // Using img for now if Image is tricky with dynamic urls without config
+                    src={project.imageUrl}
+                    alt={project.title}
+                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                  />
+                ) : (
+                  <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center p-8 group-hover:from-stone-100 group-hover:to-stone-200 transition-colors duration-700">
+                    <span className="text-6xl font-serif font-bold text-stone-500/20 group-hover:text-stone-500/30 select-none">
+                      {project.title.charAt(0)}
                     </span>
                   </div>
-                  <span className="text-sm font-medium text-gray-400 text-center leading-tight">
-                    {project.title}
-                  </span>
-                </div>
+                )}
                 
                 {project.featured && (
-                  <div className="absolute top-4 right-4 px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs font-semibold rounded-full">
+                  <div className="absolute top-4 right-4 px-3 py-1 bg-white/90 backdrop-blur-md text-stone-800 text-xs font-bold rounded-full shadow-sm border border-white/50">
                     Featured
                   </div>
                 )}
-
-                {((project.github && project.github.trim() && project.github !== "#") || (project.live && project.live.trim() && project.live !== "#")) && (
-                  <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
-                    {project.github && project.github.trim() && project.github !== "#" && (
-                      <motion.a
-                        href={project.github}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        className="p-3 bg-gray-800/80 rounded-lg text-white hover:bg-gray-700/80 transition-colors"
-                      >
-                        <Github size={20} />
-                      </motion.a>
-                    )}
-                    {project.live && project.live.trim() && project.live !== "#" && (
-                      <motion.a
-                        href={project.live}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        className="p-3 bg-blue-600/80 rounded-lg text-white hover:bg-blue-500/80 transition-colors"
-                      >
-                        <ExternalLink size={20} />
-                      </motion.a>
-                    )}
-                  </div>
-                )}
               </div>
 
-              <div className="p-6">
+              <div className="p-6 flex flex-col flex-1">
                 <div className="flex items-center justify-between mb-3">
-                  <h3 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">
+                  <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-gray-400">
-                    <Calendar size={16} />
-                    <span className="text-sm">{project.date}</span>
+                  <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-gray-300 mb-4 leading-relaxed">
+                <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-4">
-                  {project.tags.map((tag) => (
+                <div className="flex flex-wrap gap-2 mb-6">
+                  {project.tags.slice(0, 4).map((tag) => (
                     <span
                       key={tag}
-                      className="px-3 py-1 bg-gray-800/50 text-gray-300 text-sm rounded-full border border-gray-700"
+                      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>
 
-                <Link
-                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
-                  className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors font-medium"
-                >
-                  <span>View Project</span>
-                  <ExternalLink size={16} />
-                </Link>
+                <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between">
+                   <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">
+                          <Github size={18} />
+                        </a>
+                      )}
+                      {project.live && (
+                         <a href={project.live} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors">
+                           <ExternalLink size={18} />
+                         </a>
+                      )}
+                   </div>
+
+                  <Link
+                    href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                    className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all"
+                  >
+                    <span>Read More</span>
+                    <ArrowLeft size={16} className="rotate-180" />
+                  </Link>
+                </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;
+export default ProjectsPage;