Framer to Nuxt. Nuxt runs it, React draws it.

<script setup lang="ts">
// The page's title, description and social image; React renders
// the page itself (src/routes/index.tsx, in app/components/ReactSite.vue).
import { usePageHead, type Head } from "~/site/head";

const head: Head = {
  meta: [
    {
      title: "Mehdi Hassan Portfolio",
    },
    {
      property: "og:title",
      content: "Mehdi Hassan Portfolio",
    },
    {
      property: "og:description",
      content:
        "Helping startups design & develop breathtaking products & websites. 🌟 Expert in copywriting, design, & development.",
    },
    {
      property: "og:url",
      content: "https://mehdihassan.framer.website/",
    },
    {
      property: "og:image",
      content: "https://framerusercontent.com/assets/h1lpVwE2dPBKzvByiXOr3ANSFDA.jpg",
    },
    {
      property: "og:type",
      content: "website",
    },
    {
      name: "twitter:card",
      content: "summary_large_image",
    },
    {
      name: "twitter:title",
      content: "Mehdi Hassan Portfolio",
    },
    {
      name: "twitter:description",
      content:
        "Helping startups design & develop breathtaking products & websites. 🌟 Expert in copywriting, design, & development.",
    },
    {
      name: "twitter:image",
      content: "https://framerusercontent.com/assets/h1lpVwE2dPBKzvByiXOr3ANSFDA.jpg",
    },
  ],
  links: [
    {
      rel: "canonical",
      href: "https://mehdihassan.framer.website/",
    },
  ],
};

usePageHead(head);
</script>

<template>
  <!-- The page renders in app/components/ReactSite.vue. -->
  <slot />
</template>