Ryan Allen

Frontend Web Developer

ryanallen916
kxmode.com

about

A seasoned Frontend Web Developer with 25 years of experience, combining a strong design background with a deep passion for modern web technologies and artificial intelligence (AI). Highly detail-oriented and collaborative, I'm always eager to learn and contribute to innovative projects that push the boundaries of what's possible. I also recognize the importance of maintaining and enhancing existing systems, and I understand the need for reliable and consistent work.

work experience

Belami e-Commerce (belamiecommercesolutions.com)

Lead Frontend Web Developer

Sacramento, CA

Mar 2014 — Sep 2024

American Web Services (archived site)

Lead UI / UX Designer & Frontend Web Developer

Sacramento, CA

Dec 2002 — Dec 2013

Jel Productions (archived site)

Web Production Developer

Sacramento, CA

Feb 1998 — Dec 2002

work projects

I was given the task of finding a solution to update product images, especially in scenes like kitchens and family rooms where the product tends to blend in. I also had to deal with images that were too wide or tall, causing the system to add unwanted whitespace. After searching Google without finding a suitable solution, I developed two Python scripts, both heavily powered by AI, to address the issue.

For the image cropping script, I used Roboflow to train an AI model on a series of product images, identifying the subject type in each photo (e.g., "pendant," "chandelier," etc.). The trained Roboflow model helps the code locate the product's X and Y pixel coordinates, along with its pixel width and height. The code then extracts the product and surrounding areas into a new image.

For AI quality upscaling, I used a forked version of the Real-ESRGAN Python script to enhance the cropped image. The tool can also increase the pixel size by up to 4x. Additionally, I implemented logic to shift the process from the CPU to the GPU using NVIDIA's CUDA driver, which significantly speeds up processing times.

Examples of the tools in action:

A preview image of the image tool in action and the small clip of the Roboflow inference JSON data

A preview image of the image tool in action and the small clip of the Roboflow inference JSON data

Visual diagram showing how the AI focal-cropping and upscaling tools work.

Languages and libraries:

  • Python 3.11
  • Numpy
  • OpenCV
  • InferenceHTTPClient and COCOn
  • Roboflow and Roboflow API
  • Real-ESRGAN modified fork
  • NVIDIA CUDA
  • Authored comprehensive README and setup guide
  • Authored setup guide for Roboflow

I was tasked with modernizing the interface for handling product and option combinations to create a smoother shopping experience and reduce customer frustration.

Using JavaScript (ES6+), I extracted information from the legacy JSON data embedded in the product page to identify valid groupings. I developed logic to find valid combinations when the price appears as "unavailable." Additionally, I added functionality to preselect the correct combination when shoppers land on a page for a specific SKU.

This improvement was implemented across the platform's product page rendering system, ensuring that all sites benefited from the enhancement. The solution has generated significant value, resulting in an ROI of tens of millions of dollars from product sales.

Languages and libraries:

  • Vanilla JavaScript (ES6+)
  • Advanced JSON manipulation

I developed this functional order-taking bot to demonstrate its ability to assist users with placing orders and handling everyday communication challenges like typos and grammatical errors. The model uses a fictional pizzeria menu, pricing, and relevant information to focus on product-specific responses. This POC illustrates how a business could deploy an AI bot to streamline customer interactions based on trained product data.

Languages and libraries:

  • Vanilla JavaScript (ES6+)
  • OpenAI API and gpt-4o-mini model
  • Node.js app (hosted at Render.com)

This POC demo showcases how reusable AI-driven prompts can automate business processes and extract insights from large datasets. While developed as a personal initiative, the project illustrates AI's potential to deliver value across business use cases efficiently.

Languages and libraries:

  • Vanilla JavaScript (ES6+)
  • OpenAI API and gpt-4o-mini model
  • Node.js app (hosted at Render.com)

I developed this code for my employer to add A/B testing through Optimizely on a website's modal content. For example, it enabled testing passive vs. aggressive messaging after a 10-second delay on the third page, a scenario Optimizely can't handle natively. The ROI provided the content and marketing teams a way to iterate messaging to attract new customer sign-ups.

Languages and libraries:

  • JavaScript and jQuery

A preview image for SCSS examples

I converted the extensive CSS of the company's internal tool—used for managing orders, creating promos, pricing discounts, and more—into SCSS. This was a significant project, as the tool had several hundred lines of CSS. The conversion delivered ROI by streamlining style updates and removing redundancies in the code.

Languages and libraries:

  • SCSS

personal projects

I developed an AI-powered tool to analyze video game content by leveraging OpenAI's latest language model. The tool identifies themes such as violence and language, generates insights, summaries, and ratings, and stores results for faster access. I optimized the tool's performance to minimize AI token usage, which helps reduce overall computational costs.

Languages and libraries:

  • Vanilla JavaScript (ES6+)
  • OpenAI API and gpt-4o model
  • Node (hosted by Render.com)
  • Webpack
  • JSON
  • MySQL (hosted by DigitalOcean)
  • HTML and CSS

