-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.php
More file actions
529 lines (529 loc) · 37.5 KB
/
index.php
File metadata and controls
529 lines (529 loc) · 37.5 KB
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
<?php
include('top.php');
?>
<div id="container" class="container pg_dtls phone-m:max-w-full px-0 phone-l:max-w-5xl z-20">
<div id="pg-intro" class="flex-column pg_intro phone-m:py-2 phone-l:py-8 xl:py-8 2xl:py-10">
<div class="frst_gls relative flex-column items-center justify-center text-center bg-gray-50 bg-opacity-40 phone-m:rounded-none phone-l:rounded-lg md:rounded-xl border-solid border-4 border-gray-50 border-opacity-40 drop-shadow-3xl dark:border-opacity-0 dark:bg-pDrkBlue dark:bg-opacity-40 dark:drop-shadow-none phone-m:px-0 md:px-4 xl:px-4.5 2xl:px-5 phone-m:h-70 phone-l:h-72 xl:h-80 2xl:h-105 phone-m:w-full phone-l:w-11/12 md:w-10/12 lg:w-8/12 xl:w-8/12 2xl:w-11/12 phone-m:mt-20 lg:mt-24 xl:mt-28 2xl:mt-32 z-50">
<div class="flex justify-center items-center rounded-full z-40">
<img class="phone-m:w-24 phone-l:w-32 md:w-36 2xl:w-44 phone-m:-mt-32 lg:-mt-40 xl:-mt-44 -mb-0" src="app/img/mm-avi.webp" alt="Mark Mutai Avatar">
</div>
<div class="h-6/12 phone-m:w-9/12 sm:w-8/12 flex-column items-center justify-center relative z-50">
<div class="ttl z-40 border-dotted border-dXlPurp border-opacity-15 dark:border-lblue-500 dark:border-opacity-60 text-dXlPurp dark:text-indigo-50 phone-m:border-b-4 xl:border-b-6 2xl:border-b-7 mb-4">
<h1 class="phone-m:text-3xl phone-l:text-5xl xl:text-5.5xl 2xl:text-6.25xl text-bold tracking-tight -mb-1.5">
Hi
</h1>
<h2 class="phone-m:text-2xl phone-l:text-3xl xl:text-3.75xl 2xl:text-4.75xl text-bold tracking-tight phone-m:mb-4 lg:mb-6">
I'm Mark Mutai.
</h2>
</div>
<p class="w-full phone-m:text-sm phone-l:text-sm+ xl:text-tiny 2xl:text-lg+ text-dXlPurp dark:text-indigo-100 z-40 opacity-80 phone-m:leading-relaxed md:leading-normal">
A front-end engineering, π-shaped UI/UX designer and digital artist
with several years of experience.
</p>
</div>
</div>
<div class="frst_gls_inf relative chnk bg-gray-50 bg-opacity-50 phone-m:rounded-none phone-l:rounded-lg md:rounded-xl border-solid dark:border-opacity-0 dark:bg-pDrkBlue dark:bg-opacity-40 dark:drop-shadow-none phone-m:w-full phone-l:w-11/12 md:w-10/12 lg:w-8/12 xl:w-8/12 2xl:w-11/12 phone-m:mt-10 lg:mt-16 2xl:mt-24">
<h3 class="h3_styl overflow-hidden tracking-wide phone-m:text-xsxmini phone-l:text-minixsm md:text-sm 2xl:text-tinyxsm border-solid dark:border-lblue-500 dark:border-opacity-5 dark:opacity-100 dark:text-indigo-100 phone-m:py-5 phone-l:py-5 xl:py-6 2xl:py-7">Skills</h3>
<div class="content relative z-50 row w-full rounded-b-xl mx-0 phone-m:px-8 md:px-12 xl:px-8 2xl:px-12 bg-gray-50 bg-opacity-70 dark:bg-pDrkBlue dark:bg-opacity-10 phone-m:pb-10 lg:pb-16 ">
<ul class="skl_lst col-xl-6 flex-col text-center phone-m:text-mini 2xl:text-tiny phone-m:mt-2 phone-l:mt-4 md:mt-9 pt-0 text-dXlPurp dark:text-indigo-100 border-solid border-dXlPurp dark:border-lblue-500 border-opacity-10 dark:border-opacity-40 border-r-2">
<li class="skl_styl phone-m:pt-5 phone-m:pb-5 md:pt-0 lg:pb-7 phone-m:mx-5 md:mx-8 lg:mx-10 xl:mx-12 2xl:mx-16 dark:border-gray-100 dark:border-opacity-10">
User Experience Design
</li>
<li class="skl_styl phone-m:py-5 lg:py-7 phone-m:mx-8 lg:mx-10 xl:mx-12 2xl:mx-16 dark:border-gray-100 dark:border-opacity-10">
User Interface Design
</li>
<li class="skl_styl md:border-0 phone-m:pt-5 phone-m:pb-5 lg:pb-0 lg:pt-7 phone-m:mx-8 lg:mx-10 xl:mx-12 2xl:mx-16 dark:border-gray-100 dark:border-opacity-10">
Front-End Engineering
</li>
</ul>
<ul class="skl_lst col-xl-6 flex-col text-center phone-m:text-mini 2xl:text-tiny phone-m:mt-2 phone-l:mt-4 md:mt-9 pt-0 text-dXlPurp dark:text-indigo-100">
<li class="skl_styl phone-m:pt-5 phone-m:pb-5 md:pt-0 lg:pb-7 phone-m:mx-5 md:mx-8 lg:mx-10 xl:mx-12 2xl:mx-16 dark:border-gray-100 dark:border-opacity-10">
Illustrations
</li>
<li class="skl_styl phone-m:py-5 lg:py-7 phone-m:mx-8 lg:mx-10 xl:mx-10 2xl:mx-16 dark:border-gray-100 dark:border-opacity-10">
Iconography
</li>
<li class="phone-m:pt-5 lg:pt-7 phone-m:mx-8 lg:mx-10 xl:mx-10 2xl:mx-16">
Logos/Branding
</li>
</ul>
</div>
</div>
<div class="frst_gls_inf relative chnk bg-gray-50 bg-opacity-50 phone-m:rounded-none phone-l:rounded-lg md:rounded-xl dark:border-opacity-0 dark:bg-pDrkBlue dark:bg-opacity-40 dark:drop-shadow-none phone-m:w-full phone-l:w-11/12 md:w-10/12 lg:w-8/12 xl:w-8/12 2xl:w-11/12 phone-m:mt-10 lg:mt-16 2xl:mt-24">
<h3 class="h3_styl tracking-wide phone-m:text-xsxmini phone-l:text-minixsm md:text-sm 2xl:text-tinyxsm dark:border-lblue-500 dark:border-opacity-5 dark:opacity-100 dark:text-indigo-100 phone-m:py-5 phone-l:py-5 xl:py-6 2xl:py-7">
Work
</h3>
<div class="content row w-full rounded-b-xl mx-0 bg-gray-50 bg-opacity-70 dark:bg-pDrkBlue dark:bg-opacity-10">
<div class="tz-gallery col-xl-12 text-center text-dXlPurp dark:text-indigo-100 phone-m:text-mini lg:text-sm 2xl:text-tiny phone-m:px-0 phone-l:px-2 md:px-10 xl:px-12 2xl:px-20">
<p class="phone-m:py-6 xl:py-8 phone-m:mx-5 md:mx-8 lg:mx-10 xl:mx-12 2xl:mx-16 click_details opacity-90">
<i class="fas fa-info-circle px-1 hover:text-gray"></i>
Click/tap image for details
</p>
<div class="row phone-m:mx-0 phone-l:mx-1 md:mx-4 lg:mx-4 xl:mx-3 2xl:mx-4">
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/almondtree.webp" data-caption="
<h6>Almond Tree - Design/Development</h6>
<p>
Using the newly created logo made for the company, the site was based on the calming effect of a beach side to give the target visitor a more relaxed feeling while browsing
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Web design (Affinity Designer)</li>
<li>Web development (PHP, NodeJS, Sass, TailwindCSS)</li>
<li>Integrated Microsoft® booking system (Microsoft® 365)</li>
<li>Secure messaging (Google® ReCaptcha, AWS)</li>
<li>Secure payment portal (PesaPal)</li>
</ul>
<a href='https://almondtreewellness.co.ke/' target='_blank'>
Visit Website
</a>">
<img class="rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/almondtree-sd.webp" alt="Almond Tree">
</a>
<div class="caption pt-4 pb-5">
<p>Almond Tree (Light Mode)</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/almondtree_drk.webp" data-caption="
<h6>
Almond Tree (Dark Mode) - Design/Development
</h6>
<p>A proactively made dark mode variant to reduce eye strain and assist ease of usage for photosensitive/photophobic users
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Web design (Affinity Designer)</li>
<li>Web development (PHP, NodeJS, Jquery, Sass, TailwindCSS)</li>
<li>Photo-sensitive UI Design (Affinity Designer)</li>
</ul>
<a href='https://almondtreewellness.co.ke/' target='_blank'>
Visit Website
</a>">
<img class="rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/almondtree_drk-sd.webp" alt="Almond Tree">
</a>
<div class="caption pt-4 pb-5">
<p>Almond Tree (Dark Mode)</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 mm-work">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/linchpin.webp" data-caption="
<h6>
Linchpin v1 - Design/Development
</h6>
<p>
Company website for a Microsoft cloud solutions provider based in Kenya. Used cloud elements to build the color palette and iconography
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer)</li>
<li>Web design (Affinity Designer)</li>
<li>Web development (PHP, Bootstrap, Javascript, JQuery)</li>
<li>Custom iconography</li>
<li>Secure messaging (Google® ReCaptcha, AWS)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/linchpin-sd.webp" alt="Linchpin Kenya">
</a>
<div class="caption pt-4 pb-5">
<p>Linchpin v1</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 mm-work">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/ipcl.webp" data-caption="
<h6>
IPCL - Design/Development
</h6>
<p>
Revised logo, branding & website for an International Engineering Consultancy company based in Kenya. Custom shadows used to make it the lighting feel more organic, with added glow fx to give the site a different feel while ensuring performance isn't affected by the visuals
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo redesign (Autodesk® Sketchbook, Affinity Designer)</li>
<li>Web design (Affinity Designer/Photo, Autodesk Sketchbook)</li>
<li>Web development (PHP, Bootstrap, Javascript, JQuery)</li>
<li>Custom iconography</li>
<li>Secure messaging (Google® ReCaptcha, AWS)</li>
</ul>
<a href='https://ipconsultafrica.com/' target='_blank'>
Visit Website
</a>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/ipcl-sd.webp" alt="Integrated Partnership Consultants">
</a>
<div class="caption pt-4 pb-5">
<p>Integrated Partnership Consultants</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox lightbox_wide" href="app/img/work/plutus.webp" data-caption="
<h6>Plutus Capital - Design/Development</h6>
<p>
Logo design, branding and development of a web based stock-market application for stock advisory company Plutus Capital
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer)</li>
<li>Web design (Affinity Designer)</li>
<li>Web development (PHP, NodeJS, Sass, TailwindCSS, Azure API)</li>
<li>User database (MySQL)</li>
<li>Secure messaging (Google® ReCaptcha, AWS)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/plutus-sd.webp" alt="Plutus Capital">
</a>
<div class="caption pt-4 pb-5">
<p>Plutus Capital</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/plutus_stock.webp" data-caption="
<h6>Plutus Capital (Stock View) - Design/Development</h6>
<p>
Display of connected stock market via Microsoft® Azure API, with user adjustable data requests and timeframes
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>UX development to give user control of the data received</li>
<li>Web development (PHP, NodeJS, ChartJS)</li>
<li>Dynamic data collection via Microsoft® Azure API</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/plutus_stock-sd.webp" alt="Plutus Capital">
</a>
<div class="caption pt-4 pb-5">
<p>Plutus Capital (Stock View)</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 mm-work">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/linchpin_v2.webp" data-caption="
<h6>
Linchpin v2 - Design/Development
</h6>
<p>
Redesigned/redeveloped website for Linchpin Kenya. Migrated from PHP to ReactJS for a more modern version with room for growth, efficiency & flexibility. Revisited cloud elements to make it a less cliché cloud interface. Light mode inspired by blending sunset imagery with white and blue tones to compliment company branding
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Web design (Affinity Designer)</li>
<li>Web development (NodeJS, ReactJS, TailwindCSS, Sass)</li>
<li>Foundation for future payment portal (M-Pesa)</li>
<li>Secure messaging (Google® ReCaptcha, AWS)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/linchpin_v2-sd.webp" alt="Linchpin Kenya v2">
</a>
<div class="caption pt-4 pb-5">
<p>Linchpin v2 (Light Mode)</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 mm-work">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/linchpin_v2-dark.webp" data-caption="
<h6>
Linchpin v2 (Dark Mode) - Design/Development
</h6>
<p>
Redesigned/redeveloped website for Linchpin Kenya. Dark mode variant to help with photosensitive/photophobic users. Colours inspired by a clear night sky with added blue gradients to compliment company's branding
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Web design (Affinity Designer)</li>
<li>Web development (NodeJS, ReactJS, TailwindCSS, Sass)</li>
<li>Foundation for future payment portal (M-Pesa)</li>
<li>Photo-sensitive UI (Affinity Designer, ReactJS, TailwindCSS)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/linchpin_v2-dark-sd.webp" alt="Linchpin Kenya v2">
</a>
<div class="caption pt-4 pb-5">
<p>Linchpin v2 (Dark Mode)</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/mplayer.webp" data-caption="
<h6>Motion Play - UI/UX Design</h6>
<p>
UI/UX Practice for a web app media player with an added challenge of building it primarily for gesture usage for navigation & interactivity, with touch usage being secondary/complimentary
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer)</li>
<li>Web design (Affinity Designer)</li>
<li>Iconography (Affinity Designer)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/mplayer-sd.webp" alt="Motion Play">
</a>
<div class="caption pt-4 pb-5">
<p>Motion Play</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/mpartymode.webp" data-caption="
<h6>Motion Play (Party Mode) - UI/UX Design</h6>
<p>
Media playing screen view when user wants to kick back & relax. Ideologically made as a screensaver & as a less busy way for a user to control and enjoy their content. UI ideal for 2nd screens, large displays & as a general 10 foot interface
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer)</li>
<li>Web design (Affinity Designer)</li>
<li>Deep shadow/glow FX (Affinity Designer)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/mpartymode-sd.webp" alt="Motion Play Party Mode">
</a>
<div class="caption pt-4 pb-5">
<p>Motion Play (Party Mode)</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/infopg.webp" data-caption="
<h6>Travel2Kenya - UI Design</h6>
<p>
UI/UX Practice for a fictional tourism site. Focus on lighting, depth perception and photo editing for future projects
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Case study of light physics for future designs</li>
<li>Blur FX for better visual hierarchy</li>
<li>Web design (Affinity Designer/Photo)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/infopg-sd.webp" alt="Tourism Kenya">
</a>
<div class="caption pt-4 pb-5">
<p>Travel2Kenya</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/app_design.webp" data-caption="
<h6>App Designs - UI/UX Design</h6>
<p>
UI/UX Practice for app concepts built with React Native. Focus on one-handed UI/UX & Neumorphism/Neo-skeuomorphism iteration of web design of elements
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>One-hand use design</li>
<li>Neumorphism/Neo-skeuomorphism design</li>
<li>Web design (Affinity Designer/Photo, React Native)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/app_design-sd.webp" alt="App Designs">
</a>
<div class="caption pt-4 pb-5">
<p>App Designs</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/hudsons.webp" data-caption="
<h6>Hudsons Farms/Meats - Logo & Branding</h6>
<p>
Logo design and branding for a local organic foods company
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer, Autodesk® Sketchbook)</li>
<li>Gradient based colour palette (Affinity Designer)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/hudsons-sd.webp" alt="Hudsons Farms & Meats">
</a>
<div class="caption pt-4 pb-5">
<p>Hudsons Farms/Meats</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/makipaki.webp" data-caption="
<h6>Maki Paki - Logo & Branding</h6>
<p>
Logo design and branding for an Australian based home product company
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer, Autodesk® Sketchbook)</li>
<li>Brand guidelines (Affinity Designer)</li>
<li>Flat and faux-3D colour palettes (Affinity Designer)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/makipaki-sd.webp" alt="Maki Paki">
</a>
<div class="caption pt-4 pb-5">
<p>Maki Paki</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/kala.webp" data-caption="
<h6>Kala - Logo, Digital & Physical Branding</h6>
<p>
Grayscale monochromatic logo design & branding for a local fashion company and their store
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Custom font (Affinity Designer)</li>
<li>Logo design (Affinity Designer, Autodesk® Sketchbook)</li>
<li>Brand guidelines (Affinity Designer)</li>
<li>Grayscale monochromatic palette (Affinity Designer)</li>
<li>Physical store branding</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/kala-sd.webp" alt="Kala Apparel">
</a>
<div class="caption pt-4 pb-5">
<p>Kala Apparel</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/millpark.webp" data-caption="
<h6>Millpark - Logo & Branding</h6>
<p>
Logo design and branding for a local company distributing school bus tracking technology
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Hand-drawn logo</li>
<li>Logo design (Affinity Designer)</li>
<li>Brand guidelines (Affinity Designer)</li>
<li>Custom colour palette (Affinity Designer)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/millpark-sd.webp" alt="Millpark Solutions">
</a>
<div class="caption pt-4 pb-5">
<p>Millpark Solutions</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/sipnsmoke.webp" data-caption="
<h6>Sip & Smoke - Logo & Branding</h6>
<p>
Custom typography logo design, branding, custom menus for a local liquor and cigar company
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer)</li>
<li>Hand-drawn typography (Autodesk® Sketchbook)</li>
<li>Custom menu (Affinity Publisher)</li>
<li>Brand guidelines (Affinity Designer)</li>
<li>Neumorphism/Neo-skeuomorphism design (Affinity Designer)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/sipnsmoke-sd.webp" alt="Sip n Smoke">
</a>
<div class="caption pt-4 pb-5">
<p>Sip & Smoke</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/almondtree-logo.webp" data-caption="
<h6>Almond Tree Wellness - Logo & Branding</h6>
<p>
Logo design & branding for a therapy business
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Logo design (Affinity Designer, Autodesk® Sketchbook)</li>
<li>Brand guidelines (Affinity Designer)</li>
<li>Conversion of client sketch into vector format (Affinity Designer)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/almondtree-logo-sd.webp" alt="Almond Tree Wellness Center">
</a>
<div class="caption pt-4 pb-5">
<p>Almond Tree Logo</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/ipcl_logo.webp" data-caption="
<h6>IPCL Logo - Logo & Branding</h6>
<p>
Custom hand drawn logo for Integrated Partnership Consultants LTD.
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Hand-drawn logo</li>
<li>Logo design (Adobe® Illustrator)</li>
<li>Logo post-FX (Adobe® Photoshop)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/ipcl_logo-sd.webp" alt="Integrated Partnership Consultants">
</a>
<div class="caption pt-4 pb-5">
<p>IPCL Logo</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="thumbnail">
<a class="lightbox" href="app/img/work/supertumtums.webp" data-caption="
<h6>Super Tums - Character Design</h6>
<p>
Custom character design made for print and as a birthday gift
</p>
<br/>
<ul>
<p>Key Features:</p>
<li>Hand-drawn character</li>
<li>Character design (Affinity Designer, Autodesk® Sketchbook)</li>
<li>Vector Post-FX (Affinity Photo)</li>
</ul>">
<img class="lightbox-img rounded-lg border-6 border-white hover:shadow-2xl" src="app/img/work/supertumtums-sd.webp" alt="Super Tums">
</a>
<div class="caption pt-4 pb-5">
<p>Super Tums</p>
</div>
</div>
</div>
<div class="w-full z-40 bdr_dtd mx-8 dark:border-lblue-500 dark:border-opacity-60 phone-m:border-t-4 md:border-t-6 phone-m:mt-0 xl:mt-1 phone-m:pt-4 lg:pt-8 phone-m:pb-8 md:pb-10 lg:pb-12">
<a href="app/dl/Mark Rutere Portfolio.pdf" target="_blank" class="duration-300 btn snd-btn snd-btn-norm flex items-center justify-center text-center mx-auto bg-indigo-800 hover:bg-lblue-500 phone-m:w-full sm:w-8/12 phone-m:h-12 phone-l:h-14 xl:h-16 phone-m:text-sm md:text-sm 2xl:text-base phone-m:tracking-normal lg:tracking-smidge">
View More
</a>
</div>
</div>
</div>
</div>
</div>
<?php include('msg.php') ?>
</div>
<!-- container -->
<?php
include('ftr.php');
?>