Artful Technology,
Elegant Design

Art-inspired web development.
Creative solutions to accelerate growth.

About Me

Creative Front-End Developer based in Trinidad, CO, specializing in interactive UX/UI design and multimedia integration. I'm an artist turned coder who loves the outdoors and staying active. Graduating magna cum laude from Utah Tech University, I earned a Bachelor of Science in Animation and Entertainment Arts. My background spans web development, graphic design, animation, 3D rendering, and video/audio production and editing.

I bring dreams to screens—combining four years of web development experience with a lifelong passion for art to craft elegant, accessible, and visually striking digital experiences.

This site was designed and coded from scratch using HTML, CSS, and JavaScript.

Ryan Profile

Top Skills

HTML5

CSS3

JavaScript

React.js

Node.js

API

Git/GitHub

SEO

WordPress

Modern Campus CMS (Omni CMS)

Other Skills

Styling

SCSS/SASS

Tailwind CSS

Bootstrap

Shadcn UI

Material UI

Figma

Languages

TypeScript

PHP

SQL/MySQL

Shell Scripting (Zsh)

Media

Adobe Creative Cloud

Animation

Photo/Video Editing

Digital Photography

Audio Production

Logic Pro X

Projects

Featured: Trinidad State College

As primary web administrator for Trinidad State College, I inherited a 954-page site with no knowledge transfer and led a full modernization across both the Trinidad and Alamosa campuses — improving accessibility, security, design, and analytics from the ground up.

Technologies Used

Modern Campus CMS (Omni CMS)

JavaScript

HTML

CSS

Google Analytics 4

Google Tag Manager

Audit & Discovery

Independently audited an inherited codebase with no handoff.

Component System

Built a reusable, accessible component library from scratch.

Accessibility

Cut critical issues 73% across 954 pages, aligned to WCAG 2.1 AA.

Redesign

Rebuilt 200+ pages across both campuses.

Analytics

Stood up GA4 and GTM under institutional ownership.

Outcome

Recognized directly by the college's president.

1 Audit & Discovery

I inherited the site with no documentation or handoff, so I independently audited the codebase and CMS to understand what I was working with. This surfaced significant issues: broken links, obsolete legacy pages, exposed vendor credentials, and development URLs indexed in search — all needing remediation before deeper redesign work could begin.

2 Component System

In order to tackle the massive task of redesigning hundreds of webpages for a highly trafficked website, I built a reusable, accessible, mobile-responsive component library from scratch in Modern Campus CMS. This allowed me to speed up the build process of every individual page, as well as let non-technical employees make simple changes on their department pages without having to know how to code.

3 Accessibility Overhaul

Using the new component system and page-level fixes, I remediated each page to WCAG 2.1 AA standards sitewide — reducing critical accessibility issues by 73%, serious issues by 47%, and moderate issues by 61%. I also restored the CMS's built-in accessibility checker and added publish gating so critical issues can no longer reach production.

4 Redesign & Rollout

With the audit complete and the component system in place, I redesigned 200+ pages across both campuses, making the information easier to understand, more intuitive to navigate, responsive to different layouts, with a refreshed visual design and cleaned-up content.

5 Analytics & Search

The site's analytics account had been orphaned from any institutional owner. I deployed Google Analytics 4 and Google Tag Manager from scratch under institutional ownership, and overhauled site search — correcting exclusion issues, deprioritizing raw files, and removing 50+ broken virtual-tour pages.

6 Outcome & Takeaways

Recognized by the college's new president, who cited the site as a factor in his decision to apply to lead the institution.

View the live site →

Highlight:
Stone/Oak Dating

Dating app UI built with mobile first design, featuring right & left swiping functionality and unique activity generator in chat section. Built with React, implementing HTML, CSS, JavaScript, and additional libraries.

Images from pexels.com.

Technologies Used

React

React Libraries

JavaScript

HTML

CSS

Image Fetching

Git

Responsibilities

Sole Developer

Project Scope

Budget Oversight

Project Management

Client-facing

Latest Project:
Maryna Stanbrough Consulting

This project was for Maryna Stanbrough, a leadership coach looking to attract high-level executives. The goal was to build a website to drive bookings through Calendly and capture leads with Klaviyo, completed within 1 month. Get an in-depth look at my process below.

Technologies Used

WordPress

JavaScript

HTML

CSS

Calendly

Klaviyo CRM

1. User Research

