Experienced software developer with a passion for creating User Interfaces (Atomic Design, Svelte, Vue, React, GraphQL). I am a self-starter and can quickly learn new technologies and apply them to solve real-world problems. Prefer remote opportunities.
Graphql Markdown Server
Load the extension on detecting graphql-config file at root level or in a parent level directory; Load the extension in.graphql,.gql files; Load the extension on detecting gql tag in js, ts, jsx, tsx, vue files; Load the extension inside gql/graphql fenced code blocks in markdown files. SourceForge uses markdown syntax everywhere to allow you to create rich. Text markup, and extends markdown in several ways to allow for quick linking. To other artifacts in your project. Markdown was created to be easy to read, easy to write, and still readable in plain text format.
Authorized to work in the US for any employer.
Skills
- Areas of Expertise: Front-End, User Interface
- Data: Mobx, Redux, Vuex, Axios, Fetch, JSON, MongoDB, Mongoose, Papa Parse
- Design: Atomic Design, Sketch, Zeplin
- Frameworks: React, Styled Components, Vue, Svelte, Stencil, Lodash, Material Design, Bootstrap, AngularJS
- Graphics: CSS animation, Pixelmator, Sketch, SVG, Between.js, GreenSock, Snap.svg, Raphaël, Charts.js, HighCharts
- Languages: ECMAScript, ES6, JavaScript, TypeScript, ActionScript, Lisp, Ruby, Smalltalk, C, Objective-C
- Platforms: Bitbucket, Github, Heroku, iOS, NPM
- Server: Node, EJS, Express, REST api, GraphQL, Docker
- Tools: Agile, Atom, Git, ESLint, Jest, Parcel, Postman, Pow, Powder, Prettier, Sinon, Storybook, VSCode, Webpack, Yarn
- Web: Web Components, HTML, HTML5, CSS Flexbox, CSS Grid, CSS variables, CSS3, Markdown
Experience
Portfolio Technical Architect - UI/UX (Remote), Cox Automotive (IMS)September 2020 to present
- Charter: establish a front-end architecture vision & strategy for the IMS Portfolio…
- details TDB
Lead Technical Architect - UI (Remote), Cox Automotive (ISS)
February 2020 to September 2020
- Charter: establish a front-end architecture vision & strategy.
- Collaborate with Product, Engineering, and UX.
- Build software prototypes to validate architecture approaches and assess emerging technologies.
- Skills Used: Micro Frontends, Web Components
Lead Software Engineer - UI (Remote), Cox Automotive
July 2019 to February 2020
- UI development for CVI, Common Vehicle Inventory
- Advocate for GraphQL and NodeJS
- Created a GraphQL technology demonstration: auto-gql
- Created several NodeJS utilities and mock servers
- Collaborated on a new component library.
- Skills Used: React, Redux, Styled-Components, Axios, GraphQL, Markdown, NodeJS, SVG
Graphql Markdown Generator
Principal UI Engineer (Remote), Skava
June 2018 to April 2019
- Worked on a next-generation e-commerce platform.
- Member of the UX/UI Engineering team.
- Created an SVG component for Material Design icons.
- description: snapshot of Storybook for the SVG component
- Refactored our reference store to use the latest components in our framework.
- Wrote documentation (Markdown) for the UI library and development environment.
- description: snapshot of MacDown editor
- Provided focused training on our new framework for our in-house solutions team.
- Skills Used: Atomic Design, TypeScript, React, Styled Components, Mobx, CSS Grid layouts, CSS variables, Apollo, CodeSandbox, GraphQL, Markdown, Sketch, Storybook, SVG, Zeplin, Agile
Senior UI Software Engineer (Remote), Demandbase
July 2007 to January 2018

