<h3>A Change of Pace</h3>
In September of 2019, I began working at Brass Bell as a product specialist. After freelancing full time for a few years, I decided to try working in another field I’m passionate about, music. It was a nice of change pace to get on my feet and move around all day.
<figure id="attachment_40" aria-describedby="caption-attachment-40" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/brass-bell-sign-e1628549517852.jpeg"><img src="https://wp.colinswinney.com/wp-content/uploads/2021/08/brass-bell-sign-e1628549517852.jpeg" alt="The storefront sign at Brass Bell Music" /></a><figcaption id="caption-attachment-40" class="wp-caption-text">The storefront sign at Brass Bell Music</figcaption></figure>
Brass Bell has been a Milwaukee area business for 50 years, so they came with a lot of history, a friendly and loyal customer base, and some of the most knowledgeable coworkers a guy could imagine. My manager, Nick, had gone to school for computer science and was our store’s IT guru. When the POS system needed an update or had a hiccup, Nick was the man to call.
Nick had designed and customized the store’s website using a CMS and ecommerce solution from a company called Vortex. They were almost an industry standard for any music retailer using AIMsi POS software. It not only tied directly to our store inventory, it also allowed customers to complete an online instrument rental. Our unique rent to own program was Brass Bell’s major revenue generator.
<figure id="attachment_38" aria-describedby="caption-attachment-38" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/brass-bell-homepage-e1628546282918.jpg"><img src="https://wp.colinswinney.com/wp-content/uploads/2021/08/brass-bell-homepage-e1628546282918.jpg" alt="Brass Bell Music&#039;s updated home page" /></a><figcaption id="caption-attachment-38" class="wp-caption-text">Brass Bell Music&#8217;s updated home page</figcaption></figure>
When I began, it had been several years since Nick had developed the site. As the pandemic hit in spring 2020, it temporarily reduced store hours, and so it was decided that a good use of this newfound time was to make updates and changes to reflect the stores evolving operation. As a newly remote worker, I was tasked with implementing the new look our stores graphic designer had came up with.
The site uses Bootstrap, which made the homepage “pyramid scheme” look (for lack of a better description) and other responsive changes a breeze to implement. For the rentals, lessons, and repairs pages, a new cohesive look was put in place. Where they once had their own unique characteristics, they were now tied to together by a similar design to showcase the site as a fully formed idea.
<figure id="attachment_37" aria-describedby="caption-attachment-37" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/brass-bell-compare-e1628546322749.jpg"><img src="https://wp.colinswinney.com/wp-content/uploads/2021/08/brass-bell-compare-e1628546322749.jpg" alt="A comparison of the Repairs, Rentals, and Lessons pages, now connected by their similar design." /></a><figcaption id="caption-attachment-37" class="wp-caption-text">A comparison of the Repairs, Rentals, and Lessons pages, now connected by their similar design.</figcaption></figure>
Additionally the stores repair team created a number of new instrument sizing and maintenance guides, I designed a new events page, and product landing pages received a new a sidebar of all subcategories, requiring me to FTP into the sites backend and work with XML, a language I didn’t have much experience with previously.
I have since left Brass Bell as an in store employee, though I continue to do updates to the website. I loved the job and the experience, but ultimately my favorite part of working at a music store was coding the website. It’s what I do best.

brass-bell-ukes

logo

Coding a full site redesign working from another designers images, editing theme XML files to add functionality and layout improvements.

Brass Bell Music Store

