Skip to content
View OlgaGulyakevich's full-sized avatar
🎯
Focusing
🎯
Focusing
  • Switzerland
  • 22:04 (UTC +02:00)

Block or report OlgaGulyakevich

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
OlgaGulyakevich/readme.md

👋 Hi, I'm Olga Gulyakevich

Frontend Developer | React · Next.js · TypeScript · GSAP

Transforming designs into accessible, performant web experiences — with thoughtful animations and attention to every step of the user journey

Currently: Web Studio Intern | Specializing in React ecosystem & modern CSS
Focus: React, Next.js, Astro, TypeScript, SASS modules, Tailwind, Animations & Motion Design, Responsive Design
Location: Gland, Switzerland 🇨🇭


Email LinkedIn Portfolio

Open to frontend opportunities from October 2026


Tech Stack & Expertise

Proficiency levels: Production (built real projects) · Working (used, solid understanding) · Learning (actively studying / familiar)

Modern Frontend

Production:

  • React (Hooks, Context, performance)
  • Next.js (App Router, SSR/SSG)
  • Astro (Islands architecture, SSG)
  • JavaScript ES6+ / TypeScript
  • HTML5 (semantic, accessibility)
  • CSS3 (Grid, Flexbox, animations)
  • Architecture: SPA (React/Next) · MPA & static sites (Astro, vanilla)

Working:

  • Zustand · Context API
  • Vite · Webpack 5 (custom config)

Learning:

  • React Query (TanStack Query)
  • Redux Toolkit (legacy/enterprise — prefer Zustand for new projects)
  • Feature-Sliced Design (FSD)

Styling & Design

CSS Expertise:

  • Sass/SCSS · BEM methodology · Tailwind CSS
  • Styled Components
  • Responsive / mobile-first design

Advanced CSS Techniques:

  • SVG masks & custom shapes
  • GPU-accelerated animations (transform/opacity only)
  • Scroll-driven & entrance animations
  • Micro-interactions & tactile UI feedback
  • View Transition API
  • prefers-reduced-motion — always
  • Defensive CSS patterns

Animation Libraries:

  • GSAP (ScrollTrigger, timeline animations)

Design Implementation:

  • Figma-to-code workflows
  • Design system development
  • Motion design — user journey analysis
  • WCAG AA accessibility

CMS & Integrations

Production:

  • CMS-ready markup — semantic HTML structured for CMS integration (classes-on-tags, cascade styling, content-editable zones)

Learning:

  • Headless CMS (Contentful, Strapi — building Portfolio v2)

Familiar:

  • PHP & jQuery in legacy contexts
  • Progressive enhancement
  • REST API integration

Quality & Deployment

Testing & Quality:

  • Jest / Vitest, React Testing Library
  • Manual QA processes
  • Cross-browser testing
  • BackstopJS (visual regression)
  • Accessibility audits
  • Multi-stage linting pipeline (W3C, HTML, CSS, BEM, JS, file naming)
  • Automated image optimization (WebP conversion, srcset)

Performance:

  • Lighthouse optimization (95+/100)
  • Core Web Vitals monitoring
  • Critical CSS (inlined in base build)
  • Bundle size optimization
  • WebP image pipelines

Deployment:

  • GitHub Pages + Actions
  • Netlify, Vercel
  • Git workflows & collaboration

Featured Projects

Project Stack Demo Highlights
Memory Game React · Webpack 5 · i18next Play → i18n EN/FR/RU · 3D card animations · WCAG AA · custom Webpack
Internship Landing Vite · Vanilla JS · SCSS · Swiper.js View → 4 Swiper configs · SVG mask shapes · sliding window pagination · dynamic tabs
Additional Projects & Work in Progress

Personal Portfolio v2.0

Next.js • TypeScript • Tailwind CSS • Headless CMS

Status: 🟡 In Development (Launch: Q3 2026)


Upcoming Projects

