Andrey Okonetchnikov portrait Andrey Okonetchnikov

Front-End Engineer from Vienna, Austria

Email
Date of birth
15 January 1981
Place of birth
Yaroslavl, Russia
Marital status
married

Education

09.1998 — 06.2003
Yaroslavl State University, Computer Science Department
06.2002

Bachelor degree in Computer Science

Diploma on “Websites engineering and development methodology.” — excellent

11.2002 — 04.2003
Field trip to Volkswagen AG (Wolfsburg, Germany ) as a UI designer
06.2003

Master degree in Computer Science

Diploma on „The analysis of patterns and their uses in UI development. Implementation of PartnerNet Volkswagen & PartnerNet Volkswagen Nutzfahrzuege UIs using pattern language approach“ — excellent

Work experience

06.2022 — present

Cargill , contract from Vienna, Austria

  • Design System Consultant
  • Audited and consulted the design system team
  • Developed of the component library
  • Integrated workflow between designers & engineers
  • Developed design-system related best practices and processes
  • Technology stack: React.js, TypeScript, Figma
04.2020 — present

MonoLisa , product owner and co-author

  • Front-end development for the marketing website
  • Backend development for the font delivery using Python
  • Font design consultancy
  • Marketing strategy & implementation
  • Technology stack: Next.js, React.js, Python, serverless, etc.
01.2020 — 12.2021

Adverity , contract from Vienna, Austria

  • Design System Team & Tech Lead
  • Audited and consulted the design system team before taking over on the lead position
  • Lead a team of 5-10 designer and engineers working on an internal design system
  • Developed design-system related best practices and processes
  • Lead a team of 2 designers and helped hiring UX manager
  • Technology stack: React.js, TypeScript, Figma
2013 — present

Consultant, contract front-end developer & UX designer. Remote from Vienna, Austria

  • Front-end development using modern web-technologies incluing but not limited by JavaScript, HTML5, SVG and CSS3
  • Technology stack: React.js, Webpack, jQuery, Node.js, etc.
  • Consulting: UI / UX design, CSS
    • architecture, JavaScript and rendering performance, SPA architecture, PWAs
  • Clients: ViewAR, Plex, Netlify, Feedly, React Finland
03.2017 — 01.2018

Feedly Inc. , remote from Vienna, Austria

  • Contracting product designer and front-end developer
  • Designed the new organize UI: https://blog.feedly.com/organize/
  • Setup living React UI components style guide: https://react.feedly.com
  • Migrated web-client to Webpack
  • Technology stack: Webpack, React.js, styled-components, Node.js, Jest
2016 — present

Co-organizer of the React Vienna Meetup

  • Organizer of Reason Conf 2018
  • Designed and developer https://reason-conf.com
  • Organized developer events with 100+ attendies
  • Presenting at multiple meetups
11.2015 — 08.2016

Wildbit LLC , remote from Vienna, Austria

  • Developed front- and back-end for the Postmarkapp.com status page
  • Front-end stack: Webpack, React.js, npm, PostCSS, stylelint, ESLint, Mocha + Chai etc.
  • Back-end: developed an express.js-based API
  • Technology stack: Webpack, React.js, CSS-modules, Node.js, express.js, Mocha, PostCSS
01.2015 — 11.2015

Adspired , Vienna, Austria

  • Developed a "big-data" analytics product targeting advertisement partners around the world.
  • Took part in product design, including features, user interface, user flow and information architecture.
  • Implemented highly interactive SVG-based visualizations using JavaScript (ES2015 and ES7 with Babel.js)
  • Architected the front-end stack: developer tools (webpack, npm), linting (ESLint), tests (Mocha + Chai), CI (Jenkins) etc.
  • Technology stack: Webpack, React, AngularJS, Flux
03.2014 — present

Bunch of Nerds KG , Vienna, Austria

Co-owner of the third-wave coffee shop in the center of Vienna, Austria

01.2013 — 01.2014

JetBrains GmbH , remote from Vienna, Austria — Munich, Germany

Front-end developer

  • Developed front-end for the never released project — source control service with simple UI
  • Technologies used: JavaScript, CoffeeScript, HTML5, CSS3, SVG
  • User Interaction & User Experience design
08.2010 — 01.2013

Bummerl GmbH , Vienna, Austria

Senior UI designer & JavaScript developer

  • Developed a highliy interactive real time game client using JavaScript (CoffeeScript) / HTML5 and CSS3 (migration from Flash/Flex)
  • Supported front-end of the 4 community websites (HTML / CSS / JS)
  • Created visual design for iOS applications (icons design, UI elements etc.)
07.2011 — 12.2011

Yandex (Яндекс) , remote from Vienna, Austria

UI developer

  • Developed To-Do web application for mail.yandex.ru project using JavaScript and XSLT
  • Took part in UI design process
07.2008 — 08.2010

Wollzelle GmbH , Vienna, Austria

