<p><a class="text-yellow-500 hover:text-yellow-300" href="https://efrenpalacios.dev/teppen/cardmaker.html" target="_blank" rel="follow noopener" title="View Website">View Website</a>&nbsp;/&nbsp;<a class="text-yellow-500 hover:text-yellow-300" href="https://github.com/orctamer/orctamer.github.io/tree/master/teppen" target="_blank" rel="follow noopener" title="View Website">View GitHub Source</a></p>
<h2>Case Study: TEPPEN Card Maker</h2>
<p>I was approached by the Reddit community of the game over at r/TEPPEN if I could provide a web app that could let the user create their customized card to share ideas.</p>
<p></p>
<h3>Issues:</h3>
<p>As there are many ways to generate images, most methods are done with server hosting, post/get methods to generate the image, and overall a very slow approach. This will defer anyone from using the tool if it took time to see the results.</p>
<p></p>
<h3>Solution:</h3>
<p>With the power of DOM manipulations with Canvas + Vue.js and a little library called Fabric.js we can create a web app that can allow the user to edit the card in real-time.</p>
<p><img alt="undefined" src="https://cdn.buttercms.com/Sav6VYcTHyL5QstUye0e" /></p>
<p>Using the combination of all the technology, we can update the image in real-time with no need to send the information to a server to see the changes, you even have the power to paste a picture from your clipboard! To save on any cost of storing images or generating temporary ones the app allows the user to save the image locally to their computer or open into a new tab to store it into the clipboard to showcase it.</p>
<h3>Showcase:</h3>
<p>Since the game itself explains the cards within the app, I also developed a page to showcase the card you have customized so the community can understand it better.</p>
<p><img src="https://cdn.buttercms.com/RRodcxSoRvapOIlpxAE9" /></p>
<p>The same features of the previous app apply here as well.&nbsp; Thanks to this app the community has had an easy method to express their creativity without learning much about any photo editing software.</p>

TEPPEN Card Maker

<p><a class="text-yellow-500 hover:text-yellow-300" href="https://tmlss.store" target="_blank" rel="follow noopener" title="View Website">View Website</a>&nbsp;/&nbsp;<a class="text-yellow-500 hover:text-yellow-300" href="https://github.com/orctamer/tmlss" target="_blank" rel="follow noopener" title="View Website">View GitHub Source</a></p>
<h1>Case Study: T:ML:SS</h1>
<p>While working with the client, they were previously working with a company that decided to build the website with Word Press with an E-commerce service (woo-commerce). I decided to talk more with the client about another possible faster, more optimized, and simpler approach to the overall design of the site, front-end, and back-end wise.</p>
<p></p>
<h2>Issues:</h2>
<p>The client's site was overall too slow to load with a loading time of over ~3.3s and could take over 15s on a device on a 3G network.</p>
<p>The shopping cart was tied down to WordPress which is heavily loaded with additional non-required plugins and services.</p>
<p>The site design overall wasn't engaging at all with anything pointing to a call to action.</p>
<h4>Old Design:&nbsp;</h4>
<p><img height="315" width="635" alt="undefined" src="https://cdn.buttercms.com/hVDpNNQsQqOCzWMiRj7O" class="image" /></p>
<p><img alt="undefined" src="https://cdn.buttercms.com/xGq5eALTwywlIl2jTXTw" height="315" width="635" /></p>
<h3>New Design:&nbsp;</h3>
<p><img alt="undefined" src="https://cdn.buttercms.com/Cgzlpc31Ts60n4IxhjWy" height="315" width="635" /></p>
<p><img alt="undefined" src="https://cdn.buttercms.com/1vnZKpl0RpW1QszluZFp" height="315" width="635" /></p>
<h2>Process:</h2>
<p>After doing a bit of self-research and study I decided the best approach for the client in order to be able to self manage the site to save costs on hiring another freelancer or worker, I decided the best approach was to use a ReactJS built commerce site using the JAM E-Commerce service SnipCart. The core design of the brand was lacking a bit of color that stands out on the page, so I decided to use a gradient of grey shades to emphasize the overall look of the site.</p>
<p>The logo was simple but it lacked any understanding of the message of the company.&nbsp;</p>
<p><img height="134" width="155" src="https://cdn.buttercms.com/3UsbYhwgRUyUposSZmP0" /></p>
<p>After talking with the client on a new design for the local I sent a few examples and landed on this simple and yet elegant design.</p>
<p><span style="background-color: #ffffff;"><img alt="tmlss.svg" src="https://cdn.buttercms.com/c16WS7pfTmCY76obTa4R" style="background-color: #ffffff;" /></span></p>

A summary of the case study of E-Commerce website T:ML:SS

T:ML:SS Web Design Case Study

T:ML:SS

<p><a class="text-yellow-500 hover:text-yellow-300" href="https://efrenpalacios.dev/echofox/" target="_blank" rel="follow noopener" title="View Website">View Website</a>&nbsp;/&nbsp;<a class="text-yellow-500 hover:text-yellow-300" href="https://github.com/orctamer/orctamer.github.io/tree/master/echofox" target="_blank" rel="follow noopener" title="View Website">View GitHub Source</a></p>
<h1>Case Study: EchoFox Redesign</h1>
<p>Before this E-Sports Organization disbanded their official page had a few issues and I decided to re-imagine the design that had a more of a semantic approach. I decided for this recreation to use the full potential of CSS and Javascript without the usage of any frameworks or libraries.</p>
<h2>Issues:</h2>
<p>The website was not optimized for mobile usage, the page will expand to accommodate the space for the images they used, the site also lacked any cohesive design on most call to action.</p>
<h3>Old Design:&nbsp;</h3>
<p><img src="https://cdn.buttercms.com/biPlYlFYSJuKt1Wa7vBC" alt="undefined" class="butter-float-left" /></p>
<p><img src="https://cdn.buttercms.com/rHOodp1rQ6P6P0PZPhpg" alt="undefined" width="300" height="600" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<h3>New Design:</h3>
<h3>&nbsp;<img src="https://cdn.buttercms.com/4R0Y7jQiTGCdnnR6yAsI" alt="undefined" style="font-size: 14px;" /></h3>
<h3></h3>
<p><img src="https://cdn.buttercms.com/3ywnMUHPQja9bhzCJVtH" alt="undefined" /><img src="https://cdn.buttercms.com/iOB5xyndQTC2FDJjm2Uh" alt="undefined" height="550" class="butter-float-left" /></p>
<p><img src="https://cdn.buttercms.com/fZsfrfQvQTSD0ZqIXt65" alt="EJ6vNVX8oS.gif" width="261" height="550" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2>Process:</h2>
<p>For this approach, I decided that the best technique would be a simple design with no need for frameworks or libraries, but still provide the necessary modern designs that are commonly used.</p>
<p></p>
<p></p>

Efren Palacios

Web Designer & Programmer

Projects