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 && (