Ruslan Karliuk

Frontend Developer

3years in Frontend

5repositories checked by code analysis

MiddleFrontend Developer

3roles confirmed by code

Overview

Frontend UI engineer (approx. early-career) focused on crafting static and interactive website front ends with strong visual styling and component composition. The strongest proven skill is UI and styling craftsmanship, evidenced by extensive handcrafted SCSS and responsive rules plus animations in fuuuh/src/app/globals.scss and Web_Studio/src/index.scss. There is limited evidence of advanced state-driven architecture, performance engineering, accessibility engineering, or automated testing in the public code.

Phone

Timeline

Front-end Developer · Middle

Freelance · Freelance

May 2023 to Present 3 Years 6 Months Partially remote

Delivered front-end features for web applications, including design adjustments and interactive functionality. Focused on responsive layouts, accessibility, and performance improvements. Applied modern web standards while implementing UI enhancements.

Middle Front-end Developer / Shopify · Middle

DogyMart · Full-Time

Aug 2024 to Jul 2025 11 Months Partially remote

Developed and maintained an e-commerce website independently, including business logic and store configuration. Built and customized Shopify themes using Liquid, focusing on responsive UI for desktop and mobile. Integrated third-party apps/services and configured checkout payment methods and product pages.

Junior React Developer · Junior

MaryBallet · Full-Time

Jun 2023 to Oct 2024 1 Year 4 Months Partially remote

Refactored and expanded a platform for ballet class scheduling and information. Worked on performance improvements and enhanced the reservation flow and user experience. Implemented responsive functionality to improve presentation of data and support real-time updates.

React.js

Technical skills

Languages

TypeScript

Node JS

JavaScript

Frontend

React.js

Next.js

Sass

Tailwind CSS

Redux

Redux Toolkit

React Router

Material UI

Other

GitHub

Git

Axios

Framer Motion

Rest API

Figma

Vercel

PostCSS

Dotenv

GraphQL

autoprefixer

Middle Frontend Developer Confidence: Medium UI Engineer

UI Component Architecture

3/10

How interface parts are built

Component composition is basic and conventional: multiple small React components are composed in App.js with lightweight TypeScript interfaces, but there is no evidence of a bespoke design system, advanced composition patterns, or isolation strategies beyond simple props and folder structure.

Evidence

ArchiWeb/src/App.js: component composition (Header, Hero, Services, About, Projects, Testimonial, Footer)

fuuuh/src/app/types.ts: typed interfaces MenuTypes and BarTypes defining component data shapes

Web_Studio/src/types/types.ts: domain interfaces ICoopItem, ITitle, ICoin

Responsive & Cross-browser

4/10

Works on all screens and browsers

Responsive behavior is handled via CSS and media queries across multiple stylesheets and meta viewport is present; however there is no advanced layout strategy like container queries or explicit RTL/i18n scaffolding.

Evidence

fuuuh/src/app/globals.scss: multiple @media queries for responsive paddings and font sizes

Web_Studio/src/index.scss: responsive hero and container rules plus animations with viewport-aware breakpoints

Web_Studio/public/index.html: meta viewport tag for mobile scaling

Performance Optimization

1/10

Speed of the interface

No measurable performance work or optimization artifacts are present; build configs are default and there is no evidence of code-splitting strategy, bundle analysis, lazy-loading strategies, or virtualization for large lists.

Evidence

fuuuh/next.config.js: empty/default configuration with no performance tuning

fuuuh/package.json: Next.js present but no custom build/perf scripts or analyzer tooling

Accessibility & Semantics

2/10

Usable for everyone

Accessibility practices are minimal and in places counterproductive (for example focus outlines are removed); there is some correct use of language and viewport metadata but no ARIA or keyboard/focus management for custom widgets.

Evidence

fuuuh/src/app/globals.scss: '*:focus-visible { outline: none !important; }' which removes browser focus indicators

Web_Studio/public/index.html: html lang attribute set to 'ru' (language specified)

State Management & Data Flow

3/10

Managing data in the app

Basic client state management is implemented with Redux Toolkit and multiple slices, showing familiarity with common patterns, but there is no evidence of advanced server-state discipline, optimistic updates, request cancellation, or state machines for complex flows.

Evidence

Web_Studio/src/store/store.ts: configureStore with multiple reducers wired (user, menu, popup, email, loginOrRegister, openMenu)

Web_Studio/src/store/loginOrRegister.ts: createSlice usage with typed initialState and exported actions

UX & Visual Polish

4/10

Look and feel quality

Visual polish and interaction detail are strong for static UI - many animations, theme variants (light/dark), and hover/active states are implemented, but edge UX like loading/error/empty states, skeletons, or undo flows are not visible.

Evidence

fuuuh/src/app/globals.scss: animations (floating, bar-animation), light/dark theme rules and hover/active transformations

Web_Studio/src/index.scss: hero background animation (moveBg), button animation (btnLight), and active/hover styles

Expertise

React· Middle

Modern Web Frameworks· Middle

HTML & CSS· Middle

Technologies

JavaScript

TypeScript· since 2023 · Middle

Redux

Tailwind CSS

Next.js

Vercel

Figma

Git· since 2005

React.js· since 2023

Material UI

Sass

