A Nuxt 4 SPA with browser-based audio tools. The main feature is AudioCropper — a multitrack editor with canvas waveform rendering, clip splitting, track FX (effects per track), and project save/load as .mwtproj files.

Everything runs in the browser, projects can be saved and reopened from the UI, and production deploys through GitHub Actions to GitHub Pages.

Stack: Nuxt 4 (Vue 3), TypeScript, canvas rendering, Docker, GitHub Pages.

Try it: https://evgenykon.github.io/media-web-tools/ Source: https://github.com/evgenykon/media-web-tools

A single-page tool for converting LaTeX formulas to PNG right in the browser. No backend: rendering is done by MathJax 3 (SVG), after which the image is transferred to a <canvas> and saved as PNG.

Features: formula input with quick template buttons (fraction, root, sum, integral, Greek letters), text and background color pickers including a fully transparent background (alpha channel), font size setting, auto or fit-to-size image dimensions, live preview and one-click download, dark theme (Tailwind CSS).

The second page (plot.html) renders function graphs on Plotly.js with native LaTeX in the legend: the formula is parsed into a JS function by the @cortex-js/compute-engine engine, supports constant parameters (a=1, b=2, c=-3), automap Y toggle, legend/axis/grid styling, transparent background, and discontinuity splitting for \tan(x) and 1/x.

The third page (draw.html) is a drawing pad: pen, marker, soft brush and eraser tools, brush size and color settings, canvas size, undo and clear, transparent background, and PNG export at ×1–×4 scale.

Stack: MathJax 3, Plotly.js, compute-engine, Tailwind CSS, GitHub Pages.

Source: https://github.com/evgenykon/latex-2-png

LaTeX -> PNG

Try it: https://evgenykon.github.io/latex-2-png/index.html

Graph of a function

Try it: https://evgenykon.github.io/latex-2-png/plot.html

A browser-based escape map game (MapLibre + OpenFreeMap tiles) where the player must reach a shelter before a blast at a random epicenter.

The game uses geolocation, fetches roads and buildings from the Overpass API within a ~15 km radius, builds a road graph, and places a single shelter 1.5–2 km from the epicenter. Some cars can be driven (press E), locked cars can be hacked (hold E). Vehicles have fuel and physics (drift, off-road penalty). Refuel at fuel stations.

Controls: WASD — movement, Shift — run, mouse — camera rotation, E — interact (enter/exit car, start/cancel hack), M — cycle map modes (follow, overview, tactical). HUD shows countdown timer, scenario SMS, shelter compass, and fuel gauge.

At the moment of the explosion: if inside a shelter — win, otherwise — lose.

Stack: TypeScript, Vite 5, Vue 3 (Composition API), Pinia, MapLibre GL JS, Turf.js, Docker.

Play: https://evgenykon.github.io/escape-map-game/ Source: https://github.com/evgenykon/escape-map-game

Real-time sonification of ZTF(and LSST in future) alerts, designed for accessibility.

Each night, Observatory will discover hundreds of thousands of transient events. This app turns that stream into spatial audio: waveform encodes object type, pitch encodes redshift, volume encodes magnitude, and 3D panning encodes sky position.

Visually impaired scientists can classify events by ear. Sighted researchers can monitor the stream while reading or writing. Anyone can feel the rhythm of the transient sky.

18 object classes, 8 sound palettes, Web Audio API, Vue 3, Bun + KafkaJS. Docker + Hugging Face Spaces + GitHub Pages.

Try it: https://evgenykon.github.io/alert-data-to-sound-mapping/#/

Source: https://github.com/evgenykon/alert-data-to-sound-mapping

Nuclear Opposition — a personal manifesto against collective insanity. The site is dedicated to the nuclear threat: scenarios, weapons, survival information.

Try it live: evgenykon.github.io/nukeopp

About

Human history has approached a line beyond which history itself may cease to exist. The nuclear threat is not a ghost from Cold War textbooks — it is a reality that grows and mutates right now.

This project is an attempt to bring sobriety back to public discourse. We have created a force surpassing our collective reason and entrusted it to the ambitions of a few.

Nuclear weapons are the greatest existential challenge of our time. Let this project be our call to action: to learn, to remember, and to resist the destruction of our common home.

Source on GitHub | Live demo