Senior UI Designer & Developer

  • Designed UI for websites and web applications Developed rapid and detailed UI and websites prototypes
  • Developed production xHTML/CSS/JavaScript %li code Developed for front-end (JavaScript, AJAX etc.)
  • Drove usability tests
  • Consulted in fields of interaction design, HCD, usability
12.2005 — 07.2008

WildBit LLC , Moscow, Russia (HQ located in US)

Front-end Architect

  • Designed UI for websites and web applications
  • Developed rapid and detailed UI and websites prototypes Developed production xHTML/CSS/JavaScript code
  • Took part in front-end development (JavaScript, AJAX etc.) Consulted in fields of interaction design, HCD, usability
  • Led a team of 3-4 people (both designers and front-end developers)
06.2004 — 12.2005

Mediatel , Moscow, Russia

Senior UI Designer, IT-Architect

  • Designed UI for a variety of projects (both web and desktop-based applications) Developed rapid and detailed UI prototypes
  • Drove usability tests
  • Developed corporate UI standards
  • Took part in project management, front-end development Developed production xHTML/CSS/JavaScript code
  • Consulted in fields of interaction design, HCD, usability
  • Led a team of 3-4 people (both designers and front-end developers)
11.2003 — 06.2004

WebImage 2000, Inc., Yaroslavl, Russia (HQ located in US)

Senior Designer, UI Developer, Information Architect

  • Designed UI for internal company projects (content managements systems etc) Took part in front-end development
  • Designed corporate identity for various companies
  • Designed promo ads and graphic elements for company’s purposes
  • Consulted in fields of interaction design, HCD, usability
08.2003 — 11.2003

Individ Co. , Yaroslavl, Russia

Information Architect, UI Designer, Screen Designer

  • Designed information structures
  • Designed and developed UIs for web applications
  • Wrote IA- and UI-related parts of proposals
  • Designed and developed websites and web applications Designed and developed multimedia presentations
11.2002 — 04.2003

Volkswagen AG K-DOV-1/3, Wolfsburg, Germany

UI Designer & Developer

  • Redesigned a UIs for “PartnerNet Volkswagen” & “PartnerNet Volkswagen Nutzfahrzeuge” web applications
  • Consulted in fields of usability and human centered design (HCD)
  • Learned Volkswagen AG standards and guidelines
08.2002 — 11.2002

Individ Co. , Yaroslavl, Russia

Information Architect, UI Designer, Screen Designer

  • Designed information structures
  • Designed and developed UIs for web applications
  • Wrote IA- and UI-related parts of proposals
  • Designed and developed websites and web applications Designed and developed multimedia presentations
11.2001 — 08.2002

INCAP, Inc. , Yaroslavl, Russia

UI Engineer (promoted to Senior UI Engineer in April 2002)

  • Designed UIs for desktop software and web applications Designed and developed websites and web applications
09.2001 — 10.2001

Web agency “TomStudio” , St. Petersburg, Russia

Web & Multimedia Designer

  • Designed websites
  • Designed and developed multimedia presentations
11.1999 — present

Freelance Web & Graphic Designer

Variety of websites design projects:

and many others. In all of web projects: prototyping, visual design, HTML/CSS coding.

Portfolio

Brief list of the completed projects

Feedly New Organize UI

Redesigned organize UI for feedly.com

Designed & developed the new version of the Organize page. Read

more about the process: https://blog.feedly.com/organize/

Postmarkapp.com Status Page

Server-side rendered React.js status page with real-time updates and visualizations.

Designed & developed front- and back-end for the Postmarkapp.com Status Page using webpack, React.js, npm, PostCSS, stylelint, ESLint, Mocha + Chai and server-side rendering. Back-end: express.js-based API server.

Postmarkapp.com Landing Page

Landing page for the Postmark App — a transactional email provider.

Designed & developed HTML, CSS, JavaScript for the landing page.

PostCSS Home Page

Home page for PostCSS project

Took part in the Open Source Design & Development process.

Adspired

Interactive front-end for the advertisement analytics platform startup.

Developed a "big-data" analytics product targeting advertisement partners around the world. Took part in product design, including features, user interface, user flow and information architecture. Implemented highly interactive SVG-based visualizations using JavaScript (ES2015 and ES7 with Babel.js). Tech. stack: developer tools (webpack, npm), linting (ESLint), tests (Mocha + Chai), CI (Jenkins) etc.

ColorSnapper

Mac OS Application

Idea and UX/UI design, public website design and implementation, icon and graphic design of the application, application support.

ColorSnapper JavaScript Prototype

A web-based prototype for the Mac OS Application

In order to test UI ideas and interactions for ColorSnapper 2 I’ve

created a JavaScript prototype that uses HTML and Canvas.

Sauspiel HTML5 Game Clinet

HTML5 app available for desktop and mobile devices

JavaScript/CoffeeScript, HTML5/CSS3 developer. Technologies include Backbone.js, jQuery, WebSockets, Canvas etc.

