The Infected Mushrooms Portal is a custom built PHP/MySQL website for guild members in a game called Helbreath USA. The site was originally created as a way to track item usage within the guild, and over time it evolved into a full website with custom built forums and other features. There are lots of fancy AJAX effects in work on the site, but sadly those are only usable by registered members.
A lot of people have been using CSS3 media queries recently to deliver different styles of their web site to users based on the size of their browser screen. Usually this comes in the form of a ‘normal’ 960px width site, and will also deliver a more condensed version for mobile platforms such as the iPad and smartphones. I decided to go a different route and create a demo that delivers content for a 960px width site, and also delivers an enhanced version for users with monitors that have a Full HD resolution (1920px width).
The site works best in webkit based browsers of course, but most of the quirks of older browers are brought up to speed using some different methods. I used CSS3PIE to enable most of the CSS3 properties used on the page to work in Internet Explorer 7 and 8. Media Queries are also a problem in IE 7-8, so I also employed a javascript project called css3-mediaqueries.js to enable them. While both of these methods have their quirks, they go a long way in helping to bring users with outdated browsers more advanced features.
Here is a list of some of the CSS3 features employed on this demo:
Please take a look at the demo I’ve created and feel free to browse the source to see how things were done. Users with a 1920px width monitor will get to see the CSS3 Media Query in action as it converts the site to a two column layout that takes advantage of the entire width of the site. Also, if anyone is wondering what the image slider is on the demo page, it is a jQuery slider called Nivo Slider.
Recently I’ve been reading a lot about HTML5 and CSS3 and the amazing capabilities that these upcoming tools offer to us web developers. The border-radius and box-shadow properties themselves are huge steps forward. After looking at piles of HTML5 and CSS3 demos, I decided that it’s time to create one of my own.
For this project I decided to make a web-based resume. I actually began this project several months ago, but I was recently inspired to start over from scratch after viewing an HTML5/CSS3 layout by onextrapixel.com.
This demo works best in Google Chrome or Apple Safari. Firefox will work well enough if you don’t have either of those browsers available. I hope you enjoy it!
View The Demo: HTML5 and CSS3 Resume Demo
I apologize for not having updated in some time. Things have been pretty hectic and I’d like to tell you why. Over the past couple of months I have accepted a new job offer and moved to a new apartment in Lansing. I was recently hired by INgage Networks to work full-time as a UI Engineer in Lansing, MI. I will be in Naples, FL until May 27th for training at the INgage Networks headquarters. Palm trees and sun!
Just as before, I will still be offering freelance website design and development services. Since my time is limited, I will only be focusing on one project at a time to ensure a quality website and a happy customer. I currently have one project on hold that I will begin upon my return to Michigan for a former co-worker at Landscape Forms.
Kalamazoo customers are still more than capable of receiving my services. Distance is not a problem in the age of technology that we live in. My services are available to anyone no matter where they may be located. Thank you for your time and patience!
eBid Auctions is a website that I made during my internship at Landscape Forms for internal company auctions. This website uses ASP.NET and SQL Server with the jQuery User Interface to create an easy-to-use rich web application for employees to bid on auction items. Fancy Box was also employed for image pop-ups and item descriptions.
Unfortunately I cannot link you to the website since it is internal, however I have uploaded some screen shots for your viewing pleasure. Enjoy!