- Developed UI’s for a wide range of customer facing applications over the 10 years I was working at Demandbase.
- Developed a desktop Adobe AIR app with a ticker tape style display.
- description: the Adobe AIR app running with the ticker configured for the top of the desktop on OSX. This snapshot shows both the ticker and the dropdown windows displaying the details of the ticker data.
- this was a Skunk Works1 project lead by the CTO, concept to deployment in one month (sole developer).
- Developed a procedurally generated SVG graphic using Raphaël for a production app.
- description: the top graphic is the static mock from the designer, and the bottom graphic is the custom component used in the app, rendered with Raphaël.
- Developed a set of custom chart components with Raphaël.
- description: a custom interactive component rendered with Raphaël showing normal (left) and hover (right) states.
- Developed reusable React components for an enterprise SAAS application.
- Developed custom charts using Chart.js and HighCharts.
- example: radial chart prototype
- Rapidly built UI proof-of-concepts to validate design & technology directions.
- description: 3 snapshots of prototypes created for a new application dashboard (using Hero elements)
- Developed mock-api servers in Node to streamline my UI development workflow.
- description: 2 snapshots from a prototype React application driven by data from a mock-api server (using faker.js).
- Skills Used: React, Redux, Material-UI, InVision, Zeplin, Node, Pixelmator, Postman, Raphaël, Chart.js, HighCharts, Papa Parse, Lodash, Bootstrap, Angular 1.x, JavaScript, Pow, Powder, ActionScript, Adobe AIR, Adobe Flex, Agile
Education
BS, Engineering (Cum Laude)
Rose Hulman Institute of Technology
Notable Projects
NPX business card
npx eswat2
- Skills Used: JavaScript, NPM, NPX
Technology Demonstration
- auto-gql - app using GraphQL & mock api
- graphql - playground for mock api
- auto-list - cars used in mock api
- auto-icons - icon demonstration
Farmers Market, Columbus, IN (pro bono, Dec 2014 to Dec 2018)
- Site was retired in Dec 2018.
- Developed a new web app to streamline their signup and approval process.
- Allowed them to move to a completely paperless process.
- Pages defined with EJS (Embedded JavaScript templating).
- Provided password-less admin interface.
- Automatically updated the vendor list on the website as they were approved.
- Private Repo.
- Skills Used: Bootstrap, Node, Express, EJS, MongoDB, Heroku
Custom SVG graphic with animation
Graphql Markdown In Python
- one app design, 4 implementations

app | framework | tween engine | app size |
---|---|---|---|
funnel-s4e | Svelte | built-in | 58k |
funnel-wc | Stencil | Between.js | 69k |
funnel-vue | Vue | Between.js | 139k |
funnel-r3t | React | Between.js | 231k |
** app size total resources loaded, as measured in Chrome…
- Private repos.
- The original example used Snap.svg to generate the shapes.
- These apps work with SVG elements directly to render the funnel shapes and display the funnel values.
- Each app consists of a standard set of 12 building blocks, implemented as single file components in each framework.
- Each app generates similar DOM and styling with only minor visual differences.
- The layout is responsive so it works on both desktop and mobile.
- Color palette based on clrs.cc.
- Icon components based on Material Design SVGs.
- The Svelte app is PWA compliant and can be installed via Chrome, the new Edge or iOS (using Safari).
- Deployed with Vercel.
- Built without sourcemaps.
- Skills Used: React, Stencil, Svelte, Vue, Vuex, SVG, Between

