dryaaang.github.io/reading-list.html at main · DrYaaang/dryaaang.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Yang Yang - Reading List</title>

  <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@400;500;600&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet">

  <link rel="icon" type="image/png" href="Images/websiteicon.png">
  <link rel="stylesheet" href="style.css" />
</head>
<body class="readingPage">
  <div class="container">
    <main id="top" class="section">
      <h1>Reading List</h1>
      <div class="hr"></div>

      <section class="readingList">

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1408458884i/18458655.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">Kan Jian (看见)</h2>
              <p class="bookAuthor">Jing Chai</p>
            </div>
          </summary>
          <p>Chai Jing’s Insight is a deeply human read that reminded me how powerful honest observation can be—and it pushed me to look at society (and myself) with more empathy and courage.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1586146994i/52849406.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">Wuhan Diary: Dispatches from a Quarantined City</h2>
              <p class="bookAuthor">Fang Fang</p>
            </div>
          </summary>
          <p>Wuhan Diary is a quiet yet piercing record of life under lockdown that reminded me how truth, dignity, and small acts of care matter most in a crisis.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://covers.openlibrary.org/b/id/15176469-L.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">法制的细节</h2>
              <p class="bookAuthor">Xiang Luo</p>
            </div>
          </summary>
          <p>It made me realize that justice is built through countless small procedures and boundaries—and it pushed me to value due process as much as outcomes.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1728661771i/25489025.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">The Vegetarian (素食者)</h2>
              <p class="bookAuthor">Han Kang</p>
            </div>
          </summary>
          <p>It is an unsettling, poetic story that made me reflect on autonomy and silence—and how refusing to conform can become both a rebellion and a tragedy.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1253724411i/6902548.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">Big River, Big Sea — Untold Stories of 1949 (大江大海一九四九)</h2>
              <p class="bookAuthor">Ying-tai Lung</p>
            </div>
          </summary>
          <p>Ying-tai Lung reframed history for me as a collection of ordinary lives caught in extraordinary upheaval, leaving me with a deeper empathy for those who carried the cost of that era.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1415428227i/20518872.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">The Three-Body Problem (三体)</h2>
              <p class="bookAuthor">Cixin Liu</p>
            </div>
          </summary>
          <p>The Three-Body Problem expanded my imagination about civilization and survival, and it left me thinking that the most terrifying distance in the universe is often the gap in trust between intelligent beings.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1347625476i/166362.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">The Crescent Moon</h2>
              <p class="bookAuthor">Rabindranath Tagore</p>
            </div>
          </summary>
          <p>The Crescent Moon captures a quiet, lyrical longing that made me reflect on how faith, love, and everyday resilience can coexist within uncertainty.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1347260590i/166350.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">Stray Birds</h2>
              <p class="bookAuthor">Rabindranath Tagore</p>
            </div>
          </summary>
          <p>Stray Birds is a collection of tiny, luminous thoughts that reminded me to slow down and notice how the smallest moments can carry the deepest meaning.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://covers.openlibrary.org/b/id/15176546-L.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">Fang Si-Chi's First Love Paradise (房思琪的初恋乐园)</h2>
              <p class="bookAuthor">Yi-han Lin</p>
            </div>
          </summary>
          <p>Fang Si-Chi’s First Love Paradise is a devastating read that forced me to confront how power can distort “love,” and it left me with a lasting commitment to listen, believe, and protect.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://covers.openlibrary.org/b/id/15176544-L.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">North Kanto Serial Kidnappings and Murders (足利女童连续失踪事件)</h2>
              <p class="bookAuthor">Kiyoshi Shimizu</p>
            </div>
          </summary>
          <p>This is a chilling reminder that a society’s safety depends not only on solving crimes, but on protecting the vulnerable and insisting on truth and accountability.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://ia800100.us.archive.org/view_archive.php?archive=/5/items/l_covers_0012/l_covers_0012_94.zip&file=0012942728-L.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">Counselling for Toads: A Psychological Adventure (蛤蟆先生去看心理医生)</h2>
              <p class="bookAuthor">Robert de Board</p>
            </div>
          </summary>
          <p>Counselling for Toads is a warm, accessible introduction to therapy that reminded me healing starts with naming feelings honestly—and that growth often comes from gentle self-understanding rather than self-blame.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1367545443i/157993.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">The Little Prince</h2>
              <p class="bookAuthor">Antoine de Saint-Exupéry</p>
            </div>
          </summary>
          <p>The Little Prince reminded me that what truly matters is often invisible at first glance, and it encouraged me to protect curiosity, tenderness, and responsibility in adult life.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://ia600507.us.archive.org/view_archive.php?archive=/8/items/l_covers_0009/l_covers_0009_27.zip&file=0009273799-L.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">A Thousand Splendid Suns (灿烂千阳)</h2>
              <p class="bookAuthor">Khaled Hosseini</p>
            </div>
          </summary>
          <p>A Thousand Splendid Suns is a heartbreaking yet hopeful story that deepened my empathy for women’s resilience, and it left me believing that love and solidarity can survive even the harshest injustice.</p>
        </details>

        <details class="card expandableCard readingCard">
          <summary class="expandableTitle bookSummary">
            <img class="bookCover" src="https://ia600507.us.archive.org/view_archive.php?archive=/8/items/l_covers_0009/l_covers_0009_24.zip&file=0009248248-L.jpg" alt="Book cover" />
            <div>
              <h2 class="bookTitle">The Kite Runner (追风筝的人)</h2>
              <p class="bookAuthor">Khaled Hosseini</p>
            </div>
          </summary>
          <p>The Kite Runner made me reflect on how guilt and loyalty shape a life, and it reminded me that redemption begins when we choose to face the past with courage and responsibility.</p>
        </details>

      </section>
    </main>

    <footer class="footer">
      <span>© 2026 Yang Yang</span>
    </footer>
  </div>

  <a class="toHomeBtn" href="index.html#home" aria-label="Back to home">←</a>
  <a class="toTopBtn" href="#top" aria-label="Back to top">↑</a>

  <script>
    // Auto-distribute cards into responsive fixed columns, then keep positions stable.
    const distributeReadingCards = () => {
      const list = document.querySelector('.readingList');
      if (!list) return;

      const cards = Array.from(list.querySelectorAll('.readingCard'));
      if (!cards.length) return;

      const viewport = window.innerWidth;
      const columnCount = viewport <= 760 ? 1 : viewport <= 900 ? 2 : viewport <= 1100 ? 3 : 4;
      const columns = Array.from({ length: columnCount }, () => {
        const col = document.createElement('div');
        col.className = 'readingColumn';
        return col;
      });

      list.textContent = '';
      columns.forEach((col) => list.appendChild(col));

      const heights = new Array(columnCount).fill(0);
      cards.forEach((card) => {
        let targetIndex = 0;
        for (let i = 1; i < columnCount; i += 1) {
          if (heights[i] < heights[targetIndex]) targetIndex = i;
        }
        columns[targetIndex].appendChild(card);
        heights[targetIndex] = columns[targetIndex].offsetHeight;
      });
    };

    // Run immediately to avoid initial "one huge card" flash.
    distributeReadingCards();

    let distributeTimer = null;
    window.addEventListener('resize', () => {
      window.clearTimeout(distributeTimer);
      distributeTimer = window.setTimeout(distributeReadingCards, 140);
    });

    // Expandable cards: smooth expand/collapse animation + click-outside-summary collapse.
    document.querySelectorAll('details.expandableCard').forEach((d) => {
      const summary = d.querySelector('summary');
      if (!summary) return;

      let body = d.querySelector('.expandableBody');
      if (!body) {
        body = document.createElement('div');
        body.className = 'expandableBody';
        while (summary.nextSibling) {
          body.appendChild(summary.nextSibling);
        }
        d.appendChild(body);
      }

      const durationMs = 280;
      let isAnimating = false;

      const resetBodyAfterOpen = () => {
        body.style.height = 'auto';
        body.style.overflow = 'visible';
        body.style.opacity = '1';
      };

      const openCard = () => {
        if (isAnimating || d.open) return;
        isAnimating = true;
        d.open = true;
        body.style.transition = 'none';
        body.style.overflow = 'hidden';
        body.style.height = '0px';
        body.style.opacity = '0';
        body.getBoundingClientRect();
        body.style.transition = 'height 280ms ease, opacity 220ms ease';
        body.style.height = body.scrollHeight + 'px';
        body.style.opacity = '1';
        window.setTimeout(() => {
          resetBodyAfterOpen();
          isAnimating = false;
        }, durationMs);
      };

      const closeCard = () => {
        if (isAnimating || !d.open) return;
        isAnimating = true;
        body.style.transition = 'none';
        body.style.overflow = 'hidden';
        body.style.height = body.scrollHeight + 'px';
        body.style.opacity = '1';
        body.getBoundingClientRect();
        body.style.transition = 'height 280ms ease, opacity 220ms ease';
        body.style.height = '0px';
        body.style.opacity = '0';
        window.setTimeout(() => {
          d.open = false;
          body.style.transition = 'none';
          body.style.height = '0px';
          body.style.opacity = '0';
          isAnimating = false;
        }, durationMs);
      };

      if (d.open) {
        resetBodyAfterOpen();
      } else {
        body.style.height = '0px';
        body.style.opacity = '0';
        body.style.overflow = 'hidden';
      }

      summary.addEventListener('click', (e) => {
        e.preventDefault();
        if (d.open) {
          closeCard();
        } else {
          openCard();
        }
      });

      d.addEventListener('click', (e) => {
        if (!d.open || isAnimating) return;
        if (summary.contains(e.target)) return;
        if (e.target.closest('a, button, input, textarea, select, label')) return;
        closeCard();
      });
    });
  </script>
</body>
</html>