update seo

next.config.ts

@@ -1,9 +1,9 @@
 import type { NextConfig } from "next";
-import createMDX from '@next/mdx';
+import createMDX from "@next/mdx";
 
 const nextConfig: NextConfig = {
   // Configure `pageExtensions` to include markdown and MDX files
-  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   // Optionally, add any other Next.js config below
 };
 

public/manifest.json

@@ -0,0 +1,56 @@
+{
+  "name": "Mainasara Tsowa Portfolio",
+  "short_name": "Mainasara",
+  "description": "Developer & Cybersecurity Expert - Portfolio Website",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["technology", "portfolio", "developer", "cybersecurity"],
+  "lang": "en"
+}

src/app/digital-art/page.tsx

@@ -1,6 +1,21 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { artItems } from "@/data/creativeData";
 
+export const metadata: Metadata = {
+  title: "Digital Art",
+  description: "Explore my digital art collection featuring creative works through digital canvases and new media. Discover the intersection of technology and artistic expression.",
+  openGraph: {
+    title: "Digital Art | Mainasara Tsowa",
+    description: "Explore my digital art collection featuring creative works through digital canvases and new media.",
+    url: "https://mainasara.dev/digital-art",
+  },
+  twitter: {
+    title: "Digital Art | Mainasara Tsowa",
+    description: "Explore my digital art collection featuring creative works through digital canvases and new media.",
+  },
+};
+
 export default function DigitalArtPage() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-yellow-50 font-mono">

src/app/layout.tsx

@@ -13,8 +13,61 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  metadataBase: new URL('https://mainasara.dev'),
+  title: {
+    default: 'Mainasara Tsowa - Developer & Cybersecurity Expert',
+    template: '%s | Mainasara Tsowa'
+  },
+  description: 'Passionate developer and cybersecurity expert building secure, elegant digital solutions. Explore projects, creative writing, and technical insights.',
+  keywords: ['developer', 'cybersecurity', 'full-stack', 'web development', 'security', 'programming', 'digital art', 'creative writing'],
+  authors: [{ name: 'Mainasara Tsowa' }],
+  creator: 'Mainasara Tsowa',
+  publisher: 'Mainasara Tsowa',
+  robots: 'index, follow',
+  openGraph: {
+    title: 'Mainasara Tsowa - Developer & Cybersecurity Expert',
+    description: 'Passionate developer and cybersecurity expert building secure, elegant digital solutions.',
+    url: 'https://mainasara.dev',
+    siteName: 'Mainasara Tsowa',
+    locale: 'en_US',
+    type: 'website',
+    images: [
+      {
+        url: '/media/me/me.jpeg',
+        width: 800,
+        height: 800,
+        alt: 'Mainasara Tsowa',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Mainasara Tsowa - Developer & Cybersecurity Expert',
+    description: 'Passionate developer and cybersecurity expert building secure, elegant digital solutions.',
+    images: ['/media/me/me.jpeg'],
+    creator: '@mainasara',
+  },
+  alternates: {
+    canonical: 'https://mainasara.dev',
+  },
+  icons: {
+    icon: [
+      { url: '/favicon.ico' },
+      { url: '/icon.png', type: 'image/png' },
+    ],
+    apple: [
+      { url: '/apple-icon.png' },
+    ],
+  },
+  manifest: '/manifest.json',
+  verification: {
+    google: 'your-google-site-verification-code',
+  },
+  category: 'technology',
+  other: {
+    'twitter:site': '@mainasara',
+    'twitter:creator': '@mainasara',
+  },
 };
 
 export default function RootLayout({
@@ -23,7 +76,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

src/app/page.tsx

@@ -1,6 +1,21 @@
+import type { Metadata } from "next";
 import ProjectsSection from "@/components/ProjectsSection";
 import Image from "next/image";
 
+export const metadata: Metadata = {
+  title: "Home",
+  description: "Welcome to my personal portfolio. I'm Mainasara Tsowa, a developer and cybersecurity expert passionate about building secure, elegant digital solutions.",
+  openGraph: {
+    title: "Home | Mainasara Tsowa",
+    description: "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
+    url: "https://mainasara.dev",
+  },
+  twitter: {
+    title: "Home | Mainasara Tsowa",
+    description: "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
+  },
+};
+
 export default function Home() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 font-mono">

src/app/stories/page.tsx

@@ -1,7 +1,22 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { getStories } from "@/data/creativeData";
 import ExpandableStory from "@/components/ExpandableStory";
 
+export const metadata: Metadata = {
+  title: "Mini Stories",
+  description: "A collection of brief narratives and creative stories. Explore fictional tales that capture moments and emotions in concise storytelling.",
+  openGraph: {
+    title: "Mini Stories | Mainasara Tsowa",
+    description: "A collection of brief narratives and creative stories capturing moments and emotions.",
+    url: "https://mainasara.dev/stories",
+  },
+  twitter: {
+    title: "Mini Stories | Mainasara Tsowa",
+    description: "A collection of brief narratives and creative stories capturing moments and emotions.",
+  },
+};
+
 export default async function StoriesPage() {
   const stories = await getStories();
 

src/app/thoughts/page.tsx

@@ -1,7 +1,22 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { getThoughts } from "@/data/creativeData";
 import ExpandableThought from "@/components/ExpandableThought";
 
+export const metadata: Metadata = {
+  title: "Thoughts",
+  description: "Reflections on technology, life, and the intersection of creativity and code. Read my thoughts on software development, cybersecurity, and digital innovation.",
+  openGraph: {
+    title: "Thoughts | Mainasara Tsowa",
+    description: "Reflections on technology, life, and the intersection of creativity and code.",
+    url: "https://mainasara.dev/thoughts",
+  },
+  twitter: {
+    title: "Thoughts | Mainasara Tsowa",
+    description: "Reflections on technology, life, and the intersection of creativity and code.",
+  },
+};
+
 export default async function ThoughtsPage() {
   const thoughts = await getThoughts();