-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1192 lines (1130 loc) · 61.1 KB
/
Copy pathindex.html
File metadata and controls
1192 lines (1130 loc) · 61.1 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.0">
<title>Eduard — AI Automation Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
base: '#090d16',
panel: '#0f172a',
cyan: '#22d3ee',
indigo: '#6366f1',
emerald: '#34d399'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace']
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
background:#090d16;
color:#e2e8f0;
font-family:'Inter',system-ui,sans-serif;
overflow-x:hidden;
}
/* ===== Animated Neon Grid Background ===== */
.grid-bg {
position:fixed; inset:0; z-index:-2;
background:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 110%, rgba(34,211,238,0.1), transparent),
#090d16;
}
.grid-lines {
position:fixed; inset:0; z-index:-1; pointer-events:none;
background-image:
linear-gradient(rgba(34,211,238,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(34,211,238,0.05) 1px, transparent 1px);
background-size:60px 60px;
animation: gridMove 20s linear infinite;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
}
@keyframes gridMove {
0% { background-position:0 0; }
100% { background-position:60px 60px; }
}
/* ===== Floating Orbs ===== */
.orb {
position:fixed; border-radius:50%; filter:blur(90px); z-index:-1; pointer-events:none;
opacity:0.35; animation: float 18s ease-in-out infinite;
}
.orb-1 { width:500px; height:500px; background:#6366f1; top:-150px; left:-100px; }
.orb-2 { width:400px; height:400px; background:#22d3ee; bottom:-100px; right:-50px; animation-delay:-6s; }
.orb-3 { width:350px; height:350px; background:#34d399; top:40%; left:60%; animation-delay:-12s; opacity:0.2; }
@keyframes float {
0%,100% { transform:translate(0,0) scale(1); }
33% { transform:translate(40px,-30px) scale(1.1); }
66% { transform:translate(-30px,20px) scale(0.95); }
}
/* ===== Glassmorphism ===== */
.glass {
background:rgba(15,23,42,0.55);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(148,163,184,0.12);
}
/* ===== Glow Border Cards ===== */
.glow-card {
position:relative;
background:rgba(15,23,42,0.6);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(148,163,184,0.12);
border-radius:1.25rem;
overflow:hidden;
transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;
}
.glow-card::before {
content:'';
position:absolute; inset:0; border-radius:inherit; padding:1px;
background:linear-gradient(135deg, rgba(34,211,238,0.6), rgba(99,102,241,0.6), rgba(52,211,153,0.6));
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0; transition:opacity 0.4s;
pointer-events:none;
}
.glow-card:hover::before { opacity:1; }
.glow-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px -20px rgba(99,102,241,0.4); }
/* ===== Neon Text ===== */
.gradient-text {
background:linear-gradient(90deg,#22d3ee,#818cf8,#34d399);
-webkit-background-clip:text; background-clip:text; color:transparent;
animation: hueShift 8s linear infinite;
}
@keyframes hueShift {
0%,100% { filter:hue-rotate(0deg); }
50% { filter:hue-rotate(30deg); }
}
/* ===== Pulsing Status Badge ===== */
.pulse-dot {
width:8px; height:8px; border-radius:50%; display:inline-block; position:relative;
}
.pulse-dot::after {
content:''; position:absolute; inset:-4px; border-radius:50%;
border:2px solid currentColor; animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse {
0% { transform:scale(0.6); opacity:1; }
100% { transform:scale(1.6); opacity:0; }
}
/* ===== Trend Arrows ===== */
.trend-up { color:#34d399; text-shadow:0 0 12px rgba(52,211,153,0.6); }
.trend-down { color:#f87171; text-shadow:0 0 12px rgba(248,113,113,0.6); }
/* ===== Scroll Reveal ===== */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); will-change:opacity,transform; }
.reveal.visible { opacity:1; transform:translateY(0); }
/* ===== Modal ===== */
.modal-overlay {
position:fixed; inset:0; z-index:100; display:none;
background:rgba(9,13,22,0.8); backdrop-filter:blur(8px);
align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.open { display:flex; animation:fadeIn 0.3s; }
.modal-content {
background:rgba(15,23,42,0.95); border:1px solid rgba(34,211,238,0.3);
border-radius:1.5rem; max-width:800px; width:100%; max-height:85vh; overflow-y:auto;
padding:2rem; position:relative; box-shadow:0 0 60px rgba(99,102,241,0.3);
animation:slideUp 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
/* ===== Architecture Diagram ===== */
.arch-node {
background:rgba(15,23,42,0.8); border:1px solid rgba(34,211,238,0.3);
border-radius:0.75rem; padding:0.75rem 1rem; text-align:center;
font-size:0.8rem; font-weight:600; color:#a5f3fc;
box-shadow:0 0 20px rgba(34,211,238,0.15);
}
.arch-arrow { color:#475569; font-size:1.2rem; }
/* ===== Project Screenshot Placeholder ===== */
.project-shot {
position:relative; height:160px; border-radius:0.75rem; overflow:hidden;
background:rgba(148,163,184,0.06);
border:1px dashed rgba(148,163,184,0.2);
margin-bottom:1rem;
}
.project-shot img {
width:100%; height:100%; object-fit:cover; position:relative; z-index:1;
}
.shot-placeholder {
position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:0.5rem;
color:#475569; font-size:0.75rem; font-family:'JetBrains Mono',monospace;
}
.shot-placeholder i { width:24px; height:24px; opacity:0.5; }
/* ===== Scrollbar ===== */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#0f172a; }
::-webkit-scrollbar-thumb { background:linear-gradient(#22d3ee,#6366f1); border-radius:4px; }
/* ===== Section Title ===== */
.section-tag {
display:inline-flex; align-items:center; gap:0.5rem;
font-family:'JetBrains Mono',monospace; font-size:0.75rem; letter-spacing:0.2em;
color:#22d3ee; text-transform:uppercase;
}
.section-tag::before { content:''; width:2rem; height:1px; background:linear-gradient(90deg,transparent,#22d3ee); }
/* ===== Hero ===== */
.hero-title {
font-size:clamp(2.5rem, 7vw, 5rem); font-weight:900; line-height:1.05; letter-spacing:-0.02em;
}
.typing-cursor::after { content:'|'; animation:blink 1s step-end infinite; color:#22d3ee; }
@keyframes blink { 50% { opacity:0; } }
/* ===== Marquee ===== */
.marquee { overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-block; animation:marquee 30s linear infinite; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* ===== Chart container ===== */
.chart-box { position:relative; height:260px; }
/* ===== Skill tags ===== */
.skill-tag {
display:inline-flex; align-items:center; gap:0.5rem;
padding:0.5rem 0.875rem; border-radius:0.5rem;
background:rgba(15,23,42,0.6); border:1px solid rgba(148,163,184,0.15);
font-size:0.8rem; color:#cbd5e1; transition:all 0.3s;
}
.skill-tag:hover { border-color:rgba(34,211,238,0.4); color:#22d3ee; transform:translateY(-2px); }
.skill-tag .level {
font-size:0.65rem; padding:0.125rem 0.375rem; border-radius:0.25rem;
font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.05em;
}
.level-beginner { background:rgba(248,113,113,0.15); color:#f87171; }
.level-intermediate { background:rgba(251,191,36,0.15); color:#fbbf24; }
.level-advanced { background:rgba(52,211,153,0.15); color:#34d399; }
</style>
</head>
<body>
<!-- ===== Background Layers ===== -->
<div class="grid-bg"></div>
<div class="grid-lines"></div>
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
<!-- ===== Navbar ===== -->
<nav class="fixed top-0 left-0 right-0 z-50 glass border-b border-slate-800/50">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="#hero" class="flex items-center gap-2 font-bold text-lg">
<span class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 to-indigo-500 flex items-center justify-center text-white text-sm">E</span>
<span class="gradient-text">AI Portfolio</span>
</a>
<div class="hidden md:flex items-center gap-8 text-sm text-slate-300">
<a href="#about" class="hover:text-cyan-300 transition">About</a>
<a href="#skills" class="hover:text-cyan-300 transition">Skills</a>
<a href="#projects" class="hover:text-cyan-300 transition">Projects</a>
<a href="#metrics" class="hover:text-cyan-300 transition">Metrics</a>
<a href="#contact" class="hover:text-cyan-300 transition">Contact</a>
</div>
<a href="#contact" class="px-4 py-2 rounded-lg bg-gradient-to-r from-cyan-500 to-indigo-500 text-white text-sm font-semibold hover:shadow-lg hover:shadow-cyan-500/30 transition">Contact</a>
</div>
</nav>
<!-- ===== Hero ===== -->
<section id="hero" class="min-h-screen flex items-center justify-center relative pt-20">
<div class="max-w-7xl mx-auto px-6 text-center">
<div class="reveal">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8">
<span class="pulse-dot bg-emerald-400 text-emerald-400"></span>
<span class="text-sm text-emerald-300 font-medium">● Available for opportunities</span>
</div>
</div>
<h1 class="hero-title reveal">
<span class="typing-cursor">Eduard</span><br>
<span class="gradient-text">AI Automation Portfolio</span>
</h1>
<p class="mt-6 text-lg md:text-xl text-slate-400 max-w-3xl mx-auto reveal">
I build complete AI automation products — from idea to shipped MVP.
Delivered projects across LLM agents, Telegram services, backend systems,
Android automation, and security audits.
</p>
<div class="mt-8 flex flex-wrap justify-center gap-3 reveal">
<span class="px-4 py-2 rounded-lg glass text-sm text-cyan-300 font-mono">AI Automation</span>
<span class="px-4 py-2 rounded-lg glass text-sm text-indigo-300 font-mono">Product Architecture</span>
<span class="px-4 py-2 rounded-lg glass text-sm text-emerald-300 font-mono">Cybersecurity</span>
</div>
<div class="mt-12 flex flex-wrap justify-center gap-4 reveal">
<a href="#projects" class="px-6 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-indigo-500 text-white font-semibold hover:shadow-xl hover:shadow-indigo-500/30 transition">View Projects</a>
<a href="#metrics" class="px-6 py-3 rounded-xl glass text-slate-200 font-semibold hover:border-cyan-400/50 transition">Key Metrics</a>
</div>
</div>
</section>
<!-- ===== Marquee Tech Stack ===== -->
<div class="marquee py-6 border-y border-slate-800/50 glass">
<div class="marquee-track font-mono text-sm text-slate-500">
<span class="mx-6">Python</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">FastAPI</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">REST</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Swagger/OpenAPI</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">SQLite</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Telegram Bot API</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Telethon</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">LLM</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Android SDK</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">ADB</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">JDK 17</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">PowerShell 5.1</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">GraphQL</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">httpx</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Uvicorn</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Node.js</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Git</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">UX/UI</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Data Pipelines</span><span class="mx-6 text-cyan-400">•</span>
<span class="mx-6">Windows Automation</span><span class="mx-6 text-cyan-400">•</span>
</div>
</div>
<!-- ===== About ===== -->
<section id="about" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="reveal">
<span class="section-tag">01 — About</span>
<h2 class="text-3xl md:text-4xl font-bold mt-4">About Me</h2>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-10">
<div class="glow-card p-8 reveal">
<div class="flex items-center gap-3 mb-4">
<i data-lucide="user" class="w-6 h-6 text-cyan-400"></i>
<h3 class="text-xl font-semibold">Profile</h3>
</div>
<p class="text-slate-400 leading-relaxed">
I build production-ready AI automation systems and ship them end-to-end —
from architecture and design to backend, integrations, and on-device deployment.
Every project below is a completed, working product.
</p>
<div class="mt-6 space-y-3">
<div class="flex items-center gap-2 text-sm">
<span class="pulse-dot bg-cyan-400 text-cyan-400"></span>
<span class="text-slate-300">AI Automation — 9 shipped projects delivered</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="pulse-dot bg-indigo-400 text-indigo-400"></span>
<span class="text-slate-300">Product Architecture — designed & delivered end-to-end</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="pulse-dot bg-emerald-400 text-emerald-400"></span>
<span class="text-slate-300">Cybersecurity — completed audit, 74.2% score, 4 vulns fixed</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="pulse-dot bg-amber-400 text-amber-400"></span>
<span class="text-slate-300">Technical Product Builder — delivered complete products</span>
</div>
</div>
</div>
<div class="glow-card p-8 reveal">
<div class="flex items-center gap-3 mb-4">
<i data-lucide="layers" class="w-6 h-6 text-indigo-400"></i>
<h3 class="text-xl font-semibold">Technologies I Work With</h3>
</div>
<div class="grid grid-cols-2 gap-3 text-sm">
<div class="p-3 rounded-lg bg-slate-800/40 border border-slate-700/50">
<p class="text-cyan-300 font-semibold mb-1">AI / LLM</p>
<p class="text-slate-400">Integration, agents, pipelines</p>
</div>
<div class="p-3 rounded-lg bg-slate-800/40 border border-slate-700/50">
<p class="text-indigo-300 font-semibold mb-1">Backend</p>
<p class="text-slate-400">Python, FastAPI, REST, SQLite</p>
</div>
<div class="p-3 rounded-lg bg-slate-800/40 border border-slate-700/50">
<p class="text-emerald-300 font-semibold mb-1">Android</p>
<p class="text-slate-400">JDK 17, SDK 35, ADB, APK</p>
</div>
<div class="p-3 rounded-lg bg-slate-800/40 border border-slate-700/50">
<p class="text-amber-300 font-semibold mb-1">Windows Automation</p>
<p class="text-slate-400">PowerShell, ProcessStartInfo, BAT</p>
</div>
<div class="p-3 rounded-lg bg-slate-800/40 border border-slate-700/50">
<p class="text-cyan-300 font-semibold mb-1">Telegram</p>
<p class="text-slate-400">Bot API, Telethon, httpx</p>
</div>
<div class="p-3 rounded-lg bg-slate-800/40 border border-slate-700/50">
<p class="text-indigo-300 font-semibold mb-1">Cybersecurity</p>
<p class="text-slate-400">Crawling, API discovery, mapping</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== Skills ===== -->
<section id="skills" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="reveal">
<span class="section-tag">02 — Skills</span>
<h2 class="text-3xl md:text-4xl font-bold mt-4">Skills & Competencies</h2>
<p class="text-slate-400 mt-4 max-w-2xl">Complete production stack — every skill below is used in shipped, working projects.</p>
</div>
<div class="grid lg:grid-cols-2 gap-8 mt-10">
<div class="glow-card p-8 reveal">
<h3 class="text-xl font-semibold mb-6 flex items-center gap-2">
<i data-lucide="radar" class="w-5 h-5 text-cyan-400"></i> Skills & Competencies
</h3>
<p class="text-xs font-mono uppercase tracking-widest text-cyan-300 mb-3 mt-2">Backend & APIs</p>
<div class="flex flex-wrap gap-2 mb-5">
<span class="skill-tag">Python <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">FastAPI <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Uvicorn <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">REST API <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Swagger / OpenAPI <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Webhooks <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Asynchronous Requests <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">httpx <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">python-dotenv <span class="level level-advanced">Advanced</span></span>
</div>
<p class="text-xs font-mono uppercase tracking-widest text-indigo-300 mb-3">AI / LLM</p>
<div class="flex flex-wrap gap-2 mb-5">
<span class="skill-tag">LLM API Integration <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Multi-Agent Systems <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Role-Based Agents <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">State Machine Architecture <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Task Pipelines <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Context Isolation <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Policy Layer <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Simulation Mode <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Audit Trail <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">RAG <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Vector Search & Embeddings <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Knowledge Graphs <span class="level level-intermediate">Intermediate</span></span>
</div>
<p class="text-xs font-mono uppercase tracking-widest text-emerald-300 mb-3">Data & Databases</p>
<div class="flex flex-wrap gap-2 mb-5">
<span class="skill-tag">SQLite <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Database Schema Design <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Data Normalization <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Multi-source ETL <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Data Pipelines <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Deduplication & Scoring <span class="level level-intermediate">Intermediate</span></span>
</div>
<p class="text-xs font-mono uppercase tracking-widest text-amber-300 mb-3">Telegram</p>
<div class="flex flex-wrap gap-2 mb-5">
<span class="skill-tag">Telegram Bot API <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Telethon <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Telegram Session Management <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Event Dispatching <span class="level level-intermediate">Intermediate</span></span>
</div>
<p class="text-xs font-mono uppercase tracking-widest text-cyan-300 mb-3">Android & Windows Automation</p>
<div class="flex flex-wrap gap-2 mb-5">
<span class="skill-tag">JDK 17 <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Android SDK 35 <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">ADB <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Gradle & Automated Launchers <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">PowerShell 5.1 <span class="level level-advanced">Advanced</span></span>
<span class="skill-tag">Windows Automation <span class="level level-advanced">Advanced</span></span>
</div>
<p class="text-xs font-mono uppercase tracking-widest text-indigo-300 mb-3">Cybersecurity</p>
<div class="flex flex-wrap gap-2 mb-5">
<span class="skill-tag">Web Crawling & Discovery <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">GraphQL Extraction <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Graph Mapping <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Determinism Checks <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Safe Vulnerability Validation <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">SOCKS / Proxy Support <span class="level level-intermediate">Intermediate</span></span>
</div>
<p class="text-xs font-mono uppercase tracking-widest text-emerald-300 mb-3">Product & Design</p>
<div class="flex flex-wrap gap-2">
<span class="skill-tag">Product Architecture & Systems Design <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Product Decomposition <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">Marketplace Logic & Anti-Fraud Rules <span class="level level-intermediate">Intermediate</span></span>
<span class="skill-tag">UX/UI & Design Systems <span class="level level-intermediate">Intermediate</span></span>
</div>
</div>
<div class="glow-card p-8 reveal">
<h3 class="text-xl font-semibold mb-6 flex items-center gap-2">
<i data-lucide="pie-chart" class="w-5 h-5 text-indigo-400"></i> Competency Radar
</h3>
<div class="chart-box"><canvas id="radarChart"></canvas></div>
</div>
</div>
</div>
</section>
<!-- ===== Metrics ===== -->
<section id="metrics" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="reveal">
<span class="section-tag">03 — Key Metrics</span>
<h2 class="text-3xl md:text-4xl font-bold mt-4">Project Metrics</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-10">
<div class="glow-card p-6 text-center reveal">
<div class="text-4xl font-black gradient-text"><span class="counter" data-target="74.2" data-decimals="1">0</span>%</div>
<p class="text-sm text-slate-400 mt-2">Security Audit Score</p>
<p class="text-xs text-emerald-400 mt-1"><span class="trend-up">▲</span> improved</p>
</div>
<div class="glow-card p-6 text-center reveal">
<div class="text-4xl font-black gradient-text"><span class="counter" data-target="16">0</span>/20</div>
<p class="text-sm text-slate-400 mt-2">Checks Passed</p>
<p class="text-xs text-cyan-400 mt-1"><span class="trend-up">▲</span> 80% coverage</p>
</div>
<div class="glow-card p-6 text-center reveal">
<div class="text-4xl font-black gradient-text"><span class="counter" data-target="54">0</span>→<span class="counter" data-target="61">0</span></div>
<p class="text-sm text-slate-400 mt-2">Catalog Categories</p>
<p class="text-xs text-emerald-400 mt-1"><span class="trend-up">▲</span> +7 categories</p>
</div>
<div class="glow-card p-6 text-center reveal">
<div class="text-4xl font-black gradient-text"><span class="counter" data-target="4">0</span></div>
<p class="text-sm text-slate-400 mt-2">Vulnerabilities Found</p>
<p class="text-xs text-red-400 mt-1"><span class="trend-down">▼</span> fixed</p>
</div>
</div>
<!-- Charts Row -->
<div class="grid lg:grid-cols-2 gap-8 mt-10">
<div class="glow-card p-8 reveal">
<h3 class="text-xl font-semibold mb-6 flex items-center gap-2">
<i data-lucide="trending-up" class="w-5 h-5 text-emerald-400"></i> Catalog Growth
</h3>
<div class="chart-box"><canvas id="catalogChart"></canvas></div>
</div>
<div class="glow-card p-8 reveal">
<h3 class="text-xl font-semibold mb-6 flex items-center gap-2">
<i data-lucide="shield-check" class="w-5 h-5 text-cyan-400"></i> Security Audit
</h3>
<div class="chart-box"><canvas id="auditChart"></canvas></div>
</div>
</div>
</div>
</section>
<!-- ===== Projects ===== -->
<section id="projects" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="reveal">
<span class="section-tag">04 — Projects</span>
<h2 class="text-3xl md:text-4xl font-bold mt-4">Project Portfolio</h2>
<p class="text-slate-400 mt-4 max-w-2xl">Real projects I've built. Click a card to see the architecture and details.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10" id="projectsGrid">
<!-- Project 1: PCOS -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('pcos')">
<div class="project-shot" data-shot="pcos">
<img src="screenshots/пкос/08a95304-30fb-4e34-9834-dab852281fdf.png" alt="PCOS screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-300 text-xs font-mono">AI ORCHESTRATION</span>
<span class="pulse-dot bg-emerald-400 text-emerald-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">PCOS</h3>
<p class="text-sm text-slate-400 mb-4">AI Orchestration / Campaign Intelligence — automating ad campaigns with AI agents.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">LLM</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">State machine</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">Agents</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 2: Cybersecurity Audit -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('cyber')">
<div class="project-shot" data-shot="cyber">
<img src="screenshots/cyber.png" alt="Cybersecurity audit screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-300 text-xs font-mono">CYBERSECURITY</span>
<span class="pulse-dot bg-cyan-400 text-cyan-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">Security Audit</h3>
<p class="text-sm text-slate-400 mb-4">Discovery / Validation — 74.2% audit score, 16/20 checks, 4 vulnerabilities found.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">REST</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">GraphQL</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">Burp Suite</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 3: Mobile Product -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('mobile')">
<div class="project-shot" data-shot="mobile">
<img src="screenshots/ЦЕнтр подологии/салон (8).png" alt="Mobile product screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-300 text-xs font-mono">MOBILE PRODUCT</span>
<span class="pulse-dot bg-indigo-400 text-indigo-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">Mobile Product</h3>
<p class="text-sm text-slate-400 mb-4">Service Data / Operations — catalog 54→61 categories, Telegram Price Bot.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">YCLIENTS</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">Python</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">Telegram API</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 4: Lead Radar -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('lead')">
<div class="project-shot" data-shot="lead">
<img src="screenshots/lead.png" alt="Lead Radar screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-300 text-xs font-mono">DATA ACQUISITION</span>
<span class="pulse-dot bg-emerald-400 text-emerald-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">Lead Radar</h3>
<p class="text-sm text-slate-400 mb-4">Data Acquisition / Filtering / Telegram Delivery — finding clients from open sources.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">Telethon</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">httpx 0.28.1</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">SOCKS</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 5: CargoFlow -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('cargo')">
<div class="project-shot" data-shot="cargo">
<img src="screenshots/карго/лог1.png" alt="CargoFlow screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-300 text-xs font-mono">ANDROID / FASTAPI</span>
<span class="pulse-dot bg-cyan-400 text-cyan-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">CargoFlow</h3>
<p class="text-sm text-slate-400 mb-4">Android / FastAPI / Local Infrastructure — delivery automation.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">FastAPI 0.116.1</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">ADB</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">Gradle</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 6: DecisionCore -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('decision')">
<div class="project-shot" data-shot="decision">
<img src="screenshots/decision.png" alt="DecisionCore screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-300 text-xs font-mono">LOCAL RUNTIME</span>
<span class="pulse-dot bg-indigo-400 text-indigo-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">DecisionCore</h3>
<p class="text-sm text-slate-400 mb-4">Local Runtime / Orchestration / Android — automating decision systems.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">Node.js</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">Java 17</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">ProcessStartInfo</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 7: AutoMind OS -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('automind')">
<div class="project-shot" data-shot="automind">
<img src="screenshots/automind.png" alt="AutoMind OS screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-300 text-xs font-mono">UNIFIED ARCHITECTURE</span>
<span class="pulse-dot bg-emerald-400 text-emerald-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">AutoMind OS</h3>
<p class="text-sm text-slate-400 mb-4">AI operating system concept — unified system of AI agents.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">AI Agents</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">Containers</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">Scheduler</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 8: Construction & Cleaning -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('construction')">
<div class="project-shot" data-shot="construction">
<img src="screenshots/construction.png" alt="Construction & Cleaning screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-300 text-xs font-mono">MARKETPLACE</span>
<span class="pulse-dot bg-cyan-400 text-cyan-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">Construction & Cleaning</h3>
<p class="text-sm text-slate-400 mb-4">Super-App — marketplace / payments / operations, 50,000 services.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">Marketplace</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">Payments</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">AI Matching</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
<!-- Project 9: Telegram Price Bot -->
<div class="glow-card p-6 reveal cursor-pointer" onclick="openModal('pricebot')">
<div class="project-shot" data-shot="pricebot">
<img src="screenshots/pricebot.png" alt="Telegram Price Bot screenshot" onerror="this.style.display='none'">
<div class="shot-placeholder"><i data-lucide="image"></i>screenshot coming soon</div>
</div>
<div class="flex items-center justify-between mb-4">
<span class="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-300 text-xs font-mono">TELEGRAM BOT</span>
<span class="pulse-dot bg-indigo-400 text-indigo-400"></span>
</div>
<h3 class="text-xl font-bold mb-2">Telegram Price Bot</h3>
<p class="text-sm text-slate-400 mb-4">Price monitoring, categorization, automation, .env configuration.</p>
<div class="flex flex-wrap gap-2 text-xs font-mono">
<span class="px-2 py-1 rounded bg-slate-800/60 text-cyan-300">Bot API</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-indigo-300">python-dotenv</span>
<span class="px-2 py-1 rounded bg-slate-800/60 text-emerald-300">Agents</span>
</div>
<div class="mt-4 text-cyan-400 text-sm font-semibold flex items-center gap-1">Architecture details <i data-lucide="arrow-right" class="w-4 h-4"></i></div>
</div>
</div>
</div>
</section>
<!-- ===== Evidence Matrix ===== -->
<section id="evidence" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="reveal">
<span class="section-tag">05 — Evidence Matrix</span>
<h2 class="text-3xl md:text-4xl font-bold mt-4">Technology Matrix</h2>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-10">
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-cyan-300 mb-3 flex items-center gap-2"><i data-lucide="server" class="w-4 h-4"></i> Backend</h3>
<p class="text-sm text-slate-400">Python, FastAPI, Uvicorn, REST, Swagger/OpenAPI, SQLite</p>
</div>
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-indigo-300 mb-3 flex items-center gap-2"><i data-lucide="send" class="w-4 h-4"></i> Telegram</h3>
<p class="text-sm text-slate-400">Telegram Bot API, Telethon, proxies, httpx, rate limiting</p>
</div>
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-emerald-300 mb-3 flex items-center gap-2"><i data-lucide="smartphone" class="w-4 h-4"></i> Android</h3>
<p class="text-sm text-slate-400">JDK 17, SDK 35, ADB, Gradle launcher, APK installation</p>
</div>
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-amber-300 mb-3 flex items-center gap-2"><i data-lucide="terminal" class="w-4 h-4"></i> Windows Automation</h3>
<p class="text-sm text-slate-400">PowerShell 5.1, ProcessStartInfo, BAT entrypoint, exit-code checks</p>
</div>
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-cyan-300 mb-3 flex items-center gap-2"><i data-lucide="brain" class="w-4 h-4"></i> AI / LLM</h3>
<p class="text-sm text-slate-400">Integration, agents, pipelines, monitoring, agent configuration</p>
</div>
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-indigo-300 mb-3 flex items-center gap-2"><i data-lucide="shield" class="w-4 h-4"></i> Cybersecurity</h3>
<p class="text-sm text-slate-400">Crawling, REST/GraphQL discovery, graph mapping, safe validation</p>
</div>
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-emerald-300 mb-3 flex items-center gap-2"><i data-lucide="database" class="w-4 h-4"></i> Data Processing</h3>
<p class="text-sm text-slate-400">Parsing, normalization, deduplication, categorization, scoring</p>
</div>
<div class="glow-card p-6 reveal">
<h3 class="font-semibold text-amber-300 mb-3 flex items-center gap-2"><i data-lucide="git-branch" class="w-4 h-4"></i> DevOps</h3>
<p class="text-sm text-slate-400">Git, Node.js, Uvicorn, webhook requests, .env</p>
</div>
</div>
</div>
</section>
<!-- ===== Contact ===== -->
<section id="contact" class="py-24">
<div class="max-w-4xl mx-auto px-6 text-center">
<div class="reveal">
<span class="section-tag">06 — Contact</span>
<h2 class="text-3xl md:text-5xl font-bold mt-4">Let's Build Something</h2>
<p class="text-slate-400 mt-4">Open to collaboration, junior roles, and interesting projects. GitHub available for code review.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-10">
<a href="mailto:edik40288@gmail.com" class="glow-card p-6 reveal block">
<i data-lucide="mail" class="w-8 h-8 text-cyan-400 mx-auto mb-3"></i>
<p class="font-semibold">Email</p>
<p class="text-sm text-slate-400 mt-1">edik40288@gmail.com</p>
</a>
<a href="https://github.com/edik40288-stack" target="_blank" class="glow-card p-6 reveal block">
<i data-lucide="github" class="w-8 h-8 text-indigo-400 mx-auto mb-3"></i>
<p class="font-semibold">GitHub</p>
<p class="text-sm text-slate-400 mt-1">github.com/edik40288-stack</p>
</a>
<a href="https://t.me/kraeved111" target="_blank" class="glow-card p-6 reveal block">
<i data-lucide="send" class="w-8 h-8 text-emerald-400 mx-auto mb-3"></i>
<p class="font-semibold">Telegram</p>
<p class="text-sm text-slate-400 mt-1">@kraeved111</p>
</a>
<a href="https://www.linkedin.com/in/eduard-mirko-986868268/" target="_blank" class="glow-card p-6 reveal block">
<i data-lucide="linkedin" class="w-8 h-8 text-sky-400 mx-auto mb-3"></i>
<p class="font-semibold">LinkedIn</p>
<p class="text-sm text-slate-400 mt-1">in/eduard-mirko</p>
</a>
</div>
<div class="mt-10 reveal">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass">
<span class="pulse-dot bg-emerald-400 text-emerald-400"></span>
<span class="text-sm text-emerald-300">● 9 shipped projects — ready for new challenges</span>
</div>
</div>
</div>
</section>
<!-- ===== Footer ===== -->
<footer class="py-8 border-t border-slate-800/50 glass">
<div class="max-w-7xl mx-auto px-6 text-center text-sm text-slate-500">
<p>© 2026 Eduard — AI Automation Portfolio. Built with <span class="text-cyan-400">♥</span> and neon.</p>
</div>
</footer>
<!-- ===== Modals ===== -->
<div id="modal-overlay" class="modal-overlay" onclick="if(event.target===this)closeModal()">
<div class="modal-content" id="modal-content"></div>
</div>
<script>
// ===== Lucide Icons =====
// Add LinkedIn icon manually (not included in lucide CDN by default)
const { createElement, icons } = lucide;
if (icons && !icons.linkedin) {
icons.linkedin = (props) => createElement('svg', {
...props,
width: props.size || 24,
height: props.size || 24,
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
strokeWidth: 2,
strokeLinecap: 'round',
strokeLinejoin: 'round'
}, ...[
createElement('path', { d: 'M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z' }),
createElement('rect', { x: 2, y: 9, width: 4, height: 12 }),
createElement('circle', { cx: 4, cy: 4, r: 2 })
]);
}
lucide.createIcons();
// ===== Modal Data =====
const projectData = {
pcos: {
title: 'PCOS — AI Orchestration / Campaign Intelligence',
tag: 'AI ORCHESTRATION',
desc: 'Automating ad campaigns with AI agents: creative generation, analytics, budgets, monitoring.',
metrics: [
{ label: 'Campaign automation', value: 'Built' },
{ label: 'KPI metrics', value: 'Tracked' },
{ label: 'Simulation mode', value: 'Included' }
],
arch: ['State machine', 'Task pipeline', 'Role-based agents', 'Policy layer'],
modules: ['Multi-agent workspace', 'Creatives', 'Generation', 'Budgets', 'Analytics'],
integrations: ['LLM API', 'Image generation', 'Ad platforms', 'CRM/webhooks', 'Agent configuration'],
security: ['Simulation mode', 'Approvals', 'Safety toggles', 'Audit trail'],
result: 'Automated ad campaigns with AI agents, KPI tracking and monitoring.'
},
cyber: {
title: 'Security Audit — Cybersecurity / Discovery / Validation',
tag: 'CYBERSECURITY',
desc: 'Three-stage security audit: Discovery & Mapping, Reproduction, Verification. Result: 74.2% audit score, 16/20 checks, 4 vulnerabilities found.',
metrics: [
{ label: 'Audit score', value: '74.2%' },
{ label: 'Checks', value: '16/20' },
{ label: 'Vulnerabilities', value: '4' }
],
arch: ['Stage 1: Discovery & Mapping', 'Stage 2: Reproduction', 'Stage 3: Verification'],
modules: ['REST, GraphQL security audit', 'Data schemas, UUID', 'Valid JSON requests', 'Access control checks', 'API endpoints and roles'],
integrations: ['Endpoints: /, /catalog, /settings', 'API: /api/v1/user/{user_id}/invoice', 'API: /api/v2/internal/report/{uuid}', 'GraphQL schemas', 'GET request isolation'],
security: ['Burp Suite', 'DeterminismChecker', 'JSON request validation', 'Metrics recovery'],
result: 'GET request isolation and user authorization. Security and audit metrics restored.'
},
mobile: {
title: 'Mobile Product — Service Data / Operations',
tag: 'MOBILE PRODUCT',
desc: 'Product and service catalog: 54 product categories, 7 service categories, 61 total. Data pipeline and Telegram Price Bot.',
metrics: [
{ label: 'Product categories', value: '54' },
{ label: 'Service categories', value: '7' },
{ label: 'Total categories', value: '61' }
],
arch: ['Product categories', 'Subcategories', 'Filters', 'Search', 'Favorites'],
modules: ['Data pipeline: YCLIENTS/iClients parsing', 'Data normalization', 'Categorization', 'Deduplication', 'Scoring'],
integrations: ['Telegram Bot API', 'Python', 'python-dotenv', 'Agent categorization'],
security: ['.env configuration', 'Price monitoring', 'Automation'],
result: 'Catalog categorization: 54 products, 7 services, 61 categories. Automated price monitoring.'
},
lead: {
title: 'Lead Radar — Data Acquisition / Filtering / Telegram Delivery',
tag: 'DATA ACQUISITION',
desc: 'Automated client discovery from open sources with lead generation and Telegram delivery.',
metrics: [
{ label: 'Sources', value: 'Stack Exchange' },
{ label: 'HTTP client', value: 'httpx 0.28.1' },
{ label: 'Delivery', value: 'Telegram' }
],
arch: ['Parsing', 'Filtering', 'Telegram'],
modules: ['Telegram parsing via Telethon / Telegram API', 'API parsing', 'Stack Exchange source search', 'HTTP client httpx 0.28.1', 'SOCKS/proxy support'],
integrations: ['Telegram API', 'Stack Exchange API', 'httpx 0.28.1', 'SOCKS/proxy', '.env configuration'],
security: ['Timer-based processing', 'Retries', 'Deduplication', 'Rate limiting', 'Proxy isolation'],
result: 'Metrics: source coverage, freshness scoring and automation. Notifications delivered to Telegram channel.'
},
cargo: {
title: 'CargoFlow — Android / FastAPI / Local Infrastructure',
tag: 'ANDROID / FASTAPI',
desc: 'Delivery automation via Android and local infrastructure. Client App, Driver App, Backend, Launcher.',
metrics: [
{ label: 'Backend', value: 'FastAPI 0.116.1' },
{ label: 'Build', value: 'APK' },
{ label: 'Device', value: 'Samsung' }
],
arch: ['Client App', 'Driver App', 'Backend', 'Launcher'],
modules: ['Client App: service catalog, data schemas, orders, profile, history', 'Driver App: route map, orders, statuses, profile, trip history', 'Backend: FastAPI 0.116.1, Uvicorn, SQLite, REST, Swagger/OpenAPI', 'Launcher: JDK 17, SDK 35, ADB, PowerShell 5.1, Gradle launcher JAR'],
integrations: ['JDK, Android SDK, ADB, backend and services check', 'Backend launch, APK build, device installation', 'BAT scripts for automation', 'PowerShell monitoring', 'ProcessStartInfo, exit code checks'],
security: ['CMD parsing protection', 'Environment check on Windows 10, JDK 17 and Android SDK 35'],
result: 'Backend runs on 127.0.0.1:8000; Swagger available via /docs; Android build on Samsung device.'
},
decision: {
title: 'DecisionCore — Local Runtime / Orchestration / Android',
tag: 'LOCAL RUNTIME',
desc: 'Automating decision systems and web/backend systems on Android devices with container isolation.',
metrics: [
{ label: 'Web', value: 'Node.js' },
{ label: 'Backend', value: 'Port 8000' },
{ label: 'Android', value: 'Java 17' }
],
arch: ['Node.js and npm containers for web systems', 'Backend launch on port 8000', 'Java 17, Android SDK and Android build', 'Container isolation and automation'],
modules: ['Container launch with proper quoting', 'npm.cmd with path "C:\\Program Files\\nodejs\\npm.cmd"', 'Windows validation error protection', 'Launcher uses ProcessStartInfo', 'Exit code checks'],
integrations: ['Node.js', 'npm', 'Java 17', 'Android SDK', 'ProcessStartInfo'],
security: ['Container isolation', 'Proper quoting', 'Exit code checks'],
result: 'Container automation on Windows runtime orchestration with performance metrics.'
},
automind: {
title: 'AutoMind OS — AI Operating System',
tag: 'UNIFIED ARCHITECTURE',
desc: 'Unified AI agent system with OS automation: task automation, containers, monitoring, scheduler and process management.',
metrics: [
{ label: 'Agents', value: 'AI' },
{ label: 'Containers', value: 'Isolation' },
{ label: 'Scheduler', value: 'Built' }
],
arch: ['Container isolation with performance metrics', 'Task scheduler and monitoring', 'Module, task and container automation', 'Metrics security and isolation', 'Container launch, scheduler and monitoring'],
modules: ['Unified AI agent system', 'Task automation', 'Containers', 'Monitoring', 'Scheduler', 'Process management'],
integrations: ['Container isolation', 'Task scheduler', 'Monitoring', 'Process management'],
security: ['Metrics security', 'Container isolation'],
result: 'Unified AI agent system: task automation, containers, monitoring, scheduler and process management.'
},
construction: {
title: 'Construction & Cleaning Super-App',
tag: 'MARKETPLACE / PAYMENTS / OPERATIONS',
desc: 'Marketplace platform for construction and cleaning services: orders, payments, reviews, ratings, AI contractor matching.',
metrics: [
{ label: 'Catalog', value: '50,000 services' },
{ label: 'Speed', value: '+25%' },
{ label: 'User types', value: '2' }
],
arch: ['Two user types: customers/contractors and clients', 'AI contractor matching', 'Chats', 'Schemas and orders', 'Contractor matching system'],
modules: ['Service categorization and ratings', 'Delivery automation 25% faster', 'Catalog of 50,000 services', 'Contractor ratings, reviews and metrics', 'Order security automation'],
integrations: ['Service categories', 'Ratings', 'Security', 'Categorization', 'Webhook requests', 'Search and payments'],
security: ['Contractor payments via ratings and reviews', 'Order security automation'],
result: 'Marketplace delivery automation with efficiency metrics. Catalog of 50,000 services.'
},
pricebot: {
title: 'Telegram Price Bot',
tag: 'TELEGRAM BOT',
desc: 'Price monitoring, categorization, automation, .env configuration. YCLIENTS/iClients data parsing and normalization.',
metrics: [
{ label: 'API', value: 'Telegram Bot API' },
{ label: 'Language', value: 'Python' },
{ label: 'Config', value: '.env' }
],
arch: ['Price monitoring', 'Categorization', 'Automation', '.env configuration'],
modules: ['YCLIENTS/iClients data parsing and normalization', 'Catalog categorization and data architecture', 'Price monitoring automation with client categorization'],
integrations: ['Telegram Bot API', 'Python', 'python-dotenv', 'Agent categorization'],
security: ['.env configuration', 'Safe API usage'],
result: 'Price monitoring automation with client categorization and Telegram delivery.'
}
};
function openModal(key) {
const p = projectData[key];
if (!p) return;
const archHtml = p.arch.map(a => `<div class="arch-node">${a}</div>`).join('<div class="arch-arrow">↓</div>');
const metricsHtml = p.metrics.map(m => `
<div class="p-4 rounded-lg bg-slate-800/40 border border-slate-700/50 text-center">
<p class="text-2xl font-bold gradient-text">${m.value}</p>
<p class="text-xs text-slate-400 mt-1">${m.label}</p>
</div>`).join('');
const listHtml = (title, items, color) => `
<div class="mt-6">
<h4 class="font-semibold ${color} mb-3 flex items-center gap-2"><i data-lucide="layers" class="w-4 h-4"></i> ${title}</h4>
<div class="flex flex-wrap gap-2">
${items.map(i => `<span class="px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700/50 text-sm text-slate-300">${i}</span>`).join('')}
</div>
</div>`;