ui refinements and projects added

Author: digin

app/contact/ContactClient.jsx

@@ -0,0 +1,28 @@
+import { getContentById } from '@/lib/content';
+import ContactClient from './ContactClient';
+
+export const metadata = {
+  title: 'Contact',
+  description: 'Get in touch with Digin Dominic. Send a message or connect via email, phone, or social media for collaboration opportunities.',
+  keywords: ['contact', 'Digin Dominic', 'hire developer', 'freelance', 'collaboration', 'get in touch'],
+  openGraph: {
+    title: 'Contact | Digin Dominic',
+    description: 'Get in touch with Digin Dominic for collaboration opportunities.',
+    url: 'https://digindominic.me/contact',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Contact | Digin Dominic',
+    description: 'Get in touch with Digin Dominic for collaboration opportunities.',
+  },
+  alternates: {
+    canonical: 'https://digindominic.me/contact',
+  },
+};
+
+export default async function ContactPage() {
+  const aboutContent = await getContentById('about', 'about');
+
+  return <ContactClient aboutContent={aboutContent} />;
+}

app/contact/page.jsx

@@ -3,23 +3,41 @@
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHome, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { faHome, faArrowLeft, faFolder, faNewspaper, faUser, faEnvelope } from '@fortawesome/free-solid-svg-icons';
+
+const staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
+};
+
+const staggerItem = {
+  hidden: { opacity: 0, y: 10 },
+  visible: { opacity: 1, y: 0 }
+};
 
 export default function NotFound() {
+  const quickLinks = [
+    { name: 'Home', path: '/', icon: faHome, description: 'Back to the main page' },
+    { name: 'Projects', path: '/projects', icon: faFolder, description: 'Browse my portfolio' },
+    { name: 'Blog', path: '/blog', icon: faNewspaper, description: 'Read my articles' },
+    { name: 'About', path: '/about', icon: faUser, description: 'Learn more about me' },
+    { name: 'Contact', path: '/contact', icon: faEnvelope, description: 'Get in touch' },
+  ];
+
   return (
-    <div className="min-h-[70vh] flex items-center justify-center px-4">
+    <div className="min-h-[80vh] flex items-center justify-center px-4 py-12">
       <motion.div
-        className="text-center glass-card p-8 md:p-12 max-w-xl"
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
+        className="text-center max-w-2xl w-full"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
       >
         {/* Error Code */}
         <motion.div
           className="mb-6"
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2 }}
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.1, duration: 0.4 }}
         >
           <span className="text-8xl md:text-9xl font-display font-bold text-gradient">
             404
