add new schemas

Author: Austin1serb

app/(site)/page.tsx

@@ -4,10 +4,12 @@ import { AboutSectionV2 } from "../components/AboutSectionV2"
 import { ServicesSectionV2 } from "../components/ServicesSectionV2"
 import { RecruiterContact } from "../components/RecruiterContact"
 import { Metadata } from "next"
-import { SITE_SLUGS } from "@/config/siteConfig"
+import { SITE_CONFIG, SITE_SLUGS } from "@/config/siteConfig"
+import { homeGraph } from "@/config/schemas"
+import Script from "next/script"
 
 export const metadata: Metadata = {
-  title: "Austin Serb - Web Developer Portfolio | React & Next.js",
+  title: SITE_CONFIG.title,
   description:
     "Explore the web developer portfolio of Austin Serb, a full-stack engineer building fast, modern web applications. See what a professional coding portfolio looks like, featuring projects in React, Next.js, and the custom-built React-Zero-UI library.",
 
@@ -34,6 +36,13 @@ export const metadata: Metadata = {
 const PortfolioPage: React.FC = () => {
   return (
     <main className="overflow-hidden">
+      <Script
+        id="id-site-schema"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(homeGraph),
+        }}
+      />
       <HeroV2 />
       <div className="border-b border-gray-200" />
       <ProjectsSection />

app/components/ProjectSection/ProjectDisplay.tsx

@@ -6,10 +6,19 @@ import { LargeReview } from "../LargeReview"
 import { MoreProjectsSection } from "./MoreProjectsSection"
 import { ProjectData } from "../../data/project-data"
 import { RecruiterContact } from "../RecruiterContact"
+import Script from "next/script"
+import { buildProjectGraphMinimal } from "@/config/schemas"
 
 const ProjectDisplay: React.FC<{ projectData: ProjectData }> = ({ projectData }) => {
   return (
     <main className="overflow-hidden">
+      <Script
+        id="id-project-schema"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(buildProjectGraphMinimal(projectData.slug, projectData)),
+        }}
+      />
       <ProjectHero {...projectData.hero} />
       {projectData.beforeAfter && (
         <BeforeAfterSection

app/data/project-data.tsx

@@ -39,12 +39,14 @@ import { ApproachTabsImage } from "../components/ProjectSection/ApproachTabsImag
 //     }
 //   }
 // }
+
 export interface ProjectHeroProps {
   title: string | React.ReactNode
   client: string
   year: string
   description: string | React.ReactNode
   categories: string[]
+  // link to the client's website
   link: string
 }
 
@@ -62,6 +64,7 @@ export type ProjectData = {
   results: AnalyticCardProps[]
   phases: Phase[]
   review: ReviewProps
+  slug: string
 }
 
 export const bespoke: ProjectData = {
@@ -80,6 +83,7 @@ export const bespoke: ProjectData = {
     categories: ["SEO", "Web Design", "Web Development", "Photography"],
     link: "https://www.bespokeauto.org/",
   },
+  slug: "bespoke",
   beforeAfter: {
     heroBefore: heroBefore,
     beforeAltText: "Bespoke Tint & PPF Before",
@@ -212,6 +216,8 @@ export const automedicsKirkland: ProjectData = {
     categories: ["Next.js", "Web Design", "Local SEO", "Copywriting"],
     link: "https://www.automedicskirkland.com",
   },
+  slug: "automedics",
+
   beforeAfter: {
     heroBefore: heroBeforeAutomedics,
     beforeAltText: "Automedics Kirkland Before",
@@ -319,6 +325,7 @@ export const iao: ProjectData = {
     categories: ["Next.js", "Web Design", "Web Development", "Storytelling"],
     link: "https://iao-seattle.vercel.app/?src=serbyte",
   },
+  slug: "iron-and-oak",
   beforeAfter: {
     heroBefore: heroBeforeIao,
     heroBeforeMobile: heroBeforeMobileIao,

app/layout.tsx

@@ -11,7 +11,7 @@ import { ViewTransitions } from "./utils/ViewTransition"
 import { BottomBlurOverlay } from "./ui/BlurBottomOverlay"
 import { LazySplashCursor } from "./utils/lazy-splash-cursor"
 import { DesktopCursor } from "./utils/lazy-dot-cursor"
-import { breadcrumbSchema, contactPageSchema, profilePageSchema } from "@/config/schemas"
+import { siteGraph } from "@/config/schemas"
 import Script from "next/script"
 
 const switzer = localFont({
@@ -44,21 +44,10 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
             {children}
 
             <script
+              id="id-site-schema"
               type="application/ld+json"
               dangerouslySetInnerHTML={{
-                __html: JSON.stringify(contactPageSchema),
-              }}
-            />
-            <script
-              type="application/ld+json"
-              dangerouslySetInnerHTML={{
-                __html: JSON.stringify(profilePageSchema),
-              }}
-            />
-            <script
-              type="application/ld+json"
-              dangerouslySetInnerHTML={{
-                __html: JSON.stringify(breadcrumbSchema),
+                __html: JSON.stringify(siteGraph),
               }}
             />
             <FooterV2 />