-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
288 lines (253 loc) · 17.2 KB
/
index.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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
---
layout: home
title: Humans Forward
---
<!-- TODO: Add interactive word cloud -->
<!-- TODO: Finish up page animations, fadeIn, etc. -->
<!-- TODO: Add Woopra tracking -->
<!-- TODO: Break-out content to smaller files -->
<!-- TODO: Refactor CSS for color theming -->
<!-- TODO: Incorporate whatever changes into Bootstrap fork -->
<!-- TODO: Add data visualization under cover (black) area: the REAL one -->
<section class="jumbotron jumbotron-fluid" id="homeCover">
<div class="container-fluid">
<div id="mainVisual" style="position: absolute; top: 0; left: 0; z-index: 0; opacity: 0.8;"></div>
<!-- NOTE: Deprecated -->
<!--
<div style="position: absolute; z-index: 999; text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);">
<h1 class="display-3 hidden-xs-down hf-logotype">Humans Forward</h1>
<h1 class="display-5 hidden-sm-up hf-logotype">Humans Forward</h1>
<h2 class="hf-tagline">Evolving Technology</h2>
</div>
-->
<div style="position: absolute; top: 50vh; left: 0; width: 100%; text-align: center;">
<i class="fa fa-3x fa-circle-o-notch fa-spin hf-cover-spin"></i>
</div>
<div style="position: absolute; top: 90vh; left: 0; width: 100%; text-align: center;">
<a class="hf-cover-link hf-scroll-link" href="#intro"><i class="fa fa-3x fa-angle-double-down"></i></a>
</div>
</div>
</section>
<main role="main">
<section class="hf-section" id="intro">
<div class="container-fluid">
<p class="lead wow fadeIn">Humans Forward makes connected tech products that work beautifully for people, now and into the future, aligning hardware, software and relevant data. We collaborate side-by-side with clients on IoT projects, acting as consultants, engineers, designers and thought partners along the way.</p>
<p class="lead wow fadeIn">Oh yeah, we also design and build our own products in the Humans Forward Lab.</p>
</div>
</section>
<section class="hf-section" id="productDev">
<div class="container-fluid">
<h1 class="hf-heading">Product Development</h1>
</div>
<section class="hf-section" id="productDevAbout">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="hf-heading wow fadeIn">Our clients aspire to produce connected technology and IoT products that people love to use.</h2>
</div>
</div>
<div class="row vertical-align wow fadeIn hf-product-dev-about">
<div class="col-xs-12 col-md-5 text-xs-center text-md-right">
<p class="lead text-muted">Focused on expanding and optimizing your strategic opportunities, we work with you to explore and bridge the gap between your product vision and shipped products.</p>
</div>
<div class="col-xs-12 col-md-2 p-a-1">
<img class="img-fluid center-block hf-img-product-icon" src="{{ site.baseurl }}/assets/site/img/icons/Places_Places-02.png" />
</div>
</div>
<div class="row vertical-align wow fadeIn hf-product-dev-about">
<div class="col-xs-12 col-md-2 col-md-offset-5 hidden-sm-down p-a-1">
<img class="img-fluid center-block hf-img-product-icon" src="{{ site.baseurl }}/assets/site/img/icons/Interface_Interface-05.png" />
</div>
<div class="col-xs-12 col-md-5 text-xs-center text-md-left">
<p class="lead text-muted">Through iterative design and creative thinking, we help you realize your product concepts, definitions, roadmaps, prototypes, and MVPs - advancing us to products that delight.</p>
</div>
<div class="col-xs-12 col-md-2 hidden-md-up p-a-1">
<img class="img-fluid center-block hf-img-product-icon" src="{{ site.baseurl }}/assets/site/img/icons/Interface_Interface-05.png" />
</div>
</div>
<div class="row vertical-align wow fadeIn hf-product-dev-about">
<div class="col-xs-12 col-md-5 text-xs-center text-md-right">
<p class="lead text-muted">Excited by using connected devices, we employ edge sensors and actuators, energy-smart electronics, fog processing, the cloud, learning algorithms, and friendly and informative services to improve our lives.</p>
</div>
<div class="col-xs-12 col-md-2 p-a-1">
<img class="img-fluid center-block hf-img-product-icon" src="{{ site.baseurl }}/assets/site/img/icons/Hierarchy_Hierarchy-09.png" />
</div>
</div>
</div>
</section>
<section class="hf-section" id="productDevWork">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="hf-heading wow fadeIn">Recent work...</h2>
</div>
</div>
<div class="row vertical-align wow fadeIn hf-product-dev-work">
<div class="col-xs-12 col-md-4 p-a-1">
<img class="img-fluid center-block" src="{{ site.baseurl }}/assets/site/img/work/strykr.jpg" alt="Product dev work">
</div>
<div class="col-xs-12 col-md-8 text-xs-center text-md-left p-a-1">
<h3>Strykr<small> / <a href="http://alvosport.com" target="_blank">Alvo Sport</a></small></h5>
<p>Strykr is a smart fitness and performance platform that captures speed, accuracy and force. The system consists of an integrated lighted/sensored punching bag sleeve, controller and apps that supports real time, multiplayer interaction globally. We designed and developed the lighting and sensor sleeve, controller electronics, and end-to-end software stack.</p>
<a href="http://alvosport.com" target="_blank"><img class="hf-img-product-logo" src="{{ site.baseurl }}/assets/site/img/logos/alvo-logo.png" /></a>
</div>
</div>
<div class="row vertical-align wow fadeIn hf-product-dev-work">
<div class="col-xs-12 col-md-4 p-a-1">
<img class="img-fluid center-block" src="{{ site.baseurl }}/assets/site/img/work/avatar.jpg" alt="Product dev work">
</div>
<div class="col-xs-12 col-md-8 text-xs-center text-md-left p-a-1">
<h3>Avatar<small> / <a href="http://www.xcellbio.com" target="_blank">Xcell Biosciences</a></small></h3>
<p>Avatar is desktop biomedical appliance used for cancer research. We helped Xcell Biosciences explore, prototype, and demonstrate touchscreen technology, connectedness and improved UX as a strategic means of market differentiation and leadership.</p>
<a href="http://www.xcellbio.com" target="_blank"><img class="hf-img-product-logo" src="{{ site.baseurl }}/assets/site/img/logos/xcell-logo.png" /></a>
</div>
</div>
<!-- NOTE: For future use -->
<!--
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-4 text-xs-center text-md-left p-a-1">
<a class="btn btn-primary-outline" href="#" role="button">More</a>
</div>
</div>
-->
</div>
</section>
</section>
<section class="hf-section" id="lab">
<div class="container-fluid">
<h1 class="hf-heading">Humans Forward Lab</h1>
</div>
<section class="hf-section" id="labProjects">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="hf-heading">At HF we’re thinkers and tinkerers. Take a look at what we’re doing!</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 p-a-1">
<!-- <div class="card-deck-wrapper"> -->
<div class="card-deck">
<div class="card hf-lab-project">
<img class="card-img-top img-fluid" src="{{ site.baseurl }}/assets/site/img/lab/lab-eb-multisensor.jpg" alt="Lab project" />
<div class="card-block">
<h4 class="card-title">Enviro Bean (pt 1)</h4>
<h5 class="card-title">Environmental Multisensor</h5>
<p class="card-text">To understand how environmental stressors affect our well being, we’re prototyping a BLE device using the <a href="https://punchthrough.com/bean" target="_blank">LightBlue Bean</a> that continuously measures ambient light, temperature, sound, and low-frequency vibrations from various geo-locations. Here’s an <a href="https://soundcloud.com/oreilly-radar/cameron-turner-on-the-sound-of-data" target="_blank">interesting discussion</a> on how sound can be used to analyze key environmental dynamics.</p>
<p><span class="label label-info">coming soon!</span></p>
<!-- <a href="#" class="card-link">View on GitHub</a> -->
</div>
</div>
<div class="card hf-lab-project">
<img class="card-img-top img-fluid" src="{{ site.baseurl }}/assets/site/img/lab/lab-eb-mpds.jpg" alt="Lab project" />
<div class="card-block">
<h4 class="card-title">Enviro Bean (pt 2)</h4>
<h5 class="card-title">Multipeer Data Store</h4>
<p class="card-text">To gather user feedback along with readings from a network of environmental multisensors, we’re building a P2P data service that can store and relay event data - like dweet.io and PouchDB combined. Written using Node.js, the service can be deployed to a fleet of Raspberry Pis and cloud servers.</p>
<p><span class="label label-info">coming soon!</span></p>
</div>
</div>
<div class="card hf-lab-project">
<img class="card-img-top img-fluid" src="{{ site.baseurl }}/assets/site/img/lab/lab-eb-ml.jpg" alt="Lab project" />
<div class="card-block">
<h4 class="card-title">Enviro Bean (pt 3)</h4>
<h5 class="card-title">Learning Platform Integration</h4>
<p class="card-text">What patterns are rolling off those sensors? Could that 3 AM street noise every weeknight have a cumulative effect on our productivity? Let’s connect the dots. By integrating our Multipeer Data Store with a machine learning platform, we can start to uncover these mysteries.</p>
<p><span class="label label-info">coming soon!</span></p>
</div>
</div>
<div class="card hf-lab-project">
<img class="card-img-top img-fluid" src="{{ site.baseurl }}/assets/site/img/lab/lab-ble-eval.jpg" alt="Lab project" />
<div class="card-block">
<h4 class="card-title">Bluetooth Dev Kit Roundup</h4>
<p class="card-text">We recently purchased a few popular BLE development kits for future product development. Check back later as we’ll be comparing system features, architecture, dev environments, interoperability and associated productization, certification, qualification and deployment costs.</p>
<p><span class="label label-info">coming soon!</span></p>
</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
<!-- NOTE: For future use -->
<!--
<div class="row">
<div class="col-xs-12 text-xs-center p-a-1">
<a class="btn btn-secondary-outline" href="#" role="button">All Projects</a>
</div>
</div>
-->
</div>
</section>
</section>
<section class="hf-section" id="ethos">
<div class="container-fluid">
<h1 class="hf-heading">Forward (Our Ethos)</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-5">
<h2 class="hf-heading hf-mission">Our mission is Forward: designing products that have <span class="hf-animate-impact-word">impact,</span> <span class="hf-animate-endure-word">endure,</span> and <span class="hf-animate-connect-word">provide connectedness.</span></h2>
</div>
<div class="col-xs-12 col-md-5 col-md-offset-1">
<blockquote class="blockquote hf-mission-quote hf-animate-impact-text">Impactful products have power to change our world and lives in a positive way.</blockquote>
<blockquote class="blockquote hf-mission-quote hf-animate-endure-text">Enduring function, design and meaning leads to devices that always engage.</blockquote>
<blockquote class="blockquote hf-mission-quote hf-animate-connect-text">Connecting people and ideas helps us realize our greater potential.</blockquote>
</div>
</div>
</div>
</section>
<section class="hf-section" id="team">
<div class="container-fluid">
<h1 class="hf-heading">The Humans behind HF</h1>
</div>
<section class="hf-section" id="teamMembers">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-5 text-xs-left text-md-right">
<img class="hf-img-team-member" src="{{ site.baseurl }}/assets/site/img/team/paul-bw.png" />
<h3>Paul Dhillon Weber</h3>
<p>Paul is a seasoned tech expert with a deep focus on hardware, product development and data management. He’s worked with startups as well as giants such as PayPal, Applied Materials, BGI, Schwab and PG&E. His chops are a unique combination of hardware strategy and design, application development, and analytics. He also rolls up his sleeves and develops analog and digital electronics for IoT sensors and actuators, signal conditioning, communications and controls. Through machine data analytics, he produces insights and optimized control to deliver solid value from the latest IoT and connected hardware devices. He drives for synergy between business opportunities and technology execution. Paul’s interests include music composition and recording, building electronic musical instruments, making beer and lately, reading Chekhov.</p>
</div>
<div class="col-xs-12 col-md-5 col-md-offset-1">
<img class="hf-img-team-member" src="{{ site.baseurl }}/assets/site/img/team/scott.png" />
<h3>J. Scott Smith</h3>
<p>Scott, originally from the Midwest, has a diverse background in “full stack” software architecture, coding and enterprise solutions. He got his start programming in ’79 - and while in school taught evening computer literacy and programming classes, and even interned with the federal government. He also has a diverse work history that includes BP, PG&E, and Online Documents (now Stewart Title). Scott puts tremendous emphasis on planning and organizing his software projects to produce efficient and elegant (even beautiful) solutions with the most optimal technologies and components. His experience ranges from the enterprise to mobile devices, and he’s also proficient in IoT hardware and firmware design. His passions include vegan cooking, practicing and teaching martial arts, and he has spent many years racing bicycles.</p>
</div>
</div>
</div>
</section>
</section>
<section class="hf-section" id="social">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-5">
<ul class="media-list">
<li class="media">
<div class="media-left">
<img class="hf-img-footer-logo" src="{{ site.baseurl }}/assets/site/img/brand/hf-footer-logo.png">
</div>
<div class="media-body hf-footer-text">
<h2>Humans Forward</h2>
<h5>San Francisco, California</h5>
</div>
</li>
</ul>
<p class="hf-social-links">
<a href="#" class="btn btn-lg btn-primary-outline hf-social-link hf-email"><i class="fa fa-envelope fa-lg"></i> Email</a>
<a href="https://twitter.com/HumansForward" target="_blank" class="btn btn-lg btn-primary-outline hf-social-link"><i class="fa fa-twitter fa-lg"></i> Twitter</a>
<a href="https://instagram.com/HumansForward" target="_blank" class="btn btn-lg btn-primary-outline hf-social-link"><i class="fa fa-instagram fa-lg"></i> Instagram</a>
<a href="https://github.com/HumansForward" target="_blank" class="btn btn-lg btn-primary-outline hf-social-link"><i class="fa fa-github fa-lg"></i> GitHub</a>
<a href="https://bitbucket.com/HumansForward" target="_blank" class="btn btn-lg btn-primary-outline hf-social-link"><i class="fa fa-bitbucket fa-lg"></i> Bitbucket</a>
<a href="https://angel.co/humans-forward" target="_blank" class="btn btn-lg btn-primary-outline hf-social-link"><i class="fa fa-angellist fa-lg"></i> AngelList</a>
</p>
<p class="small">Cover visualizer by <a href="https://github.com/jfirebaugh/animations/" target="_blank">John Firebaugh</a>.</p>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-1">
<h2>Latest musings</h2>
<a class="twitter-timeline" href="https://twitter.com/HumansForward" data-widget-id="705638570703237121" data-chrome="noheader nofooter noborders noscrollbar transparent" data-tweet-limit="1">Tweets by @HumansForward</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</section>
</main>