Russell Brewer

Full Stack Web Developer


Hi There! I'm an Orlando, Florida based Full Stack Web Developer. Professionally, I provide some of the largest companies on the planet with custom mobile-ready web applications that fulfill their business needs. With a focus on clean, user-driven principles, I specialize in making complex web-based software applications, that are easy to use ... on any sized device.

Whether you need an e-commerce web store, inventory tracking system, an employee timeclock, sophisticated data reporting and spreadsheet interface, just a simple company website ...

Yeah, we can do that!

Projects
Gsx_db


What it Is

Gsx_db is an open-source project I created and maintain that allows the developer to use a Google Sheets spreadsheet as a database system. It's incredibly quick to set up, and allows for very rapid prototyping.
It can also be used as a Content Management System (CMS). When the client updates the Google Sheet Spreadsheet, their changes are reflected into a live website in realtime.

No more telling your client to export a copy of their Excel database, save it to their desktop, log in to your company's system, upload the file ... Just use a google spreadsheet. As soon as they change it, the content of your web application is automatically updated as well.

No more uploading and parsing clunky excel files!


How it Works

Google Sheet's API allows us to retrieve the JSON Data for an entire worksheet. We access this API server-side every N seconds, and then client-side nodes poll the server via AJAX at periodic intervals. This allows us to make one periodic call to Google Sheet's API and use that data to update the display of an unlimited number of devices in near real-time.


See it in Action!


NFL Depth Chart API


What it Is

Just to see if I could ... this project scrapes the website of an unnamed mega-corporation in order to retrieve the active NFL depth chart for any team in the league and then serve it out as a JSON API Endpoint.

How it Works

On the front-end, a jQuery script makes an AJAX call to a PHP script located server-side, where I retrieve unnamed mega-corporation's website HTML and parse through it. Once the data has been scraped and processed, I then convert it to JSON format, and then serve that JSON out as an API so anyone around the world can find out who is listed as the 3rd string left tackle for the Miami Dolphins.

Sometimes you just need to know that kind of stuff.


See it in Action!


WhatsMyBitcoinWorth.com


What it Is

I'm a bit of a bitcoin enthusiast (pun intended), and this quick-and-dirty site tells the user the total value of a quantity of bitcoin, as well as the value in a wallet, in any major world currency.

Basically I got tired of grabbing my calculator anytime I wanted to know the USD value of all my coins, and I wrote a tool to do it for me.

How it Works

Depending on the feature requested, I use an AJAX call to Coinbase.com (a major bitcoin exchange) which retrieves the necessary data, such as the current bitcoin price in USD, or GBP.

To retrieve the balance of a wallet, I make a similar AJAX call to bitcoin.info and pass along the requested address as a parameter. It returns the balance in bitcoin, and we convert it into the correct currency for display.

See it in Action!


Digital Art
The Matrix

What it Is

Well, it's The Matrix, of course! Made with P5.js -- a JavaScript library for designers, developers, and visual artists.

How it Works

An overtly OOP approach -- each "character" is itself its own object, with an x position, y position, and character state (ie a letter). I then create a vertical "stream" object containing several character objects. Each stream has a unique speed, and length. In order to maintain aspect ratio, we size each letter according to the width of the viewers screen, and resize the canvas any time the screen profile changes (eg from mobile portrait, to mobile landscape)

See it full size!


(Tip: If youre in a browser, press F11 to go full screen after it loads!)

Sine Wave Balls

What it Is

Sinusoidal modeling of a bunch of circles.

How it Works

I first calculated the size of the ball based on the size of the containing window. Each ball is an object that tracks its own x and y position. I step through the balls every frame and calculate their Y axis position based on a sine wave formula. This gives us natural, flowing patterns.


See it full size!


(Tip: Click on the sketch to increase the period and see different designs!)

Shooting Stars

What it Is

I had the idea to try and use code to enhance static images and make them more life-like. Watch the sky shimmer, and look out for shooting stars!

How it Works

A javascript star field is laid over a background image of a space scene, allowing us to make interesting depictions of stars flickering and shooting across the screen.


See it full size!


(Tip: You'll probably need the full size page to really see anything!)

Loading Icons

I've always appreciated a well-made loading icon. The creative possibilities are endless, but the constraints of having to communicate a specific idea -- loading -- always presents a unique challenge to the creator.

Here I share some of my loading icon animations that I made via code, in JavaScript, utilizing the P5.js library.

Classic Spinner

What it Is

My take on the classic spinner, this animation is ubiquitous on the web today. However every site needs a slightly different 'feel' to their loading icon -- different colors, different rotation speeds, different number of balls

This tool allows me manipulate the spinner in real time and thereby choose the best fit to match the overall styling of whatever project I am creating.

How it Works

Using p5.js we create an HTML5 canvas and use the sliders to control various variables within the animation sketch.



Speed Guage

What it Is

A speedometer-style loading-icon which could be used for displaying live data directly from a sensor as well.

How it Works

Using p5.js, we read data in, and map the range of data (in this case 0-100%) to the arc of a circle. The script currently uses "fake" sensor data originating via Perlin Noise




(Tip: Click and drag to set the position!)

Web Design

More than half of all page views are on mobile devices today. My sites are all mobile-first, designed to be viewed on devices of any size and still look beautiful.

Next Level

What it Is

Long ago, I dreamed of opening my own web development studio, called Next Level. I decided to make a mock-up of what Next Level's website would look like! A little rough, one day I'll get around to polishing it up ...

See it full size!

Lady Liberty

What it Is

A spec- site mockup built for a local Law Agency prior to beginning work.

See it full size!