<h3>Home (Page) Remodeling</h3>
I met Mike at CI Contractors through my sister, the two had gone to school together as kids and she had recently began doing some bookkeeping for him. When he mentioned his website was becoming outdated, my sis knew just who to turn to. 
<figure id="attachment_99" aria-describedby="caption-attachment-99" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-old-site.jpeg"><img src="https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-old-site.jpeg" alt="The previous CI Contractors home page" /></a><figcaption id="caption-attachment-99" class="wp-caption-text">The previous CI Contractors home page</figcaption></figure>
Mikes previous website was really not much more than an online business card. There was a basic about page and a few images, but it didn&#8217;t really describe in detail the breadth of services he offered. The first thing we set out to do was create more specific content, dividing Mikes specialties into commercial or residential and then breaking down services from there. 
Next, we really wanted to showcase that CI Contractors did work all over southeastern Wisconsin. By shifting the focus to the more general area of Lake Country and listing out the towns within, it opened up Mikes prospective clientele when they were searching for local services.
<figure id="attachment_98" aria-describedby="caption-attachment-98" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-services-section.jpeg"><img src="https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-services-section.jpeg" alt="The new homepage services section, each linking to more details" /></a><figcaption id="caption-attachment-98" class="wp-caption-text">The new homepage services section, each linking to more details</figcaption></figure>
A contact form offering free quotes was added to every page, making it easy to reach out and open a direct line of communication with potential customers. And finally, we added an image gallery of completed projects to let the work speak for itself. 
The site itself is a custom WordPress theme using UIkit to its fullest potential, including scroll based animations and filters for services. I created a new logo and Mike also had me design new business cards and door flyers for him as well.
<figure id="attachment_100" aria-describedby="caption-attachment-100" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-marketing-materials-1.jpeg"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-marketing-materials-1.jpeg" alt="Marketing materials, a door flyer and new business card" width="1000" height="600" class="size-full wp-image-100" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-marketing-materials-1.jpeg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-marketing-materials-1-300x180.jpeg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/ci-contractors-marketing-materials-1-768x461.jpeg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-100" class="wp-caption-text">Marketing materials, a door flyer and new business card</figcaption></figure>
This was a very successful project for both of us. It was a ton of fun for me, and with all of his new clients, a very profitable endeavor for Mike.

ci-hammers

logo-embossed

From the ground up website rebuild, including design, copywriting, logo, marketing materials, and hosting.

CI Contractors

<h3>You&#8217;re Looking At It</h3>
This website, my labor of love, my semantic little scamp, was obviously a very personal project for me. As a portfolio piece, I want to showcase all of my passions and try to sum up everything I&#8217;ve learned in my career as a developer. So where to begin?
Obviously, I had to use WordPress in some capacity, it&#8217;s been there for me since <a href="/projects/thesoundtestroom">the beginning</a> and it&#8217;s where I&#8217;m most comfortable. However, over the last two years or so, I&#8217;ve been increasingly interested in moving away from php to javascript and React, and the blazingly fast speed they can provide. On to the next chapter, right?
The Next.js chapter that is. The popular React framework was the perfect fit to create a headless WordPress site while giving me the best of both worlds. My favorite content manager merged with my newfound obsession, I am in heaven with this set up.
My previous portfolio was a custom Roots/Sage WordPress theme that I integrated with Angular.js. Almost as soon as I made it, Angular 2 came out and it soon felt outdated. It was also a single page application, and as such, its SEO suffered. By using Next and doing all of my rendering server side, I could set myself up for search engine success.
I used WPGraphQL and Advanced Custom Fields to fetch and store all of my desired data. For CSS, I decided to use styled-components after enjoying them so much on my <a href="/projects/netflix-clone">Netflix Clone</a> project. I loved keeping the styles so closely tied to individual components, it made it so easy to find what I was looking for without hunting through various CSS files.
The end result is everything I hoped my website could be; fresh, fast, and fun.

Me and Janie Giraffe

colin-swinney-logo

A portfolio piece showcasing a combination of all the things I am passionate about, WordPress, React, and having fun while coding.  

Colin Swinney

