-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
528 lines (363 loc) · 26.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
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="tailwind.css" rel="stylesheet">
<title>Wireskip.</title>
</head>
<body>
<!-- Navbar -->
<section class="relative py-4 !border-b !border-black bg-white">
<div class="flex items-center justify-between h-10 px-8 mx-auto max-w-7xl">
<a href="#_" class="relative z-10 flex items-center w-auto text-xl font-black leading-none text-black select-none ">Wireskip.</a>
<nav class="items-center justify-center hidden space-x-5 text-white md:flex lg:space-x-8">
<a href="#" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" class="relative inline-block px-1 text-base text-black transition duration-150 ease hover:text-gray-700">
<span class="block">Home</span>
</a>
<a href="#at-a-glance" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" class="relative inline-block px-1 text-base text-black transition duration-150 ease hover:text-gray-700">
<span class="block">At a glance</span>
</a>
<a href="#technology-stack" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" class="relative inline-block px-1 text-base text-black transition duration-150 ease hover:text-gray-700">
<span class="block">Routing</span>
</a>
<a href="#advisors" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" class="relative inline-block px-1 text-base text-black transition duration-150 ease hover:text-gray-700">
<span class="block">Advisors</span>
</a>
<a href="#faq" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" class="relative inline-block px-0.5 text-base text-black transition duration-150 ease hover:text-gray-700">
<span class="block">FAQ</span>
</a>
<a href="#github" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" class="relative inline-block px-0.5 text-base text-black transition duration-150 ease hover:text-gray-700">
<span class="block">Github</span>
</a>
<a href="https://github.com/Wireskip/client" class="relative h-6 group">
<span class="relative z-10 px-3 py-1 font-bold leading-tight text-black bg-white border-2 border-gray-900 rounded-lg group-hover:bg-black group-hover:text-white ">Quickstart</span>
<span class="absolute top-0 right-0 w-full h-8 -mr-1 bg-black rounded-lg"></span>
</a>
</nav>
<!-- Mobile Button -->
<div class="flex items-center justify-center h-full text-black md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path></svg>
</div>
</div>
</section>
<!-- Hero -->
<section class="py-16 bg-white md:py-24 ">
<div class="container relative flex flex-col justify-between h-full max-w-5xl px-10 mx-auto xl:px-0">
<div class="flex w-full h-full">
<div class="w-full lg:w-2/3">
<div class="flex flex-col items-start justify-center w-full pr-10 mb-12 lg:w-4/5 lg:mb-0">
<div class="relative">
<p class="mb-2 text-base font-bold text-black uppercase"></p>
<h1 class="text-4xl font-extrabold tracking-tight text-black sm:text-5xl xl:text-6xl">
<span class="block xl:inline">Net-neutrality.</span>
<span class="block text-pink-500 xl:inline"></span>
</h1>
<p class="my-8 text-lg text-gray-600 md:text-xl">Wireskip is an open source VPN protocol designed with the goal of providing unrestricted access to the internet from anywhere.</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/3">
<p class="my-2 pl-8 h-26 text-2xl border-l-4 border-gray-200 leading-relaxed text-black tracking-tight">
It's pretty
<b class="text-gray-700">fast</b>, looks like
<b class="text-gray-700">regular HTTP/2</b> traffic, has
<b class="text-gray-700">multi-protocol</b> support,
<b class="text-gray-700">multiplexed</b> connections,
<b class="text-gray-700">onion encryption & routing</b> and increased
<b class="text-gray-700">privacy</b>.
</p>
</div>
</div>
</div>
</section>
<!-- Code window -->
<section class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
<div class="relative h-full ml-0 mr-0 sm:mr-10">
<span class="absolute top-0 left-0 w-full h-full mt-4 ml-3 bg-black opacity-40 rounded-lg"></span>
<div class="mt-6 flex flex-col relative w-full my-auto shadow-lg text-black bg-black text-sm font-mono subpixel-antialiased rounded-lg">
<div class="flex space-x-2 m-6">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-200"></div>
<div class="w-3 h-3 rounded-full bg-green-300"></div>
</div>
<div class="overflow-hidden bg-white border border-black ">
<div class="whitespace-nowrap overflow-x-auto pl-6 pb-6 text-black"><p><br></p>
<p><span class="text-black select-none">$</span> curl ifconfig.co/country</p>
<p><span class="select-none pl-4"></span><span class="text-gray-500">United States</span></p><br>
<p><span class="text-black select-none">$</span> wireskip socks start</p>
<p><span class="text-black select-none">$</span> wireskip exec curl ifconfig.co/country</p>
<p><span class="select-none pl-4"></span><span class="text-gray-500">Netherlands</span></p><br>
<p><span class="text-black select-none">$</span> wireskip reload</p>
<p><span class="text-black select-none">$</span> wireskip exec curl ifconfig.co/country</p>
<p><span class="select-none pl-4"></span><span class="text-gray-500">Switzerland</span></p><br>
<p><span class="text-black select-none">$</span> wireskip config broker.circuit.whitelist $(__wireskip_relays | grep germany)</p>
<p><span class="text-black select-none">$</span> wireskip exec curl ifconfig.co/country</p>
<p><span class="select-none pl-4"></span><span class="text-gray-500">Germany</span></p><br>
<p class="text-green-600"># tunnel all tcp/udp traffic on the system</p>
<p><span class="text-black select-none">$</span> wireskip tun start</p>
<p><span class="text-black select-none">$</span> firefox</p>
<br>
<p class="text-green-600"># tunnel specific traffic (manually or wrapper scripts)</p>
<p><span class="text-black select-none">$</span> curl --proxy socks5h://$(wireskip config forwarders.socks.address) URL</p>
<p><span class="text-black select-none">$</span> wireskip exec git clone URL</p>
<p><span class="text-black select-none">$</span> wireskip exec chromium-browser [URL]</p>
<br>
<p class="text-green-600"># tunnel network connections from arbitrary programs</p>
<p><span class="text-black select-none">$</span> wireskip intercept ssh USER@HOST</p>
<br>
<p class="text-green-600"># define the circuit that fits your needs</p>
<p><span class="text-black select-none">$</span> wireskip config broker.circuit.whitelist "wireskip://relay.example.com:13490"</p>
<p><span class="text-black select-none">$</span> wireskip config broker.circuit.hops 1</p>
</div>
</div>
</div>
</div>
<br><br><br><br>
</section>
<!-- Black background -->
<section class="bg-black -mt-96 h-96">
</section>
<!-- At a Glance -->
<a name="at-a-glance"></a>
<section class="relative py-24 max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
<div class="max-w-2xl mx-auto text-center lg:max-w-4xl">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">At a glance</h2>
<p class="mt-4 text-gray-500">Wireskip seeks to solve the problems of modern consumer VPNs and onion-routing networks.</p>
</div>
<dl class="mt-16 max-w-2xl mx-auto grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">Encrypted with multiple layers</dt>
<dd class="mt-2 text-sm text-gray-500">Traffic is encapsulated in layers of encryption and routed through a series of relays, each knowing only the required information to perform its job.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">Single or multiple hops</dt>
<dd class="mt-2 text-sm text-gray-500">Define the amount of hops you prefer in a circuit, less for lower latency, more for increased privacy.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">Customizable circuits</dt>
<dd class="mt-2 text-sm text-gray-500">By default relays are selected randomly based on the number of hops configured, but you can choose specific relays or a series of relays.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">Tunnel all system traffic</dt>
<dd class="mt-2 text-sm text-gray-500">All traffic on the system (both TCP and UDP) can be tunneled through the connection broker using the TUN device, just like a regular VPN client.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">Or tunnel only specific apps</dt>
<dd class="mt-2 text-sm text-gray-500">Any application that supports the SOCKSv5 protocol can be configured to route its traffic through the connection broker. Have an app that doesn't support SOCKS? Intercept its socket connections.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">Indistinguishable traffic</dt>
<dd class="mt-2 text-sm text-gray-500">Connections are encrypted, multiplexed and encapsulated into regular TLS HTTP/2 traffic. Regular connections to example.com and relaying traffic via example.com look pretty much identical.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">No user accounts needed</dt>
<dd class="mt-2 text-sm text-gray-500">Access to Wireskip networks is performed with accesskeys, used to cryptographically and independently generate tokens for relays to authorize service.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">A powerful API</dt>
<dd class="mt-2 text-sm text-gray-500">The client controller provides a REST API used by the CLI, but opens the door for GUI's, web frontends, browser extensions, router and custom integrations.</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium text-gray-900">Open Source</dt>
<dd class="mt-2 text-sm text-gray-500">Source code for the client and the relay is available on GitHub, and published under the MIT license. You can build from source, browse the code, and contribute.</dd>
</div>
</dl>
</section>
<!-- Technology Stack -->
<a name="routing"></a>
<section class="relative w-full py-12 overflow-hidden bg-black md:py-20 xl:pt-32 xl:pb-40">
<div class="max-w-2xl mx-auto text-center lg:max-w-4xl">
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">Routing</h2>
</div>
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-10 mx-auto xl:px-0">
<div class="flex w-full h-full">
<div class="w-full lg:w-3/3">
<img src="traffic_diagram.png">
</div>
</div>
</div>
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-10 mx-auto xl:px-0">
<div class="flex w-full h-full">
<div class="w-full lg:w-3/3">
<img src="traffic_diagram_options.png">
</div>
</div>
</div>
</section>
<!-- Advisors -->
<a name="advisors"></a>
<section class="relative w-full bg-white">
<div class="absolute inset-0 w-full h-full bg-white">
</div>
<div class="relative w-full px-8 pt-16 pb-16 ml-auto mr-auto bg-top bg-cover sm:max-w-xl md:max-w-full md:px-24 lg:px-8 lg:py-24 lg:pb-32">
<div class="max-w-xl mb-10 ml-auto mr-auto bg-top bg-cover md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<div class="max-w-2xl mb-6 ml-auto mr-auto font-sans tracking-tight text-white bg-top bg-cover sm:text-4xl md:mx-auto">
<h2 class="mb-1 text-3xl font-extrabold leading-tight text-black">Advisors</h2>
</div>
</div>
<div class="grid gap-12 row-gap-8 ml-auto mr-auto sm:row-gap-10 lg:max-w-screen-lg sm:grid-cols-2 lg:grid-cols-3">
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-text-top mx-10">
<p class="text-lg font-bold text-black">Ladar Levison</p>
<p class="text-sm text-gray-900">Privacy and Technology Advisor</p>
<p class="text-sm text-gray-900"><i>Founder, Lavabit</i></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">Arturo Filasto</p>
<p class="text-sm text-gray-900">Internet Measurement and Traffic Censorship Advisor</p>
<p class="text-sm text-gray-900"><i>Project Lead at OpenObservatory (OONI)</i></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">Micah Anderson</p>
<p class="text-sm text-gray-900">Privacy and Technology Advisor</p>
<p class="text-sm text-gray-900"><i>RiseUp Founder, Calyx Board Member</i></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">Derek Zimmer</p>
<p class="text-sm text-gray-900">Security and Privacy Advisor</p>
<p class="text-sm text-gray-900"><i>Executive Director OSTIF.org</i><br><br></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">eyedeekay</p>
<p class="text-sm text-gray-900">Routing Layer Advisor</p>
<p class="text-sm text-gray-900"><i>i2p Android Developer and Maintainer</i></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">Susan Sons</p>
<p class="text-sm text-gray-900">Research and Security Advisor</p>
<p class="text-sm text-gray-900"><i>Chief Security Analyst, Indiana University Bloomington</i><br><br></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">Gael Duval</p>
<p class="text-sm text-gray-900">Integrations Advisor</p>
<p class="text-sm text-gray-900"><i>President and Founder of /e/, Murena, and Mandrake Linux</i></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">Perry Kniest</p>
<p class="text-sm text-gray-900">Consumer VPN and Infrastructure Advisor</p>
<p class="text-sm text-gray-900"><i>Founder vpn.asia and HostingKing</i></p>
</div>
</div>
<div class="flex items-start">
<!--img src="" class="object-cover w-20 h-20 mr-4 rounded-full shadow"-->
<div class="relative align-top mx-10">
<p class="text-lg font-bold text-black">Joost Hoogendoorn</p>
<p class="text-sm text-gray-900">Consumer VPN and Infrastructure Advisor</p>
<p class="text-sm text-gray-900"><i>Founder WifiMask VPN</i></p>
</div>
</div>
</div>
</div>
</section>
<!-- Quote -->
<section class="relative py-20 overflow-hidden bg-black cursor-pointer sm:py-24 md:py-32">
<div class="relative max-w-5xl px-16 mx-auto xl:px-0">
<svg class="absolute top-0 left-0 hidden w-32 h-32 -mt-3 -ml-16 text-white opacity-50 xl:block" stroke="currentColor" fill="none" viewBox="0 0 144 144"><path stroke-width="2" d="M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z"></path></svg>
<div class="relative xl:pl-32 lg:flex lg:items-center">
<div class="relative">
<blockquote class="relative">
<div class="font-serif text-xl font-medium leading-9 text-gray-100 md:text-2xl">
<p>I have worked on decentralized and privacy focused tech that supports internet rights, freedom, and personal data protection for years, and if Wireskip is going to try and solve the net neutrality issue, I want to help support it.</p>
</div>
<div class="mt-4">
<div class="flex items-center">
<div class="flex-shrink-0"><!--img class="object-cover w-12 h-12 mr-4 rounded-full" src="" alt=""--> </div>
<div class="ml-4 lg:ml-0">
<div class="text-base font-medium leading-6 text-gray-400">Gael Duval, President of Founder of /e/, Murena, and Mandrake Linux</div>
</div>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</section>
<!-- Try Wireskip -->
<section class="py-24 bg-white">
<div class="max-w-6xl px-10 mx-auto xl:max-w-7xl">
<div class="flex flex-col items-start justify-between lg:flex-row">
<div class="relative">
<h2 class="text-4xl font-extrabold text-black xl:text-5xl">Ready to try Wireskip?</h2>
<p class="mt-2 text-xl text-gray-600">Choose from any free or paid relays running Wireskip.</p>
</div>
<a href="https://github.com/Wireskip/client" class="flex items-center justify-center px-10 py-5 mt-10 text-2xl font-bold leading-tight text-black bg-white border-4 border-gray-900 rounded-lg group-hover:bg-black hover:bg-black group-hover:text-white hover:text-white lg:mt-0">Quickstart</a>
</div>
</div>
</section>
<!--FAQ -->
<a name="faq"></a>
<section class="py-24 bg-black">
<div class="px-8 mx-auto max-w-7xl lg:px-16">
<h2 class="mb-4 text-xl font-bold md:text-3xl text-white">Frequently Asked Questions</h2>
<div class="grid grid-cols-1 gap-0 text-gray-300 md:grid-cols-2 md:gap-16">
<div>
<h5 class="mt-10 mb-3 font-semibold text-white">What is Wireskip?</h5>
<p>Wireskip is a consumer VPN for your device. It's different in its scalability <i>(for VPN providers)</i>, indistinguishability, and censorship resistance <i>(for consumers)</i>.</p>
<h5 class="mt-10 mb-3 font-semibold text-white">Why make another protocol?</h5>
<p>Wireskip is built to solve specific problems that other VPN protocols do not. While OpenVPN, Wireguard, and even Tor all have their benefits, none of them natively allow for indistinguishable traffic or the type of decentralized scalability and economic sustinability Wireskip is designed to provide.</p>
<h5 class="mt-10 mb-3 font-semibold text-white">How can I trust the code?</h5>
<p>
Wireskip is developed transparently by multiple public collaborating contributors as open source software free to inspect, audit, and modify as desired.
</p>
</div>
<div>
<h5 class="mt-10 mb-3 font-semibold text-white">Has Wireskip been audited?</h5>
<p>Wireskip is in discussion with OSTIF for an eventual audit.</p>
<h5 class="mt-10 mb-3 font-semibold text-white">Is it legal for me to use Wireskip?</h5>
<p>
A regular question on the internet is “Is Tor or [some] VPN legal in my country?”. We sponsor continued independent research into this topic and you can find the latest legal information <a href="./legal/compliance/">here</a> for your specific situation.
</p>
<h5 class="mt-10 mb-3 font-semibold text-white">Where does the idea for Wireskip come from?</h5>
<p>Wireskip is largely based off of the concept of Wireleap, a now unmaintained partially closed source software.</p>
</div>
</div>
</div>
</section>
<!-- Section 10 -->
<section class="text-gray-700 bg-white body-font">
<div class="container flex flex-col items-center px-8 py-8 mx-auto max-w-7xl sm:flex-row">
<a href="#_" class="text-xl font-black leading-none text-gray-900 select-none logo">Wireskip.</a>
<p class="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0">Wireskip. <a href="https://wireskip.com/legal/privacy/">Privacy policy</a>
</p>
<span class="inline-flex justify-center mt-4 space-x-5 sm:ml-auto sm:mt-0 sm:justify-start">
<a href="https://discord.gg/Bf3QbrkRua" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Discord</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="m17.78,1.33c-1.38-.63-2.83-1.08-4.33-1.33-.2.37-.39.74-.55,1.13-1.59-.24-3.21-.24-4.8,0-.16-.39-.35-.76-.55-1.13-1.5.26-2.95.7-4.33,1.34C.46,5.39-.28,9.34.09,13.24H.09c1.6,1.19,3.4,2.09,5.31,2.67.43-.58.81-1.19,1.14-1.83-.62-.23-1.22-.52-1.79-.85.15-.11.3-.22.44-.33,3.36,1.58,7.25,1.58,10.62,0,.14.12.29.23.44.33-.57.34-1.17.62-1.79.86.33.64.71,1.25,1.14,1.83,1.91-.58,3.71-1.48,5.31-2.66h0c.44-4.52-.74-8.44-3.12-11.91ZM7.01,10.84c-1.03,0-1.89-.94-1.89-2.09s.83-2.1,1.89-2.1,1.91.95,1.89,2.1-.83,2.09-1.89,2.09Zm6.97,0c-1.04,0-1.89-.94-1.89-2.09s.83-2.1,1.89-2.1,1.9.95,1.89,2.1-.83,2.09-1.89,2.09Z">
</svg>
</a>
<a href="https://github.com/Wireskip" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="m10,0C4.48,0,0,4.48,0,10.02c0,4.43,2.86,8.18,6.84,9.5.5.09.68-.22.68-.48,0-.24,0-.87-.01-1.7-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61,1,.07,1.53,1.03,1.53,1.03.89,1.53,2.34,1.09,2.91.83.09-.65.35-1.09.64-1.34-2.22-.25-4.55-1.11-4.55-4.95,0-1.09.39-1.99,1.03-2.69-.1-.25-.45-1.27.1-2.65,0,0,.84-.27,2.75,1.03.82-.22,1.66-.34,2.5-.34.85,0,1.7.11,2.5.34,1.91-1.3,2.75-1.03,2.75-1.03.55,1.38.2,2.4.1,2.65.64.7,1.03,1.6,1.03,2.69,0,3.85-2.34,4.69-4.57,4.94.36.31.68.92.68,1.85,0,1.34-.01,2.42-.01,2.75,0,.27.18.58.69.48,4.08-1.37,6.83-5.2,6.83-9.5C20,4.48,15.52,0,10,0Z"/>
</svg>
</a>
</span>
</div>
</section>
</body>
</html>
<!-- ... -->