Develop - SEO optimizations

app/about/page.tsx

@@ -1,4 +1,29 @@
-import React from 'react'
+import React from 'react';
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "About",
+  description: "Learn more about Djoufson Che Bene, a passionate Full Stack Developer and Software Engineer. Discover my background, experience, skills in React, Next.js, .NET, and journey in software development.",
+  keywords: [
+    "About Djoufson",
+    "Software Engineer Background",
+    "Full Stack Developer Experience",
+    "Professional Profile",
+    "Career Journey",
+    "Technical Skills",
+    "Software Development Experience"
+  ],
+  openGraph: {
+    title: "About | Djoufson Che Bene",
+    description: "Learn more about Djoufson Che Bene, a passionate Full Stack Developer and Software Engineer.",
+    url: "https://djoufson.com/about",
+    type: "profile",
+  },
+  twitter: {
+    title: "About | Djoufson Che Bene",
+    description: "Learn more about Djoufson Che Bene, a passionate Full Stack Developer and Software Engineer.",
+  },
+};
 
 export default function About() {
   return (

app/blog/page.tsx

@@ -35,5 +35,29 @@ export default async function BlogPage() {
 
 export const metadata = {
   title: "Blog",
-  description: "Read the latest blog posts and articles.",
+  description: "Technical blog posts about software development, web technologies, .NET, React, TypeScript, and programming best practices. Learn from real-world experiences and tutorials.",
+  keywords: [
+    "Technical Blog",
+    "Software Development", 
+    "Programming Tutorials",
+    "Web Development",
+    "React",
+    "Next.js",
+    ".NET",
+    "C#",
+    "TypeScript",
+    "JavaScript",
+    "Entity Framework",
+    "Best Practices"
+  ],
+  openGraph: {
+    title: "Technical Blog | Djoufson Che Bene",
+    description: "Technical blog posts about software development, web technologies, and programming best practices.",
+    url: "https://djoufson.com/blog",
+    type: "website",
+  },
+  twitter: {
+    title: "Technical Blog | Djoufson Che Bene",
+    description: "Technical blog posts about software development, web technologies, and programming best practices.",
+  },
 };

app/globals.css

@@ -105,7 +105,21 @@
 }
 
 .prose a {
-  @apply text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300 transition-colors;
+  color: #089cd8;
+  text-decoration: underline;
+  transition: color 0.2s ease-in-out;
+}
+
+.prose a:hover {
+  color: #067ba3;
+}
+
+.dark .prose a {
+  color: #4db3e6;
+}
+
+.dark .prose a:hover {
+  color: #089cd8;
 }
 
 .prose ul {
@@ -164,7 +178,40 @@
 }
 
 .link {
-  @apply text-blue-500 hover:text-blue-700;
+  color: var(--custom-blue);
+  transition: color 0.2s ease-in-out;
+}
+
+.link:hover {
+  color: var(--custom-blue-hover);
+}
+
+/* Custom blue link classes */
+.custom-blue-link {
+  color: var(--custom-blue);
+  transition: color 0.2s ease-in-out;
+}
+
+.custom-blue-link:hover {
+  color: var(--custom-blue-hover);
+}
+
+.custom-blue-link-active {
+  color: var(--custom-blue);
+}
+
+.dark .custom-blue-link-active {
+  color: var(--custom-blue-light);
+}
+
+/* Project card hover effects */
+.project-card-border {
+  border-color: var(--border);
+  transition: border-color 0.2s ease-in-out;
+}
+
+.project-card-border:hover {
+  border-color: var(--custom-blue);
 }
 
 @layer components {
@@ -254,6 +301,11 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+
+  /* Custom blue theme colors */
+  --custom-blue: #089cd8;
+  --custom-blue-hover: #067ba3;
+  --custom-blue-light: #4db3e6;
 }
 
 .dark {

app/layout.tsx

@@ -6,10 +6,76 @@ import GoogleAnalytics from "@/components/google/GoogleAnalytics";
 import GoogleAdSense from "@/components/google/GoogleAdSense";
 import BackToTop from "@/components/BackToTop";
 import { ThemeProvider } from "@/components/theme-provider";
+import StructuredData from "@/components/StructuredData";
 
 export const metadata: Metadata = {
-  title: "Djoufson's Amazing World 🌍",
-  description: "Generated by create next app",
+  metadataBase: new URL('https://djoufson.com'),
+  title: {
+    default: "Djoufson Che Bene - Full Stack Developer & Software Engineer",
+    template: "%s | Djoufson Che Bene"
+  },
+  description: "Full Stack Developer and Software Engineer passionate about building modern web applications with React, Next.js, .NET, and cloud technologies. Explore my projects, read my technical blog, and connect with me.",
+  keywords: [
+    "Full Stack Developer",
+    "Software Engineer", 
+    "React",
+    "Next.js",
+    "TypeScript",
+    "JavaScript",
+    ".NET",
+    "C#",
+    "Node.js",
+    "Web Development",
+    "Frontend Development",
+    "Backend Development",
+    "Cloud Computing",
+    "Technical Blog",
+    "Portfolio",
+    "Djoufson",
+    "Che Bene"
+  ],
+  authors: [{ name: "Djoufson Che Bene" }],
+  creator: "Djoufson Che Bene",
+  publisher: "Djoufson Che Bene",
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://djoufson.com',
+    siteName: 'Djoufson Che Bene - Full Stack Developer',
+    title: 'Djoufson Che Bene - Full Stack Developer & Software Engineer',
+    description: 'Full Stack Developer and Software Engineer passionate about building modern web applications. Explore my projects, read my technical blog, and connect with me.',
+    images: [
+      {
+        url: '/assets/djouf.png',
+        width: 1200,
+        height: 630,
+        alt: 'Djoufson Che Bene - Full Stack Developer',
+      }
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Djoufson Che Bene - Full Stack Developer & Software Engineer',
+    description: 'Full Stack Developer and Software Engineer passionate about building modern web applications. Explore my projects, read my technical blog, and connect with me.',
+    site: '@djouf_legran',
+    creator: '@djouf_legran',
+    images: ['/assets/djouf.png'],
+  },
+  verification: {
+    google: process.env.GOOGLE_SITE_VERIFICATION,
+  },
+  category: 'technology',
 };
 
 export default function RootLayout({
@@ -22,6 +88,7 @@ export default function RootLayout({
       <head>
         <GoogleAnalytics />
         <GoogleAdSense />
+        <StructuredData />
       </head>
       <body>
         <ThemeProvider

app/page.tsx

@@ -1,4 +1,20 @@
 import HomeContent from "./widgets/HomeContent";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home",
+  description: "Welcome to Djoufson Che Bene's portfolio. Full Stack Developer specializing in React, Next.js, .NET, and modern web technologies. Discover my projects, experience, and technical insights.",
+  openGraph: {
+    title: "Djoufson Che Bene - Full Stack Developer & Software Engineer",
+    description: "Welcome to my portfolio. Full Stack Developer specializing in React, Next.js, .NET, and modern web technologies.",
+    url: "https://djoufson.com",
+    type: "website",
+  },
+  twitter: {
+    title: "Djoufson Che Bene - Full Stack Developer & Software Engineer", 
+    description: "Welcome to my portfolio. Full Stack Developer specializing in React, Next.js, .NET, and modern web technologies.",
+  },
+};
 
 export default function Home() {
   return (

app/projects/page.tsx

@@ -1,6 +1,35 @@
 import { projects } from "@/data/projects";
 import Projects from "@/components/Projects";
 import LottieAnimation from "@/components/LottieAnimation";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Projects",
+  description: "Explore my portfolio of software projects including open-source contributions, personal applications, and academic research. Built with React, Next.js, .NET, TypeScript, and modern web technologies.",
+  keywords: [
+    "Portfolio",
+    "Software Projects",
+    "Open Source",
+    "Web Applications",
+    "React Projects",
+    "Next.js Applications", 
+    ".NET Applications",
+    "TypeScript Projects",
+    "Full Stack Projects",
+    "Academic Research",
+    "Personal Projects"
+  ],
+  openGraph: {
+    title: "Projects | Djoufson Che Bene",
+    description: "Explore my portfolio of software projects including open-source contributions, personal applications, and academic research.",
+    url: "https://djoufson.com/projects",
+    type: "website",
+  },
+  twitter: {
+    title: "Projects | Djoufson Che Bene",
+    description: "Explore my portfolio of software projects including open-source contributions, personal applications, and academic research.",
+  },
+};
 
 export default function ProjectsPage() {
   const openSourceProjects = projects.filter(p => p.category === 'open-source');

app/robots.ts

@@ -0,0 +1,13 @@
+import { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/api/', '/_next/', '/admin/'],
+    },
+    sitemap: 'https://djoufson.com/sitemap.xml',
+    host: 'https://djoufson.com',
+  };
+}

app/sitemap.ts

@@ -0,0 +1,47 @@
+import { MetadataRoute } from 'next';
+import { getAllPostSlugs } from '@/lib/blog';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = 'https://djoufson.com';
+
+  // Get all blog post slugs
+  const blogSlugs = getAllPostSlugs();
+
+  // Static pages
+  const staticPages = [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'monthly' as const,
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/about`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly' as const,
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/projects`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly' as const,
+      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/blog`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly' as const,
+      priority: 0.8,
+    },
+  ];
+
+  // Blog post pages
+  const blogPages = blogSlugs.map((slug) => ({
+    url: `${baseUrl}/blog/${slug}`,
+    lastModified: new Date(),
+    changeFrequency: 'monthly' as const,
+    priority: 0.6,
+  }));
+
+  return [...staticPages, ...blogPages];
+}

app/widgets/HeroSection.tsx

@@ -24,7 +24,7 @@ export default function HeroSection() {
             <p className="text-base leading-relaxed mb-8">
               Experienced backend engineer, Founder of{" "}
               <a
-                className="text-blue-600 hover:text-blue-700 transition-colors"
+                className="custom-blue-link-active"
                 title=".NET Cameroon Website"
                 target="_blank"
                 href="https://dotnet.cm"

app/widgets/JobExperienceCard.tsx

@@ -9,7 +9,7 @@ export default function JobExperienceCard({ model }: JobExperienceProps) {
       <div className="flex-1">
         <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 mb-3">
           <a
-            className="inline-flex items-center gap-2 text-foreground hover:text-blue-600 transition-colors"
+            className="inline-flex items-center gap-2 text-foreground custom-blue-link"
             target="_blank"
             href={model.website}
           >

components/ProjectCard.tsx

@@ -10,7 +10,7 @@ interface ProjectCardProps {
 export default function ProjectCard({ project }: ProjectCardProps) {
   return (
     <div className="group relative">
-      <div className="flex flex-col h-full p-6 bg-card rounded-lg border border-border hover:border-blue-600/50 transition-colors">
+      <div className="flex flex-col h-full p-6 bg-card rounded-lg border project-card-border">
         {project.imageUrl && (
           <div className="relative w-full h-48 mb-4 overflow-hidden rounded-md">
             <Image
@@ -22,7 +22,7 @@ export default function ProjectCard({ project }: ProjectCardProps) {
           </div>
         )}
         <div className="flex-1">
-          <h3 className="text-lg font-medium mb-2 group-hover:text-blue-600 transition-colors">
+          <h3 className="text-lg font-medium mb-2 transition-colors">
             {project.title}
           </h3>
           <p className="text-muted-foreground text-sm mb-4">