-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
288 lines (280 loc) · 13.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ten Thousand Things</title>
<link rel="shortcut icon" type="image/png" href="images/elephant-icon-transparent-white.png"/>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/colours.css">
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/map.css">
<script src="js/d3.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/banner.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<section class="white black-bg one panel" id="banner">
<div class="near-top">
<h1 class="title center">| Ten Thousand Things |</h1>
</div>
<div class="centered">
<img id="logo" src="images/elephant-icon-transparent-white.png" alt="">
</div>
<div class="near-bottom">
<h2 class="title center">\ Coding the Commons /</h2>
</div>
</section>
<section class="white-bg panel">
<div class="container">
<div class="inner">
<div class="row">
<div class="twelve columns">
<h4 class="center">Ten Thousand Things design & build technologies that make a positive impact on the world.</h3>
</div>
</div>
<hr>
<div class="row">
<div class="one-third column">
<div>
<img class="horizontal-centered medium" src="images/soldering-icon.jpg" alt="soldering">
<p class="center">
We are a team of developers who love writing code with and for co-operatives, SMEs, research organisations and open source communities.
</p>
</div>
</div>
<div class="one-third column">
<div>
<img class="horizontal-centered medium" src="images/handshake-icon.png" alt="handshake">
<p class="center">
We believe that development of new technologies must be rooted in community, not applied as an abstract solution to a perceived problem.
</p>
</div>
</div>
<div class="one-third column">
<div>
<img class="horizontal-centered medium" src="images/beaker-icon.png" alt="beaker">
<p class="center">
All our development stems from a base of dialogue, research and real-world experience.
</p>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="twelve columns">
<p class="spaced center">
We emphasise sovereignty, ecological sustainability, privacy and accountability as design principles. All our projects embody these values through the infrastructure we choose, the way we model our data and the way we share information.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="white purple-bg panel">
<div class="container">
<div class="inner">
<div class="row">
<div class="twelve columns">
<div class="center">
<p class="spaced">
Drawing from a wealth of exprience in applied permaculture design, group facilitation and community building, our design and
development practices apply a diverse set of interactive techniques to tailor applications and infrastructure to suit
the needs of our clients.
</p>
<p class="spaced">We prioritise the use of reliable, open source, peer reviewed technologies to ensure high quality delivery.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="white black-bg panel relative">
<img style="height: 300px" class="top-right-corner" src="./images/half-sun-medium.png" alt="sunshine">
<div class="container">
<div class="inner sunshine">
<div class="row">
<div class="one-half column">
<div class="nugget light-transparent-bg">
<h5>Application Design</h5>
<p>We design and build client-side and web applications in a range of languages, from <a href="https://www.ruby-lang.org/">Ruby </a> to <a href="https://www.rust-lang.org/">Rust</a>. Scalable RESTful web APIs in <a href="https://nodejs.org/">Node</a> or <a href="https://rubyonrails.org/">Rails</a>; Experimental apps on-top of distributed data protocols <a href="https://datproject.org">Dat</a> and <a href="https://scuttlebutt.nz">SSB</a>; responsive Javascript front-ends with <a href="https://reactjs.org">React</a> and <a href="https://www.npmjs.com/package/mutant">Mutant</a>; cross-platform client-side applications in <a href="https://electronjs.org/">Electron</a>.</p>
</div>
<div class="nugget light-transparent-bg">
<h5>Data Visualisation</h5>
<p>We build beautiful and responsive visualisations of a broad range of data sets. Web visualisations, charts and graphs using <a href="https://d3js.org/">d3.js</a>, geomapping with <a href="https://www.openstreetmap.org/">Open Street Map</a> and much more...</p>
</div>
<div class="nugget light-transparent-bg">
<h5>Distributed Storage with Dat</h5>
<p><a href="https://datproject.org">Dat</a> is a new protocol for distributed file sharing. This cloudless file storage solution allows peer-to-peer sharing over a local area network, bluetooth or an internet connection.</p>
</div>
</div>
<div class="one-half column">
<div class="nugget light-transparent-bg">
<h5>Sovereign Cloud Infrastructure</h5>
<p>We provide state of the art secure application deployment solutions combining the latest technology and development practices with co-operative or member-led cloud service providers, or we'll help you host your applications on your own servers. This gives you the knowledge that the data you have custody of in your hands or the hands of people you trust.</p>
</div>
<div class="nugget light-transparent-bg">
<h5>Encryption & Password Management</h5>
<p>Let us help you get setup and used to using Pretty-Good-Privacy encryption (PGP) for secure email. Promote secure password management among friends and allies using <a href="https://keepasxc.org">KeePassXC </a>or <a href="https://masterpassword.com">MasterPassword</a>.</p>
</div>
<div class="nugget light-transparent-bg">
<h5>Encrypted Chat</h5>
<p>Channel-based encrypted chatrooms for teams and groups using <a href="https://keybase.io">Keybase</a> or <a href="https://scuttlebutt.nz">Patchwork</a>. <img class="inline" src="images/hermes-fork.gif" alt="Hermes the Hermit Crab with a Fork"></p>
</div>
</div>
</div>
</div>
</section>
<section id="workshop" class="white white-bg panel">
<div class="container">
<div class="inner">
<div class="one-half column">
<div class="nugget dark-transparent-bg">
<p>Our team runs internet privacy, password management and introduction to cryptography workshops.</p>
<p>Our current workshops are exploring the reception and uses of the new distributed peer-to-peer (p2p) technology <a href="http://scuttlebutt.nz">Scuttlebutt <img class="inline" src="images/hermes-small-butt-dance.gif" alt="Hermes the Hermit Crab"/></a> building dialogue within the community, co-discovering the difficulties involved in private key management and exploring possible solutions such as social secret sharing.</p>
</div>
</div>
<div class="one-half column">
<div class="nugget dark-transparent-bg">
<p>Since 2017 we've hosted at...</p>
<ul>
<li><strong>Work.Life, London Fields, London</strong></li>
<li><strong>Afrotech 2018, Richmix, London</strong></li>
<li><strong>The Network Convergence 2018, Mieres, Catalonia</strong></li>
<li><strong>Art Hack, Enspiral Dev Academy, Wellington</strong></li>
<li><strong>Space4, Finsbury Park, London</strong></li>
</ul>
</div>
</div>
</div>
</div>
<br><br>
</section>
<section class="white-bg panel">
<div class="container">
<div class="inner">
<div class="row">
<div class="twelve columns">
<h5 class="center">Working in collaboration with <a href="https://protozoa.nz">Protozoa</a>, <a href="http://blockades.org">Blockades</a> and <a href="https://scuttlebutt.nz">the Secure Scuttlebutt Consortium</a></h5>
</div>
</div>
<div class="row">
<div class="one-third column">
<div class="widget center">
<a href="http://blockades.org">
<img class="medium" src="images/blockades-icon.png" alt="blockades.org" />
</a>
</div>
</div>
<div class="one-third column">
<div class="widget center">
<a href="https://protozoa.nz">
<img class="medium" src="images/protozoa-icon.png" alt="protozoa.nz" />
</a>
</div>
</div>
<div class="one-third column">
<div class="widget center">
<a href="https://scuttlebutt.nz">
<img class="medium" src="images/scuttlebutt-icon.png" alt="scuttlebutt.nz" />
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="white purple-bg panel">
<div class="container">
<div class="inner">
<div class="widget row">
<div class="one-half column">
<a href="http://darkcrystal.pw">
<h5>Dark Crystal</h5>
</a>
<p>Back up your secrets using the trust in your social network.</p>
<p>
Dark Crystal transforms secrets into crystal shards that you can send to trusted friends.
If you lose the secret, or something happens to you, your friends can combine the shards to recover the crystal and reveal the secret.
</p>
</div>
<div class="one-half column">
<div class="center">
<a href="http://darkcrystal.pw">
<img class="medium" src="images/dark-crystal.jpg" alt="Dark Crystal" />
</a>
</div>
</div>
</div>
<hr>
<div class="widget row">
<div class="one-half column">
<div class="center">
<a href="http://blockades-mmt.herokuapp.com">
<img class="medium" src="images/margins-merkle-trees.png" alt="Margins Merkle Tree" />
</a>
</div>
</div>
<div class="one-half column">
<a href="http://darkcrystal.pw">
<h5>Margins Merkle Tree</h5>
</a>
<p>
A software platform for grass-roots collective cryptocurrency speculation and assisting community driven peer-to-peer (person-to-person) cryptocurrency education at the margins.
MMT is an elegant 'mockchain' double entry accounting system built on a Ruby-on-Rails, PostgreSQL and Redis stack.
</p>
</div>
</div>
<hr>
<div class="widget row">
<div class="one-half column">
<a href="https://github.com/ssbc/scuttle-invite">
<h5>Scuttle Invite</h5>
</a>
<p>
An API for publishing, retrieving and streaming <i>invite</i> and <i>reply</i> records in the Secure Scuttlebutt ecosystem.
</p>
</div>
<div class="one-half column">
<div class="center">
<a href="https://github.com/ssbc/scuttle-invite">
<img class="medium" src="images/scuttle-invite.gif" alt="Scuttle Invite" />
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="border-top black-bg panel">
<div class="white container">
<div class="inner">
<div class="row">
<div class="one-half column">
<h5>Contact us</h5>
<address>
<p>
<strong>Email: </strong>
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
<strong>GPG fingerprint: </strong>E459 9F28 4C05 9871 1431 1A96 0881 4993 8437 DBD6
<a href="keys/[email protected]">(plain-text)</a>
</p>
</address>
</div>
<div class="column one-half">
<h5>Company Information</h5>
<p>All materials are free to share Creative Commons [BY-NC-SA 3.0].</p>
<p><strong>Company No: </strong>10960794</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>