Skip to content

Commit c16db32

Browse files
arjun7965claude
arjun7965
and
claude
authored
perf: replace Font Awesome with inline SVGs, add og-image and sitemap (#17)
- Remove Font Awesome CSS dependency (~75KB), use inline SVG icons instead - Update theme.js to swap SVG paths instead of FA class names - Add dedicated 1200x630 og-image.png for social share previews - Update og:image and twitter:image meta tags across all pages - Add sitemap.xml for search engine indexing Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent de87f39 commit c16db32

7 files changed

Lines changed: 75 additions & 46 deletions

File tree

‎404.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
1010
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
1111
<link rel="icon" href="images/favicon.ico">
12-
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin="anonymous">
13-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
1412
<link rel="stylesheet" href="css/styles.css">
1513
<style>
1614
.error-container {
@@ -57,7 +55,7 @@
5755
<div class="header-right">
5856
<div class="menu-wrapper">
5957
<button class="menu-button" type="button" aria-label="Menu" aria-haspopup="true" aria-expanded="false" aria-controls="menu-dropdown">
60-
<i class="fas fa-bars"></i>
58+
<svg class="icon" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z"/></svg>
6159
</button>
6260
<nav class="menu-dropdown" id="menu-dropdown" role="navigation" aria-label="Primary Navigation">
6361
<a href="/">Home</a>
@@ -67,7 +65,7 @@
6765
<div class="theme-toggle-wrapper">
6866
<button class="theme-toggle" aria-label="Toggle theme" role="switch" aria-checked="false">
6967
<div class="theme-toggle-slider">
70-
<i class="fas fa-moon"></i>
68+
<svg class="icon icon-moon" viewBox="0 0 384 512" aria-hidden="true"><path fill="currentColor" d="M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
7169
</div>
7270
</button>
7371
</div>
@@ -89,13 +87,13 @@
8987
<div class="footer-right">
9088
<div class="footer-links">
9189
<a href="https://twitter.com/arjun7965" target="_blank" rel="noopener noreferrer" title="X (Twitter)" aria-label="X (Twitter)">
92-
<i class="fab fa-x-twitter"></i><span class="footer-link-label">X</span>
90+
<svg class="icon" viewBox="0 0 512 512" aria-hidden="true"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9L389.2 48zm-24.8 373.8h39.1L151.1 88h-42L364.4 421.8z"/></svg><span class="footer-link-label">X</span>
9391
</a>
9492
<a href="https://linkedin.com/in/avinod" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn">
95-
<i class="fab fa-linkedin"></i><span class="footer-link-label">LinkedIn</span>
93+
<svg class="icon" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg><span class="footer-link-label">LinkedIn</span>
9694
</a>
9795
<a href="https://github.com/arjun7965" target="_blank" rel="noopener noreferrer" title="GitHub" aria-label="GitHub">
98-
<i class="fab fa-github"></i><span class="footer-link-label">GitHub</span>
96+
<svg class="icon" viewBox="0 0 496 512" aria-hidden="true"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8z"/></svg><span class="footer-link-label">GitHub</span>
9997
</a>
10098
</div>
10199
<div class="footer-email">

‎books.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,17 @@
1111
<meta property="og:description" content="A collection of books exploring macroeconomics, financial systems, and monetary history.">
1212
<meta property="og:type" content="website">
1313
<meta property="og:url" content="https://arjunvinod.com/books.html">
14-
<meta property="og:image" content="https://arjunvinod.com/images/apple-touch-icon.png">
14+
<meta property="og:image" content="https://arjunvinod.com/images/og-image.png">
1515
<meta name="twitter:card" content="summary">
1616
<meta name="twitter:title" content="Books | Arjun Vinod">
1717
<meta name="twitter:description" content="A collection of books exploring macroeconomics, financial systems, and monetary history.">
18-
<meta name="twitter:image" content="https://arjunvinod.com/images/apple-touch-icon.png">
19-
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin="anonymous">
18+
<meta name="twitter:image" content="https://arjunvinod.com/images/og-image.png">
2019
<link rel="preconnect" href="https://covers.openlibrary.org" crossorigin="anonymous">
2120
<link rel="manifest" href="/site.webmanifest">
2221
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
2322
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
2423
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
2524
<link rel="icon" href="images/favicon.ico">
26-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
2725
<link rel="stylesheet" href="css/styles.css">
2826
<style>
2927
/* Books-specific: h1/h2 and copyright alignment */
@@ -82,7 +80,7 @@
8280
<div class="header-right">
8381
<div class="menu-wrapper">
8482
<button class="menu-button" type="button" aria-label="Menu" aria-haspopup="true" aria-expanded="false" aria-controls="menu-dropdown">
85-
<i class="fas fa-bars"></i>
83+
<svg class="icon" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z"/></svg>
8684
</button>
8785
<nav class="menu-dropdown" id="menu-dropdown" role="navigation" aria-label="Primary Navigation">
8886
<a href="/">Home</a>
@@ -92,7 +90,7 @@
9290
<div class="theme-toggle-wrapper">
9391
<button class="theme-toggle" aria-label="Toggle theme" role="switch" aria-checked="false">
9492
<div class="theme-toggle-slider">
95-
<i class="fas fa-moon"></i>
93+
<svg class="icon icon-moon" viewBox="0 0 384 512" aria-hidden="true"><path fill="currentColor" d="M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
9694
</div>
9795
</button>
9896
</div>
@@ -228,13 +226,13 @@ <h3 class="book-title">The Deficit Myth: Modern Monetary Theory and the Birth of
228226
<div class="footer-right">
229227
<div class="footer-links">
230228
<a href="https://twitter.com/arjun7965" target="_blank" rel="noopener noreferrer" title="X (Twitter)" aria-label="X (Twitter)">
231-
<i class="fab fa-x-twitter"></i><span class="footer-link-label">X</span>
229+
<svg class="icon" viewBox="0 0 512 512" aria-hidden="true"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9L389.2 48zm-24.8 373.8h39.1L151.1 88h-42L364.4 421.8z"/></svg><span class="footer-link-label">X</span>
232230
</a>
233231
<a href="https://linkedin.com/in/avinod" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn">
234-
<i class="fab fa-linkedin"></i><span class="footer-link-label">LinkedIn</span>
232+
<svg class="icon" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg><span class="footer-link-label">LinkedIn</span>
235233
</a>
236234
<a href="https://github.com/arjun7965" target="_blank" rel="noopener noreferrer" title="GitHub" aria-label="GitHub">
237-
<i class="fab fa-github"></i><span class="footer-link-label">GitHub</span>
235+
<svg class="icon" viewBox="0 0 496 512" aria-hidden="true"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8z"/></svg><span class="footer-link-label">GitHub</span>
238236
</a>
239237
</div>
240238
<div class="footer-email">

‎css/styles.css‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,17 @@
2525
--border-color: #334155;
2626
--link-color: #2dd4bf;
2727
}
28+
/* Inline SVG Icons */
29+
.icon {
30+
width: 1em;
31+
height: 1em;
32+
display: inline-block;
33+
vertical-align: -0.125em;
34+
fill: currentColor;
35+
}
36+
.lane-title .icon { width: 1rem; height: 1rem; }
37+
.theme-toggle-slider .icon { width: 0.75rem; height: 0.75rem; color: var(--color-primary); transition: color 0.3s ease; }
38+
[data-theme="dark"] .theme-toggle-slider .icon { color: #fbbf24; }
2839
/* Base Layout */
2940
body {
3041
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -188,11 +199,9 @@ nav a:hover { background-color: var(--border-color); }
188199
justify-content: center;
189200
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
190201
}
191-
.theme-toggle-slider i { font-size: 0.75rem; color: var(--color-primary); transition: color 0.3s ease; }
192202
[data-theme="dark"] .theme-toggle { background-color: var(--color-primary); }
193203
[data-theme="dark"] .theme-toggle:hover { background-color: var(--color-accent); }
194204
[data-theme="dark"] .theme-toggle-slider { transform: translateX(24px); }
195-
[data-theme="dark"] .theme-toggle-slider i { color: #fbbf24; }
196205
/* Footer */
197206
footer {
198207
background-color: var(--container-bg);
@@ -362,21 +371,21 @@ footer {
362371
letter-spacing: -0.02em;
363372
color: var(--text-primary);
364373
}
365-
.lane-title i {
374+
.lane-title .icon {
366375
display: flex;
367376
align-items: center;
368377
justify-content: center;
369378
width: 40px;
370379
height: 40px;
380+
padding: 10px;
371381
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
372382
border-radius: 10px;
373383
color: white;
374-
font-size: 1rem;
375384
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
376385
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
377386
}
378387

379-
.lane-title:hover i {
388+
.lane-title:hover .icon {
380389
transform: translateY(-2px);
381390
box-shadow: 0 6px 16px rgba(20, 184, 166, 0.28);
382391
}
@@ -526,6 +535,6 @@ footer {
526535
.roadmap { gap: 2rem; }
527536
.node { padding-left: 2rem; }
528537
.lane-title { font-size: 1.125rem; }
529-
.lane-title i { width: 36px; height: 36px; font-size: 0.875rem; }
538+
.lane-title .icon { width: 36px; height: 36px; padding: 9px; }
530539
.rm-card { padding: 1rem; }
531540
}

‎images/og-image.png‎

231 KB
Loading

0 commit comments

Comments
 (0)