PostCSS

Framer Motion

Redux Toolkit

React Router

autoprefixer

GitHub· since 2008

Recommendations

Build marketing landing pages and small single-page applications where visual polish and animations are primary requirements.
Implement and maintain component-driven UI libraries or style systems, converting repeated SCSS patterns into reusable components and tokens.
Work on mid-size React apps that need simple global state via Redux Toolkit and straightforward routing, while pairing with a more senior engineer for async data flows and performance work.
Improve accessibility and add automated tests and basic performance audits (Lighthouse) as part of feature work to raise overall engineering maturity.

Repositories

The developer's experience in this domain has been verified based on AI analysis of the following repositories:

fuuuh Web_Studio ArchiWeb

Junior Backend Developer Confidence: Medium Generalist

Frontend web developer (Junior) specializing in React and Next.js user interfaces. The strongest proven skill is building typed client-side UI and utility code as shown in fuuuh/src/app/types.ts and weather-next/src/app/constants/index.ts. There is little to no evidence of backend systems, database engineering, production API design, or observability in the public code.

API Design

2/10

How well APIs are designed

Very limited API design evidence; only client-side API consumption patterns are present without versioning, idempotency, or consistent error contracts.

Evidence

weather-next/src/app/api/index.ts: imports axios and dotenv indicating client-side API calls

weather-next/package.json: axios dependency used for HTTP requests

Data Layer & Database

1/10

Working with databases

Almost no data-layer engineering visible; no migrations, transaction handling, or tuned queries; only a firebase dependency hints at remote data usage.

Evidence

ArchiWeb/package.json: includes 'firebase' dependency

fuuuh/package.json: project manifests show no database or migration tooling

Scalability & Performance

2/10

Handling load and speed

Minor performance/scalability artifacts limited to PWA/service-worker caching; no evidence of measured optimizations, queue-based decoupling, or load-testing.

Evidence

weather-next/package.json: includes @ducanh2912/next-pwa dependency

weather-next/public/sw.js: service worker registering NetworkFirst/NetworkOnly caching strategies

System Architecture

2/10

Overall system structure

Simple monolithic frontend project structures (Next.js and Create-React-App); no deliberate multi-service decomposition, config/secret orchestration, or cross-service contracts.

Evidence

fuuuh/package.json and weather-next/package.json: Next.js app scripts and simple config

ArchiWeb/src/App.js: single-page React composition without service boundaries

Security & Auth

1/10

Protecting data and access

Minimal security engineering visible; dotenv usage and a firebase dependency are present but there is no evidence of token lifecycle, input validation at boundaries, or secrets hygiene practices.

Evidence

weather-next/package.json: includes dotenv for environment config

ArchiWeb/package.json: includes firebase which may imply cloud auth/backend usage but no token handling code shown

Reliability & Observability

2/10

Stability and monitoring

Basic reliability work limited to client-side caching and service-worker fallbacks; no evidence of retries with backoff, structured logging, metrics, or graceful shutdown patterns for servers.

Evidence

weather-next/public/sw.js: registers caching routes and uses workbox strategies for fallback behavior

weather-next/public/workbox-7144475a.js: workbox routing/strategies present (vendor-provided reliability primitives)

Expertise

Node.js· Junior

Technologies

Node JS· Middle

Rest API

GraphQL

Axios

Dotenv

Recommendations

Develop client-side TypeScript React components, UI libraries and small Next.js features.
Implement and maintain PWAs and client-side caching strategies (service worker work and next-pwa integration).
Integrate frontend code with simple HTTP APIs and help build lightweight Node.js endpoints for data consumption.
Polish secure handling of env secrets and add explicit client-side input validation when calling APIs.

Repositories

The developer's experience in this domain has been verified based on AI analysis of the following repositories:

fuuuh ArchiWeb weather-next

Junior Game Developer Confidence: Medium Generalist

Frontend developer (junior level) focused on TypeScript and React state management. The strongest proven skill is building type-safe Redux state slices and wiring a store for a React app, as shown by Web_Studio/src/store/loginOrRegister.ts and Web_Studio/src/store/store.ts. There is no evidence of game-engine work, rendering, physics, netcode or performance engineering in the public human-authored code.

Gameplay Systems & Mechanics

How game logic works

Not evidenced in public code

Graphics & Rendering

Drawing game visuals

Not evidenced in public code

Physics & Math

Game physics and math

Not evidenced in public code

Engine Proficiency

Skill with the game engine

Not evidenced in public code

Performance & Frame Budget

Keeping the game smooth

Not evidenced in public code

Content Pipeline & Tooling

Tools for game content

Not evidenced in public code

Recommendations

Implement UI features and component-driven pages using TypeScript and React with Redux for state management.
Build and maintain small-to-medium web application features such as authentication flows, forms, and dashboard pages.
Help stabilize and type-safeguard frontend codebases by converting loose JS patterns to typed interfaces and clean Redux slices.

Repositories

The developer's experience in this domain has been verified based on AI analysis of the following repositories:

fuuuh Web_Studio BlazerXXI

Job preferences

Work permits: Czech Republic
Employment type: Full-Time

Open to AI agents: they read this profile and start a dialog through Alionalion.io/@ruslan-karliuk/mcp