fixed titles for pages

digin · digin · commit 353b0b116cac · 2025-04-03T19:30:51.000+01:00
diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx
@@ -1,5 +1,5 @@
-// src/pages/AboutPage.jsx
 import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet-async';
 import About from '../components/sections/About';
 import useGithubIssues from '../hooks/useGithubIssues';
 
@@ -83,6 +83,10 @@ const AboutPage = () => {
 
   return (
     <BgWrapper>
+      <Helmet>
+        <title>About Me | Digin Dominic</title>
+        <meta name="description" content="Learn about Digin Dominic - my background, skills, and experience as a software engineer." />
+      </Helmet>
       <div className="pt-28">
         <header className="container mx-auto px-4 text-center mb-1">
           <h1 className="title mb-4">About <span>Me</span></h1>
diff --git a/src/pages/BlogPage.jsx b/src/pages/BlogPage.jsx
@@ -123,9 +123,19 @@ const BlogPage = () => {
   const [activeTag, setActiveTag] = useState(searchParams.get('tag') || '');
   const [allTags, setAllTags] = useState([]);
   const [filteredPosts, setFilteredPosts] = useState([]);
+  const [pageTitle, setPageTitle] = useState('Blog | Digin Dominic');
   
   const { issues: blogPosts, loading: blogPostsLoading, error } = useGithubIssues('blog', null);
   
+  // Update title when the active tag changes
+  useEffect(() => {
+    if (activeTag) {
+      setPageTitle(`${activeTag} Blog Posts | Digin Dominic`);
+    } else {
+      setPageTitle('Blog | Digin Dominic');
+    }
+  }, [activeTag]);
+  
   useEffect(() => {
     if (Array.isArray(blogPosts) && blogPosts.length > 0) {
       // Extract all unique tags from blog posts
@@ -170,7 +180,7 @@ const BlogPage = () => {
       <BgWrapper>
         <section className="py-12 pt-28">
           <Helmet>
-            <title>Loading Blog | Your Portfolio Website</title>
+            <title>Loading Blog | Digin Dominic</title>
             <meta name="description" content="Loading blog posts..." />
           </Helmet>
           <div className="container mx-auto px-4">
@@ -189,7 +199,7 @@ const BlogPage = () => {
       <BgWrapper>
         <section className="py-12 pt-28">
           <Helmet>
-            <title>Blog Error | Your Portfolio Website</title>
+            <title>Blog Error | Digin Dominic</title>
             <meta name="description" content="An error occurred while loading blog posts." />
           </Helmet>
           <div className="container mx-auto px-4">
@@ -207,30 +217,30 @@ const BlogPage = () => {
     <BgWrapper>
       <section className="py-12 pt-28">
         <Helmet>
-          <title>{activeTag ? `${activeTag} Blog Posts | Your Portfolio Website` : 'Blog | Your Portfolio Website'}</title>
+          <title>{pageTitle}</title>
           <meta
             name="description"
             content={activeTag 
-              ? `Explore ${activeTag} blog posts on Your Portfolio Website.` 
-              : 'Explore the latest blog posts on various topics from Your Portfolio Website.'}
+              ? `Explore ${activeTag} blog posts by Digin Dominic.` 
+              : 'Explore the latest blog posts on various topics from Digin Dominic.'}
           />
           <meta
             name="keywords"
-            content={`blog, articles, ${activeTag || ''}, portfolio, Your Portfolio Website`}
+            content={`blog, articles, ${activeTag || ''}, portfolio, Digin Dominic`}
           />
           {/* Open Graph Tags */}
-          <meta property="og:title" content={activeTag ? `${activeTag} Blog Posts | Your Portfolio Website` : 'Blog | Your Portfolio Website'} />
+          <meta property="og:title" content={pageTitle} />
           <meta
             property="og:description"
             content={activeTag 
-              ? `Explore ${activeTag} blog posts on Your Portfolio Website.` 
-              : 'Explore the latest blog posts on various topics from Your Portfolio Website.'}
+              ? `Explore ${activeTag} blog posts by Digin Dominic.` 
+              : 'Explore the latest blog posts on various topics from Digin Dominic.'}
           />
           <meta property="og:type" content="website" />
-          <meta property="og:url" content={`https://yourdomain.com/blog${activeTag ? `?tag=${activeTag}` : ''}`} />
+          <meta property="og:url" content={`https://digindominic.me/blog${activeTag ? `?tag=${activeTag}` : ''}`} />
           <meta
             property="og:image"
-            content="https://yourdomain.com/default-blog-image.jpg"
+            content="https://raw.githubusercontent.com/digin1/web-images/refs/heads/main/digin.png"
           />
         </Helmet>
         <div className="container mx-auto px-4">
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -1,5 +1,5 @@
-// src/pages/HomePage.jsx
 import React from 'react';
+import { Helmet } from 'react-helmet-async';
 import Hero from '../components/sections/Hero';
 import Projects from '../components/sections/Projects';
 import Toolkit from '../components/sections/Toolkit';
@@ -69,6 +69,10 @@ const HomePage = () => {
 
   return (
     <>
+      <Helmet>
+        <title>Digin Dominic | Software Engineer</title>
+        <meta name="description" content="Digin Dominic - Software Engineer, Research Toolsmith, and Data Workflow Architect" />
+      </Helmet>
       <Hero content={heroContent} loading={heroLoading} />
       <Projects projects={projects} loading={projectsLoading} />
       <Toolkit />
diff --git a/src/pages/NotFoundPage.jsx b/src/pages/NotFoundPage.jsx
@@ -1,10 +1,14 @@
-// src/pages/NotFoundPage.jsx
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 
 const NotFoundPage = () => {
   return (
     <div className="container mx-auto px-4 py-16">
+      <Helmet>
+        <title>Page Not Found | Digin Dominic</title>
+        <meta name="description" content="The page you are looking for doesn't exist or has been moved." />
+      </Helmet>
       <div className="max-w-lg mx-auto text-center">
         <h1 className="text-4xl font-bold text-gray-800 mb-4">404 - Page Not Found</h1>
         <p className="text-gray-600 mb-8">
diff --git a/src/pages/ProjectsPage.jsx b/src/pages/ProjectsPage.jsx
@@ -1,6 +1,7 @@
-// src/pages/ProjectsPage.jsx (Shows all projects with tag filtering)
+// src/pages/ProjectsPage.jsx
 import React, { useState, useEffect } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 import useGithubIssues from '../hooks/useGithubIssues';
 import { parseCustomDate, formatDateAsDDMMYYYY } from '../utils/dateUtils';
 
@@ -108,12 +109,22 @@ const ProjectsPage = () => {
   const [activeTag, setActiveTag] = useState(searchParams.get('tag') || '');
   const [allTags, setAllTags] = useState([]);
   const [filteredProjects, setFilteredProjects] = useState([]);
+  const [pageTitle, setPageTitle] = useState('Projects | Digin Dominic');
   
   const { 
     issues: projects, 
     loading: projectsLoading 
   } = useGithubIssues('project', null);
 
+  // Update title when the active tag changes
+  useEffect(() => {
+    if (activeTag) {
+      setPageTitle(`${activeTag} Projects | Digin Dominic`);
+    } else {
+      setPageTitle('Projects | Digin Dominic');
+    }
+  }, [activeTag]);
+
   useEffect(() => {
     if (Array.isArray(projects) && projects.length > 0) {
       // Extract all unique tags from projects
@@ -155,6 +166,10 @@ const ProjectsPage = () => {
     if (projectsLoading) {
       return (
         <div className="container mx-auto px-4 py-12 pt-28">
+          <Helmet>
+            <title>Loading Projects | Digin Dominic</title>
+            <meta name="description" content="Browse my portfolio of projects and development work" />
+          </Helmet>
           <div className="text-center mb-12">
             <h2 className="title mb-4">My <span>Projects</span></h2>
             <p className="max-w-2xl mx-auto text-gray-600">Explore the projects I've been working on</p>
@@ -187,6 +202,28 @@ const ProjectsPage = () => {
 
     return (
       <div className="container mx-auto px-4 py-12 pt-28">
+        <Helmet>
+          <title>{pageTitle}</title>
+          <meta 
+            name="description" 
+            content={activeTag 
+              ? `Explore my ${activeTag} projects and portfolio work` 
+              : 'Browse my portfolio of projects, applications, and development work'
+            } 
+          />
+          {/* Open Graph Tags */}
+          <meta property="og:title" content={pageTitle} />
+          <meta 
+            property="og:description" 
+            content={activeTag 
+              ? `Explore my ${activeTag} projects and portfolio work` 
+              : 'Browse my portfolio of projects, applications, and development work'
+            } 
+          />
+          <meta property="og:type" content="website" />
+          <meta property="og:url" content={`https://digindominic.me/projects${activeTag ? `?tag=${activeTag}` : ''}`} />
+          <meta property="og:image" content="https://raw.githubusercontent.com/digin1/web-images/refs/heads/main/digin.png" />
+        </Helmet>
         <div className="text-center mb-8">
           <h2 className="title mb-4">My <span>Projects</span></h2>
           <p className="max-w-2xl mx-auto text-gray-600 mb-6">Explore the projects I've been working on</p>
