Add schema markup

app/page.tsx

@@ -1,3 +1,5 @@
+import { Person, WithContext } from 'schema-dts';
+
 import Nav from '@/components/landing/nav';
 import Tool from '@/components/landing/tool';
 import Footer from '@/components/main/footer';
@@ -12,6 +14,7 @@ import Experience from '@/components/landing/experience';
 import Qualification from '@/components/landing/qualification';
 
 export default async function HomePage() {
+  // get information
   const {
     about,
     frontend,
@@ -26,8 +29,44 @@ export default async function HomePage() {
     tool
   } = await getInformation();
 
+  // create JSON-LD
+  const jsonLd: WithContext<Person> = {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    name: 'Salimi',
+    alternateName: 'Mohamad Salimi',
+    url: 'https://www.salimi.my',
+    image: 'https://www.salimi.my/salimi.png',
+    jobTitle: miscellaneous
+      ? miscellaneous.titles.map((title) => title.name)
+      : ['Web Developer', 'Frontend Developer'],
+    gender: 'Male',
+    workLocation: 'Malaysia',
+    description:
+      'Salimi is an enthusiastic and passionate web developer based in Malaysia with more than half a decade of experience dedicated to deliver top-notch solutions and facilitate project success.',
+    sameAs: [
+      miscellaneous
+        ? miscellaneous.facebookUrl
+        : 'https://www.facebook.com/mysalimi',
+      miscellaneous ? miscellaneous.twitterUrl : 'https://twitter.com/mysalimi',
+      miscellaneous
+        ? miscellaneous.linkedinUrl
+        : 'https://www.linkedin.com/in/mohamad-salimi',
+      miscellaneous ? miscellaneous.githubUrl : 'https://github.com/salimi-my',
+      miscellaneous
+        ? miscellaneous.instagramUrl
+        : 'https://www.instagram.com/salimi.my'
+    ]
+  };
+
   return (
     <>
+      {/* JSON-LD */}
+      <script
+        type='application/ld+json'
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+
       <div className='sticky z-30 top-5 w-full flex justify-end px-5'>
         <ModeToggle />
       </div>

package.json

@@ -51,6 +51,7 @@
     "react-simple-typewriter": "^5.0.1",
     "react-spinners": "^0.13.8",
     "resend": "^3.1.0",
+    "schema-dts": "^1.1.2",
     "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",