<h3>Rock &#8216;n Roll Redesign</h3>
Dusty Medical Records has a very special place in my heart. The head of the label, Kevin, has been a great friend of mine for over 15 years and used to manage my first &#8220;real&#8221; band, <a href="http://thegoodnightloving.com/">the Goodnight Loving</a>. Thanks to all of his hard work, we were able to release four full length albums, a handful of singles, and tour throughout the US, Europe, and even Australia. 
Kevin&#8217;s previous website was pretty basic, it was strictly html, 100% table based, and he didn&#8217;t use any CSS. It actually looked pretty charming for how simple it was, and it definitely looked rock &#8216;n roll! However, updating the site involved a lot of copy and pasting, FTP transfers, and frustrating syntax errors for a guy who didn&#8217;t code. Customers could also only purchase records through PayPal which was less than ideal.
<figure id="attachment_103" aria-describedby="caption-attachment-103" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/dusty-medical-old-site.jpg"><img src="https://wp.colinswinney.com/wp-content/uploads/2021/08/dusty-medical-old-site.jpg" alt="The previous Dusty Medical homepage" /></a><figcaption id="caption-attachment-103" class="wp-caption-text">The previous Dusty Medical homepage</figcaption></figure>
We decided on WooCommerce as a solution and I set about designing a custom theme. The site needed landings not only for the individual records in his online store, but Kevin wanted to fully feature his bands upcoming shows, as well as give them their own bio pages which would contain videos, photos, and product links. I also created a News section for him which Kevin has never used. I&#8217;ve offered to remove it for him, but he has hilariously decided instead to keep a single post up quoting his favorite Onion reference.
The backend of the site uses Advanced Custom Fields, custom post types, and custom taxonomies extensively to achieve all of this desired functionality while tying everything together seamlessly for Kevin. It was no small effort to make it seamless on the front end too since not every band or product page would require the same items. For example, a broken up band would no longer need a &#8220;shows&#8221; section, or an albums digital downloads links might not be available on all of the same platforms. Needless to say, there&#8217;s quite a lot of if/else statements happening behind the scenes. For the design, all images come from Kevin&#8217;s basement and we used a color palette based on his super 70&#8217;s patterned floor as seen in the footer. 
<figure id="attachment_102" aria-describedby="caption-attachment-102" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/dusty-medical-homepage.jpg"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/dusty-medical-homepage.jpg" alt="The new Dusty Medical homepage" width="1000" height="510" class="size-full wp-image-102" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/dusty-medical-homepage.jpg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/dusty-medical-homepage-300x153.jpg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/dusty-medical-homepage-768x392.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-102" class="wp-caption-text">The new Dusty Medical homepage</figcaption></figure>
This was probably my most personally fulfilling web project. Kevin is one of the nicest, most down to earth guys I know, and while my band had broken up many moons ago, it was a great pleasure to get to work so closely with him again to give him the website of his dreams.

wall

dusty-medical-records-logo-blue

A full website overhaul including design, a new ecommerce store, intricate custom post type relationships, and hosting.  

Dusty Medical Records

Just what the web needs, another color finder app, right? Well, maybe not, but I did find that HSL colors are severely underrepresented among the most popular apps which tend to focus on HEX or RGB values. I&#8217;ve been coding for seven years and I never really came across HSL (or I didn&#8217;t pay enough attention when I did), but let me tell you, it&#8217;s awesome!
My favorite aspect of HSL is it&#8217;s intuitiveness. By remembering the old grade school mnemonic device for rainbows, ROY G BIV, I can quickly guess an approximate value for any hue I want. You got your reds at 0 (or 360 if you&#8217;ve gone all the way around the color wheel), greens at 120, and blues at 240. From there it&#8217;s easy to mute the tone by lowering the saturation, or darkening it by lowering the lightness. It&#8217;s much harder to visualize how to change those values with HEX or RGB.
As for the app itself, it was really just a fun way to make something new with React. I first spun up a create-react-app project to test the waters, and once I knew what I wanted the app to be, I moved it over to Next.js. I used npm packages such as react-cliboard-js for the ability to copy color values on click, use-dark-mode for the theme selection, and styled-components for CSS in JS. 
After creating the color finder section, I was easily able to calculate shades, tints, and harmonies with a little basic math. To calculate a shade or tint, I simply consecutively subtracted or added 10% of the hue value. A complimentary color is just the opposite on the the color wheel, so hue plus 180 and you&#8217;re good to go! The other harmonies were just as easy to calculate. 
I also created a previews section where users can type in a heading and see how their choice looks against light and dark backgrounds or text. Again, just a fun way for me to use React hooks while making something I hope others will find useful. Not the most revolutionary app, but definitely a fun project.

