Technologies used: HTML, CSS, Sketch, Bootstrap

My colleague and I teamed up to complete this freelance project to refresh the web presence of The Maryland Society for Sight, an exceptional non-profit organization in Baltimore, MD. This organization was founded in 1909 and successfully eradicated a leading cause of blindness. Now, their mission is to prevent blindness and preserve sight for Marylanders through the numerous statewide programs they have established. With such a wonderful purpose, there was no way that we could pass up the chance to volunteer our services.

I was in charge of the initial contact with this organization, which led to a meeting to discuss the essential components needed for the landing page. Audrey was a wonderful client to work with. She was a wealth of knowledge and gave us all of the materials that we needed. After I created a quick mockup using Sketch, we developed the landing page and sent the finished product to Audrey for review. I was responsible for making the initial skeleton in HTML and changing some of the Bootstrap related HTML and CSS to make the page more responsive. Once approved, we launched the new landing page. We are currently in the process of completing the full version of the site, which will be done in WordPress.

Just for comparison, here is what the website looked like initially:

Technologies used: WordPress, CSS

This project was completed for the National Society of Black Engineers, Baltimore Metropolitan Area Chapter. This organization needed a website that is more modern with a backend that makes it easy to update content. For this reason, I chose to use WordPress so that they could easily update content in the future.

I started by creating a landing page which showed all of their updated and pertinent information. This was developed using Bootstrap. Next, I created a wireframe for what I wanted the site to look like. After that, I searched for free WordPress templates and plugins that would help me to achieve the look of my wireframe. Once all parts were identified, I began development.

Since development was based on a WordPress template, I tried to use as many pre-existing features as I could. For additional functionality that was not included, I used plugins that fit the design scheme. Then, for any additional changes that had to be made, I customized the CSS of the template itself.

Technologies used: WordPress, PHP, HTML, CSS, jQuery, Materialize

My current company, Doctor Genius, needed a new system of pages where we could showcase our upcoming and past events. There were two types of pages that were necessary. One was an archive page that showed all of the past and upcoming events of the company. The other was a single event page that showed all of the details of an individual event. I was tasked with translating the design that our designer created into functional code on the Front End. This was done using the Materialize framework, as well as HTML5, CSS3, and jQuery. Each page was also coded and designed responsively.

In addition to the Front End work, there needed to be a system put in place on the backend to input each new event. This was done in WordPress by creating two new templates, one serving the archive page and the other serving each individual event page. Each page needed to dynamically be able to handle displaying the information that pertained to a certain event. For this to work, I implemented a custom post type (CPT) on the backend. This CPT contained custom metaboxes that accepted information about the event from the user, including text entries, colors, dates, and images. Custom metaboxes were also generated dynamically on the backend for certain entries, such as speakers, since the amount was different for each event. A button with a click event handler was implemented that created a group of metaboxes that pertained to a speaker object once triggered by the user. I also included the ability for the user to hide certain sections of the page by selecting a checkbox. Lastly, I implemented a countdown timer for featured events. This created a countdown display at the top of the archive page, which showed the remaining days, hours, minutes, and seconds until the event started. This was done using the Countdown.js API.