Skip to content

Commit e3c18e0

Browse files
PramithaMJPramithaMJ
committed
feat: Introduce SVG icons for section titles and warnings in GC and Threads theory pages, and refine the footer copyright text.
1 parent ddbe36e commit e3c18e0

File tree

3 files changed

+22
-22
lines changed

3 files changed

+22
-22
lines changed

‎src/components/Layout/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export function Footer() {
9797
))}
9898
</div>
9999
<p className={styles.copyright}>
100-
© {new Date().getFullYear()} Pramitha Jayasooriya. Built with React & TypeScript.
100+
© {new Date().getFullYear()} Pramitha Jayasooriya.
101101
</p>
102102
</div>
103103
</footer>

‎src/features/gc/GCTheory.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function GCTheory() {
1919

2020
{/* Generational Hypothesis */}
2121
<section className={styles.section}>
22-
<h2 className={styles.sectionTitle}>🧬 Generational Hypothesis</h2>
22+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg> Generational Hypothesis</h2>
2323
<div className={styles.conceptCard}>
2424
<p className={styles.lead}>
2525
<strong>"Most objects die young."</strong> This empirical observation forms the
@@ -45,7 +45,7 @@ export function GCTheory() {
4545

4646
{/* Heap Structure */}
4747
<section className={styles.section}>
48-
<h2 className={styles.sectionTitle}>🗃️ Heap Structure</h2>
48+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9" /></svg> Heap Structure</h2>
4949
<div className={styles.heapDiagram}>
5050
<div className={styles.heapRegion} style={{ backgroundColor: 'rgba(134, 239, 172, 0.2)', borderColor: '#86efac' }}>
5151
<h4>Young Generation</h4>
@@ -80,7 +80,7 @@ export function GCTheory() {
8080

8181
{/* GC Types */}
8282
<section className={styles.section}>
83-
<h2 className={styles.sectionTitle}>⚡ GC Event Types</h2>
83+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /></svg> GC Event Types</h2>
8484
<div className={styles.gcTypesGrid}>
8585
<div className={styles.gcType}>
8686
<h4 style={{ color: '#86efac' }}>Minor GC (Young GC)</h4>
@@ -117,7 +117,7 @@ export function GCTheory() {
117117

118118
{/* Card Table */}
119119
<section className={styles.section}>
120-
<h2 className={styles.sectionTitle}>🃏 Card Table & Write Barriers</h2>
120+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M3 15h18M9 3v18M15 3v18" /></svg> Card Table & Write Barriers</h2>
121121
<div className={styles.conceptCard}>
122122
<p className={styles.lead}>
123123
How does Minor GC know if Old Gen objects point to Young Gen objects
@@ -151,7 +151,7 @@ export function GCTheory() {
151151

152152
{/* GC Algorithms */}
153153
<section className={styles.section}>
154-
<h2 className={styles.sectionTitle}>🔧 GC Algorithms Comparison</h2>
154+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg> GC Algorithms Comparison</h2>
155155
<div className={styles.algorithmTable}>
156156
<div className={styles.algHeader}>
157157
<span>Algorithm</span>
@@ -194,7 +194,7 @@ export function GCTheory() {
194194

195195
{/* G1 Deep Dive */}
196196
<section className={styles.section}>
197-
<h2 className={styles.sectionTitle}>🎯 G1 GC Deep Dive</h2>
197+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg> G1 GC Deep Dive</h2>
198198
<div className={styles.conceptCard}>
199199
<p className={styles.lead}>
200200
G1 (Garbage First) divides the heap into equal-sized regions (~2048 regions by default).
@@ -222,7 +222,7 @@ export function GCTheory() {
222222

223223
{/* JVM Flags */}
224224
<section className={styles.section}>
225-
<h2 className={styles.sectionTitle}>🚩 Essential JVM Flags</h2>
225+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" /></svg> Essential JVM Flags</h2>
226226
<div className={styles.flagsGrid}>
227227
<div className={styles.flagCategory}>
228228
<h4>Heap Sizing</h4>
@@ -266,26 +266,26 @@ export function GCTheory() {
266266

267267
{/* Memory Leak Detection */}
268268
<section className={styles.section}>
269-
<h2 className={styles.sectionTitle}>🔍 Memory Leak Detection</h2>
269+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" /></svg> Memory Leak Detection</h2>
270270
<div className={styles.conceptCard}>
271271
<h4>Signs of Memory Leaks</h4>
272272
<div className={styles.signsList}>
273273
<div className={styles.sign}>
274-
<span className={styles.signIcon}>⚠️</span>
274+
<span className={styles.signIcon}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="24" height="24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg></span>
275275
<div>
276276
<strong>Growing Old Gen</strong>
277277
<p>Old Gen keeps growing despite Full GCs</p>
278278
</div>
279279
</div>
280280
<div className={styles.sign}>
281-
<span className={styles.signIcon}>⏰</span>
281+
<span className={styles.signIcon}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="24" height="24"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg></span>
282282
<div>
283283
<strong>Frequent Full GCs</strong>
284284
<p>More than 1-2 Full GCs per hour is suspicious</p>
285285
</div>
286286
</div>
287287
<div className={styles.sign}>
288-
<span className={styles.signIcon}>💥</span>
288+
<span className={styles.signIcon}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="24" height="24"><circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" /></svg></span>
289289
<div>
290290
<strong>OutOfMemoryError</strong>
291291
<p>The ultimate symptom - heap exhausted</p>
@@ -308,7 +308,7 @@ jmap -dump:live,format=b,file=heap.hprof <pid>
308308

309309
{/* Production Tips */}
310310
<section className={styles.section}>
311-
<h2 className={styles.sectionTitle}>🎯 Production Best Practices</h2>
311+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg> Production Best Practices</h2>
312312
<div className={styles.tipsGrid}>
313313
<div className={styles.tip}>
314314
<span className={styles.tipIcon}>1</span>

‎src/features/threads/ThreadsTheory.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function ThreadsTheory() {
2020

2121
{/* Thread Types */}
2222
<section className={styles.section}>
23-
<h2 className={styles.sectionTitle}>👤 User Threads vs Daemon Threads</h2>
23+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg> User Threads vs Daemon Threads</h2>
2424
<div className={styles.comparisonGrid}>
2525
<div className={styles.comparisonCard}>
2626
<h3 style={{ color: '#86efac' }}>User Threads</h3>
@@ -60,14 +60,14 @@ daemon.start();
6060
</div>
6161
</div>
6262
<div className={styles.warningBox}>
63-
<strong>⚠️ Critical:</strong> Daemon threads are abruptly terminated when JVM exits.
63+
<strong><svg className={styles.inlineIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ display: 'inline', width: '16px', height: '16px', verticalAlign: 'middle' }}><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg> Critical:</strong> Daemon threads are abruptly terminated when JVM exits.
6464
Never use daemon threads for tasks that must complete (file writes, DB transactions).
6565
</div>
6666
</section>
6767

6868
{/* Thread Lifecycle */}
6969
<section className={styles.section}>
70-
<h2 className={styles.sectionTitle}>🔄 Thread Lifecycle & States</h2>
70+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M23 4v6h-6M1 20v-6h6" /><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" /></svg> Thread Lifecycle & States</h2>
7171
<div className={styles.statesDiagram}>
7272
<div className={styles.stateBox} style={{ borderColor: '#86efac' }}>
7373
<span className={styles.stateName}>NEW</span>
@@ -103,7 +103,7 @@ daemon.start();
103103

104104
{/* Object Monitors */}
105105
<section className={styles.section}>
106-
<h2 className={styles.sectionTitle}>🔒 Object Monitors (Intrinsic Locks)</h2>
106+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg> Object Monitors (Intrinsic Locks)</h2>
107107
<div className={styles.conceptCard}>
108108
<p className={styles.lead}>
109109
Every Java object has an associated <strong>monitor</strong> (intrinsic lock).
@@ -145,7 +145,7 @@ daemon.start();
145145

146146
{/* Lock Optimizations */}
147147
<section className={styles.section}>
148-
<h2 className={styles.sectionTitle}>⚡ JVM Lock Optimizations</h2>
148+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /></svg> JVM Lock Optimizations</h2>
149149
<div className={styles.optimizationsGrid}>
150150
<div className={styles.optCard}>
151151
<h4>Biased Locking</h4>
@@ -175,7 +175,7 @@ daemon.start();
175175

176176
{/* java.util.concurrent */}
177177
<section className={styles.section}>
178-
<h2 className={styles.sectionTitle}>📦 java.util.concurrent Deep Dive</h2>
178+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /></svg> java.util.concurrent Deep Dive</h2>
179179
<div className={styles.jucGrid}>
180180
<div className={styles.jucCategory}>
181181
<h4>Executors Framework</h4>
@@ -228,7 +228,7 @@ if (lock.tryLock(100, TimeUnit.MILLISECONDS)) {
228228

229229
{/* CompletableFuture */}
230230
<section className={styles.section}>
231-
<h2 className={styles.sectionTitle}>🚀 CompletableFuture Patterns</h2>
231+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" /></svg> CompletableFuture Patterns</h2>
232232
<div className={styles.conceptCard}>
233233
<p className={styles.lead}>
234234
CompletableFuture enables non-blocking, functional-style async programming.
@@ -255,7 +255,7 @@ CompletableFuture.anyOf(primary, backup)
255255

256256
{/* Deadlock */}
257257
<section className={styles.section}>
258-
<h2 className={styles.sectionTitle}>💀 Deadlock Detection & Prevention</h2>
258+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" /></svg> Deadlock Detection & Prevention</h2>
259259
<div className={styles.conceptCard}>
260260
<h4>Deadlock Conditions (All 4 must be present)</h4>
261261
<div className={styles.deadlockConditions}>
@@ -309,7 +309,7 @@ Java stack information for the threads listed above:
309309

310310
{/* Best Practices */}
311311
<section className={styles.section}>
312-
<h2 className={styles.sectionTitle}>🎯 Production Best Practices</h2>
312+
<h2 className={styles.sectionTitle}><svg className={styles.sectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg> Production Best Practices</h2>
313313
<div className={styles.tipsGrid}>
314314
<div className={styles.tip}>
315315
<span className={styles.tipIcon}>1</span>

0 commit comments

Comments
 (0)