feat: use the new logo on the site and tabulate the README tool list

- Header and sidebar mark is now a theme-aware inline version of
  logo.svg (chevron and underscore instead of the text glyph)
- Social preview image regenerated with the new mark and tagline
- README: tools listed as per-category tables with direct links

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NcKG1mENi1jtDWKMEhwmBc

Author: mingrammer

README.md

@@ -24,73 +24,91 @@ No sign-up, no uploads, nothing leaves your machine: every converter, generator,
 
 ## Available Tools
 
+44 tools across eight categories. Every link opens the tool directly.
+
 ### 📊 Data Format
 
-- **JSON Formatter/Validator** - Format, validate, and beautify JSON with syntax error detection
-- **JSON to CSV Converter** - Transform JSON data into CSV format for spreadsheets
-- **CSV to JSON Converter** - Convert CSV data into structured JSON objects
-- **YAML to JSON Converter** - Transform YAML configuration files to JSON
-- **JSON to YAML Converter** - Convert JSON into human-readable YAML format
-- **XML ↔ JSON Converter** - Convert XML documents to JSON and back, attributes included
-- **TOML ↔ JSON Converter** - Convert pyproject/Cargo-style TOML to JSON and back
-- **CSV to YAML Converter** - Transform tabular CSV data into YAML structure
-- **YAML to CSV Converter** - Convert YAML data into CSV for data analysis
-- **Locale Converter** - Convert between language codes (ISO 639) and country codes (ISO 3166)
-- **Number Formatter** - Format numbers with currency, percentage, and thousands separators
+| Tool | What it does |
+|---|---|
+| [JSON Formatter/Validator](https://devtoolkit.mingrammer.com/#/tools/jsonformatter) | Format, validate, and beautify JSON with syntax error detection |
+| [JSON to CSV Converter](https://devtoolkit.mingrammer.com/#/tools/jsontocsv) | Transform JSON data into CSV format for spreadsheets |
+| [CSV to JSON Converter](https://devtoolkit.mingrammer.com/#/tools/csvtojson) | Convert CSV data into structured JSON objects |
+| [YAML to JSON Converter](https://devtoolkit.mingrammer.com/#/tools/yamltojson) | Transform YAML configuration files to JSON |
+| [JSON to YAML Converter](https://devtoolkit.mingrammer.com/#/tools/jsontoyaml) | Convert JSON into human-readable YAML format |
+| [XML ↔ JSON Converter](https://devtoolkit.mingrammer.com/#/tools/xmljson) | Convert XML documents to JSON and back, attributes included |
+| [TOML ↔ JSON Converter](https://devtoolkit.mingrammer.com/#/tools/tomljson) | Convert pyproject/Cargo-style TOML to JSON and back |
+| [CSV to YAML Converter](https://devtoolkit.mingrammer.com/#/tools/csvtoyaml) | Transform tabular CSV data into YAML structure |
+| [YAML to CSV Converter](https://devtoolkit.mingrammer.com/#/tools/yamltocsv) | Convert YAML data into CSV for data analysis |
+| [Locale Converter](https://devtoolkit.mingrammer.com/#/tools/localeconverter) | Convert between language codes (ISO 639) and country codes (ISO 3166) |
+| [Number Formatter](https://devtoolkit.mingrammer.com/#/tools/numberformatter) | Format numbers with currency, percentage, and thousands separators |
 
 ### 🔐 Encoding & Hashing
 
-- **Base64 Converter** - Encode and decode Base64 strings with toggle modes
-- **Image ↔ Base64** - Turn images into data URLs for inline HTML/CSS, or decode Base64 back to an image
-- **Hash Generator** - Generate MD5, SHA1, SHA256, SHA512, and other hash types
-- **HMAC Generator** - Keyed SHA-1/256/384/512 signatures for webhooks and API signing
-- **Number Converter** - Convert numbers between binary, decimal, hexadecimal, and octal
+| Tool | What it does |
+|---|---|
+| [Base64 Converter](https://devtoolkit.mingrammer.com/#/tools/base64converter) | Encode and decode Base64 strings with toggle modes |
+| [Image ↔ Base64](https://devtoolkit.mingrammer.com/#/tools/imagetobase64) | Turn images into data URLs for inline HTML/CSS, or decode Base64 back to an image |
+| [Hash Generator](https://devtoolkit.mingrammer.com/#/tools/hashgenerator) | Generate MD5, SHA1, SHA256, SHA512, and other hash types |
+| [HMAC Generator](https://devtoolkit.mingrammer.com/#/tools/hmacgenerator) | Keyed SHA-1/256/384/512 signatures for webhooks and API signing |
+| [Number Converter](https://devtoolkit.mingrammer.com/#/tools/numberconverter) | Convert numbers between binary, decimal, hexadecimal, and octal |
 
 ### ✨ Generators
 
-- **UUID Generator** - Generate secure UUIDs (v4, v5) with namespace support
-- **Password Generator** - Create strong, secure passwords with customizable options
-- **Lorem Ipsum Generator** - Create placeholder text in words, sentences, or paragraphs
-- **QR Code Generator** - Create QR codes for text, URLs, and other data with customizable sizes
+| Tool | What it does |
+|---|---|
+| [UUID Generator](https://devtoolkit.mingrammer.com/#/tools/uuidgenerator) | Generate secure UUIDs (v4, v5) with namespace support |
+| [Password Generator](https://devtoolkit.mingrammer.com/#/tools/passwordgenerator) | Create strong, secure passwords with customizable options |
+| [Lorem Ipsum Generator](https://devtoolkit.mingrammer.com/#/tools/loremipsum) | Create placeholder text in words, sentences, or paragraphs |
+| [QR Code Generator](https://devtoolkit.mingrammer.com/#/tools/qrgenerator) | Create QR codes for text, URLs, and other data with customizable sizes |
 
 ### 🌐 Web
 
-- **JWT Decoder** - Decode header and payload, check expiry, verify HS256/384/512 signatures
-- **URL Parser** - Break a URL into parts and edit query parameters in a table
-- **Color Converter** - HEX, RGB, HSL, HSB, CMYK, tints/shades, and a WCAG contrast checker
-- **HTTP Status Codes** - Searchable reference for every response code with MDN links
-- **MIME Types** - Look up MIME types by extension or content type
+| Tool | What it does |
+|---|---|
+| [JWT Decoder](https://devtoolkit.mingrammer.com/#/tools/jwtdecoder) | Decode header and payload, check expiry, verify HS256/384/512 signatures |
+| [URL Parser](https://devtoolkit.mingrammer.com/#/tools/urlparser) | Break a URL into parts and edit query parameters in a table |
+| [Color Converter](https://devtoolkit.mingrammer.com/#/tools/colorconverter) | HEX, RGB, HSL, HSB, CMYK, tints/shades, and a WCAG contrast checker |
+| [HTTP Status Codes](https://devtoolkit.mingrammer.com/#/tools/httpstatuscodes) | Searchable reference for every response code with MDN links |
+| [MIME Types](https://devtoolkit.mingrammer.com/#/tools/mimetypes) | Look up MIME types by extension or content type |
 
 ### 🧑‍💻 Code
 
-- **JSON to Types** - Generate TypeScript, Go, Kotlin, Python, or Rust types from JSON
-- **SQL Formatter** - Dialect-aware SQL beautifier and minifier
-- **curl to Code** - Convert curl commands into fetch, axios, requests, Go, PHP, or Ruby
-- **Regex Tester** - Test regular expressions with real-time matching and highlighting
-- **Markdown Viewer** - Preview markdown with syntax highlighting for code blocks
+| Tool | What it does |
+|---|---|
+| [JSON to Types](https://devtoolkit.mingrammer.com/#/tools/jsontotypes) | Generate TypeScript, Go, Kotlin, Python, or Rust types from JSON |
+| [SQL Formatter](https://devtoolkit.mingrammer.com/#/tools/sqlformatter) | Dialect-aware SQL beautifier and minifier |
+| [curl to Code](https://devtoolkit.mingrammer.com/#/tools/curlconverter) | Convert curl commands into fetch, axios, requests, Go, PHP, or Ruby |
+| [Regex Tester](https://devtoolkit.mingrammer.com/#/tools/regextester) | Test regular expressions with real-time matching and highlighting |
+| [Markdown Viewer](https://devtoolkit.mingrammer.com/#/tools/markdownviewer) | Preview markdown with syntax highlighting for code blocks |
 
 ### 📝 Text
 
-- **Case Converter** - Transform text between camelCase, snake_case, UPPERCASE, lowercase, and more
-- **Text Diff** - Compare two texts and highlight differences side by side
-- **Line Tools** - Sort, dedupe, trim, number, prefix, join and split lines
-- **Escape/Unescape Tool** - Encode and decode HTML, URL, and JSON strings
-- **Text to Slug** - Convert text into SEO-friendly URL slugs
-- **Word Counter** - Count words, characters, sentences, paragraphs, and estimate reading time
-- **Unicode Inspector** - Code points, UTF-8 bytes, hidden-character detection and normalization
+| Tool | What it does |
+|---|---|
+| [Case Converter](https://devtoolkit.mingrammer.com/#/tools/caseconverter) | Transform text between camelCase, snake_case, UPPERCASE, lowercase, and more |
+| [Text Diff](https://devtoolkit.mingrammer.com/#/tools/textdiff) | Compare two texts and highlight differences side by side |
+| [Line Tools](https://devtoolkit.mingrammer.com/#/tools/linetools) | Sort, dedupe, trim, number, prefix, join and split lines |
+| [Escape/Unescape Tool](https://devtoolkit.mingrammer.com/#/tools/escape) | Encode and decode HTML, URL, and JSON strings |
+| [Text to Slug](https://devtoolkit.mingrammer.com/#/tools/texttoslug) | Convert text into SEO-friendly URL slugs |
+| [Word Counter](https://devtoolkit.mingrammer.com/#/tools/wordcounter) | Count words, characters, sentences, paragraphs, and estimate reading time |
+| [Unicode Inspector](https://devtoolkit.mingrammer.com/#/tools/unicodeinspector) | Code points, UTF-8 bytes, hidden-character detection and normalization |
 
 ### ⏰ Time & Date
 
-- **Unix Timestamp Converter** - Convert between Unix timestamps and human-readable dates
-- **Timezone Converter** - Convert times between different timezones
-- **Date Calculator** - Days between dates, add/subtract time, ISO 8601 durations
-- **Cron Generator** - Create and validate cron expressions with human-readable descriptions
+| Tool | What it does |
+|---|---|
+| [Unix Timestamp Converter](https://devtoolkit.mingrammer.com/#/tools/unixtimeconverter) | Convert between Unix timestamps and human-readable dates |
+| [Timezone Converter](https://devtoolkit.mingrammer.com/#/tools/timezoneconverter) | Convert times between different timezones |
+| [Date Calculator](https://devtoolkit.mingrammer.com/#/tools/datecalculator) | Days between dates, add/subtract time, ISO 8601 durations |
+| [Cron Generator](https://devtoolkit.mingrammer.com/#/tools/crongenerator) | Create and validate cron expressions with human-readable descriptions |
 
 ### 🖥️ System & Network
 
-- **CIDR Calculator** - Calculate network ranges, subnets, and IP address information
-- **Chmod Calculator** - Unix permissions in octal and symbolic form with presets
-- **Byte Converter** - Bits, bytes, KB/MB/GB vs KiB/MiB/GiB, and transfer-time estimates
+| Tool | What it does |
+|---|---|
+| [CIDR Calculator](https://devtoolkit.mingrammer.com/#/tools/cidrcalculator) | Calculate network ranges, subnets, and IP address information |
+| [Chmod Calculator](https://devtoolkit.mingrammer.com/#/tools/chmodcalculator) | Unix permissions in octal and symbolic form with presets |
+| [Byte Converter](https://devtoolkit.mingrammer.com/#/tools/byteconverter) | Bits, bytes, KB/MB/GB vs KiB/MiB/GiB, and transfer-time estimates |
 
 ## Getting Started
 

public/og-image.png

@@ -7,6 +7,28 @@ interface LogoProps {
   showWordmark?: boolean;
 }
 
+/** The brand mark: theme-aware inline version of public/logo.svg. */
+export function LogoMark({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      aria-hidden
+      className={cn('h-7 w-7 shrink-0', className)}
+    >
+      <rect width="512" height="512" rx="112" className="fill-foreground" />
+      <path
+        d="M148 176L244 256L148 336"
+        className="stroke-background"
+        strokeWidth="44"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <rect x="272" y="316" width="120" height="34" rx="17" className="fill-brand" />
+    </svg>
+  );
+}
+
 export function Logo({ className, showWordmark = true }: LogoProps) {
   const { t } = useLanguage();
   return (
@@ -18,9 +40,7 @@ export function Logo({ className, showWordmark = true }: LogoProps) {
         className,
       )}
     >
-      <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-foreground font-mono text-[11px] font-semibold leading-none text-background transition-transform duration-300 group-hover:-rotate-6">
-        {'>_'}
-      </span>
+      <LogoMark className="transition-transform duration-300 group-hover:-rotate-6" />
       {showWordmark && (
         <span className="truncate text-[15px] font-semibold tracking-tight text-foreground">
           {t('devToolkit')}