@@ -28,37 +46,65 @@ export default function NotFound() {
 
         {/* Terminal-style message */}
         <motion.div
-          className="bg-light-surface dark:bg-deep-space rounded-lg p-4 mb-8 font-mono text-sm text-left border border-light-border dark:border-slate-700/50"
+          className="glass-card p-4 mb-8 font-mono text-sm text-left max-w-md mx-auto"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
-          transition={{ delay: 0.4 }}
+          transition={{ delay: 0.2 }}
         >
           <div className="flex items-center gap-2 mb-2 pb-2 border-b border-light-border dark:border-slate-700/50">
-            <span className="w-3 h-3 rounded-full bg-red-500" />
-            <span className="w-3 h-3 rounded-full bg-yellow-500" />
-            <span className="w-3 h-3 rounded-full bg-green-500" />
-            <span className="ml-2 text-light-text-secondary dark:text-muted-steel text-xs">error.log</span>
+            <span className="w-3 h-3 rounded-full bg-red-500" aria-hidden="true" />
+            <span className="w-3 h-3 rounded-full bg-yellow-500" aria-hidden="true" />
+            <span className="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
+            <span className="ml-2 text-light-text-secondary dark:text-muted-steel text-xs">terminal</span>
           </div>
           <p className="text-red-500">$ ERROR: Page not found</p>
           <p className="text-light-text-secondary dark:text-muted-steel">
-            &gt; The requested resource does not exist
+            &gt; The requested URL does not exist on this server
           </p>
-          <p className="text-signal-green">$ Suggestion: Navigate to a valid route</p>
+          <p className="text-signal-green">$ Redirecting to helpful links...</p>
         </motion.div>
 
         {/* Title and description */}
-        <h1 className="text-2xl md:text-3xl font-display font-bold text-light-text dark:text-ghost-white mb-4">
-          Page Not Found
+        <h1 className="text-2xl md:text-3xl font-display font-bold text-light-text dark:text-ghost-white mb-3">
+          Oops! Page Not Found
         </h1>
-        <p className="text-light-text-secondary dark:text-muted-steel mb-8">
-          The page you're looking for doesn't exist or has been moved.
+        <p className="text-light-text-secondary dark:text-muted-steel mb-8 max-w-md mx-auto">
+          The page you're looking for might have been moved, deleted, or perhaps never existed.
+          Let me help you find your way.
         </p>
 
+        {/* Quick Navigation Links */}
+        <motion.div
+          className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-8"
+          variants={staggerContainer}
+          initial="hidden"
+          animate="visible"
+        >
+          {quickLinks.map((link) => (
+            <motion.div key={link.path} variants={staggerItem}>
+              <Link
+                href={link.path}
+                className="group flex flex-col items-center p-4 rounded-xl bg-light-surface dark:bg-midnight-steel/50 border border-light-border dark:border-slate-700/50 hover:border-neural-blue/50 transition-all duration-300 hover:-translate-y-1"
+              >
+                <span className="w-10 h-10 rounded-lg bg-neural-blue/10 flex items-center justify-center mb-2 group-hover:bg-neural-blue/20 transition-colors">
+                  <FontAwesomeIcon icon={link.icon} className="text-neural-blue" />
+                </span>
+                <span className="text-sm font-medium text-light-text dark:text-ghost-white group-hover:text-neural-blue transition-colors">
+                  {link.name}
+                </span>
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+
         {/* Action buttons */}
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          <Link href="/" className="btn-primary inline-flex items-center justify-center gap-2">
+          <Link
+            href="/"
+            className="btn-primary inline-flex items-center justify-center gap-2"
+          >
             <FontAwesomeIcon icon={faHome} />
-            Go Home
+            Go to Homepage
           </Link>
           <button
             onClick={() => window.history.back()}
@@ -68,6 +114,15 @@ export default function NotFound() {
             Go Back
           </button>
         </div>
+
+        {/* Help text */}
+        <p className="mt-8 text-sm text-light-text-secondary dark:text-muted-steel">
+          Still can't find what you're looking for?{' '}
+          <Link href="/contact" className="text-neural-blue hover:text-synapse-cyan transition-colors">
+            Contact me
+          </Link>
+          {' '}and I'll help you out.
+        </p>
       </motion.div>
     </div>
   );

app/not-found.jsx

@@ -4,7 +4,7 @@ import { useState, useMemo } from 'react';
 import Link from 'next/link';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFolder, faTimes, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faFolder, faTimes, faChevronRight, faSearch } from '@fortawesome/free-solid-svg-icons';
 
 function ProjectCard({ project, index }) {
   const { title, image, summary, description, date, tag } = project.metadata || {};
@@ -73,6 +73,7 @@ function ProjectCard({ project, index }) {
 
 export default function ProjectsClient({ projects = [] }) {
   const [activeTag, setActiveTag] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
 
   const allTags = useMemo(() => {
     const tagsSet = new Set();
@@ -85,13 +86,31 @@ export default function ProjectsClient({ projects = [] }) {
   }, [projects]);
 
   const filteredProjects = useMemo(() => {
-    if (!activeTag) return projects;
-    return projects.filter(proj => {
-      if (!proj.metadata?.tag) return false;
-      const projTags = proj.metadata.tag.split(',').map(t => t.trim());
-      return projTags.includes(activeTag);
-    });
-  }, [projects, activeTag]);
+    let result = projects;
+
+    // Filter by search query
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(proj => {
+        const title = proj.metadata?.title?.toLowerCase() || '';
+        const summary = proj.metadata?.summary?.toLowerCase() || '';
+        const description = proj.metadata?.description?.toLowerCase() || '';
+        const tags = proj.metadata?.tag?.toLowerCase() || '';
+        return title.includes(query) || summary.includes(query) || description.includes(query) || tags.includes(query);
+      });
+    }
+
+    // Filter by tag
+    if (activeTag) {
+      result = result.filter(proj => {
+        if (!proj.metadata?.tag) return false;
+        const projTags = proj.metadata.tag.split(',').map(t => t.trim());
+        return projTags.includes(activeTag);
+      });
+    }
+
+    return result;
+  }, [projects, activeTag, searchQuery]);
 
   const sortedProjects = useMemo(() => {
     return [...filteredProjects].sort((a, b) => {
@@ -101,6 +120,13 @@ export default function ProjectsClient({ projects = [] }) {
     });
   }, [filteredProjects]);
 
+  const clearFilters = () => {
+    setActiveTag('');
+    setSearchQuery('');
+  };
+
+  const hasActiveFilters = activeTag || searchQuery.trim();
+
   return (
     <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
       <motion.div
@@ -119,6 +145,34 @@ export default function ProjectsClient({ projects = [] }) {
           Explore the projects I've been working on
         </p>
 
+        {/* Search Input */}
+        <div className="max-w-md mx-auto mb-6">
+          <div className="relative">
+            <FontAwesomeIcon
+              icon={faSearch}
+              className="absolute left-4 top-1/2 -translate-y-1/2 text-light-text-secondary dark:text-muted-steel"
+            />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search projects by title, description, or technology..."
+              className="w-full pl-11 pr-4 py-3 rounded-lg bg-light-surface dark:bg-midnight-steel/50 border border-light-border dark:border-slate-700/50 text-light-text dark:text-ghost-white placeholder-light-text-secondary dark:placeholder-muted-steel focus:outline-none focus:ring-2 focus:ring-neural-blue focus:border-transparent transition-all"
+              aria-label="Search projects"
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-light-text-secondary dark:text-muted-steel hover:text-light-text dark:hover:text-ghost-white transition-colors"
+                aria-label="Clear search"
+              >
+                <FontAwesomeIcon icon={faTimes} className="w-4 h-4" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Tag Filters */}
         {allTags.length > 0 && (
           <div className="flex flex-wrap justify-center gap-2">
             {allTags.map(tag => (
@@ -136,19 +190,26 @@ export default function ProjectsClient({ projects = [] }) {
                 {tag}
               </motion.button>
             ))}
-            {activeTag && (
+            {hasActiveFilters && (
               <motion.button
-                onClick={() => setActiveTag('')}
+                onClick={clearFilters}
                 className="px-4 py-2 rounded-lg text-sm font-medium bg-red-500/10 text-red-500 border border-red-500/20 hover:bg-red-500/20 transition-colors"
                 whileHover={{ scale: 1.02 }}
                 whileTap={{ scale: 0.98 }}
               >
                 <FontAwesomeIcon icon={faTimes} className="mr-2" />
-                Clear
+                Clear All
               </motion.button>
             )}
           </div>
         )}
+
+        {/* Results count */}
+        {hasActiveFilters && (
+          <p className="text-center mt-4 text-sm text-light-text-secondary dark:text-muted-steel">
+            Showing {sortedProjects.length} of {projects.length} projects
+          </p>
+        )}
       </motion.div>
 
       <AnimatePresence mode="wait">

app/projects/ProjectsClient.jsx

@@ -20,6 +20,7 @@ export default function Footer() {
     { name: 'Projects', path: '/projects' },
     { name: 'Blog', path: '/blog' },
     { name: 'About', path: '/about' },
+    { name: 'Contact', path: '/contact' },
   ];
 
   return (