Add and Drag

Add and Drag was created as a proof of concept. I wanted to utilize some of my Javascript skills to see if I could create the base for a tool that would allow users to easily manage website layouts.

Enjoying math was a big plus for this project, seeing as it accounted for roughly 75% of the time spent. I had to make sure that I accounted for little quirks in all the browsers; which I think I did a decent job of. The page uses Javascript exclusively to add/edit/resize/remove content panes. As per usual, the page is valid XHTML and CSS.

View Original

Behind the Screens

Behind the Screens is a collaborative blog I had started to catalog the creation of a company with my business partner, and best friend, Matt Leonard. The idea was so we could have the ability to make notes about what we were doing so that other people who were faced with the same situations, could see what the right (or wrong) decisions were.

The logo was actually the first thing I developed for this project. I knew I wanted something that mixed imagery with our business, while also looking clean and new. The monitor made sense to me because what we do is shown on the screen; the magnifying glass exemplifies the idea of looking closely. The finished product of a magnifying glass revealing code on the monitor seemed to hit home, to show people how we work 'behind the screens'.

The theme that I was very into at the time of this site design was simple, crisp, bright designs. I wanted something that would be easy to view for users and not too much 'fluff'; the standard two column layout was easily adoptable for this reason.

As with most of my sites, I wanted to make a valid XHTML and valid CSS page, which this page is. I developed the blog system myself as well using PHP and MySQL to add/remove/edit entries and comments.

View Original

Syphenscape

This is my personal blog site. I've gone through many different stages as a developer and a designer and the first thing I look to is my web site. What can I do to make it better? more appealing?

I started this site about 6 years ago while I was bored between jobs and still taking classes. I knew there were other blog systems out there that I could use but I ended up building my own (mostly as a learning experience). That was when I really started learning PHP. The original version basically used PHP and text files to display my entries.

As I evolved as a developer, so did my website. I eventually scrapped my text file system and moved on to MySQL. Once again, I built the system from the ground-up and started doing more with the styling. This is where my obsessions with standards compliance began. I liked coding pages that looked identical no matter what browser you were viewing. Not only was it an obsession but it also helps when I'm making sites for others.

Finally came this version of my site. I wanted to make a fun graphic/color scheme while following my ultra-minimal kick that I've had. The idea was to make getting information really easy and effortless.

View Original

Infinilink

Infinilink was a project that I had kind of tried once before. I wanted to make an online link management system, much like del.icio.us. I knew that in order to have something that would even remotely be considered by users I needed a little edge; that's where the idea for using the bookmarklet came.

For those who don't know, a bookmarklet is essentially a bookmark/favorite that when you visit it, it actually executes javascript code. This is a nice thing to use if you wanted to...capture the current page and display something on it. Infinilink uses a bookmarklet to display a pane at the top of your screen that not only displays the links that you currently have saved in your account, but also allows you to add the current page into this group.

I had actually first created the bookmarklet for Infinilink before I created the site which was a little backwards but I think it ended up working out. I developed a lot of code including: AJAX to manage links, PHP to check for feeds, Javascript to display all info. Even with all the quirks, the site itself still manages to be valid XHTML and valid CSS.

View Original

Rochester Advertising Federation

The Rochester Advertising Federation is a collaborative group of professionals in the advertising field in the Rochester, NY area. This project was done to help create a new online presence for the organization. The client wanted a simple, minimalist design that was easy to navigate and get information quickly.

The first thing I decided with this design was to make it bright: white and pastel colors. I also wanted the showcase area to be very noticeable, but also serve as a spacer on pages that wouldn't neccesarily have anything to showcase. By making a separation between navigation and content, extracting information is easy.

The layout was easy to decide on; using a multi column layout would allow for the separation of materials and give the user the ability to query for more information at any point. Using a subnavigation bar also simplifies the 'where are you' status of the page.

After the design was finalized in Photoshop, I started the coding. I made sure that the page would look the same no matter what browser or operating system you were running. I try to develop all of my pages with valid XHTML code as well as valid CSS and this page is no exception.

View Original

Office Stix

Office Stix is my first attempt at doing comic work. I have been getting more and more into comics and decided one day that I wanted to make one to poke fun at office situations. I'm not a skilled illustrator so I decided to go a different route with the panels.

