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.
2026-07-24 10:23:51 -04:00
parent f03d448303
commit d950092772
18 changed files with 115 additions and 9 deletions
@@ -4,12 +4,39 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#0a0a0b" />
-    <meta name="description" content="jmartgraphix — Creative professional portfolio: 3D, CAD, animation, design." />
+    <meta
      name="description"
      content="jmartgraphix — Creative professional portfolio: 3D, CAD, animation, design."
    />
    <meta property="og:site_name" content="jmartgraphix" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="jmartgraphix" />
    <meta
      property="og:description"
      content="Creative professional portfolio — 3D modeling, CAD, animation, and visual design."
    />
    <meta property="og:image" content="https://jmartgraphix.com/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="https://jmartgraphix.com/" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="jmartgraphix" />
    <meta
      name="twitter:description"
      content="Creative professional portfolio — 3D modeling, CAD, animation, and visual design."
    />
    <meta name="twitter:image" content="https://jmartgraphix.com/twitter-card.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
+    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap"
      rel="stylesheet"
    />
    <title>jmartgraphix</title>
  </head>
  <body>
@@ -0,0 +1,21 @@
 {
  "name": "jmartgraphix",
  "short_name": "jmartgraphix",
  "description": "Creative professional portfolio — 3D, CAD, animation, design",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0a0a0b",
  "theme_color": "#0a0a0b",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
 }
@@ -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;
@@ -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>
+            <img
-            <span>{name}</span>
+              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,10 +80,13 @@ export function Layout() {
      </main>
      <footer className="site-footer">
        <div className="container site-footer__inner">
          <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 && (
              <a href={site.social.youtube} target="_blank" rel="noreferrer">
@@ -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;
@@ -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>
@@ -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]);