-
Notifications
You must be signed in to change notification settings - Fork 1
/
about.html
259 lines (221 loc) · 10.2 KB
/
about.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
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hannah Moon – About</title>
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontello.min.css">
<link rel="stylesheet" href="css/magnific-popup.min.css">
<link rel="stylesheet" href="css/animsition.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="about-page">
<div class="global-outer">
<div class="global-inner">
<header id="sidebar">
<div class="sidebar-inner">
<a class="logo smooth-leave" href="home.html">
<img src="img/logo.png" alt="favicon">
</a>
<p class="intro">Bridge the gap between humans and technology in complex problem spaces.</p>
<nav>
<ul>
<li><a class="smooth-leave" href="home.html">Home</a>
</li>
<li class="dropdown"><span>Selected Projects</span>
<ul>
<!-- <li><a class="smooth-leave" href="index-columns-2.html">View in 2 Columns</a>
</li>
<li><a class="smooth-leave" href="index.html">View in 3 Columns</a>
</li>
<li><a class="smooth-leave" href="index-columns-4.html">View in 4 Columns</a>
</li>-->
<li><a class="smooth-leave" href="PasswordZone.html">U.S.Bank: PaySmart Integration</a>
</li>
<li><a class="smooth-leave" href="PasswordZone.html">CarMax: Safe Money Movement</a>
</li>
<li><a class="smooth-leave" href="PasswordZone.html">Designing Responsible AI</a>
</li>
<li><a class="smooth-leave" href="PasswordZone.html">Sustainable Innovation</a>
</li>
</ul>
</li>
<li class="dropdown"><span>Archive</span>
<ul>
<!-- <li><a class="smooth-leave" href="index-columns-2.html">View in 2 Columns</a>
</li>
<li><a class="smooth-leave" href="index.html">View in 3 Columns</a>
</li>
<li><a class="smooth-leave" href="index-columns-4.html">View in 4 Columns</a>
</li>-->
<li><a class="smooth-leave" href="ConAct.html">Forward Cities: ConAct</a>
</li>
<li><a class="smooth-leave" href="PNC_StudentSelect.html">PNC: Student Select</a>
</li>
<li><a class="smooth-leave" href="SewForward.html">SalesForce Lightning: Sew Forward</a>
</li>
<li><a class="smooth-leave" href="Peerbot_Moxie.html">Peerbot: Moxie</a>
</li>
<li><a class="smooth-leave" href="PatentAI.html">Patent.AI: NLP based auto filing system</a>
</li>
<li><a class="smooth-leave" href="D_Jam.html">Deloitte: JAM Competition</a>
<li><a class="smooth-leave" href="Marie.html">Marie: Autonomous vehicle with CUI</a>
<li><a class="smooth-leave" href="pmGoGo.html">Passion Wheels - IoT Eco-System</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="smooth-leave" href="explorations.html">Explorations</a>
<ul>
<!--<li><a class="smooth-leave" href="blog.html">Posts List</a>
</li>-->
<!--<li><a class="smooth-leave" href="blog-alt.html">Posts List Alt</a>
</li>-->
<!--<li><a class="smooth-leave" href="blog-single.html">Single Post</a>
</li>-->
</ul>
</li>
<li class="dropdown"><a class="smooth-leave" href="studyhall.html">Study Hall</a>
</li>
<li><a class="smooth-leave current" href="about.html">About Me</a>
</li>
</ul>
</nav>
<div class="widgets-block">
<div class="widget contact">
<p class="title">Resume</p>
<div class="row">
<div class="col-md-4">
<ul class="social-links">
<li>
<a href="https://www.linkedin.com/in/moonhannah/"><i style="font-size:30px color#50C878" class="fa"></i>/moonhannah</a>
</li>
</ul>
</div>
</div>
</div>
<div class="widgets-block">
<div class="widget contact">
<p class="title">Contact</p>
<div class="row">
<div class="col-md-4">
<ul class="social-links">
<li>
<a class="icon-mail-alt" href="mailto:[email protected]">[email protected]</a>
</li>
<li><a class="icon-twitter" href="https://twitter.com/good2bhannah">/good2bhannah</a>
</li>
</ul>
</div>
</div>
</div><br><br>
<p class="copyright">Hannah Moon © 2024.
<br>Designed with empathy & sympathy 💚 </p>
</div>
</header>
<main id="main">
<div class="main-outer">
<div class="container-fluid">
<div class="page-title">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-12">
<h1>Hello! </h1><br>
<p class="lead">I am Hannah Moon, a computer engineer, researcher, and designer who creates digital and tangible experiences. <br> <br>
I am fiercely passionate about creating responsible and ethical user experiences that empower people in complex real-world contexts. With my broad design, business, and law background, I create smooth and logical human-computer interactions and aid people in solving problems. </p>
<div class="page-title-image">
<img src="img/about/Hannah_LG.png" alt="">
</div>
</div>
</div>
</div>
<div class="My_Tool_Box">
<div class="row">
<div class="col-md-8">
<br><br><br><h2>What's in my design toolbox?</h2>
</div>
</div>
</div>
<p class="lead">I utilize different tools to frame ambiguous problems and transform data into creative solutions. Using modern technologies and techniques helps me to see problems from a holistic viewpoint while putting users at the center of solving problems.</p><br><br>
<div class="Tools">
<div class="row">
<div class="col-md-3">
<div class="service-block">
<img class="img-circle img-responsive" src="img/about/research.png" class="center" alt="" width="80" height="80">
<h4>Research</h4>
<p>I conduct A to Z user research, including interviews, contextual inquiry, quantitative and qualitative research, survey design, and usability tests to reveal user's core needs and transform them into development opportunities.</p>
</div>
</div>
<div class="col-md-3">
<div class="service-block">
<img class="img-circle img-responsive" src="img/about/design.png" class="center" alt="" width="80" height="80">
<h4>Design</h4>
<p>I am strong at creating ambient user interactive products or services by utilizing modern tools. I use Figma, InDesign, Balsamiq, and Adobe products for rapid prototyping. I use JIRA, Slack, and Trello for managing products/projects. </p>
</div>
</div>
<div class="col-md-3">
<div class="service-block">
<img class="img-circle img-responsive" src="img/about/coding.png" class="center" alt="" width="80" height="80">
<h4>Coding</h4>
<p>I am familiar with R and Tableau and use them for data analysis and data visualization. I create front-end interaction with HTML, CSS, and Javascript. I also have experience in writing Python.</p>
</div>
</div>
<div class="col-md-3">
<div class="service-block">
<img class="img-circle img-responsive" src="img/about/analysis.png" class="center" alt="" width="80" height="80">
<h4>Analysis</h4>
<p>I analyze data and incorporate insights into my design practice. Data analysis helps me to draw logical user flows, identify product development opportunities, and evaluate the success of my designs.</p>
</div>
</div>
</div>
</div>
<div class="approach">
<div class="row">
<div class="col-md-5">
<a href="https://www.buymeacoffee.com/good2bhannah"><img src="img/about/cup.png" alt=""></a>
</div>
<div class="col-md-6 col-md-offset-1">
<div class="text">
<p>If you want to grab a coffee to discuss about my projects, please drop me a line at
<a href="mailto:[email protected]">[email protected]</a>.
</div>
</div>
</div>
</div>
<!-- <div class="row">
<div class="col-md-4">
<div class="team-member">
<div class="photo">
<img src="img/about/Hannah.png" alt="">
</div>
<div class="content">
<h3>Hannah Moon</h3>
<p>Founder & Creative Director</p>
<ul class="social-links">
<li>
<a class="icon-facebook" href="about.html#"></a>
</li>
<li>
<a class="icon-twitter" href="about.html#"></a>
</li>
<li>
<a class="icon-gplus" href="about.html#"></a>
</li>
</ul>
</div>
</div>
</div>-->
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="js/plugins.min.js"></script>
<script src="js/functions.js"></script>
</body>
</html>