Portfolio

  • College V2

    College V2

    I had the good fortune of redesigning a blog I read often, College V2. Sean posted that he was looking for a redesigner, and took the opportunity. I took a PSD that he sent me, chopped it up, and made it into a valid XHTML/CSS template for WordPress. I used CSS for the mouse over navigation and some extra programming to display the author comment in a different container. All-in-all I am very happy to be able to work on the site, and am glad to say that Sean is happy with the new design. You can read what he wrote about it here. Later

  • JLC Web Design

    JLC Web Design

    Over the last 6 months I have been designing a redesigning the website for my web design company, JLC Web Design. I feel like this time, I got it right. The new design consists of a new front end, with a lot more navigation/information, icons and a new portfolio layout. There is also a brand new back end.

    With this redesign, I wanted the site to be completely dynamic. Since there is a lot more content, I wanted it to be easier for me to update or change information. So all content get’s pulled from a database, which in turn can be edited from the custom Content Management System (CMS) I built. With the CMS, I made it so I could add new content and edit/delete existing content. This includes users, FAQs, news items, websites and pages. I hope to eventually move the back end to be AJAX driven.

    As for the front end, this was my first attempt at icons for a site I designed, and I am pretty happy with them. They are a simple icon set but I really think they add to the site. Also, since the site is dynamic, while some pages have a 3 column layout, others have a 2 column layout. This allows pages like the home page to house a lot of different information and pages like the services page to keep the full concentration on all of the services we have to offer. Each ‘module’ on the home page can also be changed with the click of a button- even the right navigation.

    All in all, I am very happy with the official Version 3.0 of JLC Web Design. I hope my users are too. Later

  • Casabona.Org v2.0 (finally)

    Casabona.Org

    You might recall that just over 13 months ago, I posted this, announcing the official launch of my second personal site, Casabona.Org. I also wrote a somewhat lengthly ‘schematic’ of the site for those who were interested to read. The original idea was to showcase and build my PHP/MySQL skills. For that reason, the design suffered a little. I also wanted Casabona.Org to be a catch all website for my personal and professional…stuff, for lack of a better word.

    After realizing that keeping up Casabona.Org as a second blog, which is essentially what it was, was too much work and somewhat redundant, I decided to change the scope of that project. With the redesign of this site, it was a little easier to look at Casabona.Org now as a solely professional site. Cutting out all of the personal content on the site left me with 3 crucial elements: Resumé, Portfolio, Contact Info. A redesign was also in order.

    For the redesign, I wanted the site to look professional, and like I put some sort of effort into the layout. I used a good amount of CSS with image gradients (such as the top of the background and the portfolio item backgrounds) and some other design bells and whistles, like the strips in the top right, and the footer image. I also wanted to do some shadowing to give some elements of the site a 3D effect and while I didn’t do the body of the site that way, I think where I did add a drop shadow (banner and portfolio thumbnails) makes the site ‘come alive’ a little more. All in all, I am very happy with the design, and how each element plays a part in the whole scheme of the site.

    The focus of the redesign came with the Projects page. I needed a nice place on the site to display my entire design portfolio- websites, desktop publishing and multimedia. I created a database with 2 tables- one for websites and one for other projects. While both tables would be similar, I did this primarily for the back end and adding new projects. I then made the development and publish pages like film strips or slideshows, so my portfolio is easily navigatable. The end result was a dynamic, easy to update, easy to use portfolio and home for all of my projects.

    After about 6 months of on and off work, and a great amount of time put into the site, I can say I am very happy with its outcome, and hope the users feel the same way. Later.

  • Wrcnepa.Org

    Women's Resource Center

    When the WRC of Scranton, PA came to me for a redesign, their website was in poor shape. There was not main navigation or template, meaning the back button was used A LOT. way to much. It was a plain white background, and not to much effort went into design. It was also poorly coded. O, and did I mention that right click was disabled by javascript? Because it was. SO I had quite a task ahead of me.

    We needed something far more esthetically pleasing that this. We also needed great functionality. There was a lot of pages and navigation to deal with, a a good folder structure was in order. So we broke up all of the pages (some 35 pages on the main navigation) into 8 main links, with mouse over menus bringing you to the other 27. I then created a folder hierarchy of those 8 main links with the other pages within. There was also an images folder and an includes folder to make my life easier. After that was set up, I started on the design. This was the first time I used a “drop shadow” background on the main content, and I like it. I also wanted to make a more image intense banner- since the last site was basically baron, I wanted to spice things up. A few nice effects in photoshop and we have an “involved-but-not-to-involved” banner. They also wanted a button for internet security. One of my favorite parts is the history page, where I implemented the “Lightbox” AJAX program to display different years in t he WRC’s history

    When it came to the navigation, I used some javascript menus (the main nave works even without javascript enabled, so no worries). They also wanted the browser to close when you click escape, which I also did with some javascript. The final thing they wanted was a flash intro, which I gladly made upf or them. All in all I am pretty proud of the site- it was definitely the biggest I have worked on page wise. Which there was not to much programming involved, design implementation was huge. View the site here. Let me know what you think in the comments! Later!

  • Version 4.0

    The New TehJoey is officially launched. You may have been noticing over the last few days, when layouts were switching back and forth. But this is more than just a layout change, which is what my last one and the one before that really was.

    For this I decided on something different. Recently I came to the conclusion that my programming skills are stronger than my design skills. I like the programming aspect better- functionality, performing certain tasks, etc. So that what I focused on here. The layout is simple, but I feel it is good. It’s clean and easy to read. However, the focus is on some new features. I am now coming close to 300 posts. With the way my category and archiving system is set up, finding stuff isn’t easy. So, taking a page from Del.icio.us, Flickr, and Binary Bonsai, I am going with ‘tags’ instead of categories. Really, they are kinda the same. But with tags, I can add more to each post, make it easier for users to find something by topic. I am currently going through my posts, adding more tags to each post.

    Secondly, after being allowed to post comments on LifeHacker, I found I REALLY REALLY like they way their comments were handled. Between them, and Mike Industries with the comment preview, I came to the conclusion I wanted that too. So with some AJAXness, I did. Maybe I will fill you in on how i did it at a later date.

    I will more than likely post again on the new layout. For now, if you have a suggestion or find a bug, you can report it on the About Page. Later!

  • Cos Band Rocks

    cosbandrocks

    This site is finally launched! I have been waiting a while to finish it up and then make it live. One reason is because it is a little different from other sites I have done. This is a very image intense site that in essence is like websites for similar musicians, but not quite

    When Cos came to me for a website, the idea was to give it the same kind of look that similar musicians have, but the problem with the other sites was that it used frames and was not screen resolution friendly. To avoid the frames but still allow for a picture background, I used CSS’s overflow property for the main div, and set a height. That way if the content was longer, it would stay within the picture layout. This also allowed me to keep the width under 800px. With some PHP templates, frames were unnecessary.

    Some of the cooler stuff that was done was the handwritten nav links with a CSS mouse over effect. No javascript there. But most of the fun stuff is on the back end. Cos wanted to update the news, shows and pictures. So, for the news and shows, I implemented word press. The news is the regular blog and the shows is a page created within word press; one that can be edited in word press. As for the pics, with flickr and some javascript, the pics on the site get updated, and all of the pics have a nice set up.

    All in all, I am very happy with the way the site came out, and Cos is too! You can visit the site here. Later!

  • WConroy.com

    WConory.com

    A new Featured Project. Bill Conroy is running in my district for Supreme Court Justice (of my district). He came to me asking for a site design for what he had already laid out page wise. After looking at some politicians’ websites, I noticed that a lot of these sites were simple, but not bad looking- they had a good balance of images and text. So I decided I would shoot for that too (considering that’s what I normally do). It was a little difficult to add a good mix of images, however, because he does not have photos from public events. That might change, and I would be glad to add them where I can, but back to the design.
    For the banner, I went with a serif text to give kind of the elegant look that said ‘Supreme Court’. To drive that home even further, I added Lady Justice. The other main component of the banner is a map of the counties he will represent. I felt that not only did it look good, but it was also informative. The client also wanted the American Flag, which I added in the background at an opacity of 75%.
    Getting to the layout, I wanted something, as I mentioned before, simple and informative. The information was not a problem, as all of it was provided to me. I decided to go with a left side navigation in a Georgia font keeping with a serif theme for something elegant. On the right I added a header to each page- and to make it better the image is just a background with a hidden header. I did this for 2 reasons. If someone has CSS disabled, they will not see an image block, they will see an actual header. Also, this is for Search Engine Optimization. Google does searching based on headers. So adding hidden headers allows me to add the design I want, but still makes the site come up in a google search. I also used only divs- no tables, all divs. Tables are slowly being phased out of web design, so I’m trying to employ new ways of organizing data. With CSS it’s very easy too.
    After doing that, I did my normal design routines. PHP template, ul for navigation, verdana font for easy readability, etc. I’m glad to say the client is very happy with the site, as am I. Visit the Site