Olga Gulyakevich OlgaGulyakevich

👋 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 🇨🇭

Available for frontend opportunities starting Q3 2026

Tech Stack & Expertise

Modern Frontend

Core Technologies:

React 19 (Hooks, Context, Performance)
Next.js (SSR, SSG, App Router)
Astro (Islands architecture, SSG)
JavaScript ES6+ / TypeScript
HTML5 (Semantic, Accessibility)
CSS3 (Grid, Flexbox, Animations)

State Management:

Redux Toolkit
Context API
React Query

Build Tools:

Webpack 5 (custom configs)
Vite

Styling & Design

CSS Expertise:

Styled Components
Sass/SCSS
BEM methodology
Tailwind CSS
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
CSS animations & micro-interactions
Motion design — user journey analysis
WCAG AA accessibility

Legacy & Integrations

CMS:

Headless CMS (Contentful, Strapi)

Legacy Code Work:

PHP integration & modernization
jQuery → React migration
Progressive enhancement
API integration (REST, GraphQL)

Database:

MySQL basics
API design patterns

Quality & Deployment

Testing & Quality:

Jest, 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

🧠 Memory Game — React Training Application

Professional memory game showcasing modern React architecture, internationalization, and production deployment

Built with: React 19 • React Router • Webpack 5 • i18next (EN/FR/RU)

User Experience:

3 themed card sets with smooth 3D animations
Multilingual support (English, French, Russian)
Mobile-first responsive design
Full keyboard navigation
Touch-optimized for mobile devices

Technical Highlights:

Lighthouse 95+/100 performance
WCAG AA accessibility compliant
Custom Webpack optimization
Hardware-accelerated CSS animations
Cross-browser tested

View Full Documentation & Technical Details →

🎓 Internship Landing — Advanced Interactive Website

Production-ready landing page demonstrating advanced CSS techniques, complex Swiper.js implementations, and pixel-perfect responsive design

Built with: Vite 7 • Vanilla JS ES6+ • Sass (SCSS) • Swiper.js 12 • BackstopJS

Advanced Features:

4 Custom Swiper Implementations — Hero, Programs, News (Grid), Reviews
SVG Mask Shapes — Decorative masks with inverted rounded corners
Advanced Navigation System — Pagination + arrows with dual scroll behaviors, custom styled scrollbars
Dynamic Tabs — JSON-based content loading with responsive grid
Custom Pagination — Sliding window algorithm (max 4 visible)

Technical Excellence:

Defensive CSS Patterns — Overflow prevention, layout shift protection
77 ARIA Attributes — Full keyboard navigation, screen reader support
Pixel-perfect ±5px — 30 BackstopJS visual regression tests
BEM Methodology — Flat selectors, max nesting depth 1
Modular Architecture — ES2015 modules, async/await

View Full Documentation & Technical Details →

📋 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 • Tailwind Freelance project — portfolio and landing page for a content creator client.

🖼️ Print & Photo Store React • TypeScript Freelance e-commerce project — online store for framed prints and photography.

✈️ 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

Modern React Expertise — 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:

CodeAcademy Front-End Engineer Path (In Progress) — React, Redux, Testing, Deployment
HTML Academy (Completed) — Advanced React Development & Modern JavaScript
Whimsical Animations (In Progress) — Josh W. Comeau — motion design, spring physics, delightful UI
Web Studio Internship (In Progress · Oct 2025 – present) — Production experience with real client projects
Freelance Projects — Building portfolios, SMB websites, e-commerce solutions

Current Focus (2026):

Whimsical Animations — Josh W. Comeau (motion design, spring physics)
Advanced React architecture & design patterns
Protocols & networking (HTTP/S, WebSocket fundamentals)
Web security (OWASP Top 10, CSP, auth flows)
Design for developers (UI/UX principles, Figma workflows)

Goal: Secure frontend developer position in 2026

Ideal Opportunities

Perfect fit for roles involving:

Frontend Development — React/Next.js applications
UI-Focused Work — Animations, micro-interactions, pixel-perfect implementation
Startup Environments — Versatile developer comfortable wearing multiple hats
Agency Work — Diverse projects requiring adaptability

My ideal role:

Frontend-focused with React/Next.js as primary stack
Opportunities to work on design implementation and motion design
Team environment with mentorship and growth potential
Projects emphasizing accessibility, performance, and UX quality

Get In Touch

💙 Thanks for visiting my profile!

Let's build something amazing together

Provide feedback

Saved searches

Use saved searches to filter your results more quickly