Tomsk, Russia · open to relocation

Dmitrii SkopintsevFrontend Developer

Selected projects

No permission to share screenshots — happy to walk through the details in an interview

Module structure
  • Survey/
  • surveys-page · survey-page · survey-summary-card
  • survey-question-page · survey-question-breadcrumbs
  • survey-dialog · question-actions · survey-layout
  • survey-question.logic.ts
  • controls/
  • RadioQuestionControl
  • TextQuestionControl
  • RangeQuestionControl
  • DistributionQuestionControl
  • SurveyApi/
  • api.ts — RTK Query: surveys, question, save, autosave
  • api-mocks.ts — MSW handlers
  • fingerprint.ts · types.ts

Grant program personal account: surveys module

Closed personal account of a grant program. Participants take multi-step expert surveys; answers are saved as they go.

My role: Built the surveys module from scratch inside the team’s React app: pages, question controls, API layer and mocks; plus dashboard and events fixes.

  • React
  • TypeScript
  • MUI
  • RTK Query
  • TanStack Router
  • MSW
  • FingerprintJS
  • Four question types as reusable controls: single choice, text, range slider with tooltips, and points distribution with a live “points left” counter
  • Survey list, survey page with summary cards, question page with breadcrumbs, step navigation and a dialog — logic kept in a separate survey-question.logic.ts
  • RTK Query API (createApi) with question save and autosave; MSW mocks for every endpoint so the UI was built before the backend
  • Anonymous access with a browser fingerprint (FingerprintJS, lazy-loaded, UUID fallback); copy and paste disabled in answers
  • Dashboard: social links card, events navigation tabs
Center: hero slider
Center: hero slider
Center: interactive 404
Center: interactive 404
Center: activities and glass CTA
Center: activities and glass CTA
Program: hero with partners
Program: hero with partners
Program: modules accordion
Program: modules accordion
Center: blog with category tabs
Center: blog with category tabs

Technological Leadership Center

Corporate website of the Center and a landing for its international educational program in the bioeconomy.

My role: Built both sites from scratch: pixel-perfect markup from Figma, responsive layout from mobile to wide screens, all animations and interactive pages.

  • Figma
  • GSAP
  • ScrollTrigger
  • SplitText
  • Lenis
  • Swiper
  • HTMX
  • Glassmorphism UI, full-screen hero slider, scroll-driven and text reveal animations (GSAP, ScrollTrigger, SplitText)
  • Interactive 404: a light follows the cursor across 592 pure-CSS glass tiles at a stable 60 fps
  • Program landing: smooth scrolling (Lenis), modules accordion, participant path timeline
  • Blog with category tabs, projects, site search
Home: ticket search and station widget
Home: ticket search and station widget
Stations map with routes and filter
Stations map with routes and filter
Tourism map with place cards
Tourism map with place cards
Ticket search with filters
Ticket search with filters
Fare calculator
Fare calculator

MTPPK website modernization

Website of a commuter rail company (Russian Railways group): ticket search, station and tourism maps, passenger and B2B accounts, online shop.

My role: Joined an ongoing project and brought it to the public release: finished and reworked modules after colleagues, added new features, fixed mobile layouts.

  • Pug
  • SCSS
  • JavaScript
  • Mapbox GL
  • pdf.js
  • htmx
  • Webpack
  • Stations map: new place cards, station and route dialogs, map language switching, mobile layout
  • Ticket search: new search features, station picker widget and home page block, date picker fixes
  • Passenger account: profile, support requests log with replies and attachments, email change
  • PDF viewer on pdf.js with a worker fix for production, new table types with a mobile accordion and fullscreen mode, Excel download
  • Language switcher for desktop and mobile, high-contrast logos, fixes on stations, news, organization and 404 pages

No permission to share screenshots — happy to walk through the details in an interview

Module structure
  • api/
  • axiosInstance.ts
  • methods/ admin · adminInterests · adminUserProfile
  • documents · image
  • store/ authSlice.ts — Redux Toolkit
  • ProtectedRoute.tsx · routes.tsx
  • pages/
  • Login · Home · Profile · AdminTools
  • Files · UploadDocument · DownloadDocument
  • UpdateDocumentDescription · Images · NotFound
  • components/
  • TelegramAuth · Sidebar · Header
  • ImageUpload · ImagesList · AdminUserProfile
  • ui/ — shadcn: dialog, sheet, sidebar, tooltip…