I've released version 2 of my browser-based strategy game — Life (fork).

Try it live: evgenykon.github.io/life-game-fork

What is Life (fork)

Multiple races start on a 20×20 map with one base and an initial supply of meal, water, and material. Each cycle (1 sec) races expand by capturing adjacent cells, build factories on resource tiles, and attack each other. Last race standing wins. Despite the name, it has nothing to do with Conway's Game of Life — just a similar theme of cellular automata.

Cell types

• base — race's home. Losing the last one means extinction.
• resource — resource tiles: field (meal), forest (meal + material), rock (material), mineral (water + material), swamp (meal + water), snow (water), water (water), dirt and sand (empty).
• fabric — a factory built on a tile, harvests its resource every cycle.

Turn sequence

Each cycle: territory capture → attack → factory progress → new action selection (capture/attack/build) → resource harvest → upkeep (−2 meal, −1 water, −1 material) → deficit (lose a tile) → resource depletion → recovery.

Combat takes 5 cycles (−1 material/cycle). Attack priority: bases > factories > resource value. A surrounded tile is captured in 1 cycle (liberation).

Race strategy

Each race gets random weights for expansion / building / war (sum = 100%). Priorities are redistributed when resources run low. If a race is attacked, its war priority immediately increases by 20.

UI

Built with Effus UI — my own Tailwind Template for Vue.js available on npm.

What's new in v2

• Overhauled resource and depletion mechanics
• Adaptive race priority system
• Liberation mechanic (fast capture of surrounded tiles)
• Improved AI with deficit-driven factory placement
• Balance modal for tuning numeric constants

Source on GitHub | Live demo

I've launched a new pet project — an interactive Circle of Fifths web application for musicians and music learners.

Try it live: evgenykon.github.io/quinto-circle

Built with Nuxt 4, Vue 3 and TypeScript, the app visualizes the Circle of Fifths with real-time audio playback and harmonic analysis.

Features

• Key & tonality selection — major and minor keys with full harmonic analysis
• Scale & chord display — see notes, intervals, and chords for any key
• Chord progression patterns — built-in progressions for classical, pop, jazz, and more
• Instrument picker — switch between piano, guitar, and organ sounds
• Playback engine — chord or arpeggio style with tempo control and metronome
• Interactive visualization — click any key on the circle to hear and explore

Tech

• Framework: Nuxt 4 with Vue 3, TypeScript
• Audio: Web Audio API with Tone.js
• Styling: Custom CSS
• Deploy: GitHub Actions → GitHub Pages

Source on GitHub | Live demo

I've launched a new pet project — an interactive web application exploring the Three-Body Problem in celestial mechanics.

Try it live: evgenykon.github.io/three-body-problem

Built with Nuxt 4, Vue 3 and TypeScript, the app combines a real-time 2D physics engine with an educational guide covering 300+ years of research — from Newton's classical formulation (1687) to modern machine learning approaches.

Interactive Simulation

• Three numerical integrators: Euler, RK4, Velocity-Verlet
• Adjustable gravitational constant, time step, and softening parameter
• Collision detection, trajectory prediction, and trail visualization
• Body selection with position/velocity picking, zoom, and grid overlay
• Dark theme with custom CSS, no external UI framework

Periodic Orbits Catalog

10 precalculated orbit families (Figure-8, Butterfly I, Bumblebee, Moth I–III, Goggles, Dragonfly, Yarn, Yin-Yang I) generated offline with Velocity-Verlet at high precision and replayed at runtime for perfect stability.

Educational Content

9 in-depth pages covering Newton's Law, Euler's restricted solution, Lagrange points L1–L5, Poincaré chaos theory, Sundman's convergent series, numerical integration methods, homological classification, and ML-based orbit prediction.

Tech

• Framework: Nuxt 4 with Vue 3, TypeScript
• Physics: Custom 2D N-body engine
• Rendering: HTML5 Canvas
• Math: KaTeX for LaTeX equations
• i18n: Full English and Russian translations
• Containerization: Docker Compose
• Deploy: GitHub Actions → GitHub Pages

Source on GitHub | Live demo

I made the Game helper to Monopoly just for wonderful hang out with that game. Enjoy your holidays!

It's a very important theme for me. And very scary. Nuclear war.

