Design
Background
Portal is a little social networking hub I built for myself as an excuse to experiment with CSS3 and jQuery. It was designed and built from scratch in just one weekend.
Social Integration
The page aggregates its data by using jQuery and Ajax to poll the different social networks' APIs. It aggregates my latest updates from Tumblr, Twitter and Last.fm.
Realistic Design
Heavy use of animation helps the user feel as if they were physically interacting with the site. Design elements such as noise, highlights and drop shadows further create the illusion of realism.
Background
Project Dashboard is a project archive web application I designed while working at a digital agency. It was created using Adobe Illustrator and Adobe Photoshop.
Custom Widgets
The design includes a suite of custom widgets, including date pickers, drop-down menus, and accordions. These were to be implemented with gracefully degrading JavaScript.
Human-Computer Interaction
In addition to the aesthetics, I also designed the application workflow to be intuitive, with the goal of adhering to good principles of human-computer interaction.
Development
Background
I had the privilege of collaborating on a website for PD-LD, a manufacturer of laser products. The website was built using WordPress, along with the excellent Magic Fields plugin.
WordPress
The products page features a custom breadcrumb trail which displays a drop-down menu of each page's siblings. The menu is built using a custom WordPress template.
Form Elements
To ensure both accessibility and consistency with the design of the website, the default form elements are progressively enhanced using JavaScript and styled with CSS.
Background
I worked as part of a team to create a microsite for inciteXchange, a design event run by Temple University, using the WordPress content management system.
Single Page Design
The website was built as a single page, using a fixed navigation bar at the top of the screen. It uses scratch-written JavaScript built on top of jQuery plugins to animate scrolling.
Different Layouts
Each section of the site has a unique design. To accomplish this, CSS was used to create different layouts and typography to complement the section's functionality.
Freelance
Background
College Exploration Tours is a company that takes high school students on tours of college campuses. I worked closely with the company to design and build the website from the ground up.
Skeumorphism
The website is designed to resemble a cork board—one that might be found in a college dorm. Highlights, shadows, noise and gradients are all used to convey a sense of realism.
CSS3
All the shadows, gradients and rotations are achieved using CSS3. In addition, the blocky "college" typeface and messy scrawl are free typefaces, embedded using the @font-face property.
Background
I had the pleasure of redesigning the website for Drexel University Replay, Drexel University's video game research lab. Pictured above is the original website.
Redesign
My goal for the redesign was to create something cleaner and more spacious than the original. Icons and subtle patterns are used to give the design a stronger sense of personality.
jQuery
I used a combination of scratch-written jQuery and jQuery plugins to incorporate slideshows and lightbox-like effects and create a more dynamic experience.