-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1186 lines (1167 loc) · 67.9 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
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<!-- Ah, un curieux ! -->
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>Matthieu Bué - Webdesigner et développeur front-end freelance à Bordeaux</title>
<meta name="description" content="Si vous cherchez un freelance pour designer et intégrer vos sites vitrine, one-page ou e-commerce, en responsive ou non, vous avez trouvé !">
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/assets/fonts/droid-serif.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/assets/fonts/pt-sans-narrow.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/assets/fonts/ovo.woff2">
<link rel="preload" as="script" type="text/javascript" href="assets/js/main.min.js?171024">
<link rel="preload" as="script" type="text/javascript" href="//www.google-analytics.com/analytics.js">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png?v=160720-01">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png?v=160720-01">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png?v=160720-01">
<link rel="manifest" href="assets/favicons/manifest.json?v=160720-01">
<link rel="mask-icon" href="assets/favicons/safari-pinned-tab.svg?v=160720-01" color="#009d64">
<link rel="shortcut icon" href="assets/favicons/favicon.ico?v=160720-01">
<meta name="msapplication-config" content="assets/favicons/browserconfig.xml?v=160720-01">
<meta name="theme-color" content="#009d64">
<link rel="author" href="//google.com/+matthieubue">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twikito">
<meta name="twitter:creator" content="@Twikito">
<meta name="twitter:image" content="https://twikito.com/assets/img/social/tc-image.jpg">
<meta name="twitter:image:alt" content="Matthieu Bué en illustration">
<meta property="og:title" content="Matthieu Bué - Webdesigner et développeur front-end freelance à Bordeaux">
<meta property="og:description" content="Si vous cherchez un freelance pour designer et intégrer vos sites vitrine, one-page ou e-commerce, en responsive ou non, vous avez trouvé !">
<meta property="og:url" content="https://twikito.com">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_fr">
<meta property="og:image" content="https://twikito.com/assets/img/social/og-image.jpg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="600">
<!-- Troll alert ! 😄 -->
<!--[if gt IE 9]><!-->
<link rel="stylesheet" href="assets/css/main.css?171103">
<!--<![endif]-->
</head>
<body>
<input type="checkbox" role="button" id="navcheck" title="Afficher le menu" tabindex="1">
<label for="navcheck" title="Menu" aria-hidden="true">
<span class="area">
<span class="navicon">
<span class="visuallyhidden">Menu</span>
</span>
</span>
</label>
<header id="top" class="banner" itemscope itemtype="https://schema.org/Person">
<!-- Verbiage dithyrambique de SVG ^^ -->
<svg id="logo" viewBox="0 0 490 450" data-se="outside" data-se-repeat="true" data-se-offset="100">
<title>Twikito logo</title>
<g id="svg-fills">
<filter id="blur">
<feGaussianBlur stdDeviation="7"/>
</filter>
<path fill="rgba(0,0,0,.6)" filter="url(#blur)" d="M422.23,128.46c-43.8-18.16-153.84-62-194.43-78S153,36.59,126.31,78.25c0,0-68.37,97.21-99.35,143.15S17.35,309,52.6,325,238.49,410.5,289.76,430.79s81.19-2.13,96.15-38.45S444.67,257.73,461.76,215,466,146.63,422.23,128.46ZM170.3,341.94c-7.73,4.54-70.6-25.22-70.6-33.62s57.92-87.28,58.17-98.17S99,187.45,99.36,177.86c.53-15,67-108.35,77.63-112.68,6.69-2.74,62.57,16.18,65.4,25.72s-55,82.73-53.6,92.68S244.27,205.1,245.44,215C247.16,229.55,180.92,335.71,170.3,341.94Zm154.83-38.41c1.56,6.57,43.37,16.39,45.28,24.53,2.45,10.47-30.58,76.67-41.75,82.47-6.3,3.28-110-40.12-110.11-48.41-.34-29.34,83-152.32,82.88-160.71S248.22,179.46,247,171.64c-1.59-9.82,28.2-61.31,38.83-65.56,6.31-2.52,112.59,41.2,113,49.68C400,183.75,323.57,297,325.13,303.52Z"/>
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="18.4776" y1="273.9469" x2="471.9343" y2="182.0568">
<stop offset="5.076140e-003" stop-color="#0F6900"/>
<stop offset="0.5099" stop-color="#30A400"/>
<stop offset="0.5169" stop-color="#3AA90B"/>
<stop offset="0.5458" stop-color="#5DBB34"/>
<stop offset="0.5741" stop-color="#79C955"/>
<stop offset="0.6012" stop-color="#8DD36C"/>
<stop offset="0.6266" stop-color="#99D97A"/>
<stop offset="0.6485" stop-color="#9DDB7F"/>
<stop offset="0.666" stop-color="#9ADA7A"/>
<stop offset="0.6859" stop-color="#90D86D"/>
<stop offset="0.7068" stop-color="#80D456"/>
<stop offset="0.7285" stop-color="#6ACF36"/>
<stop offset="0.7506" stop-color="#4DC80E"/>
<stop offset="0.7574" stop-color="#43C600"/>
<stop offset="1" stop-color="#55E500"/>
</linearGradient>
<path fill="url(#a)" d="M426.2,97.5c8.9,3.7,16.6,7.7,22.9,12.1C442.7,105,435.1,101,426.2,97.5z M31,190.4c31-45.9,99.4-143.2,99.4-143.2S61.8,144.4,31,190.4z M23.9,202.7c0.4-0.8,0.8-1.6,1.2-2.3C24.6,201.1,24.2,201.9,23.9,202.7z M477.6,160c-0.8-14.4-5.6-27.2-14.9-38.2c12.8,15.7,13.7,35.6,3.1,62.2c-17.1,42.7-60.9,141-75.8,177.3c-15,36.3-44.9,58.8-96.2,38.5c-62-24.5-202.6-90-237.2-105.8c-32.1-14.6-52.7-50.4-32.7-91.4c-9.6,19.4-12,39.4-12.3,62c-0.2,12.2-2,39.9,39.2,60.5c35.9,18,192.9,88.7,246.1,109.7c39.5,15.6,80.2-2.2,95.7-39.9c15.5-37.7,61-139.7,78.7-184C481.3,185.8,478.1,167.8,477.6,160z"/>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="191.0341" y1="185.4438" x2="249.4433" y2="185.4438">
<stop offset="0" stop-color="#258800"/>
<stop offset="0.9478" stop-color="#1E8200"/>
<stop offset="1" stop-color="#1D8200"/>
</linearGradient>
<path fill="url(#b)" d="M192.8,152.6c1.4,10,55.5,21.5,56.7,31.4v34.3c-1.2-9.9-55.3-21.5-56.7-31.4C191.2,181.7,189.8,165.1,192.8,152.6z"/>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="103.6933" y1="245.3756" x2="164.0894" y2="245.3756">
<stop offset="0" stop-color="#258800"/>
<stop offset="0.8737" stop-color="#1E8200"/>
<stop offset="1" stop-color="#1C8100"/>
</linearGradient>
<path fill="url(#c)" d="M103.7,277.3c0-8.4,57.9-87.3,58.2-98.2c4.7,11,0.6,24.3,0,34.3c-0.2,10.9-58.2,89.8-58.2,98.2V277.3z"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="244.9042" y1="107.5365" x2="102.6846" y2="107.5365">
<stop offset="0" stop-color="#0A2A00"/>
<stop offset="0.1228" stop-color="#0D3F00"/>
<stop offset="0.2908" stop-color="#0F5500"/>
<stop offset="0.4762" stop-color="#116400"/>
<stop offset="0.6905" stop-color="#136D00"/>
<stop offset="1" stop-color="#137000"/>
</linearGradient>
<path fill="url(#d)" d="M246.4,59.9c-2.8-9.5-58.7-28.5-65.4-25.7c-10.6,4.3-77.1,97.6-77.6,112.7v34.3c0.5-15,67-108.3,77.6-112.7c6.7-2.7,62.6,16.2,65.4,25.7V59.9z"/>
<linearGradient id="e" gradientUnits="userSpaceOnUse" x1="222.5459" y1="267.9001" x2="307.3857" y2="267.9001">
<stop offset="0" stop-color="#44C300"/>
<stop offset="0.3506" stop-color="#44BD00"/>
<stop offset="0.7984" stop-color="#43AE00"/>
<stop offset="1" stop-color="#43A400"/>
</linearGradient>
<path fill="url(#e)" d="M222.5,365.4c-0.3-29.3,83-152.3,82.9-160.7c1.5-9.6,3.5-18.7,0-34.3c0.2,8.4-83.2,131.4-82.9,160.7V365.4z"/>
<linearGradient id="f" gradientUnits="userSpaceOnUse" x1="374.0122" y1="301.9341" x2="324.5884" y2="301.9341">
<stop offset="0" stop-color="#1A5900"/>
<stop offset="3.772622e-002" stop-color="#206400"/>
<stop offset="0.1401" stop-color="#2D7B00"/>
<stop offset="0.2579" stop-color="#378D00"/>
<stop offset="0.3986" stop-color="#3E9A00"/>
<stop offset="0.5851" stop-color="#42A100"/>
<stop offset="1" stop-color="#43A300"/>
</linearGradient>
<path fill="url(#f)" d="M329.1,272.5c1.6,6.6,43.4,16.4,45.3,24.5v34.3c-1.9-8.1-43.7-18-45.3-24.5C327.6,299,324.3,290.7,329.1,272.5z"/>
<linearGradient id="g" gradientUnits="userSpaceOnUse" x1="401.2448" y1="124.9574" x2="247.9312" y2="124.9574">
<stop offset="0" stop-color="#1F4A00"/>
<stop offset="8.061832e-002" stop-color="#296400"/>
<stop offset="0.1784" stop-color="#337B00"/>
<stop offset="0.291" stop-color="#3A8D00"/>
<stop offset="0.4254" stop-color="#3F9A00"/>
<stop offset="0.6036" stop-color="#42A100"/>
<stop offset="1" stop-color="#43A300"/>
</linearGradient>
<path fill="url(#g)" d="M251,174.9c-1.6-9.8,28.2-61.3,38.8-65.6c6.3-2.5,112.6,41.2,113,49.7v-34.3c-0.4-8.5-106.7-52.2-113-49.7c-10.6,4.3-40.4,55.7-38.8,65.6V174.9z"/>
<linearGradient id="h" gradientUnits="userSpaceOnUse" x1="96.8345" y1="97.3581" x2="346.9799" y2="265.8026">
<stop offset="0" stop-color="#137700"/>
<stop offset="5.363379e-002" stop-color="#1C8200"/>
<stop offset="0.279" stop-color="#3DAD00"/>
<stop offset="0.482" stop-color="#55CC00"/>
<stop offset="0.6537" stop-color="#64DF00"/>
<stop offset="0.7734" stop-color="#69E600"/>
<stop offset="0.9049" stop-color="#6CEA00"/>
<stop offset="1" stop-color="#72F200"/>
</linearGradient>
<path fill="url(#h)" d="M426.2,97.5c-43.8-18.2-153.8-62-194.4-78C191.2,3.5,157,5.6,130.3,47.3c0,0-68.4,97.2-99.4,143.2C0,236.3,21.3,278,56.6,294c35.3,16,185.9,85.5,237.2,105.8c51.3,20.3,81.2-2.1,96.2-38.5c15-36.3,58.8-134.6,75.8-177.3C482.9,141.3,470,115.6,426.2,97.5z M174.3,310.9c-7.7,4.5-70.6-25.2-70.6-33.6c0-8.4,57.9-87.3,58.2-98.2c0.2-10.9-58.8-22.7-58.5-32.3c0.5-15,67-108.3,77.6-112.7c6.7-2.7,62.6,16.2,65.4,25.7c2.8,9.5-55,82.7-53.6,92.7c1.4,10,55.5,21.5,56.7,31.4C251.2,198.5,184.9,304.7,174.3,310.9z M329.1,272.5c1.6,6.6,43.4,16.4,45.3,24.5c2.5,10.5-30.6,76.7-41.8,82.5c-6.3,3.3-110-40.1-110.1-48.4c-0.3-29.3,83-152.3,82.9-160.7c-0.2-8.4-53.2-21.9-54.5-29.8c-1.6-9.8,28.2-61.3,38.8-65.6c6.3-2.5,112.6,41.2,113,49.7C404,152.7,327.6,266,329.1,272.5z"/>
<linearGradient id="i" gradientUnits="userSpaceOnUse" x1="28.4844" y1="292.3452" x2="474.0908" y2="292.3452">
<stop offset="0" stop-color="#136F00"/>
<stop offset="6.244701e-002" stop-color="#2F801D"/>
<stop offset="0.2071" stop-color="#6AA35C"/>
<stop offset="0.3456" stop-color="#9BC191"/>
<stop offset="0.4742" stop-color="#C2D8BA"/>
<stop offset="0.5906" stop-color="#DDE8D7"/>
<stop offset="0.6908" stop-color="#EEF2E9"/>
<stop offset="0.7634" stop-color="#F4F6EF"/>
<stop offset="0.8643" stop-color="#B2EF8B"/>
<stop offset="1" stop-color="#5BE609"/>
</linearGradient>
<path fill="url(#i)" d="M469.3,174.1c-1,3.2-2.1,6.5-3.5,9.9c-17.1,42.7-60.9,141-75.8,177.3c-15,36.3-44.9,58.8-96.2,38.5C242.5,379.5,91.9,310.1,56.6,294c-8.9-4-16.9-9.7-23.4-16.6l-4.8,1.1c7,8,16,14.7,26.3,19.4c5.3,2.4,13.1,6,22.8,10.4c55.5,25.4,170.9,78.1,214.6,95.4c13.4,5.3,26,8,37.4,8c28.9,0,51.1-16.9,64.3-48.8c6.4-15.5,18.2-42.7,30.7-71.4c16.6-38.2,35.4-81.5,45.2-105.9c1.8-4.4,3.2-8.6,4.3-12.7L469.3,174.1z"/>
<linearGradient id="j" gradientUnits="userSpaceOnUse" x1="248.1865" y1="101.4289" x2="401.0351" y2="101.4289">
<stop offset="0" stop-color="#56C70A"/>
<stop offset="3.200732e-002" stop-color="#5DCA15"/>
<stop offset="0.2789" stop-color="#94DD62"/>
<stop offset="0.3925" stop-color="#AAE581"/>
<stop offset="0.4576" stop-color="#A2E670"/>
<stop offset="0.6183" stop-color="#91E94A"/>
<stop offset="0.7674" stop-color="#84EB2F"/>
<stop offset="0.8992" stop-color="#7DEC1F"/>
<stop offset="1" stop-color="#7AEC19"/>
</linearGradient>
<path fill="url(#j)" d="M252.9,131.7c6.7-18,28.2-53.1,36.9-56.6c5.2-2.1,79.1,27.6,104.5,42.6l6.8-0.7c-6.5-4.6-20.1-11.9-48.5-24.2c-17.8-7.7-53.7-22.1-61.9-22.1c-0.9,0-1.7,0.1-2.3,0.4c-8.3,3.3-21,23.8-26.1,32.5c-3.7,6.2-10.8,18.9-13.9,28.6L252.9,131.7z"/>
<linearGradient id="k" gradientUnits="userSpaceOnUse" x1="123.1074" y1="65.4919" x2="247.1846" y2="65.4919">
<stop offset="0" stop-color="#1F8700"/>
<stop offset="0.3215" stop-color="#54A43A"/>
<stop offset="0.5161" stop-color="#70B459"/>
<stop offset="0.5173" stop-color="#70B459"/>
<stop offset="0.6604" stop-color="#5AB233"/>
<stop offset="0.793" stop-color="#4BB018"/>
<stop offset="0.9103" stop-color="#41AF08"/>
<stop offset="1" stop-color="#3EAF02"/>
</linearGradient>
<path fill="url(#k)" d="M130,98.7c20-29.7,44.8-62,51-64.5c5.8-2.4,48.4,11.5,61.6,21.4l4.6-1.8c-3.5-3.3-11.1-8-27.5-14.3c-12.5-4.8-29.3-9.9-36.7-9.9c-1.5,0-2.6,0.2-3.6,0.6c-9.1,3.7-38.6,45.5-44.5,53.8c-3.1,4.4-7.3,10.5-11.8,17.3L130,98.7z"/>
<linearGradient id="l" gradientUnits="userSpaceOnUse" x1="266.7668" y1="-0.1301" x2="411.5872" y2="199.8602">
<stop offset="0" stop-color="#4CB80F"/>
<stop offset="0.2674" stop-color="#6CD027"/>
<stop offset="0.5527" stop-color="#87E53C"/>
<stop offset="0.8062" stop-color="#97F249"/>
<stop offset="1" stop-color="#9DF64D"/>
</linearGradient>
<path fill="url(#l)" d="M424.6,101.4C388.9,86.6,309.7,55,260,35.3c11.2,10.9,21.6,22.8,31.4,35.5c9.6,0.9,43.8,14.7,61.1,22.1c54.2,23.3,54.4,28.8,54.6,31.7c0.7,15-16.5,47.9-39.6,87.8c14.9,39.5,25.7,78.8,32.9,113.5c5-11.6,10.6-24.5,16.4-37.7c16.6-38.1,35.3-81.3,45.1-105.7C477.8,142.5,467,119,424.6,101.4z"/>
</g>
<g id="svg-strokes">
<path id="stroke-j" fill="none" d="M31,190.4c-15.7,23.4-19.1,46.8-19.4,74.2c-0.2,12.2-2,39.9,39.2,60.5c35.9,18,192.9,88.7,246.1,109.7c39.5,15.6,80.2-2.2,95.7-39.9c15.5-37.7,61-139.7,78.7-184c10.1-25.2,6.8-43.2,6.3-51c-1.6-27.2-17.3-49-51.4-62.5"/>
<path id="stroke-i" fill="none" d="M192.8,152.6c-3,12.5-1.6,29.2,0,34.3c1,7.3,30.6,15.5,46.6,23.3"/>
<path id="stroke-h" fill="none" d="M116.4,288.5c17.1-26.8,45.3-67.4,45.5-75c0.6-10,4.7-23.3,0-34.3"/>
<path id="stroke-g" fill="none" d="M115.4,155.8c19.8-32.9,57.8-84.1,65.6-87.3c4.8-2,35.6,7.4,53.2,16.4"/>
<path id="stroke-f" fill="none" d="M231,338.3c21.2-46.8,74.5-126.9,74.4-133.6c1.5-9.6,3.5-18.7,0-34.3"/>
<path id="stroke-e" fill="none" d="M329.2,272.5c-4.8,18.2-1.5,26.5,0,34.3c1.1,4.8,24,11.4,36.8,17.8"/>
<path id="stroke-d" fill="none" d="M261.3,148c9.2-17.2,22.2-36.2,28.5-38.7c5.2-2.1,79.6,27.8,104.7,42.8"/>
<path id="stroke-c" fill="none" d="M192.8,152.6c-1.4-9.9,56.4-83.2,53.6-92.7c-2.8-9.5-58.7-28.5-65.4-25.7c-10.6,4.3-77.1,97.6-77.6,112.7c-0.3,9.6,58.8,21.4,58.5,32.3c-0.2,10.9-58.2,89.8-58.2,98.2c0,8.4,62.9,38.2,70.6,33.6c10.6-6.2,76.9-112.4,75.1-126.9C248.3,174.1,194.2,162.5,192.8,152.6z"/>
<path id="stroke-b" fill="none" d="M402.8,124.8c-0.4-8.5-106.7-52.2-113-49.7c-10.6,4.3-40.4,55.7-38.8,65.6c1.3,7.8,54.3,21.4,54.5,29.8c0.2,8.4-83.2,131.4-82.9,160.7c0.1,8.3,103.8,51.7,110.1,48.4c11.2-5.8,44.2-72,41.8-82.5c-1.9-8.1-43.7-18-45.3-24.5C327.6,266,404,152.7,402.8,124.8z"/>
<path id="stroke-a" fill="none" d="M293.8,399.8c51.3,20.3,81.2-2.1,96.2-38.5c15-36.3,58.8-134.6,75.8-177.3c17.1-42.7,4.3-68.4-39.5-86.5c-43.8-18.2-153.8-62-194.4-78C191.2,3.5,157,5.6,130.3,47.3c0,0-68.4,97.2-99.4,143.2C0,236.3,21.3,278,56.6,294C91.9,310.1,242.5,379.5,293.8,399.8z"/>
</g>
</svg>
<h1>
<span itemprop="name">
<span itemprop="givenName">Matthieu</span>
<span itemprop="familyName">Bué</span>
</span>
<strong itemprop="jobTitle">Web Designer</strong>
</h1>
<h2 class="small" itemprop="description">Web <i class="amp">&</i> <abbr title="User Interface" lang="en">UI</abbr> Design, développement <span lang="en">front-end</span></h2>
<meta itemprop="alternateName" content="Twikito">
<meta itemprop="gender" content="male">
<link itemprop="nationality" href="https://en.wikipedia.org/wiki/France">
<link itemprop="url" href="https://twikito.com">
<link itemprop="image" href="https://twikito.com/assets/img/layout/logo-twikito.svg">
<p>
<a itemprop="sameAs" href="//twitter.com/twikito" title="Matthieu Bué sur Twitter">
<span class="visuallyhidden">Twitter</span>
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-twitter" /></svg>
</a>
<a itemprop="sameAs" href="//linkedin.com/in/matthieubue" title="Matthieu Bué sur LinkedIn">
<span class="visuallyhidden">LinkedIn</span>
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-linkedin" /></svg>
</a>
<a itemprop="sameAs" href="//codepen.io/Twikito" title="Matthieu Bué sur Codepen">
<span class="visuallyhidden">CodePen</span>
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-codepen" /></svg>
</a>
<a itemprop="sameAs" href="//speakerdeck.com/twikito" title="Matthieu Bué sur Speaker Deck">
<span class="visuallyhidden">Speaker Deck</span>
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-speakerdeck" /></svg>
</a>
<a itemprop="sameAs" href="//play.spotify.com/user/1131199865" title="Matthieu Bué sur Spotify">
<span class="visuallyhidden">Spotify</span>
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-spotify" /></svg>
</a>
<link itemprop="sameAs" href="//facebook.com/matthieu.bue">
<link itemprop="sameAs" href="//google.com/+matthieubue">
</p>
</header>
<nav>
<a href="#" tabindex="2">
<svg><use aria-labelledby="nav-item-1" xlink:href="assets/img/layout/symbol-defs.svg#icon-home" /></svg>
<span id="nav-item-1" lang="en">Home</span>
</a>
<a href="#quote1" tabindex="3">
<svg><use aria-labelledby="nav-item-2" xlink:href="assets/img/layout/symbol-defs.svg#icon-bubble" /></svg>
<span id="nav-item-2" lang="en">Quote</span>
</a>
<a href="#competences" tabindex="4">
<svg><use aria-labelledby="nav-item-3" xlink:href="assets/img/layout/symbol-defs.svg#icon-user" /></svg>
<span id="nav-item-3">Compétences</span>
</a>
<a href="#personnalite" tabindex="5">
<svg><use aria-labelledby="nav-item-4" xlink:href="assets/img/layout/symbol-defs.svg#icon-heart" /></svg>
<span id="nav-item-4">Personnalité</span>
</a>
<a href="#experience" tabindex="6">
<svg><use aria-labelledby="nav-item-5" xlink:href="assets/img/layout/symbol-defs.svg#icon-beaker" /></svg>
<span id="nav-item-5">Expérience</span>
</a>
<a href="#quote_2" tabindex="7">
<svg><use aria-labelledby="nav-item-6" xlink:href="assets/img/layout/symbol-defs.svg#icon-bubble" /></svg>
<span id="nav-item-6">Quote_2</span>
</a>
<a href="#talks" tabindex="8">
<svg><use aria-labelledby="nav-item-7" xlink:href="assets/img/layout/symbol-defs.svg#icon-bullhorn" /></svg>
<span id="nav-item-7">Publications</span>
</a>
<a href="#social" tabindex="9">
<svg><use aria-labelledby="nav-item-8" xlink:href="assets/img/layout/symbol-defs.svg#icon-share" /></svg>
<span id="nav-item-8">À suivre</span>
</a>
<a href="#contact" tabindex="10">
<svg><use aria-labelledby="nav-item-9" xlink:href="assets/img/layout/symbol-defs.svg#icon-paper-plane" /></svg>
<span id="nav-item-9">Parlons-en</span>
</a>
</nav>
<hr>
<article id="quote1" class="green quote">
<header>
<h2>
<a href="#quote1" title="Quote (permalien)">
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-bubble" /></svg>
<span class="visuallyhidden">Quote</span>
</a>
</h2>
</header>
<div class="wrapper">
<p class="biggest">
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-quote" /></svg>
Si je pouvais recréer le Web,<br>j’en ferais un endroit <span><span>merveilleux, <br>ouvert, <br>étonnant, <br>de partage, <br>sans pub, </span></span><br>accessible à tous.
</p>
</div>
</article>
<hr>
<article id="competences" class="skills">
<header>
<h2>
<a href="#competences" title="Compétences (permalien)">
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-user" /></svg>
<span class="visuallyhidden">Compétences</span>
</a>
</h2>
</header>
<section class="wrapper">
<header data-se="outside" data-se-offset="100">
<h3><span class="s01">Web <i class="amp">&</i> <abbr title="User Interface" lang="en">UI</abbr> </span><span class="s02">Design</span></h3>
</header>
<p>Je garde les yeux grand ouverts sur les tendances graphiques et design du Web depuis mes débuts en 2003. Aujourd’hui je me spécialise dans le design simple et épuré, voire minimaliste. Je conçois des interfaces Web et mobile (<abbr title="User Interface" lang="en">UI</abbr>), pour tablette et smartphone. L’expérience me permet également d’apporter ma contribution en <abbr title="User eXperience" lang="en">UX</abbr> design, ergonomie et <span lang="en">storytelling</span>.</p>
</section>
<section class="wrapper">
<header data-se="outside" data-se-offset="100">
<h3><span class="s03">Inté</span><span class="s04">gration</span></h3>
</header>
<p>Je code dans les règles de l’art en <abbr title="Hypertext Markup Language" lang="en">HTML</abbr> (inc. HTML5), <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> (inc. CSS3), <abbr title="Scalable Vector Graphics" lang="en">SVG</abbr> et JavaScript (Vanilla ou jQuery), avec ou sans framework ou préprocesseur CSS (<abbr title="Syntactically Awesome Style Sheets" lang="en">SASS</abbr> ou Less) et valide <abbr title="World Wide Web Consortium" lang="en">W3C</abbr>. Je prends en compte la rétrocompatibilité nécessaire au projet en fonction de sa cible, ainsi que l’optimisation des performances. Je code également des sites Web responsives (<abbr title="Responsive Web Design" lang="en">RWD</abbr>) ou dédiés (<span lang="en">desktop</span>, tablette, <span lang="en">smartphone</span>, etc.).</p>
</section>
<section class="wrapper">
<header data-se="outside" data-se-offset="100">
<h3><span class="s05"><abbr title="Search Engine Optimization" lang="en">SEO</abbr> <i class="amp">&</i> <abbr title="Accessibility" lang="en">A11Y</abbr></span> <span class="s06">Qualité </span></h3>
</header>
<p>Je mets une attention particulière à délivrer le fruit de mon travail dans la meilleure qualité en fonction des contraintes inhérentes au projet. Maintenabilité, <span lang="en">On-page <abbr title="Search Engine Optimization">SEO</abbr></span>, accessibilité (<abbr title="Accessibility" lang="en">A11Y</abbr>), sémantique (<span lang="en">microdata</span>), performance, compatibilité, etc.</p>
</section>
<section class="wrapper">
<header data-se="outside" data-se-offset="100">
<h3><span class="s07">Formation</span> <span class="s08"><abbr title="Hypertext Markup Language" lang="en">HTML</abbr> <i class="amp">&</i> <abbr title="Cascading Style Sheets" lang="en">CSS</abbr></span></h3>
</header>
<p>Je dispense des formations en <abbr title="Hypertext Markup Language" lang="en">HTML</abbr> et <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> en école privée à des étudiants de niveaux débutant à avancé, et à des professionnels ayant des besoins d’apprentissage ou de mise à niveau en intégration Web optimisée.</p>
</section>
</article>
<hr>
<article id="personnalite" class="green love">
<header>
<h2>
<a href="#personnalite" title="Personnalité (permalien)">
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-heart" /></svg>
<span class="visuallyhidden">Personnalité</span>
</a>
</h2>
</header>
<div class="wrapper">
<figure>
<img src="assets/img/layout/illustration.svg" alt="/me" width="163" height="299">
<figcaption class="hidden">/me</figcaption>
</figure>
<p class="big">
<span class="biggest" data-se="outside" data-se-offset="100">J’aime</span>
le design, le code, les deux ensemble, l’expérimentation, la trance progressive, le jazz, la musique en général, le cinéma, la science-fiction, le fantastique, les jeux vidéos, les casse-têtes, les Rubik’s cubes, le tennis, le body pump, le roller, le ski, la randonnée, la pétanque, les bandes dessinées, les mangas, la japanimation, les jeux de société, les nouvelles technologies, les trucs de geek, le bon café…
</p>
</div>
</article>
<hr>
<article id="experience" class="xp">
<header>
<h2>
<a href="#experience" title="Expérience (permalien)">
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-beaker" /></svg>
<span class="visuallyhidden">Expérience professionnelle</span>
</a>
</h2>
</header>
<div class="wrapper">
<p class="big">Quelques projets récents…</p>
</div>
<input type="checkbox" id="real0" aria-hidden="true" checked>
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real0">Worders</label>
</h3>
</header>
<div>
<p>En poste dans une startup de traduction pour grands comptes, développement d’une application Web pour la gestion des projets, devis et factures, la mise en relation des clients, traducteurs et administrateurs, et la traduction de documents. L’enjeu est de rendre l’interface complexe la plus maintenable, évolutive et compatible possible. Contexte internationnal, Ruby on Rails, CoffeeScript, Angular, Slim et skins graphiques.</p>
<ul>
<li>Adaptations de wireframes à la charte graphique établie</li>
<li>Adaptations de l’interface et des interactions pour l’accessibilité ergonomique</li>
<li>Définition d’une architecture <abbr title="Syntactically Awesome Style Sheets" lang="en">SASS</abbr> maintenable (fonctionnalités évolutives, skins graphiques)</li>
<li>Développement front-end rétrocompatible <abbr title="Internet Explorer">IE</abbr>11</li>
<li>Optimisations du code en accessibilité, performance, maintenabilité et qualité</li>
</ul>
<p class="sitelink"><a href="//worders.net" title="Worders, la seule solution de confiance pour vos traductions">worders.net</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/worders-1.jpg" alt="Page utilisateurs de Worders" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/worders-1_zlpfrk_c_scale,w_190.jpg 190w,
assets/img/screenshots/worders-1_zlpfrk_c_scale,w_315.jpg 315w,
assets/img/screenshots/worders-1_zlpfrk_c_scale,w_421.jpg 421w,
assets/img/screenshots/worders-1_zlpfrk_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-worders-1"></span>
</span></span></span>
<figcaption class="smaller">Interface de l’extranet Worders, page utilisateurs</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/worders-2.jpg" alt="Page messagerie de Worders" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/worders-2_fxua9p_c_scale,w_190.jpg 190w,
assets/img/screenshots/worders-2_fxua9p_c_scale,w_326.jpg 326w,
assets/img/screenshots/worders-2_fxua9p_c_scale,w_432.jpg 432w,
assets/img/screenshots/worders-2_fxua9p_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-worders-2"></span>
</span></span></span>
<figcaption class="smaller">Interface de l’extranet Worders, page messagerie</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real1" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real1">Opquast</label>
</h3>
</header>
<div>
<p>Intégration du nouveau site d’Opquast, en collaboration avec le designer <a href="http://www.fran6art.com/" title="Voir le travail de Francis Chouquet">Francis Chouquet</a>. Considérant l’activité et la cible, il y a un enjeu important en terme d’accessibilité et de qualité de code. J’ai mis un effort tout particulier sur l’ajout de schémas de données structurées.</p>
<ul>
<li>Intégration rétrocompatible <abbr title="Internet Explorer">IE</abbr>8</li>
<li>Optimisations <abbr title="Search Engine Optimization" lang="en">SEO</abbr> et d’accessibilité (microdata, <abbr title="Accessible Rich Internet Applications" lang="en">ARIA</abbr>, etc.)</li>
<li>Optimisations des rendus d’images (<abbr title="Scalable Vector Graphics" lang="en">SVG</abbr>, etc.)</li>
<li>Optimisations des performances</li>
<li>Optimisations responsives pour tablettes, smartphones et pour l’impression</li>
</ul>
<p class="sitelink"><a href="//opquast.com" title="Open Quality Standards">opquast.com</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/opquast-1.jpg" alt="Version desktop du site Opquast" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/opquast-1_jvu39n_c_scale,w_190.jpg 190w,
assets/img/screenshots/opquast-1_jvu39n_c_scale,w_342.jpg 342w,
assets/img/screenshots/opquast-1_jvu39n_c_scale,w_457.jpg 457w,
assets/img/screenshots/opquast-1_jvu39n_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-opquast-1"></span>
</span></span></span>
<figcaption class="smaller">Le site Opquast, version desktop</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/opquast-2.jpg" alt="Version mobile du site Opquast" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/opquast-2_j1qlu4_c_scale,w_190.jpg 190w,
assets/img/screenshots/opquast-2_j1qlu4_c_scale,w_357.jpg 357w,
assets/img/screenshots/opquast-2_j1qlu4_c_scale,w_491.jpg 491w,
assets/img/screenshots/opquast-2_j1qlu4_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-opquast-2"></span>
</span></span></span>
<figcaption class="smaller">Le site Opquast, version mobile</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real2" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real2">SudWeb</label>
</h3>
</header>
<div>
<p>Définition de la nouvelle communication du site de SudWeb, la conférence annuelle itinérante, avec la charte graphique préalablement définie. Concidérant la cible, la rétrocompatibilité ne sera pas un frein à l’innovation en développement front-end.</p>
<ul>
<li>Direction artistique (wireframes, ergonomie, <abbr title="User eXperience" lang="en">UX</abbr>, etc.)</li>
<li>Définition du Web design</li>
<li>Intégration rétrocompatible <abbr title="Internet Explorer" lang="en">IE</abbr>11, notamment une grille <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> par flexbox</li>
<li>Optimisations <abbr title="Search Engine Optimization" lang="en">SEO</abbr> et d’accessibilité</li>
<li>Optimisations des rendus d’images (sprite <abbr title="Scalable Vector Graphics" lang="en">SVG</abbr>, etc.)</li>
<li>Optimisations des performances</li>
<li>Optimisations responsives pour tablettes et smartphones</li>
</ul>
<p class="sitelink"><a href="//sudweb.fr" title="La conférence web super humaine">sudweb.fr</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/sudweb-1.jpg" alt="Home 2016 du site SudWeb" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/sudweb-1_hpq9xp_c_scale,w_190.jpg 190w,
assets/img/screenshots/sudweb-1_hpq9xp_c_scale,w_373.jpg 373w,
assets/img/screenshots/sudweb-1_hpq9xp_c_scale,w_492.jpg 492w,
assets/img/screenshots/sudweb-1_hpq9xp_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-sudweb-1"></span>
</span></span></span>
<figcaption class="smaller">Home 2016 du site SudWeb</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/sudweb-2.jpg" alt="Listing des conférences" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/sudweb-2_pkhalv_c_scale,w_190.jpg 190w,
assets/img/screenshots/sudweb-2_pkhalv_c_scale,w_335.jpg 335w,
assets/img/screenshots/sudweb-2_pkhalv_c_scale,w_441.jpg 441w,
assets/img/screenshots/sudweb-2_pkhalv_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-sudweb-2"></span>
</span></span></span>
<figcaption class="smaller">Listing des conférences</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real3" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real3">Osteo2ls</label>
</h3>
</header>
<div>
<p>Conception d’un extranet de gestion de clients, consultations et facturations à destination des ostéopathes. Ce projet a demandé beaucoup d’attention à rendre l’interface simple, rapide, et utilisable en mobilité.</p>
<ul>
<li>Direction artistique (wireframes, ergonomie, <abbr title="User eXperience" lang="en">UX</abbr>, etc.)</li>
<li>Définition du Web design</li>
<li>Intégration rétrocompatible <abbr title="Internet Explorer" lang="en">IE</abbr>10</li>
<li>Définition d’un framework <abbr title="Hypertext Markup Language" lang="en">HTML</abbr> et <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> adapté aux besoins client</li>
<li>Optimisations des rendus d’images (iconfont, <abbr title="Scalable Vector Graphics" lang="en">SVG</abbr>, etc.)</li>
<li>Optimisations des performances</li>
<li>Optimisations responsives pour tablettes et smartphones</li>
</ul>
<p class="sitelink"><a href="//demo.osteo2ls.com" title="Logiciel pour ostéopathe">demo.osteo2ls.com</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/osteo2ls-1.jpg" alt="Dossier patient de l’extranet Ostéo2ls" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/osteo2ls-1_vuys1q_c_scale,w_190.jpg 190w,
assets/img/screenshots/osteo2ls-1_vuys1q_c_scale,w_370.jpg 370w,
assets/img/screenshots/osteo2ls-1_vuys1q_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-osteo2ls-1"></span>
</span></span></span>
<figcaption class="smaller">Dossier patient de l’extranet Osteo2ls</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/osteo2ls-2.jpg" alt="Ostéo2ls version mobile" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/osteo2ls-2_tjaasp_c_scale,w_190.jpg 190w,
assets/img/screenshots/osteo2ls-2_tjaasp_c_scale,w_358.jpg 358w,
assets/img/screenshots/osteo2ls-2_tjaasp_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-osteo2ls-2"></span>
</span></span></span>
<figcaption class="smaller">Osteo2ls version mobile</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real4" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real4">Mondial Assistance</label>
</h3>
</header>
<div>
<p>Création de sites d’assurance pour une communication de niches. Au vu des cibles, les sites doivent être simples et efficaces, performants, responsives et rétrocompatibles.</p>
<ul>
<li>Direction artistique (wireframes, ergonomie, etc.)</li>
<li>Définition des chartes graphiques et Web designs</li>
<li>Intégration rétrocompatible <abbr title="Internet Explorer" lang="en">IE</abbr>6 par dégradations graciseuses</li>
<li>Optimisations <abbr title="Search Engine Optimization" lang="en">SEO</abbr> et d’accessibilité (microdata, <abbr title="Accessible Rich Internet Applications" lang="en">ARIA</abbr>, etc.)</li>
<li>Optimisations des rendus d’images (<abbr title="Scalable Vector Graphics" lang="en">SVG</abbr>, etc.)</li>
<li>Optimisations des performances</li>
<li>Optimisations responsives pour tablettes et smartphones</li>
</ul>
<p class="sitelink"><a href="//mondial-assistance.fr" title="Mondial Assistance, assurance voyage, loisirs et vacances">mondial-assistance.fr</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/mondial-assistance-1.jpg" alt="Version desktop du site jeunes et étudiants à l’étranger de Mondial Assistance" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/mondial-assistance-1_ei8nwe_c_scale,w_190.jpg 190w,
assets/img/screenshots/mondial-assistance-1_ei8nwe_c_scale,w_301.jpg 301w,
assets/img/screenshots/mondial-assistance-1_ei8nwe_c_scale,w_392.jpg 392w,
assets/img/screenshots/mondial-assistance-1_ei8nwe_c_scale,w_478.jpg 478w,
assets/img/screenshots/mondial-assistance-1_ei8nwe_c_scale,w_494.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-mondial-assistance-1"></span>
</span></span></span>
<figcaption class="smaller">Assurance pour jeunes expatriés</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/mondial-assistance-2.jpg" alt="Version desktop du site business à l’étranger de Mondial Assistance" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/mondial-assistance-2_bsyuy8_c_scale,w_190.jpg 190w,
assets/img/screenshots/mondial-assistance-2_bsyuy8_c_scale,w_298.jpg 298w,
assets/img/screenshots/mondial-assistance-2_bsyuy8_c_scale,w_381.jpg 381w,
assets/img/screenshots/mondial-assistance-2_bsyuy8_c_scale,w_482.jpg 482w,
assets/img/screenshots/mondial-assistance-2_bsyuy8_c_scale,w_494.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-mondial-assistance-2"></span>
</span></span></span>
<figcaption class="smaller">Assurance pour professionnels expatriés</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real5" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real5">Un Soir à Shibuya</label>
</h3>
</header>
<div>
<p>Création du site one page du restaurant en responsive. Le challenge ici est d’afficher des photos de haute qualité, tout en ayant un site performant qui charge rapidement, surtout sur smartphone.</p>
<ul>
<li>Direction artistique (wireframes, ergonomie, etc.)</li>
<li>Intégration rétrocompatible <abbr title="Internet Explorer" lang="en">IE</abbr>9</li>
<li>Optimisations <abbr title="Search Engine Optimization" lang="en">SEO</abbr> et d’accessibilité (microdata, <abbr title="Accessible Rich Internet Applications" lang="en">ARIA</abbr>, etc.)</li>
<li>Optimisations des rendus d’images (<abbr title="Scalable Vector Graphics" lang="en">SVG</abbr>, etc.)</li>
<li>Optimisations des performances</li>
<li>Optimisations responsives pour tablettes et smartphones</li>
</ul>
<p class="sitelink"><a href="http://unsoirashibuya.fr" title="un soir à Shibuya, restaurant japonais traditionnel à Bordeaux">unsoirashibuya.fr</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/shibuya-1.jpg" alt="Version desktop du site un soir à Shibuya" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/shibuya-1_kheh7c_c_scale,w_190.jpg 190w,
assets/img/screenshots/shibuya-1_kheh7c_c_scale,w_287.jpg 287w,
assets/img/screenshots/shibuya-1_kheh7c_c_scale,w_371.jpg 371w,
assets/img/screenshots/shibuya-1_kheh7c_c_scale,w_455.jpg 455w,
assets/img/screenshots/shibuya-1_kheh7c_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-shibuya-1"></span>
</span></span></span>
<figcaption class="smaller">Le site du restaurant version desktop</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/shibuya-2.jpg" alt="Version mobile du site un soir à Shibuya" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/shibuya-2_rfkncj_c_scale,w_190.jpg 190w,
assets/img/screenshots/shibuya-2_rfkncj_c_scale,w_330.jpg 330w,
assets/img/screenshots/shibuya-2_rfkncj_c_scale,w_442.jpg 442w,
assets/img/screenshots/shibuya-2_rfkncj_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-shibuya-2"></span>
</span></span></span>
<figcaption class="smaller">Le site du restaurant version mobile</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real6" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real6">Little Rock Diner</label>
</h3>
</header>
<div>
<p>Intégration du site one page du restaurant en responsive. Au vu de la maquette fournie par le designer <a href="//cabaroc.com/" title="Voir le travail de Jean-Philippe Cabaroc">Jean-Philippe Cabaroc</a>, les visuels doivent être optimisés pour les écrans Retina, mais aussi pour le chargement en mobilité, et retrocompatible pour IE8.</p>
<ul>
<li>Intégration rétrocompatible <abbr title="Internet Explorer" lang="en">IE</abbr>8</li>
<li>Optimisations <abbr title="Search Engine Optimization" lang="en">SEO</abbr> et d’accessibilité (microdata, <abbr title="Accessible Rich Internet Applications" lang="en">ARIA</abbr>, etc.)</li>
<li>Optimisations des rendus d’images (<abbr title="Scalable Vector Graphics" lang="en">SVG</abbr>, etc.)</li>
<li>Optimisations des performances</li>
<li>Optimisations responsives pour tablettes et smartphones</li>
</ul>
<p class="sitelink"><a href="//littlerockdiner.com" title="Little Rock Dinner, restaurant traditionnel américain à Antibes">littlerockdiner.com</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/littlerockdiner-1.jpg" alt="Version desktop du site LittleRock Diner" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/littlerockdiner-1_a8jftu_c_scale,w_190.jpg 190w,
assets/img/screenshots/littlerockdiner-1_a8jftu_c_scale,w_269.jpg 269w,
assets/img/screenshots/littlerockdiner-1_a8jftu_c_scale,w_333.jpg 333w,
assets/img/screenshots/littlerockdiner-1_a8jftu_c_scale,w_378.jpg 378w,
assets/img/screenshots/littlerockdiner-1_a8jftu_c_scale,w_447.jpg 447w,
assets/img/screenshots/littlerockdiner-1_a8jftu_c_scale,w_483.jpg 483w,
assets/img/screenshots/littlerockdiner-1_a8jftu_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-littlerockdiner-1"></span>
</span></span></span>
<figcaption class="smaller">Le site du restaurant version desktop</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/littlerockdiner-2.jpg" alt="Version mobile du site LittleRock Diner" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/littlerockdiner-2_bocass_c_scale,w_190.jpg 190w,
assets/img/screenshots/littlerockdiner-2_bocass_c_scale,w_321.jpg 321w,
assets/img/screenshots/littlerockdiner-2_bocass_c_scale,w_433.jpg 433w,
assets/img/screenshots/littlerockdiner-2_bocass_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-littlerockdiner-2"></span>
</span></span></span>
<figcaption class="smaller">Le site du restaurant version mobile</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real7" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real7">Groupe Casino</label>
</h3>
</header>
<div>
<p>Intervention sur la refonte des sites e-commerce Casino Drive et Casino Express. Compte tenu du client et de sa large cible, l’optimisation SEO et de l’accessibilité sont primordiales.</p>
<ul>
<li>Intégration rétrocompatible <abbr title="Internet Explorer" lang="en">IE</abbr>7</li>
<li>Optimisations <abbr title="Search Engine Optimization" lang="en">SEO</abbr> et d’accessibilité</li>
<li>Optimisations des performances</li>
<li>Prise en compte du « service rendu » (affichage, navigation) pour tablettes</li>
</ul>
<!-- Pas de screenshot T^T -->
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real8" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real8">La <abbr title="fédération des Parents d’Élèves de l’Enseignement Public">PEEP</abbr></label>
</h3>
</header>
<div>
<p>Direction artistique et création d’un design pour la fédération des parents d’élèves de l’enseignement public. La charte graphique doit être plus en accord avec la cible et les tendances graphiques et ergonomiques actuelles. Le design doit être prévu pour une plate-forme multi-site via le <abbr title="Content Management System">CMS</abbr> Mura.</p>
<ul>
<li>Propositions ergonomiques et d’organisation des contenus</li>
<li>Définition de la charte graphique et Web design</li>
</ul>
<p class="sitelink"><a href="http://peep.asso.fr" title="Fédération des Parents d’Élèves de l’Enseignement Public">peep.asso.fr</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/peep-1.jpg" alt="Accueil du site de la PEEP" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/peep-1_cvxv0m_c_scale,w_190.jpg 190w,
assets/img/screenshots/peep-1_cvxv0m_c_scale,w_284.jpg 284w,
assets/img/screenshots/peep-1_cvxv0m_c_scale,w_368.jpg 368w,
assets/img/screenshots/peep-1_cvxv0m_c_scale,w_445.jpg 445w,
assets/img/screenshots/peep-1_cvxv0m_c_scale,w_486.jpg 486w,
assets/img/screenshots/peep-1_cvxv0m_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-peep-1"></span>
</span></span></span>
<figcaption class="smaller">Maquette de la page d’accueil</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/peep-2.jpg" alt="Bas de page du site de la PEEP" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/peep-2_lv6dfh_c_scale,w_190.jpg 190w,
assets/img/screenshots/peep-2_lv6dfh_c_scale,w_284.jpg 284w,
assets/img/screenshots/peep-2_lv6dfh_c_scale,w_367.jpg 367w,
assets/img/screenshots/peep-2_lv6dfh_c_scale,w_443.jpg 443w,
assets/img/screenshots/peep-2_lv6dfh_c_scale,w_475.jpg 475w,
assets/img/screenshots/peep-2_lv6dfh_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-peep-2"></span>
</span></span></span>
<figcaption class="smaller">Maquette du menu et liste de news</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real9" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real9">Century21</label>
</h3>
</header>
<div>
<p>Intervention sur la refonte graphique du site national de Century21, avec l’aide de deux confrères freelances, pour concevoir les interfaces et décliner toutes les pages nécessaires aux intégrateurs.</p>
<ul>
<li>Propositions ergonomiques</li>
<li>Propositions et déclinaisons graphiques</li>
</ul>
<p class="sitelink"><a href="//century21.fr" title="Agence Immobilière Century21">century21.fr</a></p>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/century21-1.jpg" alt="Une page du site de Century21" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/century21-1_exl3qp_c_scale,w_190.jpg 190w,
assets/img/screenshots/century21-1_exl3qp_c_scale,w_293.jpg 293w,
assets/img/screenshots/century21-1_exl3qp_c_scale,w_387.jpg 387w,
assets/img/screenshots/century21-1_exl3qp_c_scale,w_480.jpg 480w,
assets/img/screenshots/century21-1_exl3qp_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-century21-1"></span>
</span></span></span>
<figcaption class="smaller">Maquette de la page Ma sélection</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/century21-2.jpg" alt="Une autre page du site de Century21" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/century21-2_dz2ozs_c_scale,w_190.jpg 190w,
assets/img/screenshots/century21-2_dz2ozs_c_scale,w_282.jpg 282w,
assets/img/screenshots/century21-2_dz2ozs_c_scale,w_355.jpg 355w,
assets/img/screenshots/century21-2_dz2ozs_c_scale,w_428.jpg 428w,
assets/img/screenshots/century21-2_dz2ozs_c_scale,w_491.jpg 491w,
assets/img/screenshots/century21-2_dz2ozs_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-century21-2"></span>
</span></span></span>
<figcaption class="smaller">Maquette de détail d’un département</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<input type="checkbox" id="real10" aria-hidden="true">
<div>
<hr>
<section>
<div class="wrapper">
<header>
<h3 class="bigger" data-se="outside" data-se-offset="100">
<label for="real10">Cdiscount</label>
</h3>
</header>
<div>
<p>Intervention sur la nouvelle stratégie mobilité de Cdiscount, en tant que prestataire externe par l’intermédiaire du groupe SQLI (<abbr title="Société de Services en Ingénierie Informatique">SSII</abbr>). Élaboration d’interfaces pour les applications iPhones, iPad et smartphones Android ; et également sur les sites e-commerce dédiés smartphones et tablettes.</p>
<ul>
<li>Propositions ergonomiques</li>
<li>Propositions et déclinaisons graphiques</li>
<li>Conseils en performance</li>
</ul>
<div class="screenshots">
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/cdiscount-1.jpg" alt="Version mobile du site Cdiscount" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/cdiscount-1_npdgip_c_scale,w_190.jpg 190w,
assets/img/screenshots/cdiscount-1_npdgip_c_scale,w_310.jpg 310w,
assets/img/screenshots/cdiscount-1_npdgip_c_scale,w_422.jpg 422w,
assets/img/screenshots/cdiscount-1_npdgip_c_scale,w_483.jpg 483w,
assets/img/screenshots/cdiscount-1_npdgip_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-cdiscount-1"></span>
</span></span></span>
<figcaption class="smaller">Le site version mobile</figcaption>
</figure>
<figure>
<button type="button" data-action="lbwojs" tabindex="0" title="Zoomer">
<img data-src="assets/img/screenshots/cdiscount-2.jpg" alt="Version tablette du site Cdiscount" width="495" height="300"
sizes="(max-width: 990px) 50vw, 495px"
data-srcset="
assets/img/screenshots/cdiscount-2_jk74dy_c_scale,w_190.jpg 190w,
assets/img/screenshots/cdiscount-2_jk74dy_c_scale,w_279.jpg 279w,
assets/img/screenshots/cdiscount-2_jk74dy_c_scale,w_352.jpg 352w,
assets/img/screenshots/cdiscount-2_jk74dy_c_scale,w_419.jpg 419w,
assets/img/screenshots/cdiscount-2_jk74dy_c_scale,w_481.jpg 481w,
assets/img/screenshots/cdiscount-2_jk74dy_c_scale,w_495.jpg 495w">
</button>
<span class="lbwojs"><span class="lbwojs-effect"><span class="lbwojs-img-container">
<span class="lbwojs-img zoom-cdiscount-2"></span>
</span></span></span>
<figcaption class="smaller">Le site version tablette</figcaption>
</figure>
</div>
</div>
</div>
</section>
<hr>
</div>
<div class="wrapper">
<p>… et d’autres sites <span lang="en">one-page</span>, e-commerce, responsives ou dédiés, applications mobiles, etc.</p>
</div>
</article>
<hr>
<article id="quote_2" class="green quote">
<header>
<h2>
<a href="#quote_2" title="Quote_2 (permalien)">
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-bubble" /></svg>
<span class="visuallyhidden">Quote_2</span>
</a>
</h2>
</header>
<div class="wrapper">
<p class="biggest">
<svg><use xlink:href="assets/img/layout/symbol-defs.svg#icon-quote" /></svg>
Je veille à délivrer le fruit de mon travail <br>dans la meilleure qualité, et adapté au budget.
</p>
</div>
</article>
<hr>
<article id="talks" class="talks">