Project Tag: Vue.js

  • White Sun Crafts

    White Sun Crafts

    Project Summary

    I originally designed a complete, data-driven e-commerce website for White Sun Crafts back in 2016 for the client to sell her handmade jewelry. In addition to building the data structure and programming all the functionality, I designed all the content for the site, including the logo, banners, and product photos. I also integrated the site with PayPal to securely process online credit card transactions. For years, it was maintained and continuously improved based on feedback and requirements from the client, which were logged through my custom-built “Anigrams Support” app.

    The Problem

    The website had some problems: it wasn’t mobile responsive, it was hard to add new products to sell, and the PayPal integration broke at some point. In 2023, I reached out to the client to redesign and rebuild her website from the ground up.

    The old website was built with ASP.NET Web Forms
    The new website is responsive, built with Vue.js & Ruby on Rails API

    The Solution

    The new website features a new logo with a modern look and feel and aims to solve the problems mentioned above. It’s paired with a new Square Online storefront that makes it easy for the client to manage her store’s inventory and process customer payments through a trusted company specializing in e-commerce. Thanks to the new website, she’s back in business!

    Screenshots

    Home page featuring a compelling call to action and links to different store pages.
    Screenshot of the About page describing the company and owner.
    A screenshot of the Contact page featuring an accordion-style FAQ section.
    A screenshot featuring a special contact form for custom orders.
    A screenshot of the new storefront managed by Square, made to match to the main site.

    View website
  • Ophelia’s Potion Shop

    Ophelia’s Potion Shop

    Project Summary

    This little game prototype was made as part of a team-building workshop with my coworkers. The goal was to create a simple match-3 game like “Bejeweled,” where you match three or more of the same item/jewel/tile in a row to earn points. The game is over when you run out of moves (a.k.a. there are no more matches to make).

    We were allowed to choose our own tech stack, so I chose to make mine playable in the browser by building it with Vue.js and the HTML Drag and Drop API (which I didn’t even know existed before!). It was a learning experience, but if I had the chance to do it again, I would probably choose to approach it a different way. I found it difficult to provide the player with meaningful visual feedback, like being able to see the tiles “sliding” into place.

    I chose the art assets I did to invoke the feeling of an alchemy shop where you’re building a potion by matching (or merging) ingredients. The idea was that you might have a customer who requests a specific potion, and now you need to be a little more strategic about which matches you make to fulfill the requirements to make that specific type of potion. I would love to come back to this game someday and add a little story about Ophelia and her potion shop.

    Screenshots

    Match 3 or more of the same tile in a row to win.
    Debug mode can be enabled to see more details about each tile.

    View on GitHub