Admin panel for an AI assistant

Internal admin panel for a Telegram AI assistant: managing users and their profiles, interests, documents and images the assistant works with.

My role: Created the project from scratch and built the whole admin panel: architecture, auth, API layer and pages.

  • React
  • TypeScript
  • Vite
  • Redux Toolkit
  • React Router
  • Axios
  • Tailwind
  • shadcn/ui
  • Vite + React + TypeScript project setup with ESLint, Prettier and a shadcn/ui component kit on Tailwind
  • Telegram login, JWT decoding, auth state in a Redux Toolkit slice, protected routes on React Router
  • Typed API layer: one Axios instance and 20+ method modules — users, admin role, user messages, interests, profiles, documents, images
  • Pages: documents upload, download and descriptions, image gallery with upload, user profile, admin tools, 404
  • Responsive layout with a collapsible sidebar and mobile sheet menu
Home page
Home page
Accessibility toolbar: text, contrast, reading aloud
Accessibility toolbar: text, contrast, reading aloud
Values cards on the home page
Values cards on the home page
Accessible environment page
Accessible environment page
Inclusion block and banners slider
Inclusion block and banners slider

Russian State University of Social Technologies

Website of a university focused on inclusive education, built to be usable by people with different needs: low vision, keyboard and screen reader users, people with disabilities.

My role: Main frontend developer from the first commit: design system, most pages and modules, and the accessibility work — about 190 of 240 commits.

  • Pug
  • SCSS
  • JavaScript
  • GSAP
  • Lenis
  • Swiper
  • focus-trap
  • htmx
  • Keyboard navigation everywhere, visually hidden headings for screen readers, accessible menu, dialogs, pagination and footer with focus trapping
  • Integrated the accessibility toolbar with a custom button: text size, fonts, contrast themes, cursor size, page reading aloud
  • Diversity and inclusion pages, inclusive video slider, stacking cards, parallax and footer animations (GSAP, Lenis)
  • Dozens of pages: university, education, postgraduate studies, library, news, dormitory, branches; language switch, cookies, production zip build
Main banner with video
Main banner with video
Development portfolio block
Development portfolio block
Documents and licenses section
Documents and licenses section
Media portal home
Media portal home
Media portal: events and projects
Media portal: events and projects

Tomsk NRMC website and media portal

Website of the Tomsk National Research Medical Center and its media portal with news, events and projects.

My role: Frontend developer in a team of two: my own blocks and sections on the main site, then refinements and new features on the media portal.

  • Pug
  • SCSS
  • JavaScript
  • GSAP
  • Swiper
  • htmx
  • Site search: search popup, results page and empty-state card
  • Development portfolio block: Expand animation, sticky image, slider that starts only when visible
  • Documents and licenses section: orders, licenses and forms pages, tabs and document cards
  • Video on the main banner, congratulation and application forms, accessible dialogs
  • Media portal: partner cards slider, cookies banner, burger menu, multi-tag news cards, client edits, event detail page
Chatbot on the home page
Chatbot on the home page
Dialog with answer options
Dialog with answer options
Applicant website home page
Applicant website home page

Tyumen State Medical University: admissions chatbot

Admissions website of a medical university with a chatbot that instantly answers applicants’ questions about programs, fees, deadlines and dormitories.

My role: Built the React chatbot widget for applicants on top of a stub from the team lead; later added popups and blocks to the site. The rest of the site was made by colleagues.

  • React
  • JavaScript
  • SCSS
  • Axios
  • Webpack
  • Chatbot in React: step-by-step dialog with answer options, message animations, custom scrollbar and loader
  • Mock API for development so the widget worked before the backend was ready
  • Popups with application and feedback forms, tags for new programs, minimum scores and contacts blocks
  • Layout fixes for the career trajectories designer
Home page
Home page
Study programs with tabs and search
Study programs with tabs and search
Student life carousel
Student life carousel
Animated statistics
Animated statistics

VolgSMU Applicant Portal

