Add jmartgraphix logo, favicons, and social share image

Place brand mark in header, footer, and hero; ship PNG favicons,
apple-touch icon, PWA manifest, and 1200×630 Open Graph card.

client/src/components/Layout.scss

@@ -19,12 +19,27 @@
   &__logo {
     display: inline-flex;
     align-items: center;
-    gap: 0.55rem;
+    gap: 0.65rem;
     font-weight: 600;
     letter-spacing: -0.02em;
     font-size: 1.05rem;
   }
 
+  &__logo-img {
+    width: 36px;
+    height: 36px;
+    object-fit: contain;
+    border-radius: 6px;
+    flex-shrink: 0;
+    background: #000;
+  }
+
+  &__logo-text {
+    @media (max-width: 420px) {
+      // logo mark is enough on very small screens
+    }
+  }
+
   &__mark {
     color: var(--accent);
     font-size: 0.85rem;
@@ -133,6 +148,21 @@
     }
   }
 
+  &__brand {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+
+    img {
+      width: 40px;
+      height: 40px;
+      object-fit: contain;
+      border-radius: 8px;
+      background: #000;
+      flex-shrink: 0;
+    }
+  }
+
   &__links {
     display: flex;
     flex-wrap: wrap;

client/src/components/Layout.tsx

@@ -36,8 +36,15 @@ export function Layout() {
       <header className="site-header">
         <div className="container site-header__inner">
           <Link to="/" className="site-header__logo" aria-label={`${name} home`}>
-            <span className="site-header__mark">◆</span>
-            <span>{name}</span>
+            <img
+              src="/logo.png"
+              alt=""
+              className="site-header__logo-img"
+              width={36}
+              height={36}
+              decoding="async"
+            />
+            <span className="site-header__logo-text">{name}</span>
           </Link>
           <button
             className="site-header__burger"
@@ -73,9 +80,12 @@ export function Layout() {
       </main>
       <footer className="site-footer">
         <div className="container site-footer__inner">
-          <div>
-            <strong>{name}</strong>
-            <p>{site?.tagline || "Creative professional portfolio"}</p>
+          <div className="site-footer__brand">
+            <img src="/logo.png" alt="" width={40} height={40} decoding="async" />
+            <div>
+              <strong>{name}</strong>
+              <p>{site?.tagline || "Creative professional portfolio"}</p>
+            </div>
           </div>
           <div className="site-footer__links">
             {site?.social?.youtube && (

client/src/pages/HomePage.scss

@@ -24,6 +24,16 @@
     letter-spacing: -0.03em;
   }
 
+  &__logo {
+    width: 96px;
+    height: 96px;
+    object-fit: contain;
+    border-radius: 16px;
+    background: #000;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+  }
+
   &__eyebrow {
     text-transform: uppercase;
     letter-spacing: 0.18em;

client/src/pages/HomePage.tsx

@@ -31,6 +31,14 @@ export function HomePage() {
     <div className="home page-enter">
       <section className="home-hero">
         <div className="container">
+          <img
+            src="/logo.png"
+            alt="jmartgraphix"
+            className="home-hero__logo"
+            width={96}
+            height={96}
+            decoding="async"
+          />
           <p className="home-hero__eyebrow">Portfolio</p>
           <h1>
             <span className="home-hero__serif">{heroTitle}</span>

client/src/pages/ProjectPage.tsx

@@ -31,7 +31,7 @@ export function ProjectPage() {
         setMeta("og:title", p.title);
         setMeta("og:description", p.shortDescription || p.description.slice(0, 160));
         const img = p.thumbnail?.url || p.media?.find((m) => m.type === "image")?.url;
-        if (img) setMeta("og:image", mediaSrc(img));
+        setMeta("og:image", img ? mediaSrc(img) : `${window.location.origin}/og-image.png`);
       })
       .catch((e) => setError(e.message));
   }, [slug]);