Icon Proofs Web Component
- app: wc-proofs
- Simple Icon Proofs sheet for a few SVG icons.
- Implemented in Stencil.
- Optimized SVGs with SVGOMG.
- Layout done with flexbox.
- Deployed with NPM and Vercel.
- Skills Used: Stencil, SVG, TypeScript
Github profile app using Vue
- app: git-notes
- github: git-notes
- Uses a custom event-bus mechanism to manage the store.
- Skills Used: Vue, Bootstrap, Axios
Github profile app using React
- app: egghead-notes
- github: egghead-notes
- Skills Used: React, Mobx, Bootstrap, Axios
WSS & REST notes server build on Node
- app: fire-notes
- github: fire-notes
- The original app used Firebase, but i wanted to try to build something similar from scratch.
- The next version of this will be built with GraphQL.
- Skills Used: Node, Express, MongoDB, Mongoose, WebSockets
Technology
- Axios - Promise based HTTP client
- Between.js - Lightweight ES6 tweening engine
- Behance - Design Inspiration
- Capacitor - A cross-platform native runtime for web apps
- Colors - A nicer palette for the web
- CSS3 - moz://a
- CSS Animations - moz://a
- CSS variables - moz://a
- Custom Elements Everywhere - Web Components
- devolution - Ship modern, and de-modernized bundles
- Direflow - Create fast, performant Web Components using React
- Dribbble - Show and tell for designers
- egghead.io - Learn to Code
- EJS - Embedded JavaScript templating
- ES6 - ECMAScript 6
- Fast - Adaptive UI System, Utilities & Tools
- Fetch API - moz://a
- Framer X - Interactive Design Tool
- Hooks - React
- HTML - moz://a
- HTML5 - moz://a
- iconfactory - Award-Winning Design & Development
- JavaScript - moz://a
- Micro Frontends - Frontend architecture
- Midnight - Dark Theme Sketch Plugin
- moz://a - about:Credits Richard Hess
- Muzli - Design Inspiration
- nvm - Node Version Manager
- Papa Parse - A powerful, in-browser CSV parser
- Pose - Simple animation for React & Vue
- Pow - Zero-config Rack server for OSX
- Powder - Makes Pow even easier
- PWA - Progressive Web Apps
- Sapper - The next small thing in web development
- Sinon.js - Test spies, stubs and mocks for JS
- Slack - Where work happens
- Stencil - A compiler for Web Components
- Svelte - Cybernetically enhanced web apps
- SVG - Scalable Vector Graphics
- SVGOMG - SVGO’s missing GUI
- svql - FetchQL wrapper for Svelte 3
- tapbots - Delightful robots apps for iOS and the Mac
- Udemy - Online Courses
- urql - A blazing-fast GraphQL client
- Vuetify - Material Component Framework
- Vercel - Develop. Preview. Ship.
- Verdaccio - A lightweight private npm proxy registry
- Web Components - moz://a
- Web Components the Right Way - A currated list
- WebSockets - Client and server for Node
–
Footnotes:
[1]. A skunk works project is a project developed by a small and loosely structured group of people who research and develop a project primarily for the sake of radical innovation. (source)
Новый большой англо-русский словарь. 2001.
Смотреть что такое 'markdown' в других словарях:
Markdown — is a lightweight markup language, originally created by John Gruber and Aaron Swartz allowing people to write using an easy to read, easy to write plain text format, then convert it to structurally valid XHTML (or HTML) .[1] The language takes… … Wikipedia
Markdown — (маркдаун) облегчённый язык разметки. Первоначально создан Джоном Грубером (англ. John Gruber) и Аароном Шварцем, целью которых являлось создание максимально удобочитаемого и удобного в публикации облегчённого языка разметки. Многие… … Википедия
Markdown — es un lenguaje de marcado ligero creado originalmente por John Gruber [1] y Aaron Swartz [2] que trata de conseguir la máxima legibilidad y publicabilidad tanto en sus forma de entrada como de salida, inspirándose muchas convenciones existentes… … Wikipedia Español
Markdown — ist eine vereinfachte Auszeichnungssprache, die von John Gruber und Aaron Swartz entworfen wurde. Ein Ziel von Markdown ist, dass schon die Ausgangsform ohne weitere Konvertierung leicht lesbar ist. Als Auszeichnungselemente wurden daher vor… … Deutsch Wikipedia
Markdown — est un langage de balisage léger créé par John Gruber et Aaron Swartz. Le but de la syntaxe Markdown est d offrir une syntaxe facile à lire et à écrire. C est à dire qu un document formaté selon Markdown devrait pouvoir être publié comme tel, en… … Wikipédia en Français
Markdown — Markdown refers to the amount of money that a buyer is given in order to mark down items to clear them out of their stock. Sometimes the buyer will ask the manufacturer for markdown money to clear out stock of that particular vendor s… … Historical Dictionary of the Fashion Industry
markdown — index discount, rebate Burton s Legal Thesaurus. William C. Burton. 2006 … Law dictionary
markdown — ☆ markdown [märk′doun΄ ] n. 1. a marking for sale at a reduced price 2. the amount of reduction in price … English World dictionary
markdown — The amount subtracted from the selling price of securities when they are sold to a dealer in the OTC market. Also, the discounted price of municipal bonds after the market has shown little interest in the issue at the original price. Bloomberg… … Financial and business terms
markdown — mark|down [ˈma:kdaun US ˈma:rk ] n a reduction in the price of something markdown of ▪ a markdown of 15% … Dictionary of contemporary English
markdown — UK [ˈmɑː(r)kˌdaʊn] / US [ˈmɑrkˌdaʊn] noun [countable] Word forms markdown : singular markdown plural markdowns a reduction in the price of something … English dictionary
Книги
- Язык R в задачах науки о данных. Импорт, подготовка, обработка, визуализация и моделирование данных, Уикем Хэдли, Гроулмунд Гарретт. Овладейте искусством превращения необработанных первичных данных в плодотворные догадки, гипотезы и новые знания с помощью языка R. Эта книга задумана как введение в вычислительную среду R,… ПодробнееКупить за 2592 руб
