Andrey Okonetchnikov
Front-End Engineer from Vienna, Austria
- andrey@okonet.dev
- 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