/
investigating.html
132 lines (128 loc) · 5.54 KB
/
investigating.html
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
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Investigating Normal</title>
<!-- Include jQuery -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="css/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:bolder" rel="stylesheet">
</head>
<!-- **************** END HEAD *********************** -->
<div class="navbar-doyung">
<a href="index.html" class="navbar-link"><p class="navbar-heading">DOYUNG LEE</p></a>
</div>
<script>
function openSection(sectionName) {
var i, x;
x = document.getElementsByClassName("section");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(sectionName).style.display = "block";
}
$(function() {
$('.list-button').on('click', function(){
$('.list-button').removeClass('selected');
$(this).addClass('selected');
});
});
</script>
<div class="header-wrapper">
<img src="images/anti-self.gif" class="header-photo">
<p class="header-detail"><span class="header-detail-span" id="investigating">Art</span></p>
<h1 class="header-text" >
<span class="header-text-span">
Investigating Normal and<span class='spacer'></span><br /><span class='spacer'></span>Other Self Exploratory Projects
</h1>
</div>
<div class="row">
<div class="col-md-3">
<ul class="sections">
<li><a class="list-button selected" href="javascript:void(0)" onclick="openSection('Overview')">Overview</a></li>
<li><a class="list-button" href="javascript:void(0)" onclick="openSection('SEAT')">SEAT</a></li>
<li><a class="list-button" href="javascript:void(0)" onclick="openSection('tangible connections')">Tangible Connections</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="body-wrapper">
<div id="Overview" class="section">
<h2 class="section-header">How do I better understand myself? How do I better express myself to other people? How do I better understand other people?</h2>
<p class="section-text">
These are a series of personal projects that I have been working on. Currently I am exploring the idea of understanding and empathy; me better understanding myself, me better understanding other people, other people better understanding me, and me better understanding the world. These projects range from purely performative to fully functional.
</p>
</div>
<div id="SEAT" class="section" style="display:none">
<h2 class="section-header">Social and Emotional Assistive Technology</h2>
<p class="section-text">
I ask myself how I can better express my emotions with my face. I have been known to have a resting angry face, which has led to many misunderstandings during conversations. I created this piece as a way to think about how one might design assistive technologies that may help us socially and emotionally. This helmet/mask explicitly points to what emotion the wearer is feeling, so there can be no confusion between the wearer and the person they are interacting with.
</p>
<img src="images/emotionmask.jpg" class="content-photo">
<br/>
<br/>
</div>
<div id="tangible connections" class="section" style="display:none">
<h2 class="section-header">Tangibly Connecting to People in a Digitally Connected World (Ongoing)</h2>
<p class="section-text">
How can I feel more connected to the people I care about in a tangible way? I prototyped this backpack that has rolls of string attached to it; each roll of string is attached to one of my friends. In the coming weeks, my friends and I will try to go about our days attached to one another. Everytime I look at one of the strings, I will know that it is connected to one of my friends.
</p>
<img src="images/backpack.jpg" class="content-photo">
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
<div class="footer"></div>
<style>
@media only screen and (max-width: 780px) {
.body-wrapper {
padding-top: 0px;
padding-right:0px;
}
#investigating-gif {
margin-top: -100px;
}
}
@media only screen and (max-width: 650px) {
.header-text {
font-size:20px;
top: 60px;
}
.header-text-span {
padding:5px;
}
.header-detail {
font-size: 12px;
top: 58px;
}
.header-detail-span {
padding: 5px;
}
.sections {
font-size: 14px;
line-height: 190%;
}
.body-wrapper {
padding-top: 0px;
padding-right:0px;
}
.header-photo {
height: 200px;
object-fit: cover;
}
#investigating-gif {
margin-top: 0px;
}
}
</style>