w352chen.github.io/portfolio.shtml at main · w352chen/w352chen.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Helen Weixu Chen</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
        flex-direction: column;
        /* min-height: 100vh */

      }

    /* Main content should expand to take available space */
      .content {
        flex: 1;
        /* padding-bottom: 40px; */
      }

      .footer {
        text-align: center;
        background-color: #f4f4f4;
        color: #007bff;
        border-top: 1px solid #ddd;
        font-size: 14px;
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed; /* Ensures footer stays at the bottom */
        padding-top: 15px;
        bottom: 0; /* Stick it to the bottom */
        left: 0; /* Align with the left edge */
      }

      .navbar-brand, .nav-link {
        color: #007bff !important;
      }
      .nav-link.active {
        font-weight: bold;
        color: #0056b3 !important;
      }
      .container {
        max-width: 960px;
        margin: auto;
      }
      .research-section {
        margin-bottom: 70px;
      }
      .research-paper {
        display: flex;
        align-items: center; /* Aligns items vertically in the middle */
        gap: 20px; /* Space between the image and the text */
        margin-bottom: 30px;
      }

      .paper-image {
        width: 200px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .paper-content {
        flex: 1; /* Ensures the text takes up available space */
      }
      .paper-title {
        font-size: 1.25em;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .paper-abstract {
        margin: 0;
        line-height: 1.6;
      }


    /* Flexbox layout for the body */


    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">Helen Weixu Chen</a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="index.html" id="home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="teaching.shtml" id="teaching">Teaching</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="research.shtml" id="research">Research</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="portfolio.shtml" id="portfolio">Portfolio</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


  <div class="container p-3">

    <h3>Portfolio</h3>
    <p>This page displays a selection of projects I have worked on.
      Each project includes a brief description, relevant links, and visual demonstrations to provide a clear understanding of my work.
    </p>
    <p>If you have any questions or would like to discuss my work, please don’t hesitate to get in touch!</p>

    <div class="container pb-2"></div>

    <!-- <h5>Current Research</h5> -->

    <h5>
      Bind
    </h5>
    <ul>
    <!-- <li> -->
      I collaborated with a team of four on a project aimed at connecting students with professionals, with a focus on job shadowing.
      Throughout the project, we conducted user interviews to understand the context and needs of both students and professionals.
      We also designed low-fidelity prototypes and iteratively refined them into high-fidelity interactive solutions.
      The application enables students and professionals to find, connect with, meet, and evaluate each other, fostering meaningful learning experiences.<a target="_blank" href="https://bwilliamwang.wixsite.com/bind"> Design Process</a>
        <div>
          <iframe width="640" height="360"
            src="https://www.youtube.com/embed/jjwykiUbCh4?si=p3yFT150Lj49t7u2"
            title="Bind"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
          </iframe>
        </div>
    </ul>

    <div class="container pb-2"></div>

    <h5>Mark Visualization
    </h5>
    <ul>
      The purpose of this project is to track the courses a student has taken during their career at the University of Waterloo.
      It includes the course admin section for adding and listing courses, the visualization section for metrics including Average by Term, Progress towards Degree, and the status bar displaying averages and counts.
      <a target="_blank" href="https://github.com/w352chen/MarkVisualizationTool.git">Source Code</a>
        <div>
          <video id="markVideo" autoplay muted loop width="640" height="350">
            <source src="videos/markVis.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
      </ul>
    <script>
      // Set playback speed to 2x for Mark Visualization video
      const video = document.getElementById('markVideo');
      video.playbackRate = 2.0; // Adjust playback speed here
    </script>

    <div class="container pb-2"></div>
    <h5>
        Battleship
    </h5>
    <ul>
      This implements the board game Battleship. (Click <a target="_blank" href="https://www.hasbro.com/common/instruct/battleship.pdf">here</a> to see the Rules of Battleship(Hasbro)).
      <a target="_blank" href="https://github.com/w352chen/Battleship.git">Source Code</a>
      <div >
        <video id="battleVideo" autoplay muted loop width="650" height="315" style="margin: 0; padding: 0; display: block;">
          <source src="videos/battleship.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </ul>

    <script>
      // Set playback speed to 3x for Battleship video
      const battleVideo = document.getElementById('battleVideo');
      battleVideo.playbackRate = 2.0; // Adjust playback speed here
    </script>

<div class="container pb-2"></div>
<h5>
    Bitwise
</h5>
<ul>
  This is a recipe-sharing app that provides recommendations for what you might like to eat.
  The goal of this app is to reduce the amount of time a person spends on figuring out what to eat every day, and provide secondary features that help avhieve this.
  The main page shows a list of recipes, sorted in order of recommendation. A user can save their favourite recipes, add new recipes to the database, and keep track of a grocery list to help them with shopping.
  <div >
    <video id="bitwisevideo" autoplay muted loop width="650" height="380" style="margin: 0; padding: 0; display: block;">
      <source src="videos/bitwise.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</ul>

<script>
  // Set playback speed to 3x for Battleship video
  const bitVideo = document.getElementById('bitwisevideo');
  bitVideo.playbackRate = 2.0; // Adjust playback speed here
</script>

    <div style="height: 50px;"></div>

<footer class="footer">
  <p>© Helen Weixu Chen 2025</p>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>