This project started as a simple exercise and expanded to include positive and negative events by simulating periods of growth and scarcity.

Languages and libraries:

  • Vanilla JavaScript (ES6+)

I created this interactive map, similar to Google Maps, to help players understand a game's expansive landscape. It includes searchable in-game locations like cities, dungeons, people, and regional music. Using a modern mapping tool enhances the gaming experience.

It quickly became a hit with the game's community. One person even joked that it didn't have street view. 🙂

Languages and libraries:

  • Vanilla JavaScript (ES6+) and jQuery
  • Leaflet open-source mapping library
  • Map tile images hosted on Amazon S3
  • HTML5 and CSS

I saw a lot of potential with the original code by Griffin Moyer and wanted the remix to include new features.

  • Camera Transitions: Adds dynamic, randomized camera transitions using tween.js
  • Noise Generation: Implements smoother multi-layer noise
  • Grid Particle System: Utilizes three.js's BufferGeometry for better performance and randomizes particles
  • Performance Enhancements: Incorporates the tween.js library for smoother animations

Languages and libraries:

  • HTML5 and DOM manipulation
  • Vanilla JavaScript (ES6+)
  • Three.js and TWEEN.js
  • SimplexNoise algorithm
  • Procedural Generation
  • Animation/Tweening

Inspired by a post on X

The code efficiently renders dynamic visuals with optimized animations and customization.

  • Initializes canvas with 2D context, any modified disables imageSmoothingEnabled, and sets willReadFrequently to true for performance
  • Precomputed cosTable and sinTable boost wave and ripple calculations
  • Functions manage dynamic colors and contrast
  • Wave and ripple values are adjusted for varied effects
  • Adds a 3D effect to an SVG grid
  • Updates pixels based on wave height for smooth animations
  • Renders only relevant pixels to improve performance
  • Uses Float32Array for trigonometric tables to reduce computation
  • Functions for randomization, color, and animation enhance code readability

Languages and libraries:

  • HTML5 Canvas API
  • Vanilla JavaScript (ES6+) and SVG
  • Image and pixel manipulation
  • Data structures
  • Math and trigonometry
  • Animation techniques
  • Color manipulation and mapping

This script generates a Word Search Puzzle grid by identifying suitable word positions and randomly placing words horizontally. It fills the remaining cells with random letters, ensuring no duplication. The project is still in progress, with vertical and diagonal word placement yet to be added.

Languages and libraries:

  • Vanilla JavaScript (ES6+)

design projects

Half-Life 3
Allen Works
Around the Verse - StarCitizen
Exoplanet
Blackstar Honey Company
Merigold - Beyond Good and Evil 2
Contractors R Us
Omni-Bel - StarCitizen
Taletap
LavaSend
DOAL
Cary Cleaning Solutions
Uberprice
Lucky Biscuits
Shrapnel Games
Rethink Your Drink (CDPH Project)
Dome Printing Customer Dashboard
CLE Homepage
CLE Product and Services page
American Web
Elife Adventure
Exclusive Reality
VidSea
Taletap
Childhood Obesity Conference
Frecklebox
Rethink Your Drink (CDPH Project)
Rethink Your Drink Sugar Calculator (CDPH Project)
2014 IEP Conference
UberPrice
Suitcase Stickers
Digital Embryo
Digital Embryo Skateboard design
Aurora Logo and T-shirt design
James Wilson Marshall
Blackstar Honey Company jar designs
R.I.P. Han Solo
Soma Shade Album Art - Beyond Good and Evil 2

skills

React, TypeScript, Next.js, Vanilla JavaScript (ES6+), jQuery, Node.js, AI (with Python, JavaScript, etc.), LLM Training (via Roboflow), JSON, MS SQL & MySQL, API Integration, CI/CD, Testing & Automation, HTML5, CSS3, SASS, WCAG Web Accessibility, UI/UX, Responsive Design, Photoshop, Illustrator

recommendations

"I value [Ryan's] ability to think out of the box, both for building/maintaining code and for diagnosing problems. Recently, he spearheaded AI integration ideas that were beyond the 3rd party offerings we could find. Ryan is a hard working innovator for sure!"

— Andrew Searls

Cloud Microservices Architect

"Ryan has an outstanding work ethic and attention to detail... He finds new ways of making pages and systems perform more efficiently and has become adept at finding unique applications of AI tools. Ryan is ... motivated and diligent... He has very high character and operates within the utmost ethical standards."

— Matt Lewis

Product owner, Project Manager, Scrum Master

"Ryan showed a desire and initiative to learn new technologies and has invested time to research and learn about AI and prompt engineering. [He] is passionate about his work and strives to create positive user experiences. Ryan is professional and personable and I've enjoyed working with him on the projects we've been on together."

— Erin Mutter

Product owner, PIM Manager

"[Ryan] is a rock solid front end developer with proven track record of delivering cutting edge enhancements to our websites and analytics platform. I truly appreciated Ryan's proactive approach to solving non-trivial problems while effectively managing risks. I was especially impressed with his ChatGPT pilot project."

— Sergey Bobkov

Project Manager

references

Available upon request.