I think about what can I do with all of that nightmare outside the window. And my option is to build a small project where I can say about my position.

I think I have to collect some facts about world nuclear weapons, targets, politics that can destroy everything. And do something with that, for example - some ideas how to resist it, how to protect yourself, save human lives.

How great it would be to unite against nuclear madness.

I've just started, so some pages of the site are still empty.

But please join however.

Learning marchine learning :) Its interesting, you know. Very. Look at this.

This is a prediction of Khabib vs Conor famous fight in Oct 2018. And of course this fight is in past, and I know this is not fair. But good for test Neuron Network. The neuron activation parameters takes from my own opinion, but I want to believe that it is possible to find that values from some specific analyst researches.

I have built the model based on Synaptic library for JS.

So. I am continue my researching of Machine Learning (and looking for good dataset). Want to prepare some valuable predictions to the next event (Chimaev - Diaz). I'm not sure but want to finish in time.

Welcome to new repo in my Github (link in this page's header).

Last week in my current job was definitely important for company future. And my personal responsibility was to find a way for comparing a lot of today popular frontend frameworks, and to make a choise for one.

First of all I looked at Vue ecosystem because our current FW is Vue2. We using it not for whole project but for new features only. So we merge it together with old legacy codebase.

And I think that newest Vue and vue-based frameworks is better way for my team. It should be easest entry threshold of all. It is one of 3 popular FW at present moment. And Vue-team had made last version (I mean Composition API) very close to React. So our new team members, which has already been experienced with React, get an easy and clear way to learn our codebase if it would base on Vue 3.

When we talk about expectations of new FW with my team, we have found some points. It would be nice if our new FW have: latest Vue version at the moment, large native component library with usable gallery and docs, flexible and adaptive UI and an access to SCSS variables to set up custom corporate styles.

I have founded about 10 different FW based on Vue, and have made clear setup of each one according to instructions. I can say, that not all of their setup actions has finished correcly. May be that was my fault, but I'm sure this is very important thing for opensource projects is that other guys (which do same research as me) will make same mistakes. Thats why you (fw vendors) need to reproduce your installation instructions after every release and should try to do it as easy as you can.

Here is list of my top 3 Vue frameworks that I've looked at:

• 1. Quasar: Best of the best. I've already known about that FW, and even have some repos with it (don't remember exactly how much). I'd found preinstalled Vue3, TS, Vite, Pinia, ESLint, Material UI, vue-router and own client for build operations. About 30 minutes for docs learning, repeat instructions and fix some problem with routing.
• 2. Core UI: Nice own component style. Problems with preinstalled prettier (found and errors immediately when I type some tags with CR line brakes). I had found a solution but there a couple of my time has been wasted. Also there is no preinstalled storage inside (but Jest+Cypress).
• 3. Element Plus (ready boilerplate repo). Beautifully designed gallery of components, no problems with setup. But I had some problems with styles tuning, and had found unexpectable component behaviour when doing a full-clickable 'card'.

  ^                 
  | Pinia store      ^
Q | Vue-router     C |                  E ^
U | Familiar UI    O | Vue-router       L |
A | SCSS Vars      R | SCSS Vars        E |
S | TS             E | TS               M |
A | ESLint           | ESLint           E | SCSS Vars
R | Jest           U | Jest+Cypress     N | TS
  | Vue3           I | Vue3             T | Vue3

Some fw I refused by reasons.

• Nuxt 3: what should I do with version based on Vue3? It is very scarce documentation, just concerning migraion from Vue2. No components, no popular boilerplates.
• Nuxt 2: just with Vue 2.
• Vuetify: vue version in repo right now: v2.6.7
• Gridsome: I love it but jamstack is not for our project. Sad. Other founded fw is:
• Element Plus + Nuxt (try to install EP to empty Nuxt project manually - failed)
• Vue Material (just beta right now)
• Nuxt 3 + BootstrapVue (manual too)

So, just want to say at least: that was an example of how developer(s) make choise for new tools. That tools will be together with team for few next years, and there are a lot of small but important things that influence to the choice.

I groupped some old repos to single project @webmusic and reanimated SoundMixer repository.

Want to realize web sound mixer with low latency while recording loops.

How? Don't know yet. But already make some UI.

WebAudio API is a point to my research.

I made a repo and a Github page of my new project: English Grammar Trainer.