Creative Agency Landing Vite • Vanilla JS • GSAP • SCSS Animated landing page for a creative agency — scroll-driven animations, motion design, immersive UI. Private repository.

Spreent Academy — Competitive Frontend Project Vite • Vanilla JS • Sass (SCSS) • BEM · Astro migration in progress Pixel-perfect competitive build: Fluid Layout via clamp() with custom fluid-val() mixin, magnetic CTA, paint-fill logo reveal, lerp parallax, CSS-only geometry (mask-image avatars, glass mockup), content-visibility: auto, full a11y.

UGC Creator Portfolio Next.js • TypeScript • Tailwind • Headless CMS Freelance project — portfolio and landing page for a content creator client, with editable content via 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-jacking 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.


What I Bring to Your Team

Core Strengths

  • Strong React Skills — Hooks, performance optimization, best practices
  • Design Implementation — Figma-to-pixel-perfect responsive code
  • Quality-First Mindset — Accessibility, performance, comprehensive testing
  • Animation & Motion Design — Thoughtful UI animations, micro-interactions, user journey focus
  • Fast Learner — Constantly upskilling with latest technologies

Development Philosophy

"Great interfaces are not just built — they're felt"

  • User-Centered: Every decision prioritizes user experience
  • Performance-First: Beautiful designs optimized for speed
  • Accessibility: WCAG compliance from day one
  • Clean Code: Maintainable, well-documented solutions
  • Adaptable: Comfortable with modern React, static sites, or legacy codebases

Learning Journey & Experience

Education & Training:

  • Web Studio Internship (In Progress · Oct 2025 – present) — production client projects:
    • Loyalty program promo site — GSAP animation sequences, View Transitions API, winners table with filters, search & tooltips; prize carousel (Swiper)
    • Online course aggregator — mega menu, tabs, Fluid Layout 320–1920px, Swiper.js
    • Cross-cutting contributions: UX audit (proposed replacing tab-based navigation with radio buttons in the checkout flow to reduce friction and improve conversion; simplified user journey to 3 steps: read → select → continue); accessibility audit — WCAG AA fixes: keyboard navigation, focus management, ARIA labels; cross-browser & cross-device QA; responsive redesign for updated breakpoints
  • HTML Academy (Completed) — Adaptive Layout, Web Interfaces, Automation & Tooling, JavaScript, React
  • CodeAcademy Front-End Engineer Path (Completed) — React, Redux, Testing, Deployment
  • Whimsical Animations (In Progress) — Josh W. Comeau — motion design, spring physics, delightful UI

Current Focus (2026):

  • Advanced React architecture & design patterns
  • Protocols & networking (HTTP/S, WebSocket fundamentals)
  • Web security (OWASP Top 10, CSP, auth flows)
  • UI Engineering — Canvas, WebGL, Three.js

Goal: Frontend developer position — actively job-searching from October 2026


Ideal Opportunities

  • Frontend roles with strong design implementation & motion design focus — custom interfaces, scroll-driven animations, micro-interactions
  • Studios / agencies building bespoke, design-led sites (pixel-perfect, custom layouts)
  • Product teams where UI quality, accessibility & performance matter
  • Teams with mentorship and growth potential

Get In Touch

Email LinkedIn Portfolio


💙 Thanks for visiting my profile!

Let's build something amazing together

Visitor Count

Pinned Loading

  1. memory-game memory-game Public

    A multilingual memory training game built with React.

    CSS 1

  2. travel-landing-swiper-responsive travel-landing-swiper-responsive Public

    Pixel-perfect responsive travel landing page with Swiper.js sliders, tour filtering, and modal booking system. BEM + Sass + Vanilla JS.

    SCSS

  3. internship-landing-responsive-ui internship-landing-responsive-ui Public

    Pixel-perfect educational program landing page. Built with BEM, Sass, Vanilla JS. Features: multi-step forms, news filtering system (tabs), interactive FAQ accordions, and custom Swiper.js impleme…

    SCSS 1