Instead of drawing the characters, scanning them in, and finally tracing them in Illustrator; I decided to do things a bit differently. I created a single model in Swift-3d and mold the model to whatever pose I want. After posing, I export the scene to Illustrator where I add in heads, facial expressions, dialog and any other extras needed. The finished product is what you see on the site.

The site design mirrors a classic comic look. Black bordered boxes with content inside and comic text for headers; coded completely with valid XHTML and CSS.

View Original

Nimble Design Group

Nimble Design Group is a venture that my best friend, Matt Leonard, and I got into shortly after graduating college. We wanted to be doing what we enjoyed while also working together so we started our own multimedia design partnership.

The site we have now is a complete overhaul of what we used to have. Originally we put our site together very quickly in order to just 'have something' for people to see. After forgetting about the site for a while, we came back to it and realized how badly we needed to redo it.

After a little while of looking at concepts and thinking about our logo colors, I came up with a rough design, which the two of us tweaked until it was something we both agreed on. We wanted the design to be inviting, flashy, and show potential clients what work we have done.

This site was a little interesting when it came to the coding part. Sometimes it's very hard to make a design look right without using tables; I can say, with confidence, that the site is fully standards compliant with valid XHTML and valid CSS.

View Original

Nimble RSS

I was discussing with a friend that, at the time, there were very few web-based RSS aggregators that were simple to use. From this discussion sparked my idea for this application. I wanted to make an easy-to-use aggregator/reader that also allowed for searching.

The design for the page was very simple and minimalistic; less is more for something like this. What I needed to do was create a method for me to allow a user to input a website, RSS link, or search term and display the appropriate data. After much work and debugging I finally had something.

When you visit the page there are really three ways to view feeds:
1) Enter in the exact feed link (ex: http://www.lifehacker.com/index.xml)
2) Enter in the website you'd like to check if a feed exists (ex: http://www.lifehacker.com)
3) Enter in a search term you'd like to do a Google search for (ex: lifehacker)

I created this page with valid XHTML and valid CSS, utilizing Javascript, XML and PHP to actively display information on the screen.

View Original

Lily Ashlyn

My girlfriend and I found out that late August of '07 (around Aug. 26) we will be parents of a little girl. After a bit of time we decided on a name: Lily Ashlyn. We wanted to keep people up-to-date as to events, health, and other things revolving around little Lily so I put together a quick little blog.

Kendra, my girlfriend, wanted something inviting and not too intense. She helped me out picking the colors for the site and I set to work on a logo. It was pretty obvious that I would use a lily flower for the logo, so I went on a hunt for lily images. I found one that I liked, made a vector version of it, scaled it down, added some text, and voila; the logo is done.

Since I have built numerous blog systems, this one was quite easy. I made an admin panel to help us filter out bad comments and allow us to make new entries when we wanted.

This site follows my recent trend of making valid, cross-platform, cross-browser XHTML and CSS sites.

View Original

Irked at Work

While working at one of my previous employers, a few of my co-workers and I had an idea for a site for disgruntled employees. I know it seems to give the appearance that I didn't enjoy my work, but this isn't the case. The site was more for those periods of time when you are just irked about something that has happened; hence the title 'Irked at Work'.

The first step was actually coming up with the concept and plan for the site. We wanted to make a site that not only served as a venting ground but also allowed users to comment about situations, create digital personas, play games, and even read articles geared towards dealing with office complications.

With the plan out of the way, we needed a name. We had tossed around some potential ideas (and some not so much) and got centered around a rhyming name. We kept thinking of things that could make sense and rhymed with 'work' or 'office'. Irked just seemed to fit.

Mike, one of the two co-workers, laid down a design that would not only personify what the site was, but also be a little different. It was a little hard at first trying to work with his design and create it with code but with some nifty CSS and Javascript I was able to get it to look just how we wanted while also making valid XHTML code.

View Original

The Rims

My older sister(Tina), her boyfriend(Phil), and a couple of their friends decided that they wanted a website for their charity bike-racing team, The Rims. They already had put together some shirts that they wanted to use before she asked if I could help them out. I figured that something resembling road traveling would work well for the theme of the site.

They wanted it really cheap and easy to add information to, this is where Wordpress comes into play. After a bit of time fumbling code around I managed to finish the page as it sits right now.

Because I setup a Wordpress.com account for them, I was a little more limited in my coding so I apologize for the lack of an XHTML compliant page.

View Original