Sanja Curg.us Web De-sign/velopment

XHTML Projects

Tech Soft Redesign

Currently my main project is the Tech Soft 3D redesign, implementation and deployment.  I hand coded my design, including making all of the graphics for a functioning prototype to create buy in for the project.  I am implementing the design and architecture of the site in Drupal. Please note that, in order to use my time most efficiently I did not make the prototype cross browser compliant. Best viewed in Firefox!

 

Miss Podge

A basic web presence site for music teacher Podge Thomas.  I set up Wordpress with a custom template.  The logo was made in Illustrator and Photoshop.  This project involved consulting with the client, clarifying and implementing her vision of a clean, open, bright, inviting and character driven site.  We also created a requirements document to guide the design towards a user friendly result.  Miss Podge also received CMS training and is now able to update content whenever it strikes her fancy.

Update: as of 2011 this site is no longer live.

 

Dynamic Registration Form

Berkeley Student Co-operative is throwing a special event, and wanted a form that would dynamically fill out total and subtotal fields with different donation and registration amounts.  They also wanted it to integrate with their current payment system.  I decided to use jQuery with Ajax forms plugin for this portion, and it worked great.

Another feature needed was to dynamically show fields to fill in guest information, depending on how many guests were picked in the drop down. I wrote custom functions for this portion, with a fade in effect for slickness.  The graphics of the form and design were specified by the client, I implemented provided jpgs into XHTML.

 

Developer Zone

Complete overhaul of a table-based site for Tech Soft 3D.  This is their developer facing site with downloads and documentation.  Tech Soft 3D was modernizing their docs with doxygen and wanted to update the Developer Zone accordingly.  They wanted a simple and clean site where developers could easily find downloads and product information.  I added a little bit of flair with the thumbnails in the corner.  They are randomly picked from a product specific folder on page load.  This site is generated with a python script (Elements) which basically just takes care of the navigation and sidebars.  The site is used by hundreds of customers daily and has gotten a positive response on it’s 2009 launch.

It has been easy to update in terms of content and functionality.  Most recently I added a license key generator using jQuery with Ajax and overlay plugins, which integrate into an existing cgi perl script that already existed on the server.  This does not work in IE6 but the page check for browser type and version and shows instead an “email support” message if the user is on IE6.

 

Outspokes

Semester long project for Software Engineering course at UC Berkeley.  Worked on a team of 7 to develop concept, from requirements analysis, use cases and wireframing to running application.  It is a widget which enables commenting on a website design by a collaborative team.  My role was mostly design and CSS.  I also helped with JavaScript (jQuery) and Ruby on Rails.  I added tagging with the taggable gem, although it did not make the final feature cut.  I was also a part of the UI group of three people.  We developed use cases and wireframes and user flow diagrams, and brainstormed on the logo design.

This project was launched as a startup in 2009. Check out outspokes.com and sign up! It is a very helpful tool for web designers.

 

Birch Riley

A customized jQuery UI site, this is running on tabs and accordion (for the photos).  The accordion and tabs do not work together out of the box.  If the page loads and the accordion is on a page that is hidden then auto height doesn’t work on them (because it is automatically none since they are hidden).  There are different workarounds for this but for my purposes it was enough to set a hard height of 500px on the accordion divs.  I matched to look and feel of the site to Birch Riley’s logo which was made by a band member.  The dynamic content is being pulled in from Reverbnation and YouTube, but I am currently working with the band to set up a CMS (WordPress) so they can update their own content, including adding music, video and photos. Rock on!

 

Flash-it Learning Game

Semester long project for Software as a Service (Ruby on Rails) course at UC Berkeley.  Project completed with a group of 3 students.  It is an online flashcard repository and learning game.  I created all of the graphics in Illustrator and Photoshop and implemented all the CSS.  Originally a facebook app the design had to be converted to normal webpage at the last minute, which is why the with is as it is.

The app has many features such as stats and a game mode and you can log in with guest/guest to try it out.  It does have some usability issues but I think we did pretty well for not knowing any Ruby on Rails at the beginning of the semester.  We implemented the app and deployed it on Amazon EC2.  I then redeployed it on heroku for demo purposes.

This was one of my favorite projects, mainly because of the great team and technologies involved.