Transforming designs into accessible, performant web experiences —
with thoughtful animations and attention to every step of the user journey.
📍 Gland, Vaud, Switzerland 🇨🇭 · English · French · Russian
Proficiency levels: Production (built real projects) · Working (used, solid understanding) · Learning (actively studying) · Familiar (hands-on exposure)
- Production: React (Hooks, Context), React Router, Next.js (App Router, SSR/SSG), Astro (Islands), TypeScript / JavaScript (ES6+), HTML5/CSS3 (Grid, Flexbox) — across SPA, SSR/SSG, MPA & static architectures
- Working: Zustand, Context API, Zod, Vite, Webpack · Learning: TanStack Query, Feature-Sliced Design (FSD), Redux Toolkit
- Core styling: Sass/SCSS, BEM, Tailwind CSS, Styled Components, responsive / mobile-first · SVG masks & custom shapes, Defensive CSS, View Transition API
- Motion UI: GPU-accelerated animations (transform/opacity only), scroll-driven & entrance animations, GSAP (ScrollTrigger, timelines), tactile micro-interactions,
prefers-reduced-motion— always - Design implementation: Figma-to-code, design system development, motion design (user journey analysis), WCAG AA accessibility
- Production: CMS-ready markup (semantic HTML, content-editable zones) · Working: REST API integration
- Learning: Headless CMS (Sanity, Payload) · Familiar: progressive enhancement, PHP & jQuery (legacy)
- Testing: Vitest/Jest, React Testing Library, Playwright (e2e + visual regression), BackstopJS, a11y audits, multi-stage linting
- Performance & deployment: Lighthouse / PageSpeed up to 100, Core Web Vitals, Critical CSS, WebP pipelines, bundle optimization · GitHub Pages/Actions, Netlify, Vercel, npm publishing
| Project | Stack | Demo | Highlights |
|---|---|---|---|
| Spreent Academy | Astro · TypeScript (strict) · SCSS/BEM · Vitest · Playwright | Live → | PageSpeed 100 · 100 · 100 · 100 · 18 motion effects + Motion catalog · magnetic CTA · paint-fill logo · shimmer that fires only when the user hesitates · prefers-reduced-motion throughout |
| optikit | TypeScript (strict) · Node · Zod · Vitest | npm → | CLI to optimize web assets (images, video, SVG, favicons, transparency trim) · 4 engines behind one type-safe Tool<Job> contract · Strategy (extensible) · Zod-validated boundaries · tested core |
| Memory Game | React · React Router · Webpack · i18next | Play → | PageSpeed 100 · 100 · 100 · 100 · i18n EN/FR/RU · 3D card flip (rotateY + preserve-3d, GPU-only) · WCAG AA + prefers-reduced-motion · 115 KB gzipped, hand-split Webpack chunks |
Additional Projects & Work in Progress
| Project | Stack | Demo | Highlights |
|---|---|---|---|
| Internship Landing | Vite · Vanilla JS · SCSS · Swiper.js | Live → | Pixel-perfect educational program landing · 4 Swiper configs · SVG mask shapes · sliding-window pagination · dynamic tabs |
Next.js • TypeScript • Tailwind CSS • Payload
Will include a Lab / Experiments section — a curated gallery of interactive animation & micro-interaction demos (motion craft showcase).
Status: 🟡 In Development (Launch: Q3 2026)
Creative Agency Landing Vite • Vanilla JS • GSAP • SCSS Animated landing page for a creative agency — scroll-driven animations, motion design, immersive UI. Private repository.
UGC Creator Portfolio Next.js • TypeScript • Tailwind • Sanity Freelance project — portfolio and landing page for a content creator client, with editable content via Sanity (headless CMS).
Print & Photo Store Next.js • TypeScript • Supabase • Stripe E-commerce project — online store for framed prints and photography. Full-stack build: Supabase auth & database, custom admin dashboard (product CRUD, orders), cart, checkout & Stripe payments.
Mysterious Vacation — Advanced Animation Project Vanilla JS • CSS • SVG • Canvas • Three.js Fullscreen scroll-controlled experience with locked transitions, 13 choreographed sequences: spring-physics list reveals, stagger chains, wheel-roll pagination, SVG path drawing & SMIL illustrations, Canvas low-level drawing, Three.js 3D scene with camera rig, cursor-reactive viewport, Post-Processing effects.
"Great interfaces are not just built — they're felt"
- User-centered & accessible — every decision starts from the person using it; WCAG from day one, never a final phase
- Performance-first — beautiful designs that stay fast
- Clean code — maintainable and documented for whoever comes next: SOLID, DRY & KISS
- Adaptable — modern React, static sites, or legacy codebases
- Web Studio Internship (Oct 2025 – present) — UI development across production client projects (promo site, travel companion platform, online course aggregator, and more):
- Design implementation — pixel-perfect build of Figma layouts across breakpoints
- Reusable UI components — accessible modals (focus trap, scroll-lock), custom selects, forms with inline validation, tabs, accordions, mega menu, pagination, tooltips, Swiper carousels — built with a consistent architecture in each client project
- Complex UI logic — multi-criteria filters, searchable tables with tooltips, sorting, robust pagination, responsive data cards
- Motion & transitions — GSAP animation sequences, View Transitions API, fine-tuned easing & timing, tactile micro-interactions built as reusable SCSS mixins (press/release button states)
- Performance — Lighthouse-audited optimizations: WebP/srcset image pipelines (incl. my own optikit CLI), lazy loading, code-splitting, critical CSS, font loading
- Project scaffolding — Vite + Handlebars partials + SCSS architecture with multi-stage linting and pre-commit enforcement (Husky), enabling parallel team development
- UX & accessibility — audit-driven improvements: checkout simplified to 3 steps — read → select → continue (radio buttons over tab navigation); range sliders replaced with text inputs / range checkboxes for precise, accessible entry; WCAG AA fixes — keyboard navigation, focus management, ARIA labels
- Client collaboration & QA — presented finished solutions to clients; cross-browser & cross-device testing, fluid/responsive layouts (320–1920 px)
- MSc in Information and Computer Science — Saint Petersburg State University of Aerospace Instrumentation (SUAI), 2009
- HTML Academy (Completed) — Adaptive Layout, Web Interfaces, Automation & Tooling, JavaScript, React
- Codecademy Front-End Engineer Path (Completed) — React, Redux, Testing, Deployment
- Whimsical Animations (In Progress) — Josh W. Comeau — motion design, spring physics, delightful UI
- Animations on the Web (Upcoming) — Emil Kowalski (animations.dev) — animation principles, Motion (Framer Motion), interruptible animations, performance & taste-driven product motion
Current Focus (2026):
- Advanced React architecture & design patterns
- Protocols & networking (HTTP/HTTPS, WebSocket fundamentals)
- Web security (OWASP Top 10, CSP, auth flows)
- UI Engineering — Canvas, WebGL, Three.js
Goal: Frontend developer role in Switzerland / EU · available from October 2026
- Frontend roles with strong design implementation & motion design focus — studios and agencies building bespoke, design-led sites, or product teams where UI quality, accessibility & performance matter
- Teams with mentorship and growth potential
Let's build something thoughtful, accessible and delightful together.