ericayee.github.io/fun.html at main · ericayee/ericayee.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
<!DOCTYPE html>
<html>

<head>
  <title>Fun | Erica Yee</title>
  <link rel="icon" type="image/png" href="files/favicon.png">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles/main.css" rel="stylesheet" type="text/css" />
  <link
    href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,600;1,700&display=swap"
    rel="stylesheet" />
  <script src="components/header.js" type="text/javascript" defer></script>
  <script src="components/footer.js" type="text/javascript" defer></script>
</head>

<body>
  <header-component></header-component>
  <main>
    <div class="content-container">
      <h1>Fun</h1>
      <div class="clip-container">
        <h3><img class="arrow-link" src="files/arrow.svg" /><a href="https://ericayee.com/books-viz/">Visualizing my
            reading habits</a></h3>
        <h6>
          <code><a href="https://github.com/ericayee/books-viz">code</a></code> |
          2019–2025
        </h6>
        <div class="clip-image">
          <img style="width: 300px; border:2px solid #212121" src="files/booksviz.png" alt="bar chart of total books read 2019-2023" />
        </div>
        <p>This is a personal project to better understand my readings habits since I started tracking books read in 2019. Using <a
            href="https://github.com/jwilber/roughViz">roughViz</a>, I went for a hand-drawn look to replicate
          the book tracker in my physical notebook (which still looks messier).</p>
          <div class="clip-divider">
            📚📊
          </div>
      </div>
      <div class="clip-container">
        <h3><img class="arrow-link" src="files/arrow.svg" /><a
            href="https://www.youtube.com/watch?v=cq6V52qSOjM">Arranging music covers</a></h3>
        <h6>
          Jan 2025
        </h6>
        <div class="clip-image">
          <img style="width: 300px; border:2px solid #212121" src="files/2024medley.jpg" alt="sheet music titled 2024 instrumental medley" />
        </div>
        <p>I've played piano since I was young, and especially enjoy putting my own spin on pop music. Listen to the interactive score of my favorite 2024 songs medley on <a href="https://www.youtube.com/watch?v=cq6V52qSOjM">YouTube</a> (along with my other works on <a href="https://musescore.com/user/158711/sheetmusic">MuseScore</a>).
        </p>
        <div class="clip-divider">
          🎹🎵
        </div>
      </div>
      <div class="clip-container">
        <h3><img class="arrow-link" src="files/arrow.svg" /><a
            href="https://www.figma.com/file/WbQGDDriGVJRW3FpAUNMU6/wrena-character-sheet?node-id=4%3A1953">Designing a
            D&D character sheet in Figma</a></h3>
        <h6>
          Jan 2021
        </h6>
        <div class="clip-image">
          <img style="width: 200px;" src="files/wrena.png" alt="illustration of D&D rogue elf character" />
        </div>
        <p>As an avid Dungeons & Dragons player, I wanted to try two projects in Figma: 1) illustrating my character;
          and 2) creating a character sheet instead of the usual static PDF or paper. Say hello to Wrena, my elf rogue!
        </p>
        <div class="clip-divider">
          ✒️🐉
        </div>
      </div>
      <div class="clip-container">
        <h3><img class="arrow-link" src="files/arrow.svg" /><a
            href="https://ericayee.notion.site/Erica-s-favorite-podcasts-94c5ceb809884a1db31bcc51d655a3aa">My favorite podcasts</a></h3>
        <h6>
          2018–
        </h6>
        <p>This is a work-in-progress collection of my favorite podcasts and episodes built with Notion.
        </p>
        <div class="clip-divider">
          🎙️🎧
        </div>
      </div>
    </div>
  </main>
  <footer-component></footer-component>
</body>
<html>