color-wheel

HSL-color-finder-logo

A Next.js app to explore the wonderful world of HSL colors. Find shades, tints, or color harmonies.

HSL Color Finder

<h3>Renovating History</h3>
Linneman’s Riverwest Inn has been operating at the corner of Locust and Weil in Milwaukee since the summer of 1993. The owner, Jim, restored the historic building over an eight month period that year, resulting in a turn of the century charm to a modern folk and rock club. 
As a do it yourself kind of guy, Jim learned the basics of web design and created the bar’s website in 1999. It had all the quirks and characteristics of late 90’s web page, making extensive use of tables, gifs, and as required of any internet site the time, a visitor counter. Each month, Jim would update the calendar for his upcoming events, printing out a similarly designed flyer for display on the tables at the bar. 
<figure id="attachment_58" aria-describedby="caption-attachment-58" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-old-calendar.jpg"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-old-calendar.jpg" alt="Linnemans online calendar from January 2002" width="1000" height="469" class="size-full wp-image-58" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-old-calendar.jpg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-old-calendar-300x141.jpg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-old-calendar-768x360.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-58" class="wp-caption-text">Linnemans online calendar, January 2002</figcaption></figure>
That website stayed in tact for 18 years. It sort of became a local meme, its resistance to change was almost comical in its stubbornness, and with each passing year its throwback look to a bygone era of the internet made it more and more nostalgic.
Jim began to recognize that an upgrade would certainly be beneficial, customers were requesting more info on the bands and full descriptions of the shows. So we set out to modernize. I used WordPress to manage his content, a blank Roots/Sage starter theme to fully customize the design, and most importantly we needed a rock solid calendar page to showcase his lineups. Modern Tribes Events Calendar plugin was the perfect fit. Not only could it display his data in the beloved full month calendar look customers came to know, but it also gave them the option to display events in a chronological list, a format most of Jim’s fellow music venues were using. 
With a little help from Advanced Custom Fields, I was also able to modify the Modern Tribe plugin’s month display to include everything Jim desired such as a full list of the nights performers and event categories. On a single event page, Jim requested a Facebook event button and an ability to share the link there and on Twitter.
<figure id="attachment_57" aria-describedby="caption-attachment-57" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-new-calendar.jpg"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-new-calendar.jpg" alt="" width="1000" height="521" class="size-full wp-image-57" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-new-calendar.jpg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-new-calendar-300x156.jpg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/linnemans-new-calendar-768x400.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-57" class="wp-caption-text">Linnemans online calendar, today</figcaption></figure>
Linnemans.com’s new look as been in place for over four years now. While the old site was not with out its charm, I know both Jim and his clientele appreciate the new features this design is able to offer. Maybe if it’s still in use after 18 years this look will provide its own nostalgia.

vw-outdoor-shot

linnemans-logo

Redesigned static site with WordPress, custom theme, created assets, and altered third party calendar to meet client needs.  

Linneman’s Riverwest Inn

