Help
RSS
API
Feed
Maltego
Contact
Domain > av.codes
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2019-11-30
130.211.93.80
(
ClassC
)
2025-11-22
76.76.21.21
(
ClassC
)
Port 443
HTTP/1.1 200 OKAccept-Ranges: bytesAccess-Control-Allow-Origin: *Age: 1357310Cache-Control: public, max-age0, must-revalidateContent-Disposition: inlineContent-Length: 150962Content-Type: text/html; charsetutf-8Date: Sat, 22 Nov 2025 04:50:27 GMTEtag: c73ce48808e582d0ef115eda64904181Last-Modified: Thu, 06 Nov 2025 11:48:36 GMTServer: VercelStrict-Transport-Security: max-age63072000X-Vercel-Cache: HITX-Vercel-Id: pdx1::sfbq6-1763787027149-9f7e36ab6176 !DOCTYPE html>html langen>head>link relstylesheet href/index.79e7c2a0.css>meta charsetutf-8>meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0>meta http-equivX-UA-Compatible contentieedge>meta namedescription contentHome page of Ivan Cherepanov (@av on GitHub), Full-Stack Engineer.>title>Ivan Cherepanov/title>link relstylesheet href/index.b68c4245.css>link relstylesheet hrefhttps://unpkg.com/css.gg@2.1.1/icons/icons.css>link relstylesheet hrefhttps://fonts.googleapis.com/css2?familyRed+Hat+Text&displayswap>link relstylesheet hrefhttps://fonts.googleapis.com/css2?familyRed+Hat+Display:wght@700;900&displayswap>/head>body>svg classoffscreen>filter idnoop color-interpolation-filterssRGB>/filter>filter idblur color-interpolation-filterssRGB>fegaussianblur stddeviation5>/fegaussianblur>/filter>filter idfancy-goo-sm color-interpolation-filterssRGB>fegaussianblur inSourceGraphic stddeviation5 resultblur>/fegaussianblur>fecolormatrix inblur modematrix values1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9 resultgoo>/fecolormatrix>/filter>filter idfancy-goo color-interpolation-filterssRGB>fegaussianblur inSourceGraphic stddeviation15 resultblur>/fegaussianblur>fecolormatrix inblur modematrix values1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9 resultgoo>/fecolormatrix>/filter>filter idfancy-goo-lg color-interpolation-filterssRGB>fegaussianblur inSourceGraphic stddeviation25 resultblur>/fegaussianblur>fecolormatrix inblur modematrix values1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 25 -10 resultgoo>/fecolormatrix>/filter>/svg>section classintro>div classcontent flex-column justify-center>div classdecoration data-force30>div classmorphing-shape stylewidth:8rem;height:8rem;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--amber);border-radius:74.6569rem;width:92.2745%;height:97.2669%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-15.5631s;position:absolute;top:1.36655%;left:3.86277%>/div>div classshape stylebackground:var(--tertiary);border-radius:10.7659rem;width:99.1263%;height:86.9962%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-17.3163s;position:absolute;top:6.5019%;left:.43685%>/div>div classshape stylebackground:var(--amber);border-radius:5.33959rem;width:80.7137%;height:99.4547%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-4.10346s;position:absolute;top:.272657%;left:9.64313%>/div>div classshape stylebackground:var(--tertiary);border-radius:42.794rem;width:93.8761%;height:80.9528%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-16.6107s;position:absolute;top:9.52361%;left:3.06197%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>/div>div classdecoration data-force120>div classmorphing-shape stylewidth:2rem;height:2rem;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--primary);border-radius:25.9199rem;width:85.5903%;height:83.0033%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-11.8245s;position:absolute;top:8.49835%;left:7.20484%>/div>div classshape stylebackground:var(--tertiary);border-radius:25.9279rem;width:92.3595%;height:90.3357%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-11.3011s;position:absolute;top:4.83215%;left:3.82024%>/div>div classshape stylebackground:var(--primary);border-radius:73.9976rem;width:93.5379%;height:93.9814%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-19.8134s;position:absolute;top:3.0093%;left:3.23107%>/div>div classshape stylebackground:var(--tertiary);border-radius:40.6153rem;width:95.8261%;height:83.0427%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-5.61562s;position:absolute;top:8.47863%;left:2.08695%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>/div>div classdecoration data-force30>div classmorphing-shape stylewidth:1.5rem;height:1.5rem;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--amber);border-radius:42.2055rem;width:91.2179%;height:90.7563%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-10.6311s;position:absolute;top:4.62184%;left:4.39106%>/div>div classshape stylebackground:var(--tertiary);border-radius:97.7464rem;width:80.3284%;height:88.157%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-1.98723s;position:absolute;top:5.92149%;left:9.8358%>/div>div classshape stylebackground:var(--amber);border-radius:36.0455rem;width:93.3092%;height:84.5314%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-11.7872s;position:absolute;top:7.73428%;left:3.3454%>/div>div classshape stylebackground:var(--tertiary);border-radius:3.16231rem;width:81.5387%;height:83.1847%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-15.2422s;position:absolute;top:8.40764%;left:9.23066%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>/div>div classraised>h1 classintro-name>span data-aosfade-up data-aos-easingease-out-sine>Ivan/span>span data-aosfade-up> /span>span data-aosfade-up data-aos-delay50 data-aos-duration400>Charapanau/span>/h1>p classintro-hero data-aosfade-up data-aos-delay150>span>Full-Stack Software Engineer/span>/p>div classpills flex-row flex-wrap>div classinverse pill data-targetsection.career data-aosfade-up data-aos-delay200>Achievements/div>div classinverse pill data-targetsection.skills data-aosfade-up data-aos-delay250>Skills/div>div classinverse pill data-targetsection.contacts data-aosfade-up data-aos-delay300>Contacts/div>a classdownload-pdf href/pdf/Ivan%20Charapanau%20(LI).pdf downloadIvan Charapanau data-aosfade-up data-aos-delay350 data-aos-duration500>div classpill>i classgg-software-download>/i>span>Resume/span>/div>/a>/div>div classscroll-invitation flex-row flex-center>i classgg-mouse>/i>/div>/div>/div>/section>link relstylesheet href/index.f63b895e.css>section classbackground styleheight:5vh bg-secondarybg-secondary>/section>section classsplitter stylewidth:100%;margin-top:-5vh;position:relative;overflow:hidden>section classbackground styleheight:10vh;margin-bottom:0 bg-secondarybg-secondary>/section>section flex-row styleheight:10vh;margin-top:-2vh>div classcircle styleborder-radius:100rem;flex:1;height:27.2983%;animation-name:sliding;animation-delay:-18.1197s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:21.3917%;animation-name:rotating;animation-delay:-10.7603s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:25.3043%;animation-name:shaking;animation-delay:-24.9073s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:39.593%;animation-name:shaking;animation-delay:-18.9533s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:43.5585%;animation-name:rotating;animation-delay:-7.86011s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:58.909%;animation-name:shaking;animation-delay:-20.6577s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:58.3868%;animation-name:rotating;animation-delay:-19.5505s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:49.8806%;animation-name:stronger-shaking;animation-delay:-9.68365s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:42.9741%;animation-name:sliding;animation-delay:-20.5671s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:43.9845%;animation-name:rotating;animation-delay:-22.2667s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:55.8111%;animation-name:sliding;animation-delay:-6.25353s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:70.2579%;animation-name:rotating;animation-delay:-5.92609s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:71.5815%;animation-name:rotating;animation-delay:-1.39116s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:87.2051%;animation-name:shaking;animation-delay:-15.1221s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:61.8891%;animation-name:rotating;animation-delay:-18.9406s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:56.8402%;animation-name:stronger-shaking;animation-delay:-3.10478s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:52.1116%;animation-name:rotating;animation-delay:-3.25154s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:75.0677%;animation-name:stronger-shaking;animation-delay:-20.3457s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:71.0914%;animation-name:rotating;animation-delay:-23.264s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:55.8454%;animation-name:sliding;animation-delay:-19.8868s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:80.4474%;animation-name:stronger-shaking;animation-delay:-6.06732s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:65.8697%;animation-name:sliding;animation-delay:-14.7716s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:80.4851%;animation-name:stronger-shaking;animation-delay:-11.9785s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:67.929%;animation-name:sliding;animation-delay:-1.91335s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:52.6633%;animation-name:stronger-shaking;animation-delay:-20.5619s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:65.2146%;animation-name:shaking;animation-delay:-.83673s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:52.6528%;animation-name:stronger-shaking;animation-delay:-9.34123s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:43.4742%;animation-name:rotating;animation-delay:-17.3995s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:44.8384%;animation-name:shaking;animation-delay:-14.1244s bg-secondarybg-secondary>/div>div classcircle styleborder-radius:100rem;flex:1;height:22.0242%;animation-name:sliding;animation-delay:-22.5693s bg-secondarybg-secondary>/div>/section>/section>section classtldr fullscreen>div classcontent>div classtldr-items>div classtldr-container data-aosfade-up data-aos-delay50>div classmorphing-shape stylewidth:100%;height:100%;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--secondary);border-radius:3.28509vh;width:95.5661%;height:98.8492%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-74.0856s;position:absolute;top:.575422%;left:2.21696%>/div>div classshape stylebackground:var(--secondary);border-radius:6.08785vh;width:91.8553%;height:91.1251%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-55.8984s;position:absolute;top:4.43743%;left:4.07234%>/div>div classshape stylebackground:var(--secondary);border-radius:4.18258vh;width:94.4446%;height:93.7812%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-18.2096s;position:absolute;top:3.10939%;left:2.77768%>/div>div classshape stylebackground:var(--secondary);border-radius:3.03912vh;width:98.6671%;height:97.6793%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-85.9023s;position:absolute;top:1.16035%;left:.66643%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>span>Delivered code for Servers, Browsers, Mobile, Desktops and Microcontrollers/span>/div>div classtldr-decoration data-aosfade-up data-aos-delay100>div classmorphing-shape stylewidth:4rem;height:4rem;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--amber);border-radius:23.3878rem;width:99.2743%;height:58.3213%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.338217s;position:absolute;top:20.8394%;left:.362874%>/div>div classshape stylebackground:var(--tertiary);border-radius:2.59277rem;width:90.7372%;height:64.065%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-10.0683s;position:absolute;top:17.9675%;left:4.63139%>/div>div classshape stylebackground:var(--amber);border-radius:45.5837rem;width:88.3329%;height:97.2261%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.426929s;position:absolute;top:1.38696%;left:5.83353%>/div>div classshape stylebackground:var(--tertiary);border-radius:40.5136rem;width:90.6419%;height:98.2127%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-17.8719s;position:absolute;top:.893672%;left:4.67906%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>/div>div classtldr-decoration data-aosfade-up data-aos-delay150>div classmorphing-shape stylewidth:3rem;height:3rem;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--amber);border-radius:66.0832rem;width:77.9475%;height:55.7458%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-18.0324s;position:absolute;top:22.1271%;left:11.0263%>/div>div classshape stylebackground:var(--tertiary);border-radius:73.9476rem;width:99.3885%;height:51.045%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-12.791s;position:absolute;top:24.4775%;left:.305751%>/div>div classshape stylebackground:var(--amber);border-radius:12.8739rem;width:71.0302%;height:91.2035%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-11.2622s;position:absolute;top:4.39823%;left:14.4849%>/div>div classshape stylebackground:var(--tertiary);border-radius:52.8204rem;width:71.5391%;height:72.5475%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-19.474s;position:absolute;top:13.7263%;left:14.2305%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>/div>div classtldr-container data-aosfade-up data-aos-delay200>div classmorphing-shape stylewidth:100%;height:100%;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--secondary);border-radius:1.43354vh;width:98.2274%;height:90.3367%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-71.4367s;position:absolute;top:4.83168%;left:.88628%>/div>div classshape stylebackground:var(--secondary);border-radius:1.90116vh;width:96.3739%;height:91.4318%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-57.2087s;position:absolute;top:4.2841%;left:1.81303%>/div>div classshape stylebackground:var(--secondary);border-radius:8.71497vh;width:95.9297%;height:99.4516%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-60.9238s;position:absolute;top:.27419%;left:2.03516%>/div>div classshape stylebackground:var(--secondary);border-radius:6.45004vh;width:92.15%;height:90.4235%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-96.4088s;position:absolute;top:4.78824%;left:3.92502%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>span>span>Not afraid of /span>span text-fuzzy>fuzzy/span>span> requirements and/or /span>b text-underline>strict/b>span> deadlines/span>/span>/div>div classtldr-container data-aosfade-up data-aos-delay250>div classmorphing-shape stylewidth:100%;height:100%;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--secondary);border-radius:5.09597vh;width:93.6783%;height:97.3077%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-31.6832s;position:absolute;top:1.34615%;left:3.16086%>/div>div classshape stylebackground:var(--secondary);border-radius:8.84178vh;width:99.1205%;height:92.1548%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-40.6618s;position:absolute;top:3.92261%;left:.439736%>/div>div classshape stylebackground:var(--secondary);border-radius:8.24725vh;width:95.8292%;height:98.7825%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-81.8691s;position:absolute;top:.60876%;left:2.08542%>/div>div classshape stylebackground:var(--secondary);border-radius:1.35618vh;width:95.6059%;height:90.6564%;animation-name:stronger-shaking;animation-duration:100s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-19.4223s;position:absolute;top:4.67179%;left:2.19705%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>span>Best fitted for small independent teams ๐ค/span>/div>div classtldr-decoration data-aosfade-up data-aos-delay300>div classmorphing-shape stylewidth:2rem;height:2rem;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--amber);border-radius:33.6697rem;width:90.3273%;height:65.6684%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-18.7774s;position:absolute;top:17.1658%;left:4.83637%>/div>div classshape stylebackground:var(--tertiary);border-radius:40.6467rem;width:89.5206%;height:76.1698%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-22.0407s;position:absolute;top:11.9151%;left:5.2397%>/div>div classshape stylebackground:var(--amber);border-radius:22.1882rem;width:52.7399%;height:56.2346%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-17.1749s;position:absolute;top:21.8827%;left:23.6301%>/div>div classshape stylebackground:var(--tertiary);border-radius:40.2433rem;width:87.4404%;height:96.4939%;animation-name:stronger-shaking;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-18.8118s;position:absolute;top:1.75306%;left:6.2798%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>/div>div classtldr-container tldr-summary data-aosfade-up data-aos-delay350>div classmorphing-shape stylewidth:100%;height:100%;position:relative>div classgoo stylefilter:url(#fancy-goo);width:100%;height:100%;position:absolute>div classshape stylebackground:var(--secondary);border-radius:2.69581vh;width:101.848%;height:100.922%;animation-name:stronger-shaking;animation-duration:20s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-11.7233s;position:absolute;top:-.461133%;left:-.924065%>/div>div classshape stylebackground:var(--secondary);border-radius:6.64736vh;width:101.835%;height:108.96%;animation-name:stronger-shaking;animation-duration:20s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-10.0453s;position:absolute;top:-4.47999%;left:-.9174%>/div>div classshape stylebackground:var(--secondary);border-radius:16.8647vh;width:106.799%;height:106.537%;animation-name:stronger-shaking;animation-duration:20s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-2.56626s;position:absolute;top:-3.26853%;left:-3.39944%>/div>div classshape stylebackground:var(--secondary);border-radius:1.58366vh;width:100.415%;height:106.114%;animation-name:stronger-shaking;animation-duration:20s;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-7.25897s;position:absolute;top:-3.05725%;left:-.2073%>/div>/div>div flex-row flex-center stylewidth:100%;height:100%;position:absolute>/div>/div>h1 classtldr-header>TLDR;/h1>p>Full-Stack Software Engineer. Capable of full-cycle of the software delivery.br>br>/p>p>Iโve produced Web and Desktop Apps, Services, LLM Workflows and Agents, ETL pipelines, Infrastructure modules, engineering and business tooling, Admin UIs, Mobile games, physics-based visualizations, custom DSLs, Voice-controlled UIs, AR 3D apps and much more./p>/div>/div>div classtldr-more data-aoszoom-in-up data-aos-duration500 data-aos-easingease-out-quart>span>learn more/span>i classgg-mouse>/i>/div>/div>/section>link relstylesheet href/index.e102acaf.css>section classbackground styleheight:5vh bg-secondary-tintbg-secondary-tint>/section>section classsplitter stylewidth:100%;margin-top:-5vh;position:relative;overflow:hidden>section classbackground styleheight:10vh;margin-bottom:0 bg-secondary-tintbg-secondary-tint>/section>section flex-row styleheight:10vh;margin-top:-2vh>div classcircle styleborder-radius:100rem;flex:1;height:20.9342%;animation-name:sliding;animation-delay:-3.42171s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:26.9407%;animation-name:stronger-shaking;animation-delay:-8.41857s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:24.6594%;animation-name:stronger-shaking;animation-delay:-10.0795s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:39.9699%;animation-name:shaking;animation-delay:-8.43912s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:54.5114%;animation-name:sliding;animation-delay:-11.6967s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:41.4785%;animation-name:stronger-shaking;animation-delay:-11.0201s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:61.7008%;animation-name:stronger-shaking;animation-delay:-17.5846s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:68.232%;animation-name:shaking;animation-delay:-9.84486s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:65.9622%;animation-name:sliding;animation-delay:-23.2903s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:69.7705%;animation-name:shaking;animation-delay:-11.4398s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:77.3972%;animation-name:rotating;animation-delay:-4.3656s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:53.9986%;animation-name:stronger-shaking;animation-delay:-20.0252s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:56.8332%;animation-name:rotating;animation-delay:-5.97309s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:71.0045%;animation-name:sliding;animation-delay:-4.0792s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:74.7237%;animation-name:stronger-shaking;animation-delay:-5.12325s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:65.7151%;animation-name:rotating;animation-delay:-2.06941s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:91.2308%;animation-name:rotating;animation-delay:-16.3577s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:51.9691%;animation-name:rotating;animation-delay:-4.5263s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:58.4164%;animation-name:rotating;animation-delay:-4.67665s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:82.4633%;animation-name:rotating;animation-delay:-20.8059s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:57.5655%;animation-name:stronger-shaking;animation-delay:-13.6497s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:57.5479%;animation-name:stronger-shaking;animation-delay:-15.2477s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:49.0447%;animation-name:rotating;animation-delay:-6.01238s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:63.9478%;animation-name:sliding;animation-delay:-16.3073s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:55.7145%;animation-name:rotating;animation-delay:-3.44793s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:51.7198%;animation-name:stronger-shaking;animation-delay:-8.34091s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:59.7751%;animation-name:sliding;animation-delay:-18.3787s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:34.2464%;animation-name:shaking;animation-delay:-18.8269s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:28.382%;animation-name:stronger-shaking;animation-delay:-8.98716s bg-secondary-tintbg-secondary-tint>/div>div classcircle styleborder-radius:100rem;flex:1;height:20.175%;animation-name:shaking;animation-delay:-10.7746s bg-secondary-tintbg-secondary-tint>/div>/section>/section>section classcareer>h1 classsection-header data-aosfade-up>Its all here./h1>div classtimeline-container>p classdescription data-aosfade-up data-aos-delay50>Zoom. Pan. Tap./p>div classcanvas-container>div classscroller>/div>div classpinch-and-zoom>div classreflect-x>div classleft-hand>๐/div>/div>div classright-hand>๐/div>/div>/div>/div>div classpills-container flex-row flex-center>div classpills flex-row flex-wrap flex-center>div classinverse pill timeline-pill>i classgg-align-center>/i>span>View as timeline/span>/div>div classinverse list-pill pill>i classgg-list>/i>span>View as list/span>/div>div classinverse life pill>i classgg-maximize>/i>span>Reset zoom/span>/div>div classcareer inverse pill>i classgg-assign>/i>span>Zoom Career/span>/div>a hrefhttps://github.com/av/av/blob/master/src/career/TimelineVisualisation.ts target_blank>div classinverse pill>svg roleimg viewbox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>title>GitHub icon/title>path dM12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12>/path>/svg>span>View on GitHub/span>/div>/a>/div>/div>div classlist-container>/div>/section>template idmodal-life-template>div classmodal modal-slide idmodal-life aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-life-title>header classmodal-header flex-row>h2 classmodal-title idmodal-life-title>Life/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>img src/life.ccf43d28.png data-zoomable>p classdescription>span>Check out/span>a hrefhttps://codepen.io/iamfrontender/full/yNVPeX target_blank>this scene live/a>span>in my/span>a hrefhttps://codepen.io/iamfrontender target_blank>CodePen/a>/p>p>I was born in Mogilev, Belarus, moved to Vitebsk by the age of one, lived there until i was six and then spent 10 years in Dribin to later pursue my education and career in Minsk./p>p>I had to move to Poland in 2021, where I currently reside./p>p>Living on my own since the age of 16, spent good part of my childhood working on our familys farm ๐จโ๐พ./p>p>As soon as my family got our first computer, Ive spent countless hours messing with graphic and audio design software and tweaking the OS to my liking. Also, Ive spent A LOT of time in video games ๐ฎ./p>/div>/div>/div>/div>/template>template idmodal-school-template>div classmodal modal-slide idmodal-school aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-school-title>header classmodal-header flex-row>h2 classmodal-title idmodal-school-title>School/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>img src/school.963658df.jpg data-zoomable>p classdescription>One of rare photos from my last school years where Im not doing some thing I would later regret./p>p>Being honest, I wasnt the most diligent student during my school years, yet I never had any issues studying and getting through exams./p>p>Ive graduated high school with average grade of 8.6 (out of 10) and a huge pile of drawings made during some of the lessons./p>p>span>Im infinitely grateful to the tutors of/span>a hrefhttp://www.licey.bru.by/ target_blank>BRU Lyceum/a>span>in Mogilev, Belarus for the urge to learn they managed to develop in me and other students./span>/p>p>I was very excited to learn basics of programming in Pascal and creating digital content with Macromedia Flash back in the days./p>/div>/div>/div>/div>/template>template idmodal-university-template>div classmodal modal-slide idmodal-university aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-university-title>header classmodal-header flex-row>h2 classmodal-title idmodal-university-title>BNTU, Faculty of Information Technology and Robotics/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>img src/university.aaf34651.jpg data-zoomable>p classdescription>One of the classrooms where we studied electronic circuits./p>p>Ive applied to industrial Robotics, because I was hoping to obtain a unique and demanded skill set for the Industry 4.0./p>p>As three years passed, we were taught programming in BASIC and learned the mechanics of the industrial robots developed in the USSR in the 80s. Lack of up-to-date knowledge was frustrating./p>p>My education in the university ended right where my Software Engineer career has started ๐งโ๐ป./p>/div>/div>/div>/div>/template>template idmodal-career-template>div classmodal modal-slide idmodal-career aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-career-title>header classmodal-header flex-row>h2 classmodal-title idmodal-career-title>Software Engineer/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>During one of the exams sessions in the BNTU, after passing all the tests, I had two weeks to do whatever I wanted./p>p>Ive spent them building multiple small apps with pure JavaScript: A Minesweeper game, Step Sequencer for making simple beats and a Color Palette Generation tool. These became my first portfolio. Ive got my first Software Engineer job just within a month of making these./p>ul classimg-section>li>img src/minesweeper.127d0750.png data-zoomable>/li>li>img src/stepograph.8768a7d3.png data-zoomable>/li>/ul>p classdescription>span>You can also check out/span>a hrefhttps://minesweeper-murex.vercel.app/ target_blank>this Minesweeper/a>span> live. Please, keep in mind that this was written even before my Junior days./span>/p>p>Six years later, Im still as excited about programming and solving problems as I was back in the days./p>/div>/div>/div>/div>/template>template idmodal-junior-template>div classmodal modal-slide idmodal-junior aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-junior-title>header classmodal-header flex-row>h2 classmodal-title idmodal-junior-title>Junior Software Engineer/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Ive fixed my first bug with an incorrect layout of a slide panel during my very first official day of work โ๏ธ. It was amazing./p>p>I will never forget the feeling of how little do I actually know. Yet it was so great to learn new things literally all the time./p>ul classimg-section>li>img src/shine.f6682105.png data-zoomable>/li>li>img src/pencil.fe044688.png data-zoomable>/li>/ul>p classdescription>span>Ive also continued building/span>a hrefhttps://shine-seven.vercel.app/ target_blank>some/a>span> /span>a hrefhttps://codepen.io/iamfrontender/pen/EjNKqL target_blank>small/a>span> /span>a hrefhttps://codepen.io/iamfrontender/pen/PqromX target_blank>things/a>span> just for fun./span>/p>p>Luckily, I got up to speed quickly and became useful for the project and the team./p>/div>/div>/div>/div>/template>template idmodal-middle-template>div classmodal modal-slide idmodal-middle aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-middle-title>header classmodal-header flex-row>h2 classmodal-title idmodal-middle-title>Middle Software Engineer/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>At the end of the first year, I was already capable delivering significant features on my own, directly interacting with Product Owners and the rest of organisation. Ive also became a Code Champion in multiple areas of the Project I was working on./p>p>To recognize my contribution, I was awarded with so long desired Middle badge./p>p>I was feeling significantly more comfortable with higher level abstractions and overall application architecture./p>p>As any other JavaScript developer at such stage, Ive attempted to build my own frontend framework. In the end it turned out to be very similar to ExtJS, so Ive abandoned it./p>img src/render-cycle.85445bac.png data-zoomable>p classdescription>span>Render cycle from that OLD endeavour of mine. You can check out the whole root component class/span>a hrefhttps://gist.github.com/av/dabdff40d6c620edec5cf12c5213a31a target_blank>in this gist./a>span> Please, keep in mind that it was written before React or even AngularJS became popular and JQuery ruled the minds of Web Designers./span>/p>/div>/div>/div>/div>/template>template idmodal-middle-continued-template>div classmodal modal-slide idmodal-middle-continued aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-middle-continued-title>header classmodal-header flex-row>h2 classmodal-title idmodal-middle-continued-title>Middle Software Engineer/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Ive joined a new company and new project in a position of a Middle Software Engineer./p>p>Changing familiar toolset and organisation was hard at first, but I was excited about new possibilities, so adapted quickly./p>img src/code-stat.fc0777d8.png data-zoomable>p classdescription>span>One of interesting/span>a hrefhttps://github.com/iamfrontender/code-stat target_blank>side-projects/a>span> Ive built at that time. Its a D3-based graph of Webpack build stats./span>/p>p>I was given a lot of autonomy right from the beginning and used it to propose new areas for the project to explore./p>/div>/div>/div>/div>/template>template idmodal-senior-template>div classmodal modal-slide idmodal-senior aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-senior-title>header classmodal-header flex-row>h2 classmodal-title idmodal-senior-title>Senior Software Engineer/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>I was promoted to a Senior developer upon developing multiple projects on my own, some of which were crucial for the future of the Company./p>video controls>source src/boids.9b8aefa5.mp4 typevideo/mp4>/video>p classdescription>a hrefhttps://codepen.io/iamfrontender/full/jwrrVy target_blank>One of the CodePens/a>span> Ive built during this period./span>span>It simulates the flocking behavior of the birds./span>/p>p>The definition of seniority is quite a questionable topic and varies greatly across the industry. In my opinion, seniority is defined by two properties:/p>ul>li>Ability to tackle software delivery end to end./li>li>Realization of the fact that despite working with computers, everything we create is to benefit other people./li>/ul>p>/p>/div>/div>/div>/div>/template>template idmodal-large-crm-template>div classmodal modal-slide idmodal-large-crm aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-large-crm-title>header classmodal-header flex-row>h2 classmodal-title idmodal-large-crm-title>Large CRM Project/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>My first project was a very large CRM, focused on streamlining interaction with customers of various businesses./p>p>CRM was made of a plethora of interesting tools, allowing to create digital content fitted per each individual customer of a particular business and distribute it in ways ranging from an SMS to Postcards./p>ul classimg-section>li>img src/th-template.d0bf8819.png data-zoomable>/li>li>img src/th-draft.10f7e41b.png data-zoomable>/li>/ul>p classdescription>Some of the components I worked on./p>p>It was featuring such components as full-featured Text Editor (in 2014, before Google Docs were even on the horizon), WYSIWYG editor for HTML-powered content, powerful lead tracking tool, project tracking software, cloud storage explorer and much more./p>img src/th-import-from-file.ccce7693.png data-zoomable>p classdescription>Ive also managed to put in use my Graphic Design skills to deliver some features autonomously./p>p>I was extremely lucky to get my first job to work on such a well architected software in a team of people with tens of years of experience./p>/div>/div>/div>/div>/template>template idmodal-spreadsheets-app-template>div classmodal modal-slide idmodal-spreadsheets-app aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-spreadsheets-app-title>header classmodal-header flex-row>h2 classmodal-title idmodal-spreadsheets-app-title>Web Spreadsheets Application/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Alongside with the main project, Ive participated in building Google Sheets-like web application, for insurance in banking sector./p>p>It featured infinite grid of cells with custom content and custom formulas evaluation./p>p>Unfortunately, project was never used in production./p>/div>/div>/div>/div>/template>template idmodal-iot-asset-management-template>div classmodal modal-slide idmodal-iot-asset-management aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-iot-asset-management-title>header classmodal-header flex-row>h2 classmodal-title idmodal-iot-asset-management-title>IoT Asset Management/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Upon closing of the previous project, Ive participated in building a solution for managing and controlling assets in the field of water management./p>p>Software allowed provisioning, monitoring and control of smart devices both for industrial and private-owned facilities./p>video controls>source src/otto.1c8d6e30.mp4 typevideo/mp4>/video>p classdescription>In my free time Ive also built a helper desktop app to manage and test connected devices./p>p>This project became my first fullstack experience in production./p>/div>/div>/div>/div>/template>template idmodal-iot-platform-template>div classmodal modal-slide idmodal-iot-platform aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-iot-platform-title>header classmodal-header flex-row>h2 classmodal-title idmodal-iot-platform-title>IoT Platform/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>I was lucky to join a project with a vast scope and impact on the real world - a SaaS platform for IoT devices./p>p>Initially, it wasnt focused on any particular industry area, allowing any smart device with access to the Internet to persist its data and communicate in real-time with other such devices./p>p>Platform itself was extremely feature-rich, including SDKs for building device firmware and client applications, highly complex rule engine to process incoming events, abstract data model allowing to represent anything from a T-Shirt to a Smart Water Heater, rich analytics over collected data, geolocation for incoming events, image recognition, real-time pub/sub for most of the entities and events, fully customizable dashboards (akin to AWS Cloud Watch) and much much more./p>p>During the years I worked with most of the components in the Platform, applying them for vastly different use-cases, ranging from a simple page for a digitized product to a fully-fledged Warehouse Management and Analytics built on top of the main Platform./p>ul classimg-section>li>img src/last-day-1.a4a54343.png data-zoomable>/li>li>img src/last-day-2.0e323596.png data-zoomable>/li>/ul>p classdescription>The last day in the Company is something I still warmly remember./p>p>Later, company made an accent on the Tagged Products use-cases, collaborating with world-leading brands in digitizing their products and their lifecycle in the supply chain./p>/div>/div>/div>/div>/template>template idmodal-polymer-app-template>div classmodal modal-slide idmodal-polymer-app aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-polymer-app-title>header classmodal-header flex-row>h2 classmodal-title idmodal-polymer-app-title>Polymer App/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>For my onboarding to the Platform, I was given a task to create a sample client application for interacting with Platform APIs./p>p>The application allowed Users to observe and control their devices connected to the Platform./p>img src/polymer-app.804663bb.png data-zoomable>p classdescription>A screenshot of one of the app pages. It featured real-time updates and a toggle for switching to a local IoT Hub instead of Cloud APIs./p>p>Alongside the application itself, Ive proposed an a hrefhttps://github.com/iamfrontender/evt-elements target_blank>implementation for a UI kit/a> to quickly assemble such applications in the future./p>img src/evt-elements.7ed3781a.png data-zoomable>p classdescription>Sample code allowing quick assembly of a page for working with a certain IoT device via Platform APIs./p>/div>/div>/div>/div>/template>template idmodal-email-templates-template>div classmodal modal-slide idmodal-email-templates aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-email-templates-title>header classmodal-header flex-row>h2 classmodal-title idmodal-email-templates-title>Email Templating System/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Ive implemented a complete revamp of emails delivered by the Platform, migrating from text-only to a consistently styled HTML./p>p>Amongst the features it included a component system for quickly composing new types of emails and full support for older email clients, like Outlook./p>code data-gist-id18f799c442b077af42458b53a147fcc6>/code>p classdescription>Reusable email button, for example./p>/div>/div>/div>/div>/template>template idmodal-leaflet-maps-template>div classmodal modal-slide idmodal-leaflet-maps aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-leaflet-maps-title>header classmodal-header flex-row>h2 classmodal-title idmodal-leaflet-maps-title>Abstract Map Component/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As our application featured leaflet-based maps in multiple places, weve decided to unify the developer experience and wrap commonly used features in an easy-to-use package./p>p>Main focus of the abstraction was on the programmatic control of the component, allowing to display a dynamic map legend, load/unload markers with clusters and drawing custom polygons over the map./p>img src/evt-map.2b04079d.png data-zoomable>p classdescription>Amongst interesting features was automatic data clustering on the backend, to avoid transfers of colossal amounts of data for continent-level zooms./p>p>Another aspect was to implement desired default behavior with little or no additional configuration for basic use-cases./p>/div>/div>/div>/div>/template>template idmodal-crud-pages-template>div classmodal modal-slide idmodal-crud-pages aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-crud-pages-title>header classmodal-header flex-row>h2 classmodal-title idmodal-crud-pages-title>CRUD Pages/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>The platform has been providing a quite uniform experience for most entities, consisting of multiple reusable blocks of behavior, such as tagging, storing custom data, assigning custom identifiers, and scoping resources to a specific project within the account./p>p>When adding another resource type, we opted to unify our developer experience by building CRUD pages for such resources too./p>p>This approach allowed us to reduce the delivery time for such basic pages from weeks to days for each new resource./p>p>The experience includes behaviors such as listing entities, filtering them by available fields, creating new entities, and editing existing ones, all built with the same exact reusable components./p>/div>/div>/div>/div>/template>template idmodal-api-testing-tool-template>div classmodal modal-slide idmodal-api-testing-tool aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-api-testing-tool-title>header classmodal-header flex-row>h2 classmodal-title idmodal-api-testing-tool-title>API Testing Tool/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>The platform offered a wide range of APIs, necessitating frequent triggers for test sequences or providing additional control over entities beyond the basic CRUD model./p>img src/api-testing-tool.50dd5a45.png data-zoomable>p classdescription>A screenshot of one of the tools pages, designed to dispatch custom actions on specific resources./p>p>Weve developed an API client similar to Postman, enabling users to perform requests and observe the outcomes./p>/div>/div>/div>/div>/template>template idmodal-analytics-dashboard-template>div classmodal modal-slide idmodal-analytics-dashboard aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-analytics-dashboard-title>header classmodal-header flex-row>h2 classmodal-title idmodal-analytics-dashboard-title>Analytics Dashboard/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As Platform aggregated huge amounts of data, we faced the need to expose the most typical KPIs and Metrics for accounts of our users./p>img src/analytics-dashboard.42fa4dc7.png data-zoomable>p classdescription>All the widgets positions/layouts and their contents were fully customizable for a particular Account needs./p>p>It was approached by building a set of reusable visualisation components which could be connected to our Analytics API. Components allowed tweaking of the metric dimensions and content to the need of a particular user./p>/div>/div>/div>/div>/template>template idmodal-xbac-template>div classmodal modal-slide idmodal-xbac aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-xbac-title>header classmodal-header flex-row>h2 classmodal-title idmodal-xbac-title>RBAC/ABAC for application/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As Platform featured dozens of resources and APIs, not all of them were utilised in each and every solution. Alongside with that, some solution required restricting the content which users can access based on their Role in the Account./p>p>We approached the problem by implementing a fine-grained Role and Attribute based access control for the application./p>img src/xbac.f049bb30.png data-zoomable>p classdescription>Weve implemented a Role and Attributed based access control accross the whole application, allowing to control which resources User with a certain Role can access and which Pages they could reach./p>p>It allowed an Administrator of the account to define which resources and pages are available for certain types of the users in their respective solution./p>/div>/div>/div>/div>/template>template idmodal-session-timeouts-template>div classmodal modal-slide idmodal-session-timeouts aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-session-timeouts-title>header classmodal-header flex-row>h2 classmodal-title idmodal-session-timeouts-title>Active Session Timeouts/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>For better support of different use-cases on top of the platform, Ive implemented a system for an Account Administrator to define a timeout for an active session in their Account./p>p>Alongside with custom duration, it supported active session maintenance, actively logging out users after a period of inactivity, as some of our Clients required sessions as short as 10 minutes./p>/div>/div>/div>/div>/template>template idmodal-password-complexity-template>div classmodal modal-slide idmodal-password-complexity aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-password-complexity-title>header classmodal-header flex-row>h2 classmodal-title idmodal-password-complexity-title>Password Complexity Indicator/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Ive implemented a neat feature providing real-time feedback to the User on meeting the password complexity criteria./p>video controls>source src/password.c561d960.mp4 typesvideo/mp4>/video>p classdescription>Small recording of a component in action./p>p>Ive managed to find a neat way to integrate these dynamic visuals with the form framework we used./p>/div>/div>/div>/div>/template>template idmodal-dropping-compass-template>div classmodal modal-slide idmodal-dropping-compass aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-dropping-compass-title>header classmodal-header flex-row>h2 classmodal-title idmodal-dropping-compass-title>Migration from Compass to libsass/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As our codebase grown, style builds became increasingly slow, reacing a duration of 40-50 seconds after each change. As Compass ecosystem didnt allow us to scale further, weve made a decision to drop it in favor of a libsass implementation./p>p>Ive implemented a replacement pipeline compiling existing SCSS with libsass. It helped to reduce build times to a range of 1-2 seconds and made possible much quicker iteration times on the application development./p>/div>/div>/div>/div>/template>template idmodal-backend-testing-template>div classmodal modal-slide idmodal-backend-testing aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-backend-testing-title>header classmodal-header flex-row>h2 classmodal-title idmodal-backend-testing-title>Metaframework for Backend unit testing/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As we were maintaining an Application with its own backend, we were maintaining a test suite for its APIs, on top of the Platform APIs./p>p>Ive implemented a meta-framework to make implementing backend tests less painful./p>p>Such an approach enabled us to bootsrap new test suite with a single import containing all the necessary tools preconfigured and with application server running in a production-like environment and ready to accept requests. It also implemented mocks for main Platform APIs for tests to be run in a complete isolation either on CI/CD instances or on local machine. /p>/div>/div>/div>/div>/template>template idmodal-custom-dashboards-template>div classmodal modal-slide idmodal-custom-dashboards aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-custom-dashboards-title>header classmodal-header flex-row>h2 classmodal-title idmodal-custom-dashboards-title>Application Customization Framework/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As solutions built on top of the Platform grew increasingly different, there was a need to provide a deep customization of the content in the Clients Account./p>video controls>source src/custom-dashboards.dff4c305.mp4 typevideo/mp4>/video>p classdescription>A screencast of editing one of the Custom Dashboards/p>p>Ive implemented a grid-based dashboards framework allowing Users to create new and edit existing application pages with ability to place pre-defined or fully custom widgets. The Framework also supported export of configured dashboards for sharing between the Accounts./p>p>It also allowed embedding third-party widgets deployed and hosted outside of main application, allowing our Clients Engineering teams to extend the Application to their needs./p>/div>/div>/div>/div>/template>template idmodal-iot-gateway-template>div classmodal modal-slide idmodal-iot-gateway aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-iot-gateway-title>header classmodal-header flex-row>h2 classmodal-title idmodal-iot-gateway-title>IoT Gateway on AWS Lambda/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>We were approached Client operating a fleet of smart devices connected to the Cloud with a request to migrate their assets to our Platform./p>p>Ive participated in building a solution allowing to communicate with devices in custom binary protocol./p>p>Alongside with communication, we have implemented a set of tools to deploy new device firmware over the air./p>p>Ive also implemented a distributed tracing of AWS Lambda invocations orchestrating internals of each run and providing us with an insight for optimization and debugging./p>p>As we required to manage a variety of different devices with a lot of business rules, Ive also implemented a custom scripting engine allowing to modify device state based on change of its properties./p>/div>/div>/div>/div>/template>template idmodal-iot-dashboard-template>div classmodal modal-slide idmodal-iot-dashboard aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-iot-dashboard-title>header classmodal-header flex-row>h2 classmodal-title idmodal-iot-dashboard-title>Administration Dashboard for IoT Devices/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Alongside implementing the solution for managing the device fleet on top of the Platform, Ive also implemented a set of custom extensions, allowing managing supported device types, managing device firmware, performing testing of device response and providing an overview for device state./p>video controls>source src/iot-dashboard.bced5b4a.mp4 typevideo/mp4>/video>p classdescription>A screencast highlighting some of the features allowing to manage some of the properties of how devices are connected to the cloud and some additional firmware metadata./p>/div>/div>/div>/div>/template>template idmodal-dart-sdk-template>div classmodal modal-slide idmodal-dart-sdk aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-dart-sdk-title>header classmodal-header flex-row>h2 classmodal-title idmodal-dart-sdk-title>Dart SDK for Platform APIs/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>During my work on IoT gateway on AWS Lambda, we were handed off one of the legacy components of the Clients system, a microservice written in Dart, containing a lot of crucial business logic./p>p>Weve bridged given service with Platform APIs, so that its consumers could still use older Gateway APIs, whilst gateway itself would have our Platform as backend./p>p>To provide better interop between existing codebase and Platform APIs, Ive written a Dart SDK for the Platform./p>p>In addition to classic Request/Response workflow, it features support for streaming, implemented with Dart Streams, allowing to easily perform bulk operations./p>code data-gist-id90bcab948f65b3cd699a4a785d5f397a>/code>p classdescription>Example of streams API in action./p>/div>/div>/div>/div>/template>template idmodal-lambda-tracing-template>div classmodal modal-slide idmodal-lambda-tracing aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-lambda-tracing-title>header classmodal-header flex-row>h2 classmodal-title idmodal-lambda-tracing-title>Distributed tracing for AWS Lambda/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As Solution grew, we faced the necessity to manage dozens of sequential and parallel invocations of AWS Lambda related to certain device workflows./p>p>To overcome the complexity of debugging such a solution, Ive implemented a system for tracing the events happening within our Lambdas, collecting and aggregating them for display in our Platform./p>img src/lambda-tracing.415a08f0.png data-zoomable>p classdescription>One of the traces we recorded. Tool allowed zooming and panning over traces and reviewing additional metadata available on the events./p>p>As addition to that, Ive written an a hrefhttps://habr.com/ru/post/354716/ target_blank>article (RU)/a> on creating such tracers and released a a hrefhttps://github.com/av/tohu target_blank>stripped-down version of the tracer/a>. Its compatible with code>chrome://tracing/code> protocol and could give you an insight of HTTP calls issued when your code is running with just a one-line change./p>/div>/div>/div>/div>/template>template idmodal-chapter-lead-template>div classmodal modal-slide idmodal-chapter-lead aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-chapter-lead-title>header classmodal-header flex-row>h2 classmodal-title idmodal-chapter-lead-title>Chapter Lead/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Having a lot of experience with most of the Platform components, I was promoted to take a position of a Frontend Lead./p>p>Ive curated frontend-related meetings and initiatives, was conducting interviews for Frontend and Backend positions, helped to investigate any Platform outages, maintain and monitor Platform infrastructure./p>/div>/div>/div>/div>/template>template idmodal-drop-bower-template>div classmodal modal-slide idmodal-drop-bower aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-drop-bower-title>header classmodal-header flex-row>h2 classmodal-title idmodal-drop-bower-title>Migrated away from Bower/RequireJS/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As we have maintained a mature and constantly growing application, we were trying to keep the balance between the legacy burden and keeping our technology stack up-to-date./p>p>After certain stage, we faced the need to implement better code splitting techniques than we had employed at the time. Weve conducted an architecture council to determine a way forward./p>p>Over one of the weekends, Ive concluded a technical spike proving a possibility to migrate our codebase to a Webpack, alongside with introduction of better code splitting and lazy-loading techniques./p>p>Shortly after, weve used our Tech Debt quota to implement the changes./p>p>One of the most interesting features of a migration was that we managed to avoid refactoring of the most of the codebase by adjusting Webpack to work with multiple different module formats employed during the Application life./p>/div>/div>/div>/div>/template>template idmodal-traceability-search-template>div classmodal modal-slide idmodal-traceability-search aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-traceability-search-title>header classmodal-header flex-row>h2 classmodal-title idmodal-traceability-search-title>Traceability solution on AWS Lambda/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>We were approached by a world-known Company to help them to reduce operation times for some of their internal workflows related to the Traceability of the Goods used for their products./p>p>To tackle that, weve built a custom solution on top of the Platform, aggregating data from multiple Clients systems and allowing to reduce their workflow time from weeks to just seconds./p>p>Solution was based on AWS Lambda, used as extension point for the Platform to hold a custom logic for processing and querying Clients data./p>p>On top of data, Ive built a whole range of various components enabling to surface the information based on the Clients terminology and implementing custom visualisations to better reflect its states and conditions./p>/div>/div>/div>/div>/template>template idmodal-traceability-solution-template>div classmodal modal-slide idmodal-traceability-solution aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-traceability-solution-title>header classmodal-header flex-row>h2 classmodal-title idmodal-traceability-solution-title>Traceability Solution/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As one of the solutions Ive previously developed entered another active phase, Ive actively participated in implementing new features and maintaining it./p>p>Amongst the interesting problems we were solving: analysis and aggregation of 250Gb of XML data, programmatically building custom XLSX reports. /p>/div>/div>/div>/div>/template>template idmodal-satellite-applications-template>div classmodal modal-slide idmodal-satellite-applications aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-satellite-applications-title>header classmodal-header flex-row>h2 classmodal-title idmodal-satellite-applications-title>Satellite Applications/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As our Customers were maintaining the technology stacks of their own, we needed a mechanism for better integration with the Platform in addition to the existing customization framework./p>p>Ive implemented a way to serve multiple completely different frontends from a CDN based on Customers Account configuration. It enabled us to build highly specialized applications for one of the solutions we maintained. It also enabled us to safely explore new technology stacks if needed without affecting the main functionality and existing solutions./p>p>Weve seamlessly integrated the Satellites concept into main workflows in the Application allowing RBAC/ABAC and switching between different satellites as well as linking to a particular chosen experience./p>p>Ive also researched a capability to embed these satellite applications directly into the main Applicaiton, essentially implementing microfrontends methodology./p>/div>/div>/div>/div>/template>template idmodal-traceability-dashboards-template>div classmodal modal-slide idmodal-traceability-dashboards aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-traceability-dashboards-title>header classmodal-header flex-row>h2 classmodal-title idmodal-traceability-dashboards-title>Traceability Dashboards/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>At some point, it was decided that the capabilities of the Platform are too hard to grasp on a high level and business was split into three different aspects to better highlight each of the potential use-cases for the Platform./p>p>To provide better support for these different business lines, it was decided to build multiple standalone experiences suited for each particular business line, unified by a single visual style and underlying UI kit./p>p>Weve approached the problem by implementing a capability to serve completely different experiences as part of our main Application. It was implemented as a monorepo of multiple applications capable of sharing any required codebase parts, yet bundled into a completely standalone artifacts using the same exact APIs./p>/div>/div>/div>/div>/template>template idmodal-e2e-testcafe-template>div classmodal modal-slide idmodal-e2e-testcafe aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-e2e-testcafe-title>header classmodal-header flex-row>h2 classmodal-title idmodal-e2e-testcafe-title>E2E Testing with Testcafe/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As our Applicaiton grew, we maintained a set of End-To-End tests around critical user flows./p>p>At some stage, during build pipeline optimisation, weve decided to split main Application codebase and codebase of tests alongside with covering new user flows./p>p>As we had plans to enable different technology stacks in addition to existing one, during the split, Ive dropped Protractor and replaced it with TestCafe, building a metaframework to make writing e2e tests less painful./p>p>The core sense of Metaframework was to cover basic application interactions, such as Login/Logout, change of selected Project, working with unified CRUD pages, so that instead of relying on instructions set tied to particular elements it would be possible to orchestrate them at a higher level, in terminology of the Application itself./p>code data-gist-idfa5cb30e365c3a52b5a6252b33e088e9>/code>p classdescription>Sample test using the metaframework. /p>p>Another interesting feature was environment setup. Ive managed to build a system which was capable to be run on any of our environments without additional configuration steps./p>/div>/div>/div>/div>/template>template idmodal-docker-optimisation-template>div classmodal modal-slide idmodal-docker-optimisation aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-docker-optimisation-title>header classmodal-header flex-row>h2 classmodal-title idmodal-docker-optimisation-title>Docker Image Optimisation/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Alongside with main Product development we were always looking for ways to streamline and simplify developer experience, making our work less tedious./p>p>One of the legacy decisions resulted ot a huge size of Applications Docker image - it was over 2Gb./p>p>In the process of optimisation Ive reduced the size of the image to 136Mb and migrated it to multi-stage builds, to make it possible to use same exact Dockerfile for running Application on local machine, on CI/CD Instances and in Production. /p>p>One of the interesting features implemented was pruning of development dependencies for production stage./p>/div>/div>/div>/div>/template>template idmodal-lambda-service-template>div classmodal modal-slide idmodal-lambda-service aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-lambda-service-title>header classmodal-header flex-row>h2 classmodal-title idmodal-lambda-service-title>Service for serverless scripts/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As Platform offered very flexible extension points, we faced the need to extend their behavior to support more scenarios./p>p>Ive architected and prototyped a service based on AWS Lambda allowing Platform Clients to create and execute arbitrary scripts./p>p>One of the interesting features was NPM-based build pipeline, so any client script could be installed in any way NPM supports, such as: directly from git (incl. private repos), from tarball package or from the registry itself./p>code data-gist-ide34d3f6c8ec73a1207a2f7275be0ae16>/code>p classdescription>An example of using prototyped service by creating a new User Script from private repo and then querying/modifying it./p>/div>/div>/div>/div>/template>template idmodal-experiences-service-template>div classmodal modal-slide idmodal-experiences-service aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-experiences-service-title>header classmodal-header flex-row>h2 classmodal-title idmodal-experiences-service-title>WYSIWYG Experiences Service/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As we offered interesting tooling for quickly deploying custom Product pages to the Platform (also called Experiences), we were interested in exposing better tooling for it to be accessible by non-technical Users./p>p>Ive architected and prototyped a Service for creating and deploying such experiences./p>p>Prototype also included WSISWYG Experience Editor embeddable into our main Application./p>img src/experience-studio.4956a5d6.png data-zoomable>p classdescription>One of the early mocks Ive produced for the Editor./p>ul classimg-section>li>img src/sample-experience.ea53bfe1.png data-zoomable>/li>li>img src/sample-experience-qr.90d6c97c.png data-zoomable>/li>/ul>p classdescription>Prototype of GrapeJS integration and QR Code to access deployed experience./p>/div>/div>/div>/div>/template>template idmodal-supply-chain-traceability-template>div classmodal modal-slide idmodal-supply-chain-traceability aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-supply-chain-traceability-title>header classmodal-header flex-row>h2 classmodal-title idmodal-supply-chain-traceability-title>Supply Chain Traceability/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>During my late days in the Company I have switched to a part-time role to support one of the solutions Ive previously built./p>p>I was working with ETL and data ingestion pipeline to optimise the quality of produced data and cover discovered use-cases. /p>/div>/div>/div>/div>/template>template idmodal-ar-demo-template>div classmodal modal-slide idmodal-ar-demo aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-ar-demo-title>header classmodal-header flex-row>h2 classmodal-title idmodal-ar-demo-title>AR App Demo/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Hiring is hard for tech companies. As an initiative to improve Companys public image on local tech stage, weve conducted a mini-conference, talking about different technical and social aspects of working there./p>p>To showcase some of the interesting technologies weve got our hands on, Ive a hrefhttps://collaborative-ar-presentation.vercel.app/ target_blank>prepared a talk/a> and built a demo app allowing real-time interaction between multiple people, based on one of the Platform features./p>video controls>source src/ar-demo.4dd8c308.mp4 typevideo/mp4>/video>p classdescription>Demo of AR experience in action. If multiple people scan the QR code, they would be collaborating on this voxel playground in real-time. You can check out code for the experience a hrefhttps://github.com/evrythng/evrythng-experience-starter/tree/master/experiences/voxel-builder target_blank>here/a>./p>/div>/div>/div>/div>/template>template idmodal-platform-quickstart-template>div classmodal modal-slide idmodal-platform-quickstart aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-platform-quickstart-title>header classmodal-header flex-row>h2 classmodal-title idmodal-platform-quickstart-title>Platform Quickstart/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As we operated a very large set of features, we faced a need to showcase the capabilities to our Users during onboaring./p>p>Ive implemented a highly integrated experience covering major Platform capabilities./p>video controls>source src/platform-onboarding.8b320f63.mp4 typevideo/mp4>/video>p classdescription>A portion of the flow. You may see in the video that when creating a Product, actual experience is also created and available immediately. This demo leaves aside a feature of auto-generating Product instances, which was also a very interesting topic, as you could generate thousands of containers for your digitized goods right from the start with the Platform./p>p>Alongside with the Quick Start weve delivered a new feature allowing to easily create custom experiences associated with their Digitized Products. You can check out a hrefhttps://github.com/evrythng/evrythng-experience-starter target_blank>the starter kit/a> on the GitHub./p>/div>/div>/div>/div>/template>template idmodal-pallet-tracking-template>div classmodal modal-slide idmodal-pallet-tracking aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-pallet-tracking-title>header classmodal-header flex-row>h2 classmodal-title idmodal-pallet-tracking-title>Pallet Tracking/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>We were approached by a large company looking to digitize their supply chain akin to what was made for some of our previous clients./p>p>After a throughout investigation, we have implemented a custom solution based on current standards of Supply Chain industry./p>p>Solution allowed our Client to track and trace shipments of their Product across the continents with ability to see the distinction between expected and actual quantities to analyse any potential anomalies./p>p>One of the cool features Ive delivered, was a Sankey diagram highlighting recorded transfers of Product throughout the supply chain./p>img src/sankey.49d485c0.png data-zoomable>p classdescription>Example of a relatively simple item transfers. Overall state was restored from a sequence of events recorded for each item individually./p>/div>/div>/div>/div>/template>template idmodal-singularity-template>div classmodal modal-slide idmodal-singularity aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-singularity-title>header classmodal-header flex-row>h2 classmodal-title idmodal-singularity-title>Singularity Mobile Game/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As I moved to part-time position, Ive used remaining time to pursue my interests in game development./p>p>The first day I tried Flutter - I immediately fell in love with it. A very powerful set of abstractions, extreme composability and extremely productive developer cycle left me hugely impressed./p>p>After fiddling with Flutter itself, Ive focused on its rendering capabilities, which are somewhat similar to what HTML5 Canvas provides. As soon as Ive got comfortable, Ive started implementing my first attempt of a game./p>p>The first game was an idle progression game about humanitys history and technology. I was also planning to build up some basic plot around technological singularity and AI already being in power. The main game loop was to earn progress points to unlock new technologies to earn more points./p>video controls>source src/progress-game.431ddea0.mp4 typevideo/mp4>/video>p classdescription>A short recording of Progress game onboarding and main screens./p>p>After significant amount of time spent, Ive realised that to properly finish the Game I needed around 7-8 months of work on content only. Unfortunately that seemed as a bit of an overkill for something which might not work at all. So I switched my focus to a simpler game, with focus on procedural content./p>p>Ive implemented a lot of interesting features into the game, such as a force graph simulation and reactive inventory system./p>/div>/div>/div>/div>/template>template idmodal-mlls-template>div classmodal modal-slide idmodal-mlls aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-mlls-title>header classmodal-header flex-row>h2 classmodal-title idmodal-mlls-title>My Long Locking Story/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>When working on my first game, Ive realised that it would require an immense effort in order to produce enough content for it. So Ive focused on another, simpler concept./p>p>Second game even got its name and a website: a hrefhttps://mylonglockingstory.online>My Long Locking Story/a>. I have even started the promotion activities by trying to get traction in Game Dev community in a hrefhttps://twitter.com/mlls_hq>Twitter/a> and on a hrefhttps://www.reddit.com/r/mlls_hq/comments/dy7wdb/mlls_hq_has_been_created/>Reddit/a>./p>blockquote classtwitter-tweet>p langen dirltr>All the level types of My Long Locking Story together. br>Rather chaotic and quite stressing experience, even without the need to pick the lock!a hrefhttps://twitter.com/hashtag/mylonglockingstory?srchash&ref_srctwsrc%5Etfw>#mylonglockingstory/a> a hrefhttps://twitter.com/hashtag/indiedev?srchash&ref_srctwsrc%5Etfw>#indiedev/a> a hrefhttps://twitter.com/hashtag/games?srchash&ref_srctwsrc%5Etfw>#games/a> a hrefhttps://twitter.com/hashtag/gamedev?srchash&ref_srctwsrc%5Etfw>#gamedev/a> a hrefhttps://twitter.com/hashtag/flutterdev?srchash&ref_srctwsrc%5Etfw>#flutterdev/a> a hrefhttps://twitter.com/hashtag/screenshotsaturday?srchash&ref_srctwsrc%5Etfw>#screenshotsaturday/a> a hrefhttps://twitter.com/hashtag/screenshotsunday?srchash&ref_srctwsrc%5Etfw>#screenshotsunday/a> a hrefhttps://twitter.com/hashtag/puzzles?srchash&ref_srctwsrc%5Etfw>#puzzles/a> a hrefhttps://t.co/QX9I4fujjV>pic.twitter.com/QX9I4fujjV/a>/p>— My Long Locking Story (MLLS) ๐ (@mlls_hq) a hrefhttps://twitter.com/mlls_hq/status/1211034124909195265?ref_srctwsrc%5Etfw>December 28, 2019/a>/blockquote>script async srchttps://platform.twitter.com/widgets.js charsetutf-8>/script>p>Unfortunately, as it often happens with first-time founders, Ive burned out due to endless work cycle and constant stress because of being out of time./p>p>This game features plenty of interesting code, such as a simple fluid simulation, a lot of force-based simulations, simple scripting runtime, dynamic dialog system, a level progression system with reactive unlockables, reputation system and much more./p>code data-gist-id6447dd198b88ed024212111d3e6c3e5a>/code>p classdescription>One of the first levels of My Long Locking Story/p>/div>/div>/div>/div>/template>template idmodal-lisp-interpreter-template>div classmodal modal-slide idmodal-lisp-interpreter aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-lisp-interpreter-title>header classmodal-header flex-row>h2 classmodal-title idmodal-lisp-interpreter-title>LISP in Dart/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>During the development of My Long Locking Story I faced the need to decouple game scene and level generation from Dart code itself. The reason was simple, Flutter cant execute Dart code dynamically, it can only run what was compiled into the application bundle. /p>p>So, to empower myself with greater flexibility, for potential future uses and to simplify existing level development flow, Ive explored various scripting technologies. LISP immediately caught my attention because of how easy it was to understand the core concepts and how well it was covered./p>p>Ive written a simple LISP scripting engine connected to my game engine to control game scenes, their content and event flow between components./p>code data-gist-idae7a73948f535a092464b4ab4ee8678e>/code>p classdescription>Example of evaluating simple LISP code with that interpreter./p>/div>/div>/div>/div>/template>template idmodal-wutch-template>div classmodal modal-slide idmodal-wutch aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-wutch-title>header classmodal-header flex-row>h2 classmodal-title idmodal-wutch-title>Wutch.net/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>After an amazing 4 years at my previous job I was ready to try to do something of my own. Through the years I was collecting ideas which occasionally happened to appear in my mind, so Ive just scrapped through those and picked one which seemed the most promising./p>p>What if you could subscribe to any value on the Internet? Could be pretty handy!/p>p>No more daily visits to a range of bookmarks, no more problems with looking for an absent RSS feed./p>p>Excited about possible applications, Ive started with building a PoC in about a week, which allowed me to track local prices on videocards. /p>iframe width560 height315 srchttps://www.youtube.com/embed/RX702Qfhm4s frameborder0 allowaccelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture allowfullscreen>/iframe>p classdescription>Small demo of a hrefhttps://wutch.net target_blank>Wutch/a> in action./p>p>Right now this service is in indefinite Closed Beta (ping me at a hrefmailto:av@av.codes>av@av.codes/a> if youre interested to participate), and Ive put development on hold until the situation in my country will become less tense./p>/div>/div>/div>/div>/template>template idmodal-electronic-music-template>div classmodal modal-slide idmodal-electronic-music aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-electronic-music-title>header classmodal-header flex-row>h2 classmodal-title idmodal-electronic-music-title>Electronic Music/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>I was always fascinated with Software. Ive fiddled with all the programms I could get my hands on. /p>p>Once, Ive got my hands on a simple sample editor and found it extremely entertaining to distort recordings of my own voice./p>p>Long story short, a year after that, Ive attempted to write music with a computer. Initially, it was as bad as you think it was (maybe even worse). Luckily, those first recordings are stored safely on a Hard Drive, I wont tell a single soul stored where./p>p>After many years of making really bad things, quantity transitioned into some degree of quality. You may find recordings Im least ashamed of at my a hrefhttps://soundcloud.com/everlier>SoundCloud account/a>./p>iframe width100% height300 scrollingno frameborderno allowautoplay srchttps://w.soundcloud.com/player/?urlhttps%3A//api.soundcloud.com/playlists/16430201&color%23ff5500&auto_playfalse&hide_relatedfalse&show_commentstrue&show_usertrue&show_repostsfalse&show_teasertrue&visualtrue>/iframe>div stylecolor:#ccc;line-break:anywhere;word-break:normal;white-space:nowrap;text-overflow:ellipsis;font-family:Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-size:10px;font-weight:100;overflow:hidden>a hrefhttps://soundcloud.com/everlier titleEverlier target_blank stylecolor:#ccc;text-decoration:none>Everlier/a> ยท a hrefhttps://soundcloud.com/everlier/sets/everlier titleEVERLIER target_blank stylecolor:#ccc;text-decoration:none>EVERLIER/a>/div>p classdescription>Youre viewing a CV of a Software Engineer, so consider yourself warned :)/p>/div>/div>/div>/div>/template>template idmodal-graphic-design-template>div classmodal modal-slide idmodal-graphic-design aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-graphic-design-title>header classmodal-header flex-row>h2 classmodal-title idmodal-graphic-design-title>Graphic Design/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>I loved drawing, had bearable skills working with Graphic Design software and had lots of long lonely evenings after studying./p>p>Ive created and curated a Typography community in one of the social networks popular in my country./p>p>After that it was a very short run from considering myself a Graphic Designer and applying for projects on Freelance job boards./p>p>Doing that, I have produced a lot of things which are still hanging on the walls at my place./p>ul classimg-section>li>img src/design-1.3131b232.png data-zoomable>/li>li>img src/design-2.157c1051.jpg data-zoomable>/li>li>img src/design-3.5e1092ce.png data-zoomable>/li>/ul>p classdescription>These are literally on the wall of the room Im sitting in right now./p>p>To check out more, you may visit a hrefhttps://everlier.tumblr.com/>my old (and dusty) portfolio/a>./p>/div>/div>/div>/div>/template>template idmodal-html-taste-template>div classmodal modal-slide idmodal-html-taste aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-html-taste-title>header classmodal-header flex-row>h2 classmodal-title idmodal-html-taste-title>First taste of HTML/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>At some stage, me and my Mother moved to other village and were setting up a new life for ourselves./p>p>I couldnt say it was boring, but I certainly had less things to do than before./p>p>So, somehow my Mom got me into a remote course on so called Web Design, where they taught me the difference between unordered and ordered lists and all the powers of table layouts./p>p>Writing that HTML on the pages of notebook to be sent via post office back to the tutors, I could never guess that would be related to my career./p>/div>/div>/div>/div>/template>template idmodal-photoshop-tutorials-template>div classmodal modal-slide idmodal-photoshop-tutorials aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-photoshop-tutorials-title>header classmodal-header flex-row>h2 classmodal-title idmodal-photoshop-tutorials-title>Photoshop Tutorials/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As Ive spent countless hours drawing on lessons in School and I loved computers and everything related, it was only a question of time - when I get my hands on some Graphic Design software./p>p>Initially, it was a hot mess from custom brushes and gradients, which I thought looks cool. A bit later I even managed to do some basic design for my friends and family, creating them business cards and coasters for social media groups./p>p>Later in the years, it helped me to try myself in the world of Graphic Design Freelance, I even got a couple of actually paid gigs out of that./p>/div>/div>/div>/div>/template>template idmodal-flutter-articles-template>div classmodal modal-slide idmodal-flutter-articles aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-flutter-articles-title>header classmodal-header flex-row>h2 classmodal-title idmodal-flutter-articles-title>Writing on Medium about Flutter/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As my excitement with Flutter grew, I was diving quite deep into the framework and its capabilities./p>p>At some point, I decided to share my finding with the rest of such an amazing community./p>p>Ive released multiple articles on different topics:/p>ul>li>a hrefhttps://itnext.io/what-i-learned-developing-games-from-scratch-on-flutter-a2eda59460e5 target_blank>What I Learned Developing Games from Scratch with Flutter/a>/li>li>a hrefhttps://itnext.io/procedural-textures-with-flutter-efcf546cd1fc target_blank>Procedural textures with Flutter/a>/li>li>a hrefhttps://blog.usejournal.com/brushed-metal-texture-with-flutter-e036eded6de0 target_blank>Brushed Metal texture with Flutter/a>/li>li>a hrefhttps://medium.com/flutter-community/particle-systems-for-puffs-and-zaps-with-flutter-d32cdcc97ef3 target_blank>Particle Systems (for Puffs and Zaps) with Flutter/a>/li>li>a hrefhttps://medium.com/flutter-community/neumorphic-designs-in-flutter-eab9a4de2059 target_blank>Neumorphic designs with Flutter/a>/li>/ul>blockquote classtwitter-tweet>p langen dirltr>A quite magnificent article by Ivan Charapanau on Flutter, composition, and particle effects. Both informative and a cracking read. Great job! a hrefhttps://twitter.com/hashtag/Flutter?srchash&ref_srctwsrc%5Etfw>#Flutter/a> โฆa hrefhttps://twitter.com/FlutterComm?ref_srctwsrc%5Etfw>@FlutterComm/a>โฉa hrefhttps://t.co/7xtIMJJyAW>https://t.co/7xtIMJJyAW/a>/p>— Tim Sneath (@timsneath) a hrefhttps://twitter.com/timsneath/status/1188695072734187521?ref_srctwsrc%5Etfw>October 28, 2019/a>/blockquote> script async srchttps://platform.twitter.com/widgets.js charsetutf-8>/script>p classdescription>I was extremely proud, when one of the articles was recognized by a Flutter Product Manager./p>/div>/div>/div>/div>/template>template idmodal-oss-contribution-template>div classmodal modal-slide idmodal-oss-contribution aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-oss-contribution-title>header classmodal-header flex-row>h2 classmodal-title idmodal-oss-contribution-title>Contributing to Flame engine/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Working on my own mobile game, I faced the need to quickly implement 2d particle effects to be used in a variety of scenarios./p>p>After implementing Particle System and sharing it with the engine community Ive got a greenlight for implementing it into the engine./p>img src/particles.f9908bb7.gif data-zoomable>p classdescription>Examples of Particle System in use./p>p>You can check out the a hrefhttps://github.com/flame-engine/flame/pull/190 target_blank>contribution/a> and a hrefhttps://flame-engine.org/docs/particles.md target_blank>docs/a> for more details./p>/div>/div>/div>/div>/template>template idmodal-flutter-clock-template>div classmodal modal-slide idmodal-flutter-clock aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-flutter-clock-title>header classmodal-header flex-row>h2 classmodal-title idmodal-flutter-clock-title>Participating in Flutter Clock Challenge/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Ive participated in challenge from Google Flutter team to create a new and intriguing clock-face for an android-based smart device./p>blockquote classtwitter-tweet>p langen dirltr>Just finished my submission to a hrefhttps://twitter.com/hashtag/FlutterClock?srchash&ref_srctwsrc%5Etfw>#FlutterClock/a>. Called it "timeline", cause it's a line... showing time...a hrefhttps://twitter.com/hashtag/Flutter?srchash&ref_srctwsrc%5Etfw>#Flutter/a> a hrefhttps://twitter.com/hashtag/FlutterDev?srchash&ref_srctwsrc%5Etfw>#FlutterDev/a> a hrefhttps://twitter.com/hashtag/DartLang?srchash&ref_srctwsrc%5Etfw>#DartLang/a> a hrefhttps://twitter.com/hashtag/FlutterInteract?srchash&ref_srctwsrc%5Etfw>#FlutterInteract/a> a hrefhttps://twitter.com/hashtag/UI?srchash&ref_srctwsrc%5Etfw>#UI/a> a hrefhttps://twitter.com/hashtag/uxdesign?srchash&ref_srctwsrc%5Etfw>#uxdesign/a> a hrefhttps://t.co/P03AmBp5Za>pic.twitter.com/P03AmBp5Za/a>/p>— My Long Locking Story (MLLS) ๐ (@mlls_hq) a hrefhttps://twitter.com/mlls_hq/status/1218994261661757440?ref_srctwsrc%5Etfw>January 19, 2020/a>/blockquote> script async srchttps://platform.twitter.com/widgets.js charsetutf-8>/script>p classdescription>You can also find my contribution a hrefhttps://github.com/av/timeline_clock target_blank>on the GitHub/a>/p>/div>/div>/div>/div>/template>template idmodal-redscript-template>div classmodal modal-slide idmodal-redscript aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-redscript-title>header classmodal-header flex-row>h2 classmodal-title idmodal-redscript-title>JavaScript to AnyScript transpilation/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As any programmer, I was mesmerised by how programming languages are built./p>p>Speaking Russian natively I was also curious on how the code is perceived by the native Egnlish speakers./p>p>So, during one of the weekends, Ive got my hands on the a hrefhttps://esprima.org/ target_blank>Esprima/a>, ECMAScript parser and patched it to support arbitrary sets of keywords, instead of hardcoded English ones./p>p>After that, Ive created a hrefhttps://github.com/av/your-script target_blank>a small lib/a> to to traverse the AST and swap the keywords to anyones liking./p>p>As a result, I was able to create a small transpiler for a a hrefhttps://github.com/av/redscript target_blank>RedScript/a>, JS subset with all the keywords being in Russian./p>img src/redscript.86883ba3.png data-zoomable>p classdescription>Ive also written an a hrefhttps://habr.com/ru/post/283108/ target_blank>article (RU)/a> on using the module./p>/div>/div>/div>/div>/template>template idmodal-dtg-template>div classmodal modal-slide idmodal-dtg aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-dtg-title>header classmodal-header flex-row>h2 classmodal-title idmodal-dtg-title>Data Generation Tool/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>During my first months in the Company, Ive experienced day-to-day need to generate large amounts of semi-randomised data to test and verify various behaviors of the Platform./p>p>To help myself (and my colleagues, facing the same need), Ive written a a hrefhttps://github.com/av/dtg target_blank>small template-based data-generation tool/a>, allowing to steamroll semi-random data for any partiuclar needs./p>img src/dtg.5cd7d52e.png data-zoomable>p classdescription>I was relieved from code>{ name: test, description: test }/code> with DTG./p>/div>/div>/div>/div>/template>template idmodal-euler-rust-template>div classmodal modal-slide idmodal-euler-rust aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-euler-rust-title>header classmodal-header flex-row>h2 classmodal-title idmodal-euler-rust-title>Solving Project Euler puzzles in Rust/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>At some point I was attracted to Rust. /p>p>In order to get my hands on it, Ive decided to start small and try solving a hrefhttps://projecteuler.net/ target_blank>Project Euler/a> puzzles with it./p>p>You can check out my attempts a hrefhttps://github.com/av/euler/tree/master/rust target_blank>in this repo/a>./p>/div>/div>/div>/div>/template>template idmodal-yson-template>div classmodal modal-slide idmodal-yson aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-yson-title>header classmodal-header flex-row>h2 classmodal-title idmodal-yson-title>YSON (YSON - Simple Object Notation)/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>After being tired of typing endless code>{/code>s and code>/code>s, Ive tried my skills in building a specification for a data language (like JSON or YML)./p>p>Ive developed a hrefhttps://github.com/av/yson>a spec in a set of railroad diagrams/a> (to build a parser upon) for a new (as I thought) data transferring language, only to realise that someone infinitely smarter than me already created YAML, following a very similar purpose./p>img src/yson.18a8eb6f.png data-zoomable>p classdescription>In the project logo, Ive tried to highlight that YSON is like JSON, but without unnecessary parts./p>/div>/div>/div>/div>/template>template idmodal-thng-query-template>div classmodal modal-slide idmodal-thng-query aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-thng-query-title>header classmodal-header flex-row>h2 classmodal-title idmodal-thng-query-title>Thng Query/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>During my work I was issuing hundreds of various calls to Platform APIs./p>p>Taking into account my curiousity in how Programming Languages are built, Ive explored the territory of parsing a plain english text and transforming it into a series of HTTP calls to query Platform APIs./p>p>Ive created a a hrefhttps://github.com/av/thng-query/blob/master/src/grammar/grammar.ne target_blank>grammar/a> using a hrefhttps://github.com/kach/nearley target_blank>Nearley/a> toolkit and integrated it with the Platform SDK to perform queries like:/p>code data-gist-ida5e52576b76bab5258e48e1ccf323993>/code>p classdescription>One of the cool features was that it could perform filtering much deeper than allowed by the main Platform APIs./p>/div>/div>/div>/div>/template>template idmodal-tohu-template>div classmodal modal-slide idmodal-tohu aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-tohu-title>header classmodal-header flex-row>h2 classmodal-title idmodal-tohu-title>JavaScript code tracer/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>As a result of one of the projects, Ive released a hrefhttps://github.com/av/tohu target_blank>a JavaScript library/a> allowing to orchestrate arbitrary code and record its behavior in the runtime./p>p>Ive also written an a hrefhttps://habr.com/ru/post/354716/>article (RU)/a> about implementing simple tracers compatible with code>chrome://tracing/code>./p>/div>/div>/div>/div>/template>template idmodal-bip-template>div classmodal modal-slide idmodal-bip aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-bip-title>header classmodal-header flex-row>h2 classmodal-title idmodal-bip-title>Business Intelligence Platform/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Ive joined a startup focusing on the Business Intelligence space. The company created a platform for collecting and processing data on businesses and their activities./p>p>We served over a million company profiles, providing our Users access to more than 400 data points for each./p>p>During my time at the company, we significantly expanded our product line, adding solutions for monitoring, collaboration, risk assessment, and more./p>ul classimg-section>li>img src/bip-1.546befd1.png data-zoomable>/li>li>img src/bip-2.8d7e6aa5.png data-zoomable>/li>/ul>p classdescription>Im proud of all the work weve done, and Im happy to have been a part of it./p>p>My contribution ranged even more than on previous positions, from the DB optimisations to the Product/Design work, encompassing the whole flow of delivering the product to the end-user./p>/div>/div>/div>/div>/template>template idmodal-chapter-lead-2-template>div classmodal modal-slide idmodal-chapter-lead-2 aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-chapter-lead-2-title>header classmodal-header flex-row>h2 classmodal-title idmodal-chapter-lead-2-title>Chapter Lead/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>My journey as a Software Engineer at Craft has been a mix of technical challenges and triumphs, spanning various aspects of the platforms development. /p>p>Ive contributed to a wide range of projects, from infrastructure management to UI/UX enhancements, always focused on delivering high-quality, performant features to our users./p>/div>/div>/div>/div>/template>template idmodal-harbor-template>div classmodal modal-slide idmodal-harbor aria-hiddentrue>div classmodal-overlay tabindex-1 data-micromodal-close>div classmodal-container roledialog aria-modaltrue aria-labelledbymodal-harbor-title>header classmodal-header flex-row>h2 classmodal-title idmodal-harbor-title>Harbor/h2>button classmodal-close-control aria-labelClose modal data-micromodal-close>i classgg-close>/i>/button>/header>div classmodal-content idmodal-undefined-content>p>Harbor is a tool to effortlessly run LLM backends, APIs, Frontends and services with one concise CLI./p>p>It started as a local setup, and I had a change to significantly expand upon it in-between the jobs./p>img srchttps://raw.githubusercontent.com/wiki/av/harbor/harbor-arch-diag.png data-zoomable>p classdescription>Harbor high-level overview/p>p>Harbor gathered some positive feedback from the community and I had a chance to meet many interesting people along the way./p>ul> li> a hrefhttps://github.com/av/harbor>Harbor on GitHub/a>/li>li>a hrefhttps://github.com/av/harbor/wiki>Harbor Wiki/a>/li>li> a hrefhttps://www.reddit.com/r/LocalLLaMA/comments/1ehq2gm/introducing_harbor_a_containerized_llm_toolkit/>Announcement on Reddit/a>/li>/ul>/div>/div>/div>/div>/template>link relstylesheet href/index.be3771bb.css>section classbackground styleheight:5vh bg-whitebg-white>/section>section classsplitter stylewidth:100%;margin-top:-5vh;position:relative;overflow:hidden>section classbackground styleheight:10vh;margin-bottom:0 bg-whitebg-white>/section>section flex-row styleheight:10vh;margin-top:-2vh>div classcircle styleborder-radius:100rem;flex:1;height:21.1859%;animation-name:stronger-shaking;animation-delay:-15.3141s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:30.5766%;animation-name:rotating;animation-delay:-22.3679s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:44.8879%;animation-name:sliding;animation-delay:-24.3321s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:30.7434%;animation-name:sliding;animation-delay:-21.6483s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:40.3646%;animation-name:shaking;animation-delay:-16.4029s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:35.9439%;animation-name:rotating;animation-delay:-13.3253s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:53.9622%;animation-name:sliding;animation-delay:-17.6012s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:77.2922%;animation-name:rotating;animation-delay:-2.24234s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:62.5123%;animation-name:rotating;animation-delay:-8.75726s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:52.1614%;animation-name:shaking;animation-delay:-6.02518s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:69.3046%;animation-name:shaking;animation-delay:-10.5397s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:63.9807%;animation-name:sliding;animation-delay:-6.16254s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:51.1697%;animation-name:sliding;animation-delay:-24.5431s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:72.4768%;animation-name:rotating;animation-delay:-4.85648s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:58.7086%;animation-name:shaking;animation-delay:-12.9568s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:79.816%;animation-name:sliding;animation-delay:-7.09562s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:97.4036%;animation-name:shaking;animation-delay:-15.9856s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:80.6113%;animation-name:sliding;animation-delay:-19.58s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:65.9757%;animation-name:rotating;animation-delay:-11.0895s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:85.5504%;animation-name:shaking;animation-delay:-21.1158s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:83.1137%;animation-name:stronger-shaking;animation-delay:-21.6011s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:79.4852%;animation-name:shaking;animation-delay:-12.7323s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:83.2421%;animation-name:sliding;animation-delay:-7.03051s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:69.0803%;animation-name:sliding;animation-delay:-9.62147s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:41.9166%;animation-name:shaking;animation-delay:-23.3317s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:63.6533%;animation-name:sliding;animation-delay:-2.4953s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:58.8331%;animation-name:sliding;animation-delay:-4.65319s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:33.3186%;animation-name:rotating;animation-delay:-4.61262s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:40.6139%;animation-name:sliding;animation-delay:-19.3001s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:20.1652%;animation-name:shaking;animation-delay:-19.5429s bg-whitebg-white>/div>/section>/section>section classskills>div classcontent>h1 classsection-header data-aosfade-up>Glance through my skills/h1>p classdescription data-aosfade-up data-aos-delay50>Zoom. Pan./p>div classskills-container>div classaxis-label axis-x data-aosfade-up>h5>Interest โ/h5>/div>div classaxis-label axis-y data-aosfade-up>h5>Experience โ/h5>/div>/div>div classlist-container>/div>div classlegend-container pills flex-row flex-wrap flex-center>div classinverse map-pill pill>i classgg-assign>/i>span>View as a map/span>/div>div classinverse list-pill pill>i classgg-list>/i>span>View as list/span>/div>a hrefhttps://github.com/av/av/blob/master/src/skills/SkillsSection.ts target_blank>div classinverse pill>svg roleimg viewbox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>title>GitHub icon/title>path dM12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12>/path>/svg>span>View on GitHub/span>/div>/a>/div>/div>/section>link relstylesheet href/index.0c1d706d.css>section classcontacts>h1 classsection-header data-aosfade-up>Ready to talk? Lets connect!/h1>ul classlinks flex-row flex-wrap flex-center>li data-aosfade-up data-aos-delay50>a hrefhttps://www.linkedin.com/in/ivan-cherepanov target_blank>svg roleimg viewbox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>title>LinkedIn icon/title>path dM20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z>/path>/svg>/a>/li>li data-aosfade-up data-aos-delay100>a hrefhttps://github.com/av target_blank>svg roleimg viewbox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>title>GitHub icon/title>path dM12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12>/path>/svg>/a>/li>li data-aosfade-up data-aos-delay150>a hrefhttps://codepen.io/iamfrontender target_blank>svg roleimg xmlnshttp://www.w3.org/2000/svg viewbox0 0 24 24>title>CodePen icon/title>path dM18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031c-.005.016-.01.031-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739c0-.028.002-.055.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12 0 18.627 5.373 24 12 24c6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z>/path>/svg> /a>/li>li data-aosfade-up data-aos-delay200>a hrefhttps://www.codewars.com/users/iamfrontender target_blank>svg roleimg xmlnshttp://www.w3.org/2000/svg viewbox0 0 24 24>title>Codewars icon/title>path dM.76 12.2l-.08-.04c-.18-.1-.32-.25-.42-.44-.14-.26-.2-.5-.2-.75l.02-.13c0-.2.05-.38.14-.55l.08-.15c.04-.08.1-.15.15-.22.06-.07.07-.16.05-.24l-.05-.16c-.06-.2-.1-.4-.1-.6L.32 8.8c0-.22.06-.44.2-.6l.1-.13c.07-.1.18-.16.3-.2.1-.03.17-.13.18-.25l.02-.34c0-.27.13-.52.33-.7l.24-.18c.05-.05.1-.1.14-.18.05-.06.06-.14.05-.2-.02-.1 0-.13.05-.14.16.06.26.04.33-.04l.13-.17.36-.4c.1-.1.14-.28.08-.42l-.12-.26c-.02-.06 0-.13.05-.15.13 0 .22.05.26.13l.04.07c.06.12.2.18.3.13.22-.08.4-.1.57-.1h.32c.22 0 .4-.15.44-.38.04-.28.14-.5.28-.65.15-.17.32-.3.52-.4.26-.14.42-.34.47-.6.07-.32.24-.55.47-.7l.76-.43.22-.13c.13-.08.25-.18.35-.3l.2-.24c.1-.1.2-.17.32-.2.1-.03.24-.05.36-.04l.4.03c.2 0 .36.05.52.12l.1.05c.1.04.2.02.25-.05L10 .7l.43-.45c.1-.1.22-.14.35-.12.13.02.26.07.38.13.18.1.33.14.5.14h.1c.22 0 .44.03.66.08l.15.04c.15.04.3-.02.4-.14.03-.05.1-.06.14-.02.03.02.04.04.05.07.02.2.14.35.3.4l.16.05c.17.05.32.16.42.3.1.15.22.3.36.4l.1.1c.1.1.24.14.38.13h.59c.24 0 .47.04.7.14.22.1.45.12.66.04.22-.07.45-.1.68-.07l.43.07c.2.02.4.12.52.27l.05.05c.1.1.2.23.3.37.06.13.2.2.34.2h.62c.15 0 .3.03.42.1.13.1.24.2.34.3l.1.13c.12.14.18.33.17.53 0 .16.12.3.28.3l.2.02c.14 0 .26.1.33.23l.1.2.26.58c.04.1.05.2.04.28 0 .1.03.18.1.22l.1.07c.13.1.2.25.18.42l-.07.47-.02.2c-.02.1.03.23.12.3.15.1.22.23.23.38v.2c0 .1-.02.22-.1.3-.06.08-.1.18-.1.3l.03.23c0 .16.1.3.2.4.14.1.22.26.24.42.04.25.05.45.05.65v.23c0 .08 0 .16.03.24.02.07.07.14.13.18l.2.15c.2.13.34.3.42.53.1.22.13.45.13.68v.08c0 .18-.02.37-.08.54-.05.18-.04.35.03.5.08.14.13.3.15.47.04.2.02.4-.05.56l-.02.07c-.05.12-.13.23-.23.32-.1.1-.2.16-.26.23-.06.06-.1.16-.07.25l.03.14c.05.2.05.4 0 .58v.08c-.04.15-.1.28-.16.4-.07.13-.17.23-.3.3l-.15.1c-.07.04-.12.13-.12.22 0 .1-.04.2-.1.26l-.15.2c-.1.13-.23.24-.37.3-.14.1-.26.2-.35.3-.1.12-.18.26-.22.4-.04.18-.18.28-.33.28h-.54c-.14 0-.27.1-.33.22-.07.16-.14.27-.23.37-.1.1-.16.22-.2.36-.02.12-.12.2-.22.16-.13-.06-.26 0-.32.1-.12.2-.24.35-.37.48l-.07.06c-.13.1-.3.18-.45.18-.18 0-.27.08-.3.2-.03.1-.05.23-.06.34-.02.12-.06.23-.1.33l-.05.06c-.1.15-.18.3-.28.43l-.04.06c-.13.17-.3.3-.5.35-.24.08-.45.1-.66.1h-.14c-.1 0-.2.06-.27.16l-.06.1-.06.12-.13.22c-.1.18-.25.3-.45.36-.2.05-.43.07-.64.06l-.16-.02c-.14 0-.27-.04-.4-.1-.1-.04-.24 0-.3.1-.1.14-.22.22-.35.26l-.3.1c-.2.05-.42.05-.63 0l-.16-.05c-.1 0-.2-.05-.28-.1-.1-.05-.2-.07-.3-.06l-.13.02c-.2.02-.38 0-.56-.05l-.27-.06c-.12-.04-.23-.12-.3-.23-.05-.1-.16-.18-.3-.2H9.9c-.2-.03-.38-.1-.5-.25L9 22.5l-.14-.12-.22-.16-.13-.1c-.15-.1-.33-.18-.52-.2l-.6-.1c-.06 0-.1-.02-.16-.03L7 21.74c-.1-.02-.2-.1-.27-.2-.06-.1-.17-.14-.27-.1-.2.08-.36.1-.52.13H5.8c-.26.02-.5-.02-.74-.13-.24-.1-.4-.25-.55-.44-.12-.17-.3-.3-.52-.34l-.28-.06c-.2-.04-.4-.12-.58-.24-.2-.14-.3-.27-.38-.43-.08-.15-.13-.32-.14-.5v-.08c-.02-.2-.16-.38-.35-.43-.23-.07-.4-.17-.55-.3-.14-.13-.22-.32-.22-.52l.02-.44c0-.17-.05-.32-.17-.43-.12-.12-.2-.27-.2-.43l-.03-.36c-.02-.26-.07-.52-.13-.78-.06-.23.03-.46.22-.57l.07-.05c.1-.07.14-.2.08-.32l-.08-.1c-.1-.1-.2-.17-.3-.2-.08-.02-.1-.1-.1-.15l.1-.12c.06-.07.05-.18 0-.24-.08-.08-.12-.18-.13-.28l-.02-.7c0-.14.02-.28.06-.42.04-.12 0-.26-.12-.32zm9.9-1.32c.07-.07.06-.2 0-.25-.1-.08-.17-.17-.23-.27l-.1-.16c-.07-.13-.16-.24-.26-.34l-.02-.02c-.1-.08-.17-.18-.23-.3-.05-.1-.05-.2 0-.3l.06-.1c.06-.1.1-.24.1-.36v-.04c0-.1-.04-.2-.1-.3-.04-.08-.08-.18-.1-.28V8.1c-.03-.12 0-.25.08-.35.08-.13.14-.25.17-.4v-.02c.04-.1.02-.23-.04-.33s-.08-.2-.04-.32l.07-.2c.06-.18.15-.34.27-.48l.14-.15.1-.12.06-.06c.06-.06.07-.16.02-.24-.05-.1-.08-.2-.06-.3l.02-.14c.03-.2.1-.4.23-.56l.04-.04c.15-.2.34-.33.56-.4l.27-.1c.12-.04.2-.17.2-.3 0-.16.05-.3.14-.43l.05-.05c.1-.17.22-.34.3-.52l.07-.13c.02-.03.03-.07.03-.1 0-.17-.1-.32-.26-.33L11.76 2c-.25-.02-.5 0-.74 0l-.85.1c-.13 0-.23.1-.24.24 0 .14-.1.26-.22.3l-.36.1-.1.03-.3.1c-.22.07-.4.23-.5.45l-.08.13c-.1.22-.27.4-.48.53-.2.13-.3.34-.32.58v.1c-.02.2-.08.4-.2.54l-.05.08c-.08.1-.1.23-.05.34.05.12.08.25.07.38v.53c0 .14-.1.26-.2.3-.14.05-.23.16-.27.3l-.05.2c-.04.2.03.4.2.52.16.12.26.3.3.52v.18c.03.2.14.4.32.5.18.12.32.3.4.5l.05.16c.08.22.26.35.46.37h.06c.18 0 .34.1.44.26.1.16.26.27.44.3l.28.08c.17.05.33.14.46.27l.02.02c.1.08.26.07.35-.04l.07-.08zm1.14-.92c.1.06.2.03.24-.06l.03-.05c.07-.14.16-.28.26-.4l.2-.3c.03 0 .04-.02.05-.04l.24-.32c.1-.1.22-.17.36-.17.13 0 .24-.07.3-.2.04-.14.1-.27.22-.38l.05-.06c.1-.1.2-.15.3-.2.13-.02.25-.04.37-.04h.3c.12 0 .22-.05.28-.15.06-.1.15-.17.25-.22l.1-.04c.16-.07.34-.12.52-.14l.2-.02c.12 0 .25 0 .37.07.1.07.23.06.33-.02l.07-.04c.15-.1.32-.18.5-.2h.02c.2-.04.38-.04.58-.03h.1c.2.03.37.1.5.25l.03.04c.1.1.26.18.4.18h.17c.05 0 .1-.02.13-.07.03-.03.08-.06.13-.06h.1c.14 0 .27.04.4.08l.17.07c.16.05.33.1.5.12h.12c.08 0 .13-.05.13-.12 0-.1-.02-.2-.07-.28L20.68 7c-.08-.13-.14-.27-.2-.4l-.02-.05c-.05-.1-.05-.2 0-.3V6.2c.02-.08-.02-.17-.1-.2L20.28 6c-.16-.05-.3-.14-.4-.27l-.1-.1c-.1-.1-.16-.25-.2-.4-.05-.13-.16-.23-.3-.23h-.42c-.15-.02-.28-.1-.37-.22l-.04-.05c-.07-.1-.13-.22-.17-.34-.05-.1-.16-.16-.26-.13l-.12.04c-.2.07-.4.1-.6.08l-.16-.02c-.17 0-.33-.07-.46-.17l-.1-.07c-.08-.06-.16-.1-.25-.14-.1-.04-.18-.02-.24.05l-.05.06c-.1.1-.24.18-.38.2l-.54.03c-.1 0-.2.05-.27.12-.08.07-.17.12-.27.14h-.02c-.1 0-.2.07-.3.14v.02c-.1.1-.23.15-.36.15l-.04.02c-.12 0-.24 0-.36.03h-.12c-.17.03-.3.17-.34.35l-.04.23c-.03.16-.1.3-.2.43-.1.12-.22.2-.37.2h-.15-.02c-.1.02-.2.13-.18.25.02.17 0 .32-.03.47l-.04.17c-.04.15-.14.27-.27.32l-.06.03h-.02c-.06.04-.1.13-.05.2.06.1.08.2.07.3l-.03.32c0 .12-.05.23-.1.33-.06.1-.06.2-.02.3l.1.22c.05.1.06.2.03.32-.03.1-.05.2-.04.3 0 .1.06.2.14.24l.02.02zm7.9 7.23c.1.1.25.14.37.06l.2-.13c.1-.07.18-.17.22-.3v-.02l.1-.3.06-.1.04-.1.04-.07c.04-.08.1-.14.2-.17l.04-.02c.08-.02.13-.1.13-.18 0-.1.05-.18.1-.25l.08-.07.2-.26v-.02c.06-.08.1-.17.12-.27.02-.1 0-.2-.04-.3l-.02-.04c-.04-.1-.06-.17-.07-.26l-.03-.28-.03-.3c0-.1.04-.2.1-.3.07-.08.12-.18.16-.28v-.04l.02-.02c.02-.1-.03-.2-.12-.2-.1-.05-.2-.13-.23-.25l-.03-.06c-.05-.18-.08-.36-.08-.54l.02-.5v-.03c0-.17-.14-.3-.3-.3h-.02c-.2 0-.36-.06-.5-.2l-.08-.1-.2-.23-.26-.3c-.1-.14-.2-.26-.33-.38-.1-.1-.25-.2-.4-.22l-.2-.03c-.1-.02-.23-.07-.34-.14-.08-.06-.2-.04-.28.04l-.13.14-.06.04c-.07.02-.14-.02-.17-.1-.04-.12-.04-.26.02-.38v-.06c0-.07-.06-.12-.12-.1h-.16c-.18 0-.36-.02-.53-.1l-.1-.04c-.1-.05-.22-.08-.33-.08-.1 0-.2.02-.3.08l-.04.03c-.12.08-.26.12-.4.13h-.33c-.15 0-.3.05-.4.13-.13.08-.27.13-.42.16l-.27.04c-.12.03-.25.08-.36.17-.1.1-.24.16-.37.2l-.05.02c-.16.05-.3.15-.4.3l-.12.12c-.07.1-.07.22 0 .32.06.1.18.13.3.1l.15-.06c.08-.03.17 0 .24.04.06.05.15.08.24.07l.25-.03c.14 0 .28 0 .42.04.15.05.28.1.4.2s.25.14.4.16c.15.02.3.05.44.1l.1.02c.1.03.18.1.24.2.05.08.1.2.1.3v.03c0 .12.1.2.2.2h.06c.16 0 .33.02.5.07l.07.03c.1.04.2.1.27.2.08.1.13.2.16.3l.03.14c.03.15.04.3.04.46v.05c0 .1.07.2.18.24.1.02.22.06.33.12l.05.02c.13.08.26.18.36.3l.05.07c.13.15.2.34.2.53v.07c0 .15-.03.3-.08.44-.04.12 0 .26.13.3l.07.05c.15.06.28.17.38.3.1.15.14.32.14.5v.3c-.02.1-.05.18-.1.25s-.05.17 0 .24l.06.1zm-6.4-5.12h-.02c-.04 0-.06.05-.05.1l.04.2c.04.16.06.32.08.48.02.16.1.3.22.4h.04c.15.12.24.3.25.48v.5c-.02.1 0 .2.06.28l.05.05c.1.12.14.26.15.4l.03.55c0 .13-.08.24-.2.26l-.1.02c-.07 0-.1.08-.1.15 0 .08.03.17.06.25v.02c.03.1.04.2.03.3l-.04.27c-.04.2-.1.38-.2.56l-.07.12c-.05.1-.12.16-.2.2-.1.04-.17.12-.2.22l-.08.36c-.05.2-.14.4-.26.6h-.02c-.12.16-.27.3-.45.4l-.12.08-.3.15c-.1.04-.16.13-.18.24l-.05.33c-.03.2-.1.37-.24.5l-.13.15-.15.15L11 21c-.12.14-.3.2-.5.17l-.36-.07-.33-.04h-.09c-.04.04-.05.1-.02.16.07.12.18.2.3.2l.22.04c.1 0 .22.05.32.1.1.07.2.12.32.15h.02c.13.05.27.06.4.05l.15-.02c.17-.02.33 0 .47.06l.12.04c.05.02.13 0 .18-.05.06-.06.12-.1.2-.13l.08-.02c.13-.04.26-.06.4-.06h.08c.12 0 .23.02.33.08l.04.02c.07.03.15 0 .2-.06.03-.07.1-.14.17-.2l.25-.17.16-.1.08-.05c.1-.07.24-.1.36-.1l.36-.03c.14-.02.26-.12.3-.26.04-.15.1-.3.2-.43s.2-.24.3-.34c.13-.1.26-.15.4-.16h.08c.16-.03.28-.18.27-.34v-.02V18.77c.02-.1.06-.23.12-.33l.2-.3.08-.1c.06-.05.1-.12.17-.2l.1-.13c.06-.1.06-.23-.02-.32-.1-.1-.15-.24-.17-.38v-.04c-.02-.16-.02-.33.03-.5v-.05c.05-.13.12-.26.2-.38.08-.1.07-.24-.03-.32l-.17-.15c-.14-.12-.22-.3-.24-.48l-.02-.2c0-.06 0-.13-.02-.2l-.02-.15c-.02-.17-.12-.3-.26-.4l-.07-.02c-.1-.06-.2-.15-.28-.27-.08-.1-.12-.24-.15-.38l-.03-.17c0-.06-.04-.1-.1-.13l-.16-.05-.32-.1c-.1-.02-.2-.1-.27-.17h-.02c-.06-.08-.16-.08-.22-.02l-.1.1c-.02.03-.04.04-.07.03-.06 0-.1-.05-.08-.1.02-.16-.04-.32-.17-.42l-.13-.1-.3-.2c-.08-.03-.2 0-.24.1l-.04.06c0 .02-.03.03-.04.04-.04 0-.1 0-.1-.05l-.03-.05c-.03-.06-.1-.1-.16-.12zm-1.2 1l-.05-.05c-.05-.04-.1-.03-.15.02-.07.12-.13.25-.16.38v.02c-.03.13-.15.22-.27.2h-.1-.02c-.14 0-.25.12-.25.26 0 .18-.06.36-.17.5l-.06.06c-.1.13-.25.22-.4.27l-.08.02c-.1.03-.18.1-.2.22 0 .1-.06.2-.14.28l-.1.08c-.12.13-.3.2-.48.22l-.5.05c-.16 0-.3.1-.4.25-.1.15-.25.25-.4.27l-.22.02c-.16.02-.33.02-.5-.02l-.1-.02-.27-.07c-.1-.03-.18 0-.24.07l-.1.13c-.13.15-.32.22-.5.2l-.65-.08c-.1 0-.18-.05-.27-.1-.1-.06-.17-.13-.24-.2l-.25-.3c-.03-.02-.08-.03-.13-.02l-.14.06-.56.14c-.1.03-.23 0-.33-.06-.1-.08-.22-.1-.34-.1H3.2c-.12.03-.2.16-.16.28l.04.2c.03.1.02.22-.03.32s-.04.2.03.3l.06.08c.08.12.2.22.3.32.1.1.2.2.28.33l.15.27c.08.14.2.22.36.22.15 0 .3.05.42.15l.3.28c.08.07.2.08.28.02l.05-.02c.06 0 .1.04.1.1v.05c0 .13.1.25.23.3l.45.1c.16.05.32.1.47.2h.08c.08 0 .15-.07.14-.16v-.35c0-.1.04-.2.12-.24l.05-.02c.05.02.1.06.08.1v.17c0 .13.04.25.13.34.1.1.23.12.34.08.12-.05.24-.06.37-.05l.37.02c.18.02.35 0 .5-.07.18-.06.33-.14.47-.25l.06-.04.3-.27c.1-.1.23-.15.35-.15h.4c.2-.02.38-.2.4-.4l.04-.2c0-.13.06-.25.15-.35.1-.1.2-.16.3-.2l.12-.05c.17-.07.3-.22.36-.4l.06-.24c.05-.2.15-.4.3-.53l.02-.02c.12-.1.14-.3.06-.44l-.03-.07c-.07-.1-.08-.25-.03-.38.05-.14.1-.26.18-.38l.1-.14c.04-.08.04-.2-.02-.27-.06-.08-.1-.18-.1-.28l-.02-.14v-.34c.02-.1 0-.23-.03-.33l-.04-.12zm-1.43-.76v-.03c0-.1-.06-.16-.14-.16h-.26c-.1.02-.2.02-.28 0h-.45c-.23 0-.45-.04-.67-.1l-.24-.06-.2-.06-.45-.15c-.24-.07-.42-.23-.53-.45l-.05-.1c-.07-.15-.22-.23-.37-.2-.17 0-.34 0-.5-.08l-.12-.05c-.23-.1-.4-.3-.4-.57l-.04-.27c-.03-.14-.12-.27-.24-.32-.14-.06-.27-.14-.4-.23l-.05-.03c-.15-.12-.28-.28-.35-.47l-.02-.06c-.05-.16-.06-.33-.02-.5l.02-.06c.04-.13.05-.26.05-.4 0-.12-.05-.24-.14-.33l-.14-.13c-.16-.13-.26-.32-.27-.53-.02-.22-.02-.43.02-.64V6.3v-.03c0-.12-.1-.2-.2-.2H4.2c-.13 0-.24.08-.3.2-.05.14-.13.25-.22.36l-.04.05-.2.2-.1.1c-.1.1-.16.25-.18.4-.02.15-.06.3-.12.44l-.02.05c-.05.12-.13.23-.23.3-.1.08-.17.2-.17.32l-.02.46c0 .2-.03.4-.1.6l-.02.08c-.05.13 0 .27.12.33l.42.18.04.02c.03 0 .04.02.05.05.03.04 0 .1-.03.1l-.1.05c-.06.02-.1.08-.12.15l-.02.1v.02l-.1.56c-.02.08-.02.17-.02.26 0 .08.05.15.12.18l.22.1c.1.06.22.13.3.2l.1.08c.03.04.08.08.12.1l.04.04c.07.06.12.14.14.23l.1.45c0 .12.1.22.2.25l.16.05s.03 0 .05.02l.2.06c.16.05.3.14.42.26.12.1.24.23.34.37l.04.04c.08.1.2.15.32.12s.25-.04.38-.04h.15c.1 0 .23.03.34.1.1.06.23.1.35.15h.03c.12.05.25.03.35-.04.1-.08.23-.12.36-.12l.47.03c.1 0 .2-.02.25-.1h.02l.17-.16.05-.05c.08-.1.2-.14.32-.15h.45c.12 0 .23-.1.28-.2.05-.1.15-.18.27-.2l.2-.04c.08 0 .15-.07.18-.16.03-.1.08-.18.15-.24l.16-.16c.1-.1.15-.2.17-.32z>/path>/svg>/a>/li>li data-aosfade-up data-aos-delay250>a hrefhttps://soundcloud.com/everlier target_blank>svg roleimg viewbox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>title>SoundCloud icon/title>path dM1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c0-.057-.045-.1-.09-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.165 1.308c0 .055.045.094.09.094s.089-.045.104-.104l.21-1.319-.21-1.334c0-.061-.044-.09-.09-.09m1.83-1.229c-.061 0-.12.045-.12.104l-.21 2.563.225 2.458c0 .06.045.12.119.12.061 0 .105-.061.121-.12l.254-2.474-.254-2.548c-.016-.06-.061-.12-.121-.12m.945-.089c-.075 0-.135.06-.15.135l-.193 2.64.21 2.544c.016.077.075.138.149.138.075 0 .135-.061.15-.15l.24-2.532-.24-2.623c0-.075-.06-.135-.135-.135l-.031-.017zm1.155.36c-.005-.09-.075-.149-.159-.149-.09 0-.158.06-.164.149l-.217 2.43.2 2.563c0 .09.075.157.159.157.074 0 .148-.068.148-.158l.227-2.563-.227-2.444.033.015zm.809-1.709c-.101 0-.18.09-.18.181l-.21 3.957.187 2.563c0 .09.08.164.18.164.094 0 .174-.09.18-.18l.209-2.563-.209-3.972c-.008-.104-.088-.18-.18-.18m.959-.914c-.105 0-.195.09-.203.194l-.18 4.872.165 2.548c0 .12.09.209.195.209.104 0 .194-.089.21-.209l.193-2.548-.192-4.856c-.016-.12-.105-.21-.21-.21m.989-.449c-.121 0-.211.089-.225.209l-.165 5.275.165 2.52c.014.119.104.225.225.225.119 0 .225-.105.225-.225l.195-2.52-.196-5.275c0-.12-.105-.225-.225-.225m1.245.045c0-.135-.105-.24-.24-.24-.119 0-.24.105-.24.24l-.149 5.441.149 2.503c.016.135.121.24.256.24s.24-.105.24-.24l.164-2.503-.164-5.456-.016.015zm.749-.134c-.135 0-.255.119-.255.254l-.15 5.322.15 2.473c0 .15.12.255.255.255s.255-.12.255-.27l.15-2.474-.165-5.307c0-.148-.12-.27-.271-.27m1.005.166c-.164 0-.284.135-.284.285l-.103 5.143.135 2.474c0 .149.119.277.284.277.149 0 .271-.12.284-.285l.121-2.443-.135-5.112c-.012-.164-.135-.285-.285-.285m1.184-.945c-.045-.029-.105-.044-.165-.044s-.119.015-.165.044c-.09.054-.149.15-.149.255v.061l-.104 6.048.115 2.449v.008c.008.06.03.135.074.18.058.061.142.104.234.104.08 0 .158-.044.209-.09.058-.06.091-.135.091-.225l.015-.24.117-2.203-.135-6.086c0-.104-.061-.193-.135-.239l-.002-.022zm1.006-.547c-.045-.045-.09-.061-.15-.061-.074 0-.149.016-.209.061-.075.061-.119.15-.119.24v.029l-.137 6.609.076 1.215.061 1.185c0 .164.148.314.328.314.181 0 .33-.15.33-.329l.15-2.414-.15-6.637c0-.12-.074-.221-.165-.277m8.934 3.777c-.405 0-.795.086-1.139.232-.24-2.654-2.46-4.736-5.188-4.736-.659 0-1.305.135-1.889.359-.225.09-.27.18-.285.359v9.368c.016.18.15.33.33.345h8.185C22.681 17.218 24 15.914 24 14.28s-1.319-2.952-2.938-2.952>/path>/svg>/a>/li>li data-aosfade-up data-aos-delay300>a hrefhttps://medium.com/@av.codes target_blank>svg roleimg viewbox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>title>Medium icon/title>path dM0 0v24h24V0H0zm19.938 5.686L18.651 6.92a.376.376 0 0 0-.143.362v9.067a.376.376 0 0 0 .143.361l1.257 1.234v.271h-6.322v-.27l1.302-1.265c.128-.128.128-.165.128-.36V8.99l-3.62 9.195h-.49L6.69 8.99v6.163a.85.85 0 0 0 .233.707l1.694 2.054v.271H3.815v-.27L5.51 15.86a.82.82 0 0 0 .218-.707V8.027a.624.624 0 0 0-.203-.527L4.019 5.686v-.27h4.674l3.613 7.923 3.176-7.924h4.456v.271z>/path>/svg>/a>/li>li data-aosfade-up data-aos-delay350>a hrefhttps://habr.com/users/everlier/ target_blank>svg roleimg xmlnshttp://www.w3.org/2000/svg viewbox0 0 24 24>title>Habr icon/title>path dM0 0v24h24V0zm7.025 4h1.633c1.219 0 1.64.029 1.668.113.019.066.028 1.369.028 2.897l-.008 2.783.476-.422c.657-.581 1.212-.787 2.262-.824.694-.019.973.009 1.46.178 1.06.356 1.81 1.087 2.204 2.166.15.421.17.863.197 4.285l.03 3.824h-3.338v-3.121c0-3.075-.01-3.113-.217-3.488-.29-.497-.609-.722-1.106-.778-.853-.093-1.443.197-1.78.89-.16.32-.179.656-.188 3.356-.01 1.65-.03 3.03-.03 3.067-.008.047-.75.074-1.65.074h-1.64v-7.5z>/path>/svg>/a>/li>li data-aosfade-up data-aos-delay400>a hrefmailto:av@av.codes target_blank>svg roleimg viewbox0 0 24 24 xmlnshttp://www.w3.org/2000/svg>title>Gmail icon/title>path dM24 4.5v15c0 .85-.65 1.5-1.5 1.5H21V7.387l-9 6.463-9-6.463V21H1.5C.649 21 0 20.35 0 19.5v-15c0-.425.162-.8.431-1.068C.7 3.16 1.076 3 1.5 3H2l10 7.25L22 3h.5c.425 0 .8.162 1.069.432.27.268.431.643.431 1.068z>/path>/svg>/a>/li>/ul>/section>link relstylesheet href/index.c1480b9c.css>section classbackground styleheight:5vh bg-whitebg-white>/section>section classsplitter stylewidth:100%;margin-top:-5vh;position:relative;overflow:hidden>section classbackground styleheight:10vh;margin-bottom:0 bg-whitebg-white>/section>section flex-row styleheight:10vh;margin-top:-2vh>div classcircle styleborder-radius:100rem;flex:1;height:30.346%;animation-name:rotating;animation-delay:-24.0581s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:34.6101%;animation-name:sliding;animation-delay:-5.32147s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:38.5141%;animation-name:rotating;animation-delay:-14.478s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:42.7875%;animation-name:sliding;animation-delay:-17.7796s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:48.4973%;animation-name:rotating;animation-delay:-22.9858s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:42.4105%;animation-name:stronger-shaking;animation-delay:-6.07498s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:37.9855%;animation-name:stronger-shaking;animation-delay:-4.33812s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:68.2318%;animation-name:sliding;animation-delay:-8.14234s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:71.4731%;animation-name:rotating;animation-delay:-7.94013s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:51.201%;animation-name:sliding;animation-delay:-2.90204s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:49.3599%;animation-name:sliding;animation-delay:-15.2743s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:69.0407%;animation-name:stronger-shaking;animation-delay:-4.76616s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:87.0838%;animation-name:shaking;animation-delay:-9.39185s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:51.6583%;animation-name:shaking;animation-delay:-8.79557s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:78.0215%;animation-name:stronger-shaking;animation-delay:-10.6837s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:91.5243%;animation-name:stronger-shaking;animation-delay:-11.8603s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:69.9558%;animation-name:shaking;animation-delay:-4.50498s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:89.4098%;animation-name:stronger-shaking;animation-delay:-17.0222s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:87.6256%;animation-name:rotating;animation-delay:-22.6398s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:67.0213%;animation-name:stronger-shaking;animation-delay:-16.1047s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:75.8852%;animation-name:shaking;animation-delay:-5.30699s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:82.3561%;animation-name:shaking;animation-delay:-20.5077s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:70.2099%;animation-name:stronger-shaking;animation-delay:-.315755s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:64.0835%;animation-name:shaking;animation-delay:-6.41019s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:71.5612%;animation-name:shaking;animation-delay:-12.0355s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:34.8475%;animation-name:stronger-shaking;animation-delay:-10.0975s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:35.4404%;animation-name:rotating;animation-delay:-13.7758s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:45.6222%;animation-name:shaking;animation-delay:-20.1816s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:29.5017%;animation-name:stronger-shaking;animation-delay:-6.00154s bg-whitebg-white>/div>div classcircle styleborder-radius:100rem;flex:1;height:31.5885%;animation-name:shaking;animation-delay:-11.0033s bg-whitebg-white>/div>/section>/section>section classfooter flex-row center padding bg-secondary color-inverse stylemargin-top:-15vh;padding-top:25vh;display:flex>span>Built by b>@av/b>,/span>span> /span>span classcurrent-year>2020/span>script>document.querySelector(.current-year).textContentnew Date().getFullYear();/script>/section>link relstylesheet href/index.001fa12c.css>script src/index.7563f800.js typemodule>/script>script async srchttps://www.googletagmanager.com/gtag/js?idG-8L4SD34B6G>/script>script>function a(){dataLayer.push(arguments)}window.dataLayerwindow.dataLayer||,a(js,new Date),a(config,UA-143258835-1);/script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]