-
Notifications
You must be signed in to change notification settings - Fork 47
/
index.html
511 lines (494 loc) · 29 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mark Jivko | Portfolio</title>
<link rel="canonical" href="https://markjivko.com/" />
<link rel="stylesheet" href="./portfolio/css/style.css" />
<link rel="icon" type="image/ico" href="https://markjivko.com/favicon.ico" />
<meta charset="UTF-8" />
<meta name="Author" content="Mark Jivko" />
<meta
name="Keywords"
content="mark jivko, portfolio, cv, fCPTO, fractional chief product & technology officer, php, java, js, front-end, back-end, android, desktop" />
<meta name="Description" content="Short visual portfolio of a Chief Technology Officer" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script defer src="https://markjivko.com/dist/jquery.min.js"></script>
<script defer src="https://markjivko.com/storyline/js/storyline.min.js"></script>
<script defer src="./portfolio/js/howler.min.js"></script>
<script defer src="./portfolio/js/functions.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-207388760-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-207388760-1");
</script>
</head>
<body>
<!--Intro-->
<div data-frame="hero">
<section>
<div id="awwwards">
<a target="_blank" rel="noreferrer nofollow" href="https://www.awwwards.com/sites/mark-jivko-portfolio">
<div class="grade">7.22</div>
<svg width="53.08" height="171.358">
<path class="js-color-bg" fill="black" d="M0 0h53.08v171.358H0z" />
<path class="js-color-bg-over" fill="transparent" d="M0 0h53.08v171.358H0z" />
<g class="js-color-text" fill="white" id="svg_2">
<path
d="m20.048,151.583zm15.433,-134.657l-4.782,14.969l-3.266,0l-2.584,-9.682l-2.584,9.682l-3.268,0l-4.781,-14.969l3.713,0l2.673,10.276l2.524,-10.276l3.445,0l2.524,10.276l2.674,-10.276l3.712,0zm2.498,10.157c1.426,0 2.495,1.068 2.495,2.495c0,1.425 -1.069,2.495 -2.495,2.495c-1.425,0 -2.495,-1.07 -2.495,-2.495c-0.001,-1.427 1.07,-2.495 2.495,-2.495"
id="svg_3" />
</g>
</svg>
</a>
</div>
<div data-role="side">
<h1 data-effect="banner">Mark Jivko</h1>
</div>
<div data-role="main">
<div data-effect="sign"></div>
<h2 data-role="title">Fractional CPTO</h2>
<div data-role="subtitle">
<span data-effect="years" data-start="2009"></span> years of experience<br />
<span data-role="total">
<span data-total="hours"></span>+ hours on <span data-total="projects"></span> solo projects
</span>
</div>
</div>
<div data-effect="bkg-box"></div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Oglama.com-->
<div data-frame="p-oglama" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2024-2025" data-title="Oglama" data-man-hours="850">
<p>Private, community-driven web automation</p>
<ul data-role="tools">
<li data-area="desktop">
MacOS, Windows & Linux: Delivering a beautiful desktop experience for all major operating systems
with Electron.js and Ollama
</li>
</ul>
<a class="demo" href="https://oglama.com">Visit website</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--EchoDuck-->
<div data-frame="p-echoduck" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2024" data-title="EchoDuck" data-man-hours="150">
<p>
EchoDuck allows you to leverage modern browser APIs to instantly create a password-protected, private
Static Web Server from any folder on your device. Your files are not uploaded to any remote server.
Instead, they are tunneled through a WebSocket connection.
</p>
<ul data-role="tools">
<li data-area="back-end">
Reverse proxy: A WebSocket server written entirely in PHP creates a tunnel between HTTP requests
and connected hosts. All connections are SSL-encrypted.
</li>
<li data-area="front-end">
Browsers are awesome: Duplex connections are leveraged for both HTTP-to-proxy communication
(requests) and host-to-proxy communication (responses). Modern browser APIs are leveraged for
read-only access to files. The client application acts like a Static Web Server.<br />
</li>
</ul>
<a class="demo" href="https://youtu.be/QrqsAl1vig8">EchoDuck Video</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--GoIndex-->
<div data-frame="p-goindex" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2023" data-title="Go index me!" data-man-hours="800">
<p>URL indexing service that handles unlimited Search Consoles and websites with millions of URLs.</p>
<ul data-role="tools">
<li data-area="back-end">
Crontab manager: A crontab manager spawns the tasks required to discover URLs, inspect URL
indexing status and request URL indexing using Google's APIs.
</li>
<li data-area="php">
Lightweight: The backend is written in pure PHP with a MongoDB database. An OpenAPI-compatible
REST API serves the entire application behind Cloudflare's proxy.<br />
</li>
<li data-area="js">
Next.js SSG: The frontend is a SSG Next.js application with PWA enhancements, hydrated with API
calls carrying a JWT bearer token issued by Firebase.<br />
</li>
</ul>
<a class="demo" href="https://youtu.be/mncu6GQIbtI">Go index me! Video</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Web3-->
<div data-frame="p-web3" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2022" data-title="Web3 SDKs" data-man-hours="600">
<p>Built various PHP SDKs for Web3 API providers</p>
<ul data-role="tools">
<li data-area="back-end">
Enjin PHP SDK: Converted the official Enjin
<a target="_blank" rel="noreferrer nofollow" href="https://github.com/enjin/enjin-java-sdk"
>Java SDK</a
>
to PHP.<br />
Used a simple design pattern to load and execute GraphQL mutations.
</li>
<li data-area="php">
Tatum PHP SDK: Rebuilt the Tatum PHP SDK from scratch with a much better architecture using SOLID
principles.<br />
</li>
</ul>
<a class="source" href="https://github.com/markjivko/tatum-php">Tatum SDK</a>
<a class="demo" href="https://github.com/markjivko/enjin-php-sdk">Enjin SDK</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Potrivit-->
<div data-frame="p-potrivit" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2021" data-title="Automated code reviews" data-man-hours="75">
<p>
An automated code review tool designed for WordPress plugins.<br />
60.000+ plugins are continuously tested with results published daily.
</p>
<ul data-role="tools">
<li data-area="php">
Automated testing: WordPress plugins are installed, tested and uninstalled.<br />
Key performance indicators are logged at every step with focus on smoke tests, SRP and cyclomatic
complexity.
</li>
<li data-area="front-end">
Static Site Generator: Test results are stored as static HTML pages enriched with LD+JSON and PWA
caching.<br />
References and search caches are updated automatically.
</li>
</ul>
<a class="source" href="https://github.com/markjivko/wordpress-code-review">Repository</a>
<a class="demo" href="https://potrivit.com">Visit website</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Stephino RPG-->
<div data-frame="p-stephino-rpg" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2020-2021" data-title="Browser game engine" data-man-hours="2500">
<p>
Stephino RPG is the first-ever role-playing game for
<a target="_blank" rel="noreferrer nofollow" href="https://github.com/markjivko/rpg">WordPress</a>
with PWA, also available on
<a target="_blank" rel="noreferrer nofollow" href="https://github.com/markjivko/RPG-Client-Desktop"
>Steam</a
>
(<a target="_blank" rel="noreferrer nofollow" href="https://www.electronjs.org/">Electron.js</a>
client)<br />
Acquired in December 2021 by
<a target="_blank" rel="noreferrer nofollow" href="https://macrocosm.game">Metaverse Games Limited</a>
</p>
<ul data-role="tools">
<li data-area="js">
Massively Multiplayer: The game was optimized for the lowest-performing shared hosting
environments with tens of concurrent players, minimizing Big O, memory usage and bandwidth
requirements for a smooth user experience
</li>
<li data-area="php">
Customizable: All game objects are editable in a web CRUD interface that is dynamically generated
from PHPDoc comments of specific methods. The game configuration is stored in JSON format, with
i18n support
</li>
<li data-area="front-end">
Theme-ready: All design elements can be altered (CC-BY-SA 4.0 license) inside of installable
themes. A web worker caches all resources, static (images) or dynamic (animations and other
scripts) with auto-reload on config save or plugin update
</li>
<li data-area="front-end">
Optimized animations: Users can also customize in-game animations; the generated CSS rules were
carefully optimized to minimize layout shifts, relayouts and repaints, maximizing performance with
GPU rendering when available
</li>
</ul>
<a class="source" href="https://github.com/markjivko/rpg">Repository</a>
<a class="demo" href="https://stephino.com">About</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--ThemeWarlock-->
<div data-frame="p-themewarlock" class="project">
<section>
<div data-role="p-main">
<div
data-role="project"
data-year="2018-2019"
data-title="Collaborative code generator"
data-man-hours="2200">
<p>A side-project to explore theming opportunities for Stephino's design team outside of Google Play</p>
<ul data-role="tools">
<li data-area="php">
Website builder for WordPress: ThemeWarlock allows designers to create WordPress themes without
writing code
</li>
<li data-area="back-end">
Snapshots: Similar to VM snapshots, the software automatically saves designers' work in a
plugin-agnostic manner, without interfering with the underlying source code
</li>
<li data-area="php">
Build tools: When a theme is ready for publishing, ThemeWarlock generates the source code,
screenshots and other assets and prepares archives required by ThemeForest, MojoThemes and other
theme marketplaces
</li>
<li data-area="php">
Code templates: A custom template engine similar to
<a target="_blank" rel="noreferrer nofollow" href="https://www.smarty.net/">Smarty's</a>
is used as part of source code generation in the build process
</li>
</ul>
<a class="source" href="https://github.com/markjivko/themewarlock">Repository</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Fairplayer-->
<div data-frame="p-fairplayer" class="project">
<section>
<div data-role="p-main">
<div
data-role="project"
data-year="2016"
data-title="Native Android music player"
data-label-demo="About"
data-man-hours="960">
<p>FairPlayer is an Android music player with a custom audio library and support for animated themes</p>
<ul data-role="tools">
<li data-area="java">
Equalizer: The app use VLC's library to deliver a crisp sound controlled by a custom equalizer
</li>
<li data-area="java">
Themes: FairPlayer is strongly focused on themes, supporting animated effects for the first-time
on Google Play
</li>
<li data-area="desktop">
APK Factory integration: Design stations software could prototype, preview and convert themes for
other music players into FairPlayer themes, rapidly expanding Stephino's portfolio
</li>
</ul>
<a class="source" href="https://github.com/markjivko/fairplayer">Repository</a>
<a class="demo" href="https://markjivko.com/fairplayer">About</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--APK Factory-->
<div data-frame="p-apk-factory" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2014-2021" data-title="Enterprise app manager" data-man-hours="16000">
<p>Distributed software for rapid prototyping and publishing of Android apps</p>
<ul data-role="tools">
<li data-area="android">
Large-scale: Published and maintained more than 6000 Android apps in the Personalization category
totaling over
<b>100 million</b> downloads on Google Play
</li>
<li data-area="android">
Collaboration tools: APK Factory Hub is a public web application where designers, copyrighters and
managers work on new themes remotely
</li>
<li data-area="back-end">
Automated workflow: The Hub assigns new apps to VM clusters after QA. It also handles push
notifications, ad mediation and Stephino's private theme store
</li>
<li data-area="php">
Total automation: Really fast app screenshots and post-processing (seconds instead of minutes),
internationalization, cloud backup, APK creation with Ant tools and much more
</li>
<li data-area="desktop">
Extreme efficiency: Software handles repetitive tasks so that app turnover is measured in hours
instead of days
</li>
</ul>
<a class="demo" href="https://markjivko.com/apk-factory">About</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Front-End-->
<div data-frame="p-front-end" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2013-2014" data-title="Front-end experiments" data-man-hours="500">
<p>
Experimented with a few CSS techniques on commercial coming soon pages sold on ThemeForest and created
short YouTube tutorials
</p>
<ul data-role="tools">
<li data-area="js">
Clean & customizable: The commercial projects are meant to be modified by novice clients
</li>
<li data-area="front-end">
Parallax and beyond: These tiny code snippets are great exercises for font-end development
</li>
</ul>
<a class="source" href="https://markjivko.com/tutorials">Free</a>
<a class="demo" href="https://themeforest.net/user/markjivko/portfolio">Commercial</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Storyline.js-->
<div data-frame="p-storyline" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2013" data-title="Event-driven animation plugin" data-man-hours="75">
<p>Storyline is a small jQuery plugin that enables scroll-based effects</p>
<ul data-role="tools">
<li data-area="js">
Tiny library: This 17KB compressed JavaScript library powers the animations you see on this page
</li>
<li data-area="js">
Developer tools: Set <i>guide: true</i> to enable a graphic console with logs, a visual
representation of the scroll progress and a preview of internal variables
</li>
<li data-area="front-end">
Log levels: Apart from the guide console, messages are stored in the browser console; logs can be
filtered or disabled in production
</li>
<li data-area="front-end">
Fast: Expensive mathematical operations are avoided, absolute coordinates being preferred to
percentages without compromising flexibility
</li>
</ul>
<a class="source" href="https://github.com/markjivko/storyline">Repository</a>
<a class="demo" href="https://markjivko.com/storyline">Demo</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Fervoare CMS-->
<div data-frame="p-fervoare" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2012" data-title="Content management system" data-man-hours="850">
<p>
Fervoare is a small Content Management System designed for SaaS; reviewed by
<a
target="_blank"
rel="noreferrer nofollow"
href="https://webscripts.softpedia.com/script/Content-Management/Fervoare-CMS-80070.html"
>SoftPedia</a
>
in 2013
</p>
<ul data-role="tools">
<li data-area="php">
An OctoMS app: Fervoare is built on top of OctoMS (next slide). In its prime it was used by tens
of startups and agencies including
<a target="_blank" rel="noreferrer nofollow" href="https://cinepolitica.ro/">Cinepolitica</a>.
</li>
<li data-area="front-end">
Installer: The app features a 1-click installer which creates the required database tables and
populates them with demo data
</li>
<li data-area="php">
User roles: PHPDoc tags are assigned special meaning to restrict access to Controller methods; the
admin menu is updated to reflect these restrictions for each user by role
</li>
<li data-area="front-end">
Themes: Both the front-end and back-end can be customized with themes; menus and other content
regions can be rendered inside theme templates
</li>
<li data-area="front-end">
SEO: All content types (pages and posts) have editable keyword lists and descriptions; an optional
page extension can be set for all URLs (for example ".html")
</li>
</ul>
<a class="source" href="https://github.com/markjivko/fervoare">Repository</a>
<a class="demo" href="https://markjivko.com/fervoare-cms">Preview</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--OctoMS-->
<div data-frame="p-octoms" class="project">
<section>
<div data-role="p-main">
<div data-role="project" data-year="2011" data-title="PHP Framework" data-man-hours="1500">
<p>OctoMS is a small PHP Framework inspired by CodeIgniter</p>
<ul data-role="tools">
<li data-area="front-end">
Debugging interface: An AJAX-powered interface replaces the default controller output for uncaught
exceptions and on-demand (in development mode)
</li>
<li data-area="php">
Model-View-Controller: The framework imposes SoC (Separation of Concerns) with an MVC
architecture; stateless libraries can be used alongside model instances
</li>
<li data-area="php">
RegEx Routing: PCRE (Perl Compatible Regular Expressions) are used to map URLs to Controllers
</li>
<li data-area="back-end">
Cookie validation: The Blowfish cipher is used to validate authentication cookies by user agent
and IP, preventing most session hijacking attack vectors
</li>
</ul>
<a class="source" href="https://github.com/markjivko/octoms">Repository</a>
<a class="demo" href="https://markjivko.com/octoms">Preview</a>
</div>
</div>
</section>
<div data-effect="ribbon"></div>
</div>
<!--Final Frame-->
<div data-frame="final">
<section>
<div data-role="main">
<div data-role="ending">
<p>Visual effects <b>Storyline ˙ js</b></p>
<p>Sound effects <b>Howler ˙ js</b></p>
<p>Created by <b>Mark Jivko</b></p>
<p>
Copyright © <span data-role="year">2021-2025</span>
<b>Mark Jivko</b>
</p>
<div data-role="colors"></div>
</div>
</div>
<div data-role="go-up"></div>
</section>
</div>
<!--Level-up-->
<div data-role="level-up"></div>
<!--Overlays-->
<div data-role="scroll-down"></div>
<div data-role="loading"></div>
</body>
</html>