Kay McKelly

Front-End Developer

Introduction

This is a visual showcase of some of my projects. Whether it's design or topic (or, more often, both), I really enjoyed building these projects. I strongly believe that you should love what you do, so when I take on a project, it's going to be something I enjoy. There's always more work to do, so I almost never refer to my apps as "finished". All my code is up on Github.

I strive to adhere to web accessibility standards, as set forth by the World Wide Web Consortium (W3C). Gray-on-gray low-contrast text is in fashion right now and while aesthetically it can look nice, I'm more invested in making apps that are truly accessible for all users.

Portfolio

Freelance Work for IACR

old Crypto site, appears out of date with dull colors
new Crypto site, colorful and well organized

The International Association for Cryptologic Research (IACR) requested a template for future conferences that organizers could easily clone and reuse. IACR was primarily interested in making their conference site mobile-accessible, maintainable, and updating their aesthetic. Their last conference site (shown above at left) resembled sites built in the late 90s/early 2000s and was not mobile accessible. Additionally, the site was almost exclusively written using HTML 1.0 and had a drab appearance.

My redesign (shown at right) is more colorful, with responsive menus and a mobile friendly design using Bootstrap 3.3. I created a color palette for the site based on IACR's logo, with orange and green that complement the deep indigo of their logo. This project is still in progress, but there is a live preview available here.

See the code on Github

Conference Program Creator

Still in the wireframe/preliminary build stages, this is another piece of my work with IACR that I'm pretty excited about. They requested a tool to make conference program creation easier. They did not want to use existing tools, as they already have several robust databases. As a result, they requested I build what will be an internal tool linked to the relevant internal databases.

At present, I am researching the optimal way to build this tool using jQuery. I have submitted a proposal, which was approved at IACR's last board meeting, and have now begun building based on the wireframes I submitted.

When this code is publicly available, I'll add a link to the Github repo.


Boost

homepage of the Boost app with the menu open
screenshot of login page explaining why you have to log in to boost someone
screenshot of the boost page with dummy text of a fake user's ask
meditation timer screenshot

The six months I spent at Galvanize Seattle culminated in a Capstone project. We were given two weeks to complete a full stack app, from concept to building a server and client side. I created an app called Boost, which focuses on compassion and self-care. Built using Angular.js for the front-end, Express.js (a Node.js framework) for the server, and a PostgreSQL database, Boost is very much a labor of love. I wanted to make this app because many think of the internet as lacking in compassion. Boost is designed to inspire compassion for others.

The main functionality of Boost is the ability to "boost" others. After logging in (second image), users are immediately shown an "ask" (third image). An "ask" is a user-submitted story or question. Your options are to "boost" them (similar to a Facebook like) or comment. If you feel like you can't help, the "boost somebody else" button will show you another user's story randomly pulled from the PostgreSQL database.

Additional features include a meditation timer (fourth image) and an inspirational quote generator that uses the They Said So quotes API. Initially I had also wanted to include a self-care checklist, but I ultimately set this aside for a separate future project. Building Boost taught me that prioritization of features and estimating how long a project will take are two of the greatest assets to web developers. Some of the challenges I faced included trouble implementing oAuth and feature creep.

See the code on Github

Seattle Neighborhood Challenge

Seattle Neighborhood Challenge home screen
Seattle Neighborhood Challenge login page
Seattle Neighborhood Challenge create a new challenge

Seattle Neighborhood Challenge (SNC) is a full stack mobile app that works cross-platform (iOS and Android). This app was a team effort between the six of us. I volunteered to be project manager, in addition to being a contributing developer. We used an Agile approach and built this app in six days. SNC uses the Google Maps API and was built in React Native, with an Express.js server and a PostgreSQL database. The six days also included learning React Native, which none of us had worked with before. Other technologies utilized included the Google Maps API, oAuth with Facebook login, and Knex.js as a query builder.

SNC is an app that's a more spontaneous version of Meetup. Users log in using Facebook and can then create, RSVP, and attend events (called "challenges"). Challenges are viewable by user-specified area on a map (see screenshot 1). The idea is to let people get to know their neighbors while having a common fun activity for everybody to engage in. The primary challenge of this project was learning how to work effectively with other developers and unfamiliar frameworks. I really enjoyed being a project manager and would like to do so again in the future, though I'd first like to get more coding experience.

See the code on Github

Brows on Fleek

Brows on Fleek home page, with sage green background and an expressive gif of Frida Kahlo with a floral print background raising her eyebrows rather expressively
part of the form that helps users determine in what area they'd like to search for a place to get thier eyebrows done

I built Brows on Fleek at the end of my first quarter at Galvanize. This was the first website I had built in ten years, so I was pretty excited. Initially inspired by this gif of Frida Kahlo, Brows on Fleek was built using HTML5, CSS3, Bootstrap, and the Google Maps API. The main functionality is to allow users to specify a location and look up places to get their eyebrows waxed, sugared, or threaded within a given area. This project marks the moment I realized that I wanted to pursue a career in web development.

See the code on Github

Contact

Email Me