personal-site/components/Layout.js

import Head from 'next/head';
import Header from './Header';
import Footer from './Footer';

export default function Layout({ children, title, description }) {
  const pageTitle = title || 'Jesse Egbosionu · Software Engineer';
  const pageDescription =
    description || 'Software engineer based in Amsterdam, focused on building scalable backend systems.';

  return (
    <div className="page">
      <Head>
        <title>{pageTitle}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content={pageDescription} />
        <meta property="og:title" content={pageTitle} />
        <meta property="og:description" content={pageDescription} />
        <meta property="og:type" content="website" />
        <link rel="icon" href="/favicon.ico" sizes="48x48" />
        <link rel="icon" href="/icon.svg" type="image/svg+xml" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <meta name="theme-color" content="#0c0a09" />
      </Head>

      <Header />

      <main className="main-content">{children}</main>

      <Footer />
    </div>
  );
}