Beanstalk

Web application

Complete UI design, logo and CI design, HTML/CSS/JS implementation, public site and web application design.

Wildbit.com

Public website

Visual design, HTML/CSS, JavaScript (using moo.tools JS framework), Wordpress theme implementation.

Nuzizo.com

Social web application

Visual design, detailed HTML prototyping, production HTML/CSS code, front-end JavaScript functions, AJAX-based features implementation.

PodcastPeople.com

Public website and web application

Public web application: UI design, visual design, production xHTML/CSS/JavaScript.

Administrator web application UI design, visual design, production xHTML/CSS/JavaScript.

Mediatel’s TelCRM

A CRM for network service providers. Clients: MTS, MGTS, ComStar, SkyLink etc.

Task-flow and work-flow analysis, rapid and detailed prototyping, interaction design, visual design, usability testing, production HTML/CSS/JavaScript, usability consulting.

CashRegister

Desktop cash register application for cellular service providers. Client: MTS

Task-flow and work-flow analysis, rapid and detailed prototyping, interaction design, visual design, usability testing, usability consulting.

Open Source Projects

react-dropzone

Simple HTML5 drag-drop zone with React.js.

lint-staged

🚫💩 — Run linters on git staged files

ejs-loader

EJS (Underscore/LoDash Templates) loader for webpack

react-container-dimensions

Wrapper component that detects element resize and passes new dimensions down the tree. Based on https://github.com/wnr/element-resize-detector

okonet.github.com

Public pages for okonet.github.com

react-scroll-sync

Synced scroll position across multiple scrollable elements

yaml-loader

YAML loader for webpack (converts YAML to JSON)

modalbox

Mac OS X style javascript pop-ups for your browser (based on prototype + script.aculo.us)

colorsnapper-website

Website of ColorSnapper

webpack-codemods

JS Codemod to automatically convert webpack config from v1 to v2

attr-accept

JavaScript implementation of the "accept" attribute for HTML5 input element

webpack-long-term-cache-demo

A demo config showing how to enable long-term caching using Webpack. Read [medium link] for details.

codestage

Hassle free code highlighting macOS helper app for your Keynote slides

cooltips

CoolTips is a replacement for conventional web-browser tooltips. Cooltips is fully unobtrusive Class based on Prototype & Script.aculo.us, which is functional without any images (pure CSS).

metalsmith-webpack-dev-server

Starts webpack dev server when running metalsmith

metalsmith-remote-json-to-files

Fetch JSON from remote URLs, transform and inject as files into metalsmith pipeline

export-albums-to-folders

Action Script for iTunes allowing to copy selected albums to a specified location. It creates the folder structure in the specified directory using the following directory mask: [Artist] - [Album] ([YYYY]). Useful to copy bunch of albums to a different location.

YTranslator

A Google Chrome extension which simplifies translation of the selected word with lingvo.yandex.ru.

Conferences & Membership

03.2007 at RIT-2007, Moscow, RU

JavaScript for rich web applications: JavaScript frameworks overview

Front-end architect: who is it?

11.2007 at Client Side 2007, Moscow, RU

Graphic design applied to web

05.2016 at ViennaJS, Vienna, AT

Building a Slack Bot

07.2016 at ReactiveConf Meetups, Brno, SK

Modular CSS

08.2016 at ReactiveConf Meetups, Bratislava, SK

Modular CSS

12.2016 at HolyJS, Moscow, RU

Modular CSS (in Russian)

04.2017 at React Amsterdam, Amsterdam, NL

Make Linting Great Again

06.2017 at PiterCSS, St. Petersburg, RU

CSS-in-JS — the good or the evil?

2010—present

Multiple short talks at developer’s meetups:

2016—present

Co-organizer of ReactVienna

Skills

Methodologies & Practices

  • Human Centered Design methodology and process
  • Information Architecture, task flow and work flow analysis and modeling
  • Interaction Design, rapid prototyping, usability testing (heuristic and user-testing analysis)
  • Typography and typesetting
  • Mobile development
  • Source control (Git, Subversion, CVS)

Technologies

  • HTML5 — expert
  • CSS2, CSS3, Sass, Compass, CSS-modules, CSS-in-JS — expert
  • ES2015, ES2017 etc. — expert
  • JavaScript — expert
  • CoffeeScript — expert
  • Browsers Engines (IE6+, Gecko (Firefox 3.x+), WebKit, Opera) — expert
  • Ruby, Ruby on Rails, node.js, PHP, XML/XSLT, HAML etc. — good

Software & Tools

  • Windows, Mac OS X
  • Adobe Fireworks, Photoshop, Illustrator, InDesign, Sketch
  • Textmate, Sublime Text 2, XCode, IntelliJ IDEA
  • Git, Subversion
  • Unix console

Languages

  • Russian — mother tongue
  • English — excellent
  • German — excellent