-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1669 lines (1631 loc) · 81.4 KB
/
Copy pathindex.html
File metadata and controls
1669 lines (1631 loc) · 81.4 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
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>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mariusz Machuta — Lead Frontend Developer · Warsaw & remote EU</title>
<meta
name="description"
content="React and TypeScript platforms, design systems, WCAG that survives a real audit, and agent tooling I actually shipped. Warsaw, remote EU, B2B."
/>
<link rel="canonical" href="https://mariuszmachuta.com/" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mariuszmachuta.com/" />
<meta property="og:title" content="Mariusz Machuta — Lead Frontend Developer" />
<meta
property="og:description"
content="React and TypeScript platforms, design systems, and accessibility that survives a real audit. Warsaw, remote across the EU."
/>
<meta property="og:image" content="https://mariuszmachuta.com/og/og-image.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
property="og:image:alt"
content="<DevNode /> — Mariusz Machuta, Lead Frontend Developer. React platforms that can't afford to break, and accessibility that survives the audit. Warsaw, CET, remote across the EU."
/>
<meta property="og:site_name" content="DevNode — Mariusz Machuta" />
<meta property="og:locale" content="en_GB" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Mariusz Machuta — Lead Frontend Developer" />
<meta
name="twitter:description"
content="React and TypeScript platforms, design systems, and accessibility that survives a real audit. Warsaw, remote across the EU."
/>
<meta name="twitter:image" content="https://mariuszmachuta.com/og/og-image.png" />
<meta name="theme-color" content="#0B0B0F" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="preload" href="/fonts/jetbrains-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/jetbrains-mono-latin-700-normal.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/inter-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="/src/styles/main.css" />
<noscript><link rel="stylesheet" href="/noscript.css" /></noscript>
<script type="module" src="/src/main.js"></script>
<!-- Schema describes the default (client) view only. The dev and
recruiter views are the same facts re-presented, not separate
documents, so per-view schema would be duplication. -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Person",
"@id": "https://mariuszmachuta.com/#person",
"name": "Mariusz Machuta",
"jobTitle": "Lead Frontend Developer",
"url": "https://mariuszmachuta.com/",
"email": "mailto:mariusz.machuta@gmail.com",
"address": { "@type": "PostalAddress", "addressLocality": "Warsaw", "addressCountry": "PL" },
"sameAs": ["https://github.com/Cain-Ish", "https://www.linkedin.com/in/cainish/"],
"knowsLanguage": ["en", "pl"],
"worksFor": { "@id": "https://mariuszmachuta.com/#business" },
"image": "https://mariuszmachuta.com/og/og-image.png",
"knowsAbout": [
"Web accessibility (WCAG 2.1/2.2)",
"European Accessibility Act",
"Design systems",
"Frontend architecture",
"React",
"TypeScript",
"LLM tooling for engineering teams",
"Agent skills and hooks",
"Subagent orchestration",
"MCP context servers",
"Agent evaluation and guardrails",
"Engineering automation"
]
},
{
"@type": "ProfessionalService",
"@id": "https://mariuszmachuta.com/#business",
"name": "<DevNode /> Unicorn Division",
"legalName": "<DevNode/> Mariusz Machuta",
"founder": { "@id": "https://mariuszmachuta.com/#person" },
"url": "https://mariuszmachuta.com/",
"email": "mailto:mariusz.machuta@gmail.com",
"vatID": "PL8222120720",
"areaServed": ["Poland", "European Union"],
"image": "https://mariuszmachuta.com/og/og-image.png",
"address": { "@type": "PostalAddress", "addressLocality": "Warsaw", "addressCountry": "PL" }
},
{
"@type": "FAQPage",
"@id": "https://mariuszmachuta.com/#faq",
"mainEntity": [
{
"@type": "Question",
"name": "How does contracting work, formally?",
"acceptedAnswer": {
"@type": "Answer",
"text": "B2B contract with my Polish sole proprietorship, registered in CEIDG. For EU companies, invoicing uses reverse-charge VAT. NDA and IP-transfer clauses are standard practice."
}
},
{
"@type": "Question",
"name": "Remote or on-site?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Remote-first from Warsaw on CET, which overlaps comfortably with the whole EU business day. On-site kickoffs and workshops by arrangement."
}
},
{
"@type": "Question",
"name": "Do you join existing teams or work solo?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Both, and I have done both. Embedded senior or lead inside your squad, or independent delivery of a scoped workstream with regular demos."
}
},
{
"@type": "Question",
"name": "What happens if you're unavailable mid-engagement?",
"acceptedAnswer": {
"@type": "Answer",
"text": "I am one person, not an agency — there is no bench to swap in, and I would rather say that plainly than imply otherwise. What I do instead is make the work survivable without me: documentation and knowledge transfer are part of delivery rather than a final-week scramble, the reasoning behind decisions gets written down where your team will find it, and a support retainer is available after handoff if you want one. If I am ever not the right person for a piece of work, you hear that from me early rather than late."
}
},
{
"@type": "Question",
"name": "Can you make us EAA / WCAG compliant?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Audit first — prioritised findings with severity and effort — then remediation in your codebase alongside your team, and an axe-core gate in CI so it stays fixed. I have built exactly that gate on a shared component library in production; compliance that depends on someone remembering to re-audit is not compliance."
}
},
{
"@type": "Question",
"name": "What languages do you work in?",
"acceptedAnswer": {
"@type": "Answer",
"text": "English professionally, Polish natively. Documentation, code review and client communication all in English by default."
}
},
{
"@type": "Question",
"name": "Can you do the AI work without the frontend work?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Building agent tooling, subagent workflows, MCP servers and automation is a standalone engagement, and it does not have to be a frontend codebase. What it does need is someone senior enough to judge whether the output is any good, which is the part most AI initiatives skip."
}
},
{
"@type": "Question",
"name": "Is the AI work hype or real?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Judge it by what it replaces, and by whether anyone measured. If a refactor sweep that would have cost a developer two weeks lands in two days and passes review, that is real. If it produces plausible code nobody can maintain, that is hype — and I will tell you which one you are looking at rather than sell you the second."
}
},
{
"@type": "Question",
"name": "Why should a frontend lead be the one building your agents?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Because the failure mode is identical to the one I have spent my career on: something that looks right, demos well, and quietly breaks in production. Agent work rewards the same habits — budgets, coverage, instrumentation, review discipline — applied to a system that is far less deterministic than a component tree."
}
},
{
"@type": "Question",
"name": "Do you do live coding sessions?",
"acceptedAnswer": {
"@type": "Answer",
"text": "I would rather talk than perform. A timed exercise measures composure under an audience, not the thing you are actually hiring for — and my work is already open to inspection: this page, the CV, the public repos. I will go as deep as you like on architecture and on decisions I got wrong before I got them right, or take a task home and think about it properly. If a live exercise is non-negotiable, say so early and I will tell you honestly whether to keep looking."
}
},
{
"@type": "Question",
"name": "How do you communicate day to day?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Async-first and in writing — specs, decision records, pull-request context, recorded demos. I am an introvert by wiring, which in practice buys your team fewer meetings, better documentation, and answers that still make sense six months later."
}
}
]
}
]
}
</script>
</head>
<body>
<a href="#main" class="skip">Skip to content</a>
<header class="site-header">
<div class="header-inner">
<a href="#top" class="brand">
<span aria-hidden="true"><</span>DevNode<span aria-hidden="true"> /></span>
</a>
<nav aria-label="Primary" class="nav">
<span class="nav-group" data-nav-view="client">
<a class="nav-link" href="#capabilities">capabilities</a>
<a class="nav-link" href="#ai">AI</a>
<a class="nav-link" href="#work">work</a>
<a class="nav-link" href="#receipts">receipts</a>
<a class="nav-link" href="#working">how I work</a>
</span>
<span class="nav-group" data-nav-view="dev" hidden>
<a class="nav-link" href="#dstack">stack</a>
<a class="nav-link" href="#ddecisions">decisions</a>
<a class="nav-link" href="#dtesting">testing</a>
<a class="nav-link" href="#dagents">agents</a>
<a class="nav-link" href="#dopinions">opinions</a>
</span>
<span class="nav-group" data-nav-view="recruiter" hidden>
<a class="nav-link" href="#rglance">at a glance</a>
<a class="nav-link" href="#rfit">fit</a>
<a class="nav-link" href="#rkeywords">keywords</a>
<a class="nav-link" href="#rnumbers">numbers</a>
</span>
<a class="nav-cv" href="/cv/mariusz-machuta-cv.pdf" target="_blank" rel="noopener">
CV <span aria-hidden="true">↗</span>
</a>
</nav>
</div>
<div class="vsw-row">
<span class="vsw-label">READING THIS AS</span>
<div
role="group"
aria-label="Choose the version of this page written for your role"
class="vsw-group"
>
<button type="button" data-vsw="client" data-active="true" aria-pressed="true">a client</button>
<button type="button" data-vsw="dev" data-active="false" aria-pressed="false">a developer</button>
<button type="button" data-vsw="recruiter" data-active="false" aria-pressed="false">a recruiter</button>
</div>
<span class="vsw-aside">— same facts, written for how you'll actually read them</span>
</div>
</header>
<main id="main" tabindex="-1">
<div id="top" class="wrap">
<!-- ============================================================== -->
<!-- VIEW: client (default — renders fully with JavaScript disabled) -->
<!-- ============================================================== -->
<div data-view="client">
<section aria-labelledby="hero-h" class="hero">
<div>
<p class="hero-eyebrow">
<span aria-hidden="true">//</span> LEAD FRONTEND DEVELOPER
<span aria-hidden="true"> · </span> WARSAW
<span aria-hidden="true"> · </span> REMOTE ACROSS THE EU
</p>
<h1 id="hero-h">
I've seen this<br />codebase <span class="accent">before</span
><span class="caret" aria-hidden="true">.</span>
</h1>
<p class="hero-lead prose">
I'm Mariusz Machuta. I lead frontend on enterprise products that can't afford to
break — React platforms with real-time data, design systems three squads have to
agree on, and accessibility with a legal deadline attached.
</p>
<p class="hero-lead prose">
And increasingly the other half of the job: the LLM tooling that makes a team
faster at all of it — agent skills, subagent teams, MCP context servers, evals.
Built for your codebase and measured like production code, because plausible
output is not correct output.
</p>
<div class="hero-cta">
<a class="btn-primary" href="/cv/mariusz-machuta-cv.pdf" target="_blank" rel="noopener">
Read the full CV <span aria-hidden="true">↗</span>
</a>
<a
class="btn-outline"
href="mailto:mariusz.machuta@gmail.com?subject=Frontend%20engagement%20%E2%80%94%20quick%20intro"
>Email me</a
>
<a
class="link-text"
href="https://www.linkedin.com/in/cainish/"
target="_blank"
rel="noopener"
>or LinkedIn <span aria-hidden="true">↗</span></a
>
</div>
<p class="hero-note">
<span class="emoji" aria-hidden="true">🦄</span> <span class="lede"
>Head of Unicorn Division</span
>
— the rare one who is fluent in component APIs, accessibility trees <em>and</em>
the roadmap meeting. It started as a joke. It stuck, because it's the job.
</p>
</div>
<div class="manifest">
<h2 class="manifest-title">MANIFEST</h2>
<dl class="manifest-list">
<div class="manifest-row">
<dt>ROLE</dt>
<dd>Lead Frontend Developer</dd>
</div>
<div class="manifest-row">
<dt>CORE</dt>
<dd>React 18 · TypeScript · design systems · monorepos</dd>
</div>
<div class="manifest-row">
<dt>SPECIALITY</dt>
<dd>Accessibility (WCAG 2.1/2.2 AA) · legacy rescue</dd>
</div>
<div class="manifest-row">
<dt>ENGAGEMENT</dt>
<dd>B2B · CEIDG sole proprietorship</dd>
</div>
<div class="manifest-row">
<dt>TIMEZONE</dt>
<dd>CET (UTC+1) · full EU overlap</dd>
</div>
<div class="manifest-row">
<dt>COMMS</dt>
<dd>Async-first — I write more than I talk</dd>
</div>
<div class="manifest-row">
<dt>AI</dt>
<dd>Agent skills · subagent teams · shipped MCP server · evals</dd>
</div>
</dl>
<div class="verify">
<p class="verify-label">VERIFY IN DEVTOOLS, 10 SECONDS</p>
<ul class="verify-list" role="list">
<li><b>0</b> cookies</li>
<li><b>0</b> trackers</li>
<li>no consent banner</li>
<li>self-hosted fonts</li>
</ul>
</div>
</div>
</section>
<section aria-labelledby="delivered-h" class="delivered">
<h2 id="delivered-h" class="delivered-title">DELIVERED FOR</h2>
<ul class="delivered-list" role="list">
<li>CodiLime</li>
<li class="sep" aria-hidden="true">/</li>
<li>EPAM Systems</li>
<li class="sep" aria-hidden="true">/</li>
<li>IFX Payments</li>
<li class="sep" aria-hidden="true">/</li>
<li>Fundacja ePaństwo</li>
<li class="sep" aria-hidden="true">/</li>
<li>GoldenLine</li>
<li class="sep" aria-hidden="true">/</li>
<li>Ogilvy Interactive</li>
</ul>
</section>
<section id="capabilities" aria-labelledby="cap-h" class="sec sec-capabilities">
<p class="sec-eyebrow">01 — CAPABILITIES</p>
<h2 id="cap-h" class="sec-title">What I'm brought in to own</h2>
<div class="cap-list">
<article class="cap-row">
<span class="cap-num" aria-hidden="true">01</span>
<h3>Frontend leadership</h3>
<p class="prose">
Leading frontend and QA teams, acting as the direct line to a client-side dev
lead abroad, and making the architecture calls nobody else wants to own.
Certified in management foundations, not just self-appointed.
</p>
</article>
<article class="cap-row">
<span class="cap-num" aria-hidden="true">02</span>
<h3>Design systems & shared libraries</h3>
<p class="prose">
Storybook-driven component libraries consumed across a whole workspace, plus the
boilerplate that makes new apps start on solid rails — stack conventions, testing
and CI wiring baked in.
</p>
</article>
<article class="cap-row">
<span class="cap-num" aria-hidden="true">03</span>
<h3>Accessibility engineering</h3>
<p class="prose">
WCAG AA championed on a live enterprise product, validated by hand and enforced
by an axe-core gate I built into CI — so regressions fail the build instead of
surfacing in an audit a year later. The European Accessibility Act is in force,
so for EU-facing products this is now law rather than polish.
</p>
</article>
<article class="cap-row">
<span class="cap-num" aria-hidden="true">04</span>
<h3>Modernisation without the rewrite</h3>
<p class="prose">
TypeScript upgrades, Vite migrations, state-management moves and bundle budgets,
delivered incrementally on a product that has to keep shipping the whole time.
</p>
</article>
<article class="cap-row">
<span class="cap-num" aria-hidden="true">05</span>
<h3>LLM tooling for engineering teams</h3>
<p class="prose">
Agent skills, subagent teams, MCP servers and automation, tailored to your
codebase and your conventions. This is a service line in its own right — the
section below covers what it actually involves.
</p>
</article>
</div>
</section>
<section id="ai" aria-labelledby="ai-h" class="sec">
<p class="sec-eyebrow">02 — AI ENGINEERING</p>
<h2 id="ai-h" class="sec-title">Agents that survive contact with a real codebase.</h2>
<p class="ai-intro prose">
The model is the easy part. The engineering is orchestration, evaluation, guardrails
and staying reliable on the thousandth run — which is why most AI initiatives stall
at an impressive demo. I build the harness: tailored to how your team already works,
measured like production code.
</p>
<p class="ai-note">
Used daily inside a four-year enterprise engagement — not in notebooks.
</p>
<div class="ai-grid">
<article class="ai-card">
<span class="ai-num" aria-hidden="true">/01</span>
<h3>Agent skills & hooks</h3>
<p class="prose">
Your conventions, review standards and architecture decisions written into the
agent, so it produces code that looks like your codebase instead of generic
output. Hooks enforce the rules the model would otherwise forget by the third
file.
</p>
</article>
<article class="ai-card">
<span class="ai-num" aria-hidden="true">/02</span>
<h3>Teams of subagents</h3>
<p class="prose">
Work split across specialised agents with defined scopes and handoffs, rather
than one prompt attempting everything and quietly failing at half of it. Every
stage reviewable on its own terms, so a failure traces to a step instead of to
"the AI".
</p>
</article>
<article class="ai-card">
<span class="ai-num" aria-hidden="true">/03</span>
<h3>Context engineering</h3>
<p class="prose">
Prompting is instructions; context engineering is the whole information
environment the model works inside. I have built and shipped an MCP server that
exposes a design system to agents, so generated UI reaches for the real component
library instead of inventing a fourth button — context fetched at run time, never
pasted and stale.
</p>
</article>
<article class="ai-card">
<span class="ai-num" aria-hidden="true">/04</span>
<h3>Evals & guardrails</h3>
<p class="prose">
The part most AI programmes skip. Plausible output is not correct output, so
agent behaviour gets measured the way any other code path is. Same instinct that
put a 250 KB bundle budget and 90% hook coverage on my frontend work, applied to
something far less deterministic.
</p>
</article>
<article class="ai-card">
<span class="ai-num" aria-hidden="true">/05</span>
<h3>Designing for the failure</h3>
<p class="prose">
Anyone can demo the happy path. The engineering is what happens when an agent
stalls mid-task, loops, or does the wrong thing confidently at 3am —
instrumentation, stop conditions, and a human in the loop at the point it
actually matters.
</p>
</article>
<article class="ai-card">
<span class="ai-num" aria-hidden="true">/06</span>
<h3>Automation that earns its keep</h3>
<p class="prose">
Refactor passes, test generation, migration sweeps, codebase archaeology. Too
large to do by hand, too mechanical to be worth a human afternoon — handed to
tooling, with a senior on the diff. If it does not beat doing it manually, I
will say so.
</p>
</article>
</div>
<div class="ai-panel">
<p class="prose">
Claude and Gemini, with routing and failover where it earns its cost —
model-agnostic by design, because the harness outlives the vendor. And I do the
unglamorous part: telling you which of this month's releases is production-ready
and which is demo-ware.
</p>
<a href="https://github.com/Cain-Ish" target="_blank" rel="noopener">
Built in public — github.com/Cain-Ish <span aria-hidden="true">↗</span>
</a>
</div>
</section>
<section id="work" aria-labelledby="work-h" class="sec">
<p class="sec-eyebrow">03 — SELECTED WORK</p>
<h2 id="work-h" class="sec-title">Three engagements, honestly described</h2>
<div class="work-grid">
<article class="work-card">
<div class="work-head">
<span class="work-org">CodiLime</span>
<span class="work-kind">ENTERPRISE SaaS</span>
</div>
<h3>Senior Frontend Developer — platform for a US enterprise-security leader</h3>
<p class="work-body prose">
A React SPA suite with real-time job orchestration, streaming logs and JSON
Schema-driven forms over a Python API, built for one of the larger US enterprise
cybersecurity vendors. Several apps plus a shared component library in a
monorepo, shipped in daily contact with the US product and backend teams.
</p>
<ul class="work-points" role="list">
<li>
<span class="bullet" aria-hidden="true">▸</span
><span
>Authored the reusable project boilerplate new apps across the platform are
bootstrapped from</span
>
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span
><span
>Built the axe-core accessibility gate in CI for the shared component library
several apps consume, alongside visual regression</span
>
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span
><span
>Built an internal CMS from scratch — schema-driven forms, permissioned
publishing, embedded rich text</span
>
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span
><span
>Held the bundle under a 250 KB gzipped budget through a TypeScript, Vite and
TanStack Query modernisation</span
>
</li>
</ul>
<p class="work-stack">
React 18 · TypeScript · Vite · TanStack Query · Recoil · Ajv / JSON Schema ·
Tailwind · SASS · CSS Modules · Storybook · Chromatic · axe-core · Vitest ·
Testing Library · Playwright · MSW · pnpm · Nx · Docker · GitLab CI · WebSocket ·
SSE
</p>
</article>
<article class="work-card">
<div class="work-head">
<span class="work-org">EPAM Systems</span>
<span class="work-kind">LEAD ENGINEER</span>
</div>
<h3>Leading frontend and QA on a publishing platform</h3>
<p class="work-body prose">
Main point of contact with the client dev lead in New York, leading a combined
frontend and QA team building out a product on React and Next.js with a headless
CMS behind it.
</p>
<ul class="work-points" role="list">
<li>
<span class="bullet" aria-hidden="true">▸</span
><span>Led the team and owned the client relationship end to end</span>
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span
><span
>Server- and client-side React components, integrated with Arc Publishing
headless CMS</span
>
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span
><span
>Storybook component practice, shared SASS/CSS Modules styles, Jest and Mocha
test coverage</span
>
</li>
</ul>
<p class="work-stack">
React 16 · Next.js · Redux · ES6 + Babel · SASS · CSS Modules · Storybook ·
Webpack · Node.js · REST · Angular 6/7 (prior role)
</p>
</article>
<article class="work-card">
<div class="work-head">
<span class="work-org">Fundacja ePaństwo</span>
<span class="work-kind">CIVIC TECH</span>
</div>
<h3>Senior Front-end Developer — public-interest platforms</h3>
<p class="work-body prose">
Frontend and product work on open civic-technology services used by the Polish
public, alongside project management and technology research.
</p>
<ul class="work-points" role="list">
<li>
<span class="bullet" aria-hidden="true">▸</span
><span>Core contributor to mojepanstwo.pl, epf.org.pl and kodujdlapolski.pl</span>
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span
><span
>Responsive UI across mobile, tablet and desktop before it was standard
practice</span
>
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span
><span>Module planning and delivery across cakePHP, Drupal and WordPress stacks</span>
</li>
</ul>
<p class="work-stack">
JavaScript · jQuery (AJAX/JSON) · HTML5 · CSS3 · PHP · cakePHP · Drupal ·
WordPress · Git Flow
</p>
</article>
</div>
</section>
<section id="receipts" aria-labelledby="rec-h" class="sec">
<p class="sec-eyebrow">04 — RECEIPTS</p>
<h2 id="rec-h" class="sec-title">Numbers I actually held myself to</h2>
<dl class="stats">
<div class="stat-card">
<dt>gzipped bundle budget</dt>
<dd class="stat-num">250 KB</dd>
<dd class="stat-desc">held through a full platform modernisation</dd>
</div>
<div class="stat-card">
<dt>test coverage</dt>
<dd class="stat-num">60% / 90%</dd>
<dd class="stat-desc">overall, and on hooks — Vitest + Testing Library</dd>
</div>
<div class="stat-card">
<dt>accessibility gate I built</dt>
<dd class="stat-num">axe in CI</dd>
<dd class="stat-desc">WCAG AA enforced on the build, not audited after</dd>
</div>
<div class="stat-card">
<dt>single client engagement</dt>
<dd class="stat-num">4 years</dd>
<dd class="stat-desc">one platform, continuously, without being replaced</dd>
</div>
</dl>
<p class="stats-note">
Figures from the CodiLime engagement described above — the numbers I was accountable
for, not industry averages.
</p>
</section>
<section aria-labelledby="cv-h" class="sec">
<div class="cv-panel">
<div class="cv-grid">
<div class="cv-main">
<p class="sec-eyebrow">05 — CAREER, ABRIDGED</p>
<h2 id="cv-h">The shape of it</h2>
<ol class="career" role="list">
<li>
<div class="career-role">Senior Frontend Developer <span>· CodiLime</span></div>
<div class="career-ctx">
Enterprise platform for a US cybersecurity leader — React, real-time,
monorepo
</div>
</li>
<li>
<div class="career-role">Lead Engineer <span>· EPAM Systems</span></div>
<div class="career-ctx">
Led frontend + QA; direct line to the client dev lead in New York
</div>
</li>
<li>
<div class="career-role">
Senior Software Engineer <span>· EPAM Systems</span>
</div>
<div class="career-ctx">
Angular 6/7 — modules, routing, guards, services, unit testing
</div>
</li>
<li>
<div class="career-role">Front End Web Developer <span>· IFX Payments</span></div>
<div class="career-ctx">
Nuxt/Vue, Angular and React; currency transaction module on Paysafecard API
</div>
</li>
<li>
<div class="career-role">
Senior Front-end Web Developer <span>· Fundacja ePaństwo</span>
</div>
<div class="career-ctx">
Civic tech — mojepanstwo.pl, kodujdlapolski.pl, epf.org.pl
</div>
</li>
<li>
<div class="career-role">Front-end Web Developer <span>· GoldenLine</span></div>
<div class="career-ctx">
Portal development at scale — UX, usability, accessibility, scalability
</div>
</li>
</ol>
<p class="cv-note">
<span class="glyph" aria-hidden="true">⋯</span> Dates, references and the
earlier agency years are all in the CV. I left them off here on purpose — what
I've been trusted with says more than how long I've been at it.
</p>
</div>
<div class="cv-aside">
<h3>Two pages.<br />No signup. No recruiter wall.</h3>
<p class="cv-aside-lead prose">
Full timeline, every stack, every client, and the education and certifications
underneath it.
</p>
<a class="cv-btn" href="/cv/mariusz-machuta-cv.pdf" target="_blank" rel="noopener">
Open the CV<span aria-hidden="true">↗</span>
</a>
<p class="cv-meta">
<span>PDF</span><span aria-hidden="true">·</span><span>ENGLISH</span
><span aria-hidden="true">·</span><span>OPENS IN A NEW TAB</span>
</p>
</div>
</div>
</div>
</section>
<section id="working" aria-labelledby="working-h" class="sec">
<p class="sec-eyebrow">06 — HOW I WORK</p>
<h2 id="working-h" class="sec-title">What hiring me actually looks like</h2>
<ol class="steps" role="list">
<li>
<span class="step-num" aria-hidden="true">01</span>
<h3>You email me</h3>
<p class="prose">
A few lines is enough. I answer in writing, properly, and tell you straight away
if I am not the right person for it.
</p>
</li>
<li>
<span class="step-num" aria-hidden="true">02</span>
<h3>Scope in writing</h3>
<p class="prose">
A short proposal: goals, deliverables, timeline and engagement model. The number
in it is the number on the invoice.
</p>
</li>
<li>
<span class="step-num" aria-hidden="true">03</span>
<h3>Delivery</h3>
<p class="prose">
Sprint rhythm with a working demo, not a status report. Embedded in your squad or
running the workstream solo.
</p>
</li>
<li>
<span class="step-num" aria-hidden="true">04</span>
<h3>Handoff</h3>
<p class="prose">
Documentation and knowledge transfer, so the work survives me leaving. Optional
support retainer after.
</p>
</li>
</ol>
</section>
<section aria-labelledby="faq-h" class="sec">
<p class="sec-eyebrow">07 — THE BORING QUESTIONS</p>
<h2 id="faq-h" class="sec-title faq-title">Answered up front</h2>
<dl class="faq">
<div class="faq-item">
<dt>How does contracting work, formally?</dt>
<dd class="prose">
B2B contract with my Polish sole proprietorship, registered in CEIDG. For EU
companies, invoicing uses reverse-charge VAT. NDA and IP-transfer clauses are
standard practice.
</dd>
</div>
<div class="faq-item">
<dt>Remote or on-site?</dt>
<dd class="prose">
Remote-first from Warsaw on CET, which overlaps comfortably with the whole EU
business day. On-site kickoffs and workshops by arrangement.
</dd>
</div>
<div class="faq-item">
<dt>Do you join existing teams or work solo?</dt>
<dd class="prose">
Both, and I have done both. Embedded senior or lead inside your squad, or
independent delivery of a scoped workstream with regular demos.
</dd>
</div>
<div class="faq-item">
<dt>What happens if you're unavailable mid-engagement?</dt>
<dd class="prose">
I am one person, not an agency — there is no bench to swap in, and I would rather
say that plainly than imply otherwise. What I do instead is make the work
survivable without me: documentation and knowledge transfer are part of delivery
rather than a final-week scramble, the reasoning behind decisions gets written
down where your team will find it, and a support retainer is available after
handoff if you want one. If I am ever not the right person for a piece of work,
you hear that from me early rather than late.
</dd>
</div>
<div class="faq-item">
<dt>Can you make us EAA / WCAG compliant?</dt>
<dd class="prose">
Yes. Audit first — prioritised findings with severity and effort — then
remediation in your codebase alongside your team, and an axe-core gate in CI so
it stays fixed. I have built exactly that gate on a shared component library in
production; compliance that depends on someone remembering to re-audit is not
compliance.
</dd>
</div>
<div class="faq-item">
<dt>What languages do you work in?</dt>
<dd class="prose">
English professionally, Polish natively. Documentation, code review and client
communication all in English by default.
</dd>
</div>
<div class="faq-item">
<dt>Can you do the AI work without the frontend work?</dt>
<dd class="prose">
Yes. Building agent tooling, subagent workflows, MCP servers and automation is a
standalone engagement, and it does not have to be a frontend codebase. What it
does need is someone senior enough to judge whether the output is any good,
which is the part most AI initiatives skip.
</dd>
</div>
<div class="faq-item">
<dt>Is the AI work hype or real?</dt>
<dd class="prose">
Judge it by what it replaces, and by whether anyone measured. If a refactor
sweep that would have cost a developer two weeks lands in two days and passes
review, that is real. If it produces plausible code nobody can maintain, that is
hype — and I will tell you which one you are looking at rather than sell you the
second.
</dd>
</div>
<div class="faq-item">
<dt>Why should a frontend lead be the one building your agents?</dt>
<dd class="prose">
Because the failure mode is identical to the one I have spent my career on:
something that looks right, demos well, and quietly breaks in production. Agent
work rewards the same habits — budgets, coverage, instrumentation, review
discipline — applied to a system that is far less deterministic than a component
tree.
</dd>
</div>
<div class="faq-item">
<dt>Do you do live coding sessions?</dt>
<dd class="prose">
I would rather talk than perform. A timed exercise measures composure under an
audience, not the thing you are actually hiring for — and my work is already open
to inspection: this page, the CV, the public repos. I will go as deep as you like
on architecture and on decisions I got wrong before I got them right, or take a
task home and think about it properly. If a live exercise is non-negotiable, say
so early and I will tell you honestly whether to keep looking.
</dd>
</div>
<div class="faq-item">
<dt>How do you communicate day to day?</dt>
<dd class="prose">
Async-first and in writing — specs, decision records, pull-request context,
recorded demos. I am an introvert by wiring, which in practice buys your team
fewer meetings, better documentation, and answers that still make sense six
months later.
</dd>
</div>
</dl>
</section>
<section id="contact" aria-labelledby="contact-h" class="sec-contact">
<div class="contact">
<div>
<h2 id="contact-h">You make the first move.<br />I'll take it from there.</h2>
<p class="contact-lead prose">
I don't cold-email, chase, or circle back — so if this looks like a fit, the note
has to come from you. A few lines is plenty. Every one gets a proper written
answer.
</p>
<div class="contact-useful">
<p class="contact-useful-label">USEFUL IN A FIRST MESSAGE</p>
<ul role="list">
<li>
<span class="bullet" aria-hidden="true">▸</span> What the product is,
and where the frontend hurts
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span> Rough timeline and how
long you need someone
</li>
<li>
<span class="bullet" aria-hidden="true">▸</span> Embedded in your team,
or a workstream of my own
</li>
</ul>
</div>
<p class="contact-meta">
<span>Warsaw · CET</span><span aria-hidden="true">·</span
><span>English & Polish</span><span aria-hidden="true">·</span
><span>B2B invoice, NDA-friendly</span>
</p>
</div>
<div class="contact-cta">
<a
class="contact-email"
href="mailto:mariusz.machuta@gmail.com?subject=Frontend%20engagement%20%E2%80%94%20quick%20intro"
>mariusz.machuta@gmail.com</a
>
<a
class="contact-linkedin"
href="https://www.linkedin.com/in/cainish/"
target="_blank"
rel="noopener"
>Message me on LinkedIn <span aria-hidden="true">↗</span></a
>
</div>
</div>
</section>
</div>
<!-- ============================================================== -->
<!-- VIEW: dev -->
<!-- ============================================================== -->
<div data-view="dev" hidden>
<section aria-labelledby="dhero-h" class="dhero">
<p class="hero-eyebrow">
<span aria-hidden="true">//</span> DEVELOPER VIEW — NO HR GIBBERISH, NO SYNERGY, NO
“PASSIONATE ABOUT CODE”
</p>
<h1 id="dhero-h">
You're going to be<br />reviewing my <span class="accent">PRs</span>.
</h1>
<p class="dhero-lead prose">
So here's the version without the adjectives. What I'm genuinely deep in, what I'm
merely competent at, what I'd need a week to get back into, and the opinions I'll
bring to your architecture discussions whether or not you asked.
</p>
<p class="dhero-sub">Same person as the client view. Fewer nouns like “solution”.</p>
</section>
<section id="dstack" aria-labelledby="stack-h" class="sec-dev">
<p class="sec-eyebrow">01 — THE STACK, HONESTLY RATED</p>
<h2 id="stack-h" class="sec-title">
Three columns, because “proficient in 40 technologies” is a lie
</h2>
<p class="dev-intro prose">
Sorted by what I'd be comfortable being questioned on in a technical screen tomorrow,
with no revision.
</p>
<div class="stack-grid">
<div class="stack-card">
<h3>Deep</h3>
<p class="stack-sub">Ask me anything. No revision needed.</p>
<ul class="chips" role="list">
<li>React 18</li>
<li>TypeScript (strict)</li>
<li>JavaScript ES6+</li>
<li>Vite</li>
<li>CSS / SASS</li>
<li>CSS Modules</li>
<li>Tailwind</li>
<li>Storybook</li>
<li>TanStack Query</li>
<li>Recoil</li>
<li>react-hook-form</li>
<li>JSON Schema forms (Ajv / Zod)</li>
<li>Semantic HTML</li>
<li>WCAG 2.1/2.2 AA</li>
<li>ARIA</li>
<li>axe-core</li>
<li>Vitest</li>
<li>Testing Library</li>
<li>MSW</li>
<li>Playwright</li>
<li>pnpm + Nx monorepos</li>
<li>Design systems</li>
<li>Component API design</li>
<li>Git / Git Flow</li>
</ul>
</div>
<div class="stack-card">
<h3>Solid</h3>
<p class="stack-sub">Shipped production with it. Might check the docs.</p>
<ul class="chips" role="list">
<li>Next.js</li>
<li>Node.js</li>
<li>Express</li>
<li>Redux / Redux Toolkit</li>
<li>Jest</li>
<li>Webpack</li>
<li>Chromatic</li>