Admissions website of a medical university: everything an applicant needs in one place.

My role: My project from start to release; to speed things up I handed a few blocks to colleagues.

  • HTML
  • SCSS
  • JavaScript
  • Swiper
  • Accessibility
  • Mobile-first, accessible markup with a pixel-perfect implementation of the design
  • Study programs catalog with level tabs and search
  • Student life carousel and animated statistics
Home page with program search
Home page with program search
Programs catalog with filters
Programs catalog with filters
Program page
Program page
“Why us” block
“Why us” block

Continuing education portal of Sholom-Aleichem Priamursky University

Portal of continuing and professional education programs: catalog with filters, program pages, enrollment and a personal account for students and organizations.

My role: The only frontend developer: adapted the company’s education platform template for the university and built its pages and personal account screens.

  • HTML
  • SCSS
  • JavaScript
  • GSAP
  • IMask
  • UI kit, home page with program search, catalog with filters, program promo pages with anchor navigation and a floating button
  • Personal account screens for individuals and organizations: profile with validation, orders, tests, video course, course completion dialog
  • Payment success and failure pages with status dialogs, review and feedback modals, 404 page
  • Video embeds from Rutube and VK Video, extended accordion, responsive layout
Profession picker “terminal”
Profession picker “terminal”
Professions update as sliders move
Professions update as sliders move
Main site: organizational structure
Main site: organizational structure
Main site: contacts with a styled map
Main site: contacts with a styled map
Applicant website home page
Applicant website home page

MIET: applicant website and main site

Applicant and main websites of a tech university. The profession picker is a retro “terminal”: applicants move sliders by interests and get matching engineering professions.

My role: On the applicant website I built the interactive profession picker from scratch; on the main site I made the first versions of the organizational structure and contacts pages. The rest was made by colleagues.

  • Pug
  • SCSS
  • JavaScript
  • Impetus
  • Typewriter
  • Five draggable sliders with inertia (Impetus); indicator lamps light up smoothly as you choose
  • Professions list is requested from the API with a debounce and typed out on the screen (Typewriter effect)
  • Responsive from 375 px to wide screens, tooltips on the profession detail page, popup with an embed example
  • Main site: organizational structure with nested accordions, contacts page with tabs and a custom-styled map
Main banner with round covers
Main banner with round covers
Quick links and virtual reception card
Quick links and virtual reception card
Parallax block following the cursor
Parallax block following the cursor

Chelyabinsk State University

Main website of a classical university with a rich, animated home page.

My role: Assembled the home page and built several of its blocks; the rest of the site was made by colleagues.

  • Pug
  • SCSS
  • JavaScript
  • GSAP
  • ScrollTrigger
  • Swiper
  • “ChelSU is people” parallax block: photos drift after the cursor
  • Main banner improvements, quick links slider, video card of the virtual reception
  • ExpandMap component, ScrollTrigger callbacks and trigger cleanup, image hover scaling
  • Reviews and social blocks for the English version, feedback form dialog in the page header

Experience

  1. Frontend Developer · Paraweb

    Apr 2024 — Present

    • Build components and modules for the company's reusable module library on Astro, React 19, TypeScript and SCSS Modules
    • Server, client and hybrid components to keep page JavaScript under control; Storybook with Vitest and Playwright as docs and test environment
    • Web apps, admin panels and website builders with React 18 and Next.js; Redux Toolkit, RTK Query, MobX, React Hook Form + Zod
    • Smaller React work: field validation and a quests component in a personal account, Metric card and Scale module for an analytics dashboard
    • Contributed to a React Native app; code reviews and mentoring junior developers

Skills

Core

  • TypeScript
  • JavaScript
  • React
  • Next.js
  • Astro
  • HTML
  • CSS / SCSS

State & data

  • Redux Toolkit
  • RTK Query
  • MobX
  • React Hook Form
  • Zod

Motion & 3D

  • GSAP
  • ScrollTrigger
  • Three.js
  • react-three-fiber

Tooling

  • Vite
  • Webpack
  • Storybook
  • Vitest
  • Playwright
  • Git
  • Figma

Let's work together

Open to frontend roles — remote, hybrid or with relocation. The fastest way to reach me is Telegram.