ashleyoon.com/about.html at main · ashleyoon/ashleyoon.com · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About - Ashley Yoon</title>
    <link rel="icon" type="image/png" href="images/AY_FavIcon.png" sizes="96x96" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="custom-cursor"></div>

    <div class="about-page">
      <div class="about-page-inner">
        <a href="/" class="back-button"></a>

        <div class="about-intro" style="margin-bottom: 4rem">
          <div class="about-blurb">
            <p>
              Ashley is a product and UX designer who leads with people first.
              Currently pursuing her degree, she builds interfaces that are
              intuitive, inclusive, and crafted with the kind of care that makes
              users feel genuinely considered.
            </p>
            <br />
            <p>
              Outside of design, Ashley finds inspiration in music, film,
              travel, and new people. She's a collector of perspectives, and it
              comes through in everything she creates.
            </p>
          </div>
          <img
            src="/images/BabyPic.png"
            alt="Ashley Yoon"
            class="about-photo"
          />
        </div>

        <div class="extracurriculars">
          <p
            class="sidebar-section-label"
            style="
              margin-bottom: 1.5rem;
              font-size: 0.85rem;
              text-transform: uppercase;
              letter-spacing: 0;
              font-family: &quot;IBM Plex Mono&quot;, monospace;
            "
          >
            Involvement...
          </p>

          <div class="extra-item">
            <div class="extra-header">
              <a
                href="https://www.c4cneu.com/"
                target="_blank"
                class="extra-title extra-link"
                >Code4Community</a
              >
              <span class="extra-tag">Student Organization</span>
            </div>
            <p class="extra-desc">
              Student-run initiative delivering free software to local
              nonprofits. As design lead, set design vision, ensured product
              consistency, and mentored a growing team of designers.
            </p>
          </div>

          <div class="extra-item">
            <div class="extra-header">
              <a
                href="https://www.khoury.northeastern.edu/current-undergraduate-students/khoury-undergraduate-student-advisory-board/"
                target="_blank"
                class="extra-title extra-link"
                >Khoury Undergraduate Student Advisory Board</a
              >
              <span class="extra-tag">Northeastern University</span>
            </div>
            <p class="extra-desc">
              Representing the undergraduate student body, collaborating with
              faculty and staff, and advocating for a stronger college
              experience.
            </p>
          </div>

          <div class="extra-item">
            <div class="extra-header">
              <a
                href="https://coe.northeastern.edu/orgs/ecoscholars/"
                target="_blank"
                class="extra-title extra-link"
                >EcoScholars</a
              >
              <span class="extra-tag">Community Outreach</span>
            </div>
            <p class="extra-desc">
              Visiting elementary schools to teach kids about the environment
              through hands-on crafts and activities.
            </p>
          </div>

          <div class="extra-item">
            <div class="extra-header">
              <a
                href="https://northeastern.badges.parchment.com/public/credentials/CAGBrN7ETLmg2yQs7buxiQ?identity__email=yoon.ash@northeastern.edu"
                target="_blank"
                class="extra-title extra-link"
                >Blueprint Leadership Badge</a
              >
              <span class="extra-tag">Issued Dec 2025</span>
            </div>
            <p class="extra-desc">
              Completed 8 weekly leadership workshops exploring accessibility,
              experiential learning, justice, and interdependence to develop a
              personal leadership blueprint.
            </p>
          </div>
        </div>
      </div>
    </div>

    <script>
      const cursor = document.querySelector(".custom-cursor");
      document.addEventListener("mousemove", (e) => {
        cursor.style.left = e.clientX + "px";
        cursor.style.top = e.clientY + "px";
      });
      document.querySelectorAll("a, button").forEach((el) => {
        el.addEventListener("mouseenter", () => cursor.classList.add("hover"));
        el.addEventListener("mouseleave", () =>
          cursor.classList.remove("hover"),
        );
      });
    </script>
  </body>
</html>