OG image

Rendered in Vercel OG Image Playground

 <div
    style={{
      height: "100%",
      width: "100%",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: "#1e1e2e", // Mocha Base
      fontFamily: "system-ui, sans-serif",
    }}
  >
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        padding: "40px",
        background: "#313244", // Mocha Surface 0
        borderRadius: "16px",
        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
        width: "90%",
        height: "80%",
      }}
    >
      <div
        style={{
          fontSize: "48px",
          fontWeight: "bold",
          color: "#cdd6f4", // Mocha Text
          marginBottom: "20px",
        }}
      >
        notes.jasoncameron.dev
      </div>
      <div
        style={{
          width: "100%",
          height: "2px",
          background: "#45475a", // Mocha Surface 1
          marginBottom: "20px",
        }}
      />
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "16px",
          width: "100%",
        }}
      >
        {[...Array(3)].map((_, i) => (
          <div
            key={i}
            style={{
              width: "100%",
              height: "24px",
              background: "#45475a", // Mocha Surface 1
              borderRadius: "4px",
            }}
          />
        ))}
      </div><p style={{color: "white", whiteSpace: "pre-line"}}>Hey, I'm Jason Cameron and these are my personal notes.  Feel free to peek into my brain!</p> 
      <div
        style={{
          position: "absolute",
          bottom: "40px",
          right: "60px",
          display: "flex",
          alignItems: "center",
          gap: "12px",
        }}
      >
        <div
          style={{
            width: "32px",
            height: "32px",
            borderRadius: "50%",
            background: "#89b4fa", // Mocha Blue
          }}
        />
        <div
          style={{
            fontSize: "24px",
            color: "#a6adc8", // Mocha Subtext 0
          }}
        >
          Jason Cameron
        </div>
      </div>
    </div>
  </div>