<h3>Creating a Countrified React App</h3>
The Long Line Riders are a band I currently play with as a pedal steel guitarist. It&#8217;s a six piece group playing old school country covers from the likes of George Jones, Loretta Lynn, and Hank Williams. We certainly don&#8217;t take ourselves too seriously. It&#8217;s really no more than weekly practices and maybe a show once per month, strictly for the love of the music and with no delusions of grandeur. 
This website was simply a second, slightly more serious React project after <a href="/projects/seinfeld-quotes">Seinfeld Quotes</a>. I used Create-React-App again to get started and set out to create all of the pages I&#8217;d need. There&#8217;s the old standards About, Contact, and Listen any band would have, and while normally I&#8217;d have included a Shows page, I started this project in July 2020 when gigs were completely off the table for the foreseeable future.
<figure id="attachment_105" aria-describedby="caption-attachment-105" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/long-line-riders-homepage.jpeg"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/long-line-riders-homepage.jpeg" alt="The Long Line Riders home page" width="1000" height="507" class="size-full wp-image-105" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/long-line-riders-homepage.jpeg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/long-line-riders-homepage-300x152.jpeg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/long-line-riders-homepage-768x389.jpeg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-105" class="wp-caption-text">The Long Line Riders home page</figcaption></figure>
The Listen section was the most complex, requiring multiple sub-routes for each individual release. I created a component called AlbumLink that I could reuse, essentially just the cover image and title, with the plan to include those links not only on the main &#8220;/listen&#8221; route, but on each individual album page linking to all other releases.
For the design, I used assets created by our drummer, Chopper, a very talented graphic designer who does all of our artwork. Each page has its own look that mimics either an old flyer or album from our catalog. For the Contact page I wanted to create the feel of a southwestern starry sky. You know, cowboy stuff.
<figure id="attachment_109" aria-describedby="caption-attachment-109" style="width: 640px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/contact-page-screen-record.gif"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/contact-page-screen-record.gif" alt="An animated starry background for the Contact page" width="640" height="315" class="size-full wp-image-109" /></a><figcaption id="caption-attachment-109" class="wp-caption-text">An animated starry background for the Contact page (bottom green bar courtesy of screen recorder)</figcaption></figure>
The band has been on hiatus since the beginning of 2020, but we still make plans to get together when the world settles down a bit. Someday soon, I will likely try and migrate the app to Next.js while using WordPress on the back end. Create-React-App isn&#8217;t very SEO friendly out of the box, and I&#8217;d also like to allow any one of us to add shows and expand our image library. Expect an update here when I do!

long-line-riders-single

cowboy-red

A simple, single page application made with React to showcase my bands music.  

Long Line Riders

<h3>Copying From the Best</h3>
Everyone loves Netflix, right? Or maybe you’re more of a Hulu fan, I don’t know, but the idea is the same. On demand movies and tv from the convenience of nearly any smart device you could think of. I think some toasters even have Netflix now.
<figure id="attachment_140" aria-describedby="caption-attachment-140" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-homepage.jpeg"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-homepage.jpeg" alt="The homepage of my Netflix clone" width="1000" height="516" class="size-full wp-image-140" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-homepage.jpeg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-homepage-300x155.jpeg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-homepage-768x396.jpeg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-140" class="wp-caption-text">The homepage of my Netflix clone</figcaption></figure>
This project was a tutorial I followed on <a href="https://scrimba.com/">Scrimba.com</a>, a super cool front end coding resource with a very unique IDE. You can literally pause a video to edit the code an instructor is working with. This clone was the capstone project of their Frontend Developer Career Path.
I learned so much from making this. Styled components, folder structuring on a large scale, lesser used hooks like useContext and many other advanced concepts you’d find in a large scale application. Sign up and sign in work as normal, so please feel free to do so. You can use &#8220;test@test.com&#8221; with a password of &#8220;testtest&#8221; as that&#8217;s already registered, or any fake email if you like since there&#8217;s no follow up verification.
<figure id="attachment_141" aria-describedby="caption-attachment-141" style="width: 1000px" class="wp-caption alignnone"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-watch-joker.jpeg"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-watch-joker.jpeg" alt="The browsing page of my Netflix clone" width="1000" height="515" class="size-full wp-image-141" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-watch-joker.jpeg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-watch-joker-300x155.jpeg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/netflix-watch-joker-768x396.jpeg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-141" class="wp-caption-text">Browse around once logged in, you can use &#8220;test@test.com&#8221; with a password of &#8220;testtest&#8221;</figcaption></figure>
I differed from the course in that I used Create React App for the setup, so there were some minor changes in my version. Unfortunately, you can only watch an odd ten second animated video, but the functionality is there should I ever decide to buy the streaming rights to the dozens of movies and tv shows shown. I&#8217;ll have to run that past my wife first.

