EchoLabWebsite/index.html at master · CesarJSmokowski/EchoLabWebsite · 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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Echolab Website</title>
  <meta name="description" content="">
  <meta name="author" content="Sang Won Lee">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class = "main-container">
    <header>
      <div class = "header-left">
        <img src="./images/echolab-logo.png">
      </div>
      <div class = "header-right">
        <div class = "header-title">
          <h1 class = "title">Welcome to Echolab homepage.</h1>
        </div>
        <div class = "navigation-bar">
          <a href="#welcome" class = "menu-bar-item">Welcome</a>
          <a href="#news" class = "menu-bar-item">News</a>
          <a href="#members" class = "menu-bar-item">Members</a>
          <a href="#projects" class = "menu-bar-item">Projects</a>
        </div>
      </div>
    </header>
    <main>
      <section id = "welcome">
        <label="#welcome">
        <div class = "container-title">Welcome!</div>
        <div class ="container-banner"><a href="mailto:sangwonlee@vt.edu">Contact Us for More Info</a></div>
        <p>
          Welcome to the website of Echolab at Virginia Tech. Our mission is to understand and create ways to foster empathic interaction among people using computational systems. Our research is based on the framework of empathy depicted below and centered around three themes: computational tools for perspective sharing for empathizers, computer as an expressive medium for targets (or empathizees), and facilitation of empathic communication for both groups.
        </p>
        <p>
          Echolab is always looking for Ph.D. students who are interested in creating novel interactive systems. We are also looking for exceptional undergraduate students and master students to work with. Please apply to CS@VT.
        </p>
        <p>
           If you are in Virginia Tech already and would like to do research in Echolab, please fill out the following survey (<a href="https://forms.gle/gzM3fb5iK9Jt1SPLA">link</a>)
        </p>
      </section>

      <section id = "news">
        <label="#news">
        <div class = "container-title">News</div>
        <div class ="container-banner">Updated 9/22/2022</div>
        <ul>
          <li class = "news-item">
            <em>(August, 2022)</em> Scrapbook paper, Taskscape and iThem posters were was accepted to UIST 2022.
          </li>
          <li class = "news-item">
            <em>(June, 2022)</em> Sang and Dash (echolab alumni) attended ACM Creativity and Cognition 2022 in Italy.
          </li>
          <li class = "news-item">
            <em>(May, 2022)</em> Sang and all Ph.D. students in echolab (physically) attended CHI 2022 at NOLA.
          </li>
        </ul>
      </section>

      <section id = "members">
        <div class ="container-banner">Become a core member!</div>
        <label="#members">
        <div class = "container-title">Core Members</div>
        <ul>
          <li class = "role">
            Director
          </li>
          <ul class = "role-members">
            <li class = "member director">
              <img src="./images/profile-pic.png" class="profile-picture">
              Sang Won Lee
            </li>
          </ul>
          <li class = "role">
            Ph.D. Students (in alphabetical order)
          </li>
          <ul class = "role-members">
            <li class = "member graduate-student">
              <img src="./images/profile-pic.png"  class="profile-picture">
              Carlos Augusto Bautista Isaza
            </li>
            <li class = "member graduate-student">
              <img src="./images/profile-pic.png" class="profile-picture">
              Daniel Manesh
            </li>
            <li class = "member graduate-student">
              <img src="./images/profile-pic.png" class="profile-picture">
              Donghan Hu
            </li>
            <li class = "member graduate-student">
              <img src="./images/profile-pic.png" class="profile-picture">
              Md Momen Bhuiyan
            </li>
            <li class = "member graduate-student">
              <img src="./images/profile-pic.png" class="profile-picture">
              Honey Mustard
            </li>
            <li class = "member graduate-student">
              <img src="./images/profile-pic.png" class="profile-picture">
              This can be you!
            </li>
          </ul>
      </section>

      <section id = "projects">
        <label="#projects">
        <div class ="container-banner">
          <a href="http://sangwonlee.com">
            See More Projects
          </a>
        </div>
        <div class = "container-title">Onoing Projects</div>
        <article class = "project-container">
          <img class = "project-image" src="./images/ithem-prototype.jpg">
          <div class = "project-blurb">
            <div class = "project-title">
              iThem
            </div>
            <div class = "project-desc">
             iThem enables a programmable connection between various services and IoT devices. It will let users write algorithms to trigger a different service in IFTTT. We believe that iThem will offer programmers to make a real impact on their daily lives. We also posit that this will give end-users novel motivations to learn to program.
            </div>
          </div>
        </article>
        <article class = "project-container">
          <img class = "project-image" src="./images/ot_small.png">
          <div class = "project-blurb">
            <div class = "project-title">
              OtherTube
            </div>
            <div class = "project-desc">
              OtherTube is a browser extension for YouTube that displays strangers’ personalized YouTube recommendations. OtherTube lets users (i) create an anonymized profile for social comparison with others, (ii) share YouTube’s recommendation videos to them with others, and (iii) browse other OtherTube users’ YouTube recommendations. We show how exchanging recommendations with strangers can help users discover new content and reflect.
             </div>
          </div>
        </article>
        <article class = "project-container">
          <img class = "project-image" src="./images/movis.jpeg">
          <div class = "project-blurb">
            <div class = "project-title">
              MOVIS
            </div>
            <div class = "project-desc">
              The project’s overarching objective is to design, develop, and deploy an inclusive, socially connected virtual reality platform and educational content. With the system, museum attendees can collectively interact with STEM topics in virtual reality. The system will use social virtual reality to allow multiple learners to engage with the learning material, the instructor, and one another via and beyond motion-tracked mobile devices.
            </div>
          </div>
        </article>
        <article class = "project-container">
          <img class = "project-image" src="./images/scrapbook.png">
          <div class = "project-blurb">
            <div class = "project-title">Scrapbook</div>
            <div class = "project-desc">
              Scrapbook is a novel application for digital resource curation across applications that uses screenshot-based bookmarks.
              Scrapbook extracts and stores all the metadata (URL, file location, and application name) of windows visible in a captured screenshot to facilitate restoring them later.
            </div>
          </div>
        </article>
      </section>
    </main>
    <footer class = "footer">
      Copyright © 2022 Sang Won Lee.
    </footer>

    <div id = "banner">
      We are recruiting student researchers!
    </div>
  </div>
</body>
</html>