One-page responsive website converted from PSD

This site was created using Adobe CC 2017 versions of Dreamweaver and Photoshop and has the following features:

  • Onepage format with smooth scrolling
  • Fully responsive
  • Tabs change into accordion on mobiles
  • Responsive Carousel
  • Includes a reset.css file
  • Used both downloaded as well as online fonts
  • Sticky nav-bar after some scrolling

How the site looks on desktops:

This slideshow requires JavaScript.

The number of images in the carousel changes when viewed on tablets:

psdtohtml_onepage_responsive_06

The number of images in the carousel changes when viewed on mobile phones and the tabs also change into accordion:

PHP e-commerce web application

This is a trivial web application that allows customers to buy products. Used PHP sessions, the PHP SimpleXML interface and the shopping.com API i.e. eBay Commerce Network API (“ECN API”). Using a demo API key but you can get your own API key as well. The search form has a menu to select a category, a text window to specify search keywords, and a submit button. The menu contains all sub-categories of the category “Computers”. The menu items are not handwritten in the code; instead, they are generated in the PHP code. The result of a keyword search contains up to 20 products within the selected category that best match the keyword query. PHP session is used to store the shopping basket. For each chosen item, we store the Id, the name, the price, the image, and the link to the shopping.com web page that lists the best offers for this item.

This slideshow requires JavaScript.

Web Mashup: Display Best Restaurants on a Map

The goal of this project was to create a web mashup that combines two web services: Google Maps and the Yelp API for Developers, using JavaScript and AJAX.

After centering the Google Map to a geographical area and entering some terms, such as “Indian Restaurant”, the application will find the best matches (eg, the best Indian restaurants) inside the map area, it will mark their location on the map, and will display some information about these restaurants on the web page.

For this project, I have used

  1. Yelp API for Developers v2.0 from Yelp (more specifically, the Search API)
  2. Google Maps JavaScript API V3
  3. Google Map Markers

The HTML web page has 3 sections:

  1. a search text area to put search terms with a button “Find”
  2. a Google map of size 600×500 pixels, initially centered at (32.75, -97.13) with zoom level 16
  3. a text display area

When you write some search terms in the search text area, say “Indian buffet”, it will find the 10 best restaurants in the map area that match the search terms. They may be less than 10 (including zero) sometimes.

The map will display the location of these restaurants as map overlay markers with labels from 1 to 10. The text display area will display various information about these restaurants. It will be an ordered list from 1 to 10 that correspond to the best 10 matches.

Each list item in the display area will include the following information about the restaurant: the image, the name as a clickable url to the Yelp page of this restaurant, the rating (1-5 stars), and the snippet text. When you search for new terms, it will clear the display area and all the map overlay markers, and will create new ones based on the new search.

This slideshow requires JavaScript.

A Movie Web Application

A web application to get information about movies, their cast, their posters, etc. This application was developed using plain JavaScript and Ajax. Used the Web Service REST API of the movie DB TMDb (The Movie Database). Everything was done asynchronously and the web page was never redrawn/refreshed completely.

The application had a text section where one can type a movie title (eg, The Matrix), one “Display Info” button to search, one section to display the search results, and one section to display information about a movie. The search results is an itemized clickable list of movie titles along with their years they were released. When you click on one of these movie titles, you display information about the movie: the poster of the movie, the movie title, its genres, the movie overview/summary, and the names of the top five cast members.

This slideshow requires JavaScript.

Native Android App

This app is called “Live Easily Mavericks”. It is a fully native android application intended to bridge the gap between leasing managers and student tenants living on-campus.

It was developed using Android Studio and works on Android 4.0 and up. The database used was Amazon RDS.

(P.S. – Sorry for the poor voice quality; if you noticed, it was recorded at 3:15 AM)

Demo sites for clients (responsive)

I also created a number of responsive sites for demo purposes and to keep track of the many modules under development for the same client. These sites were standardized by me giving the ability to make minor changes and re-use them for multiple projects and clients. The data was stored in an XML file so only that single file was updated to add/remove/modify content.

This slideshow requires JavaScript.