In the beginning stages of this project I asked Maryna to choose three websites she liked, then reviewed them with her in real time to understand her style preferences and goals. Maryna's marketing strategist was often involved and contributed to our discussions. Maryna was drawn toward transitions that broke up the flow of different sections, bold colors, and content-rich websites that conveyed a sense of authority–I kept this in mind when I built the first prototype. Below are some examples of things that she liked from the websites she provided for me.

Colorful Transition

BOLD COLORS

Creative flow Charts

Flow Chart Black Transition

Interesting Transitions

2. Design & Wireframe

I was given Brand Guidelines which helped me further refine the stylistic vision that Maryna had. Although I have built many wireframes in the past, I was provided a wireframe from the marketing lead that was made using scene.io. I assessed which elements would be most important for the user experience as they navigated the site, prioritizing signing up with Maryna, which was the ultimate goal.

Maryna Podcast Maryna Photo Treatment Maryna Social Media Maryna Color Variations Maryna Logos Maryna Brand Guidelines
Wireframe showing homepage layout

3. Prototyping

Guided by her brand and feedback, I created a light, minimal mockup with a focus on contrast, whitespace, and hierarchy. She described wanting the site to feel energetic and uplifting, avoiding darker tones that might feel too heavy. The mockup was created with React, using HTML, CSS, and JavaScript. After review, we pivoted from a technical build to WordPress so she could make edits herself without touching code.

Maryna Prototype Maryna Prototype

4. Development

The site was rebuilt in WordPress using the Flatsome theme. I integrated Calendly, Klaviyo, and ensured responsive, accessible layout. SVG wave transitions were removed due to cross-device bugs and replaced with built-in WordPress transitions. Maryna requested a way to make comments directly on the site to express her opinions in real time, so I installed a third-party collaboration plugin from atarim.io.

Wave Transition WordPress Transition
Atarim Sample

Powerful Collaboration

5. Testing & Iteration

We worked in a roughly Agile methodology, with weekly Sprints, task tracking, followed by video conferences to discuss changes. Based on feedback from Maryna and her marketing coordinator, I iterated on transitions, shape dividers, and user flow to reflect her preferred aesthetic and site goals. I used empathy and informal user testing with friends and colleagues to refine the layout.

Atarim Task Manager

6. Outcome & Takeaways

The site launched successfully with increased client engagement. The WordPress pivot was key to client autonomy. I learned the value of clarity, user-led iteration, and tech flexibility in UX.

1. User Research

Interviewed the client, gathered user insights, and defined style preferences through collaborative discovery.

2. Design & Wireframe

Refined the provided wireframe using brand guidelines, prioritizing clear calls to action for booking.

3. Prototyping

Built an initial mockup in React; pivoted to WordPress so the client could edit content herself.

4. Development

Integrated Calendly, Klaviyo, responsive layout, and design system updates using WordPress + custom CSS.

5. Testing & Iteration

Refined UI through weekly feedback loops and informal user testing before launch.

A Glimpse Into My Portfolio

Singer Safety

Industrial Barrier Protection website built with WordPress, HTML, and CSS.

Chicago Tile Pros

Tile and flooring website built with WordPress, HTML, and CSS.

Bespoke Web Services

Custom software website Built with React, HTML, CSS, and TypeScript.

Rosati's Pizza

Chicago style pizza website built with WordPress, HTML, and CSS.

Audio Production Player

Audio production portfolio built with Next.js, React, TypeScript, HTML, and CSS.

Core Reach Social

Digital marketing and brand growth site built with React, using HTML, CSS, and JavaScript.

Praxis Counseling

Private counseling website built with HTML, CSS, and JavaScript.

Presentation Authority

Presentation and live event services website built with Wordpress, HTML, and CSS.

DataMuseum

Word-finding query engine UI that fetches data from the datamuse API, built with HTML, CSS, and JavaScript.

Kat Gaugler AI QC Specialist

AI Quality Control Specialist website built with React, using HTML, CSS, and JavaScript.

Custom Recipe Generator

Custom recipes based on ingredients you already have using the Spoonacular API, built with React, Next JS, Spoonacular API, Axios, HTML, CSS, and TypeScript.

Upbeat Music Studio

Local music studio website built with React, using HTML, CSS, and JavaScript.

Weather App

Weather based on user's current location using a weather API, built with HTML, CSS, and JavaScript.

Graphic Design

A portfolio of digital art pieces that I have created, built using Wix, HTML, and CSS.

Number Game

Random number guessing game built with HTML, CSS, and JavaScript.

Ryan Suit

Click to view resume

Resume built from scratch using HTML & CSS

Get In Touch

Have a Question?