netflix-joker

netflix-logo

Creating with React by following an eight hour online tutorial focusing on advanced architecture, styling, and user authentication.

Netflix Clone

<h3>An App About Nothing</h3>
Airing from 1989 until 1998, the television show Seinfeld centered around stand up comedian Jerry and his close knit group of friends, George, Elaine, and wacky, freeloading neighbor Kramer. The group would often find themselves in absurd situations often begat by their own selfishness. In this exhaustive summary I will…
Okay, okay, unless you’ve never turned on a TV, you’re probably familiar with Seinfeld. No need for the history lesson, I’ll get on with it.
After taking the dive into learning React, I wanted to build a simple project where I could put what I’d learned into practice. After searching for an API with which to grab some data, I found one using quotes from Seinfeld. I thought to myself, <a href="https://www.youtube.com/watch?v=SPeI6JY9DBo">&#8220;I really want to have some fun&#8221;</a> and decided a simple quotes app would be the perfect project.
<figure id="attachment_55" aria-describedby="caption-attachment-55" style="width: 1000px" class="wp-caption aligncenter"><a href="https://wp.colinswinney.com/wp-content/uploads/2021/08/seinfeld-quotes-screenshot.jpg"><img loading="lazy" width="1000" height="522" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/seinfeld-quotes-screenshot.jpg" alt="" class="size-full wp-image-55" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/seinfeld-quotes-screenshot.jpg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/seinfeld-quotes-screenshot-300x157.jpg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/seinfeld-quotes-screenshot-768x401.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a><figcaption id="caption-attachment-55" class="wp-caption-text">A screenshot from the app, Seinfeld Quotes</figcaption></figure>
I used Create React App to get up and running quickly. There were a few small punctuation edits to some of the quotes I wanted to make, so rather than make requests to the original API source, I decided to simply copy the contents and store it in my own file. From there it was just a matter of setting the routes for each character, filtering the quotes based on that, and randomizing the result.
Nothing much to it, it was just a little weekend project to learn some new skills. I&#8217;ve always loved Seinfeld, and it was a treat to reread my favorite lines from the show while I worked.

seinfeld-group

seinfeld-logo

My first React app, a simple, fun project created to practice consuming data.

Seinfeld Quotes

<h3>Tippecanoe and A3 Too</h3>
Along the way I’ve been given the privilege of doing some freelance work for two really great local companies, A3 Performance, a competitive swimwear manufacturer, and Tippecanoe Herbs, an apothecary that also specializes in education and guided tours of local plant life on “herb walks.”
A3 came to me while still using WordPress and Woocommerce, they were growing frustrated with their setup and were looking to make a change. After doing their research, the decision was made to move to Shopify with the migration largely handled by Shopify themselves.
I was excited to try something new. I had previously opened a Shopify developer account and had done the basics of familiarizing myself with their backend, but I had yet to really get my hands with their platform. Liquid was a whole new language, and while some aspects of it felt very intuitive, some items, such as its extensive list of filters, felt foreign coming from an almost exclusively WordPress and php background. 
Most of my work with them involved theme customizations, both with their backend theme editor, as well as editing the files themselves where necessary. A3 often launched new products and promotions, so there would be new pages or banners, menu items, and sizing guides to add. I also did a lot of minor tasks such as plugin updates or adding color swatches for products. 
As for Tippecanoe Herbs, they too had recently decided to move to Shopify after becoming unhappy with their platform. This time, I helped them make the switch by walking them through more of the process. Things such as picking their theme, how to add products, setting up their pages, categories, and menu items. I also did a lot more customization this time around, many more css changes, adding a Google Map with their stores colors and custom map marker, image editing, and a few other various tasks. 
Although I have a few frustrations with the platform, namely developer support for things like plugin/theme conflicts, I find Shopify to be a really great, easy to use option for businesses and I would recommend it to anyone for their ecommerce store.

