Framer to Vite. A static site, no server.

import type { ReactNode } from "react";
import type { RouteHandle } from "@/root";
import { PageHead, type Head } from "@/site/head";
import Template from "@/layouts/template";
import HomePage from "@/views/home";

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/",
    },
  ],
};

export const handle: RouteHandle = {
  // Around the page, from the root route (see src/root.tsx).
  layout: (page: ReactNode, _params: Record<string, string>) => <Template key="layout">{page}</Template>,
};

function Page() {
  return (
    <>
      <PageHead page={head} />
      <HomePage />
    </>
  );
… 3 more lines