I design and build high-performance user interfaces for the web.

I craft elegant interfaces, engineer fast systems, and find simple solutions to complex problems.

https://
// @flow
import React from 'react'
import styled, { css } from 'styled-components'
import { colors, fonts, fontSize, media } from '../../styles/base'
import App from '../App'
import Section from '../Section'

const Header = styled.h1`
  font-size: ${fontSize.large};
  font-family: ${fonts.heading};
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -1.1;
  background: ${colors.white};
  color: ${colors.black};
  z-index: 200;

  ${media.tablet`
    position: absolute;
    width: 60vw;
    left: 2.4rem;
    top: 50%;
    transform: translateY(-5.84vw); // (3.2 * 2 * 1.2 + 4) / 2
    padding: 2vw;
    padding-left: 0;
    font-size: 3.2vw;
    width: 55vw;
    left: 15vw;
  `};

  & strong {
    font-weight: 700;
  }
`

const About = styled.p`
  color: ${colors.darkGray};
  font-family: ${fonts.content};
  line-height: 2;
  font-size: ${fontSize.small};
  margin: 2.4rem 0;
  ${media.tablet`
    font-size: 1.2vw;
    position: absolute;
    left: 15vw;
    top: 50%;
    transform: translateY(3.4vw);
    padding: 2vw;
    padding-left: 0;
    width: 35vw;
  `};
`

const AppContainer = styled.div`
  height: 140px;
  ${media.tablet`
    display: block;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    width: 35vw;
    height: 28vw;
    transform: translateY(-14vw);
  `};
`

const headerMixin = css`
  ${media.tablet`
    position: relative;
    min-height: calc(100vh - 24rem);
    margin-bottom: 12rem;
  `};

  ${media.desktop`
    min-height: 100vh;
  `};
`

const Hero = () => (
  
I design and build high-performance user interfaces {' '} for the web.
I craft elegant interfaces, engineer fast systems, and find simple solutions to complex problems.
) export default Hero

Experience and skills

Maintaining a diverse skillset is key to staying adaptable. I work with clients on a variety of platforms. In my free time I dive into cutting-edge technologies. Here are the areas I readily turn into client wins.

  • JavaScript

    • React & Redux
    • Flow
    • Webpack
    • ES6+
  • Interactive & UX

    • Firebase realtime apps
    • WebGL / HTML5 games
    • Interface design
  • Full Stack

    • Progressive Web Apps
    • Performance auditing
    • Optimization
  • Exploration

    • Rust
    • PureScript
    • New technologies

I <3 open source

I love consuming and contributing to open source. Side projects are a regular opportunity to learn and try new things. Here are some I've been involved with recently.

Aleamancer

A groundbreaking online tabletop role-playing platform, built with cutting-edge tools and tech from the React+Redux ecosystem. GitHub →
DesignDevJavaScript

WebAssembly Rust Utils

📦 A Rust and JavaScript utility suite for writing WebAssembly modules. GitHub →
DevRustJavaScript

Redux Render

📦 Ergonomic React bindings for Redux using the render prop pattern. GitHub →
DevJavaScript

jsonnull

The content and build system for this site, a statically rendered React application. GitHub →
DesignDevJavaScript

"It is the power of the mind to be unconquerable." — Seneca

Jason Nall

Designer & Developer