shopify-computer

shopify-logo

Ecommerce store set up, theme customizations, updates, and troubleshooting for successful local businesses.

Shopify Work

<h3>A Room with a View</h3>
My wife and I had recently moved across the country to San Diego, CA and we didn&#8217;t know a soul. I&#8217;d always been a musician, playing in bands since high school, and this was the first time I didn&#8217;t have anybody around to play with. At just 400 square feet, our new apartment was far too small to even have a jam session (though we could see the ocean from our window!) so I started to get really into electronic music. It was perfect, I could use headphones along with my iPad and <a href="https://colinswinney.bandcamp.com/">make tunes</a> sitting outside in the sun.
Through this newfound obsession, I found <a href="https://www.youtube.com/user/thesoundtestroom">thesountestroom</a> (typically stylized as one word, all lowercase), a YouTube channel dedicated to demos of mobile music apps. I was inspired by all of these cool new instruments that were available for my tablet and I began to learn a little about how they were made. Soon I got the itch to learn how to code. After contacting Doug, the gentleman who ran it, we went in on a venture to create a website together. I would code it, and he&#8217;d create the content.
Wanting to get my hands dirty, I opted not to use an existing theme and went with a blank Roots/Sage starter to customize the design and learn as much as I could. Our site, thesoundtestroom.com was born a few months later and it was the ugliest looking thing you could possibly imagine. But, Doug had a loyal following so we at least had visitors.
<figure id="attachment_133" aria-describedby="caption-attachment-133" style="width: 1000px" class="wp-caption alignnone"><img loading="lazy" src="https://wp.colinswinney.com/wp-content/uploads/2021/08/thesoundtestroom-sales-modal.jpeg" alt="thesoundtestroom app sales tracker" width="1000" height="513" class="size-full wp-image-133" srcset="https://wp.colinswinney.com/wp-content/uploads/2021/08/thesoundtestroom-sales-modal.jpeg 1000w, https://wp.colinswinney.com/wp-content/uploads/2021/08/thesoundtestroom-sales-modal-300x154.jpeg 300w, https://wp.colinswinney.com/wp-content/uploads/2021/08/thesoundtestroom-sales-modal-768x394.jpeg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /><figcaption id="caption-attachment-133" class="wp-caption-text">thesoundtestroom app sales tracker</figcaption></figure>
Income was generated by selling a few ads and most importantly by becoming an iTunes affiliate, linking to the apps Doug would review and getting a small commission. Eventually, I was even able to create an <a href="https://github.com/colinswinney/tstr-app-tracker">app tracker plugin</a> that would flag apps with recent price changes. We created a &#8220;Sales&#8221; page and our visitors could jump on the ones that had gone down, earning us a little extra dough.
The site was quite popular for such a niche market, gathering as many as 80,000 views a month. However, after moving back to Wisconsin in 2016, I decided to leave the very time consuming soundtestroom. That experience taught me a lot of the fundamentals of HTML, CSS, php and WordPress specifically. I even learned a great deal about <a href="https://www.youtube.com/channel/UCySgYKKE83adKWCMrCraEoQ">video editing and animation</a> while creating content and demos for the site. It was a ton a fun and very valuable towards my personal and professional growth.

auria-light

thesoundtestroom-website-banner

A video blog dedicated to mobile music.  Site design, hosting, iTunes app tracking, content creation including demos, video editing, and animation.  