Grow your CSS skills. Land your dream job.

Portfolio site

  • # April 9, 2008 at 8:00 pm

    http://home.comcast.net/~daguy

    This is my personal portfolio website, which I redesigned at the end of last year. As I learn more and more CSS tips and techniques, I tweak the design and try to put them to good use here.

    I like to keep things as small and as lightweight as possible. My CSS is only 9 KB (for both screen and print styles combined), and I make use of a 5 KB JavaScript on the Contact page (the image reflection). Although there are plenty of images (the thumbnails and previews in the Portfolio section), there are no images used in the design whatsoever. The site is also fully readable without the CSS loaded.

    I’d love to hear some feedback on this design from some fellow CSS enthusiasts :P

    PS – Those of you on the latest version of Safari will notice some subtle drop shadows and CSS animations ;)

    # April 11, 2008 at 1:12 am

    Love how it looks in Safari! SWEET!

    My only thought would be to add the green strip that holds the extra navigation on your portfolio page to all the pages (even if nothing is inside.) That would make the pages feel more consistent (to me.) ;)

    David

    # April 11, 2008 at 10:38 am

    Well done, looks really good…I’m just getting into css design and hopefully will get as good as you soon.

    Nice pic of you and your lady :)

    # April 11, 2008 at 4:08 pm
    "David R" wrote:
    Love how it looks in Safari! SWEET!

    My only thought would be to add the green strip that holds the extra navigation on your portfolio page to all the pages (even if nothing is inside.) That would make the pages feel more consistent (to me.) ;)

    David

    Hmm…I see what you’re saying, but I don’t really like the idea of having an element there that’s completely empty. I suppose I could try it just to see how it looks. Thanks for the suggestion.

    One other idea I had was to use Spry effects to make the submenu slide down into place when you hover over Portfolio. Aside from just looking cool, that would also let you jump directly to a section within the portfolio from anywhere else on the site (right now you have to click Portfolio first, then click the section).

    On another note, what does everyone think of the color scheme? I don’t know where it came from…I just got the idea one day :lol: I’ve tested other color schemes just for fun, but I’ve never been satisfied with anything else.

    # April 12, 2008 at 1:33 am

    Well, I got the Spry effect to work, so now when you click on the Portfolio link from any page, the submenu slides down into place. Very cool :lol: By the way, can someone confirm that this works on IE6? It works on Safari 3, Firefox 2 and 3, and IE7, but I can’t test IE6 at the moment (it should work, but with IE6 you never know).

    Also, one other weird bug I noticed – on my Contact page (where I have the picture), I have a javascript that generates a simple reflection underneath the image. This works in Safari 3, Firefox 3, and IE7, but not in Firefox 2 – instead, the space for the reflection is added, but there’s nothing actually there. The script is supposed to be supported by Firefox 2, so I don’t understand what the problem is.

    Oh yeah, and on a different note, I decided to remove the CSS animations…mainly because it was bugging me that they don’t validate (you have to use the -webkit-transition property). With that stuff removed, all of my HTML and CSS is valid :-)

    # April 12, 2008 at 6:27 am

    Nice work James!
    I use Firefox 2 and I can see the reflection with JavaScript enabled.
    The slider works well in IE6 too, but has some issues in IE5.5 (who cares?).

    I suggest to work a little on the slide effect, since Error 404 is displayed when you click on "portfolio" if JavaScript is disabled. Considering usability, you can set the green bar to be visible by default (in the portfolio page, just like the previous version of your site) if JavaScript is disabled.

    One more cool effect wuold be the back-slide of the green bar when you move out of the portfolio section, it shouldn’t take very long to fix it.

    # April 12, 2008 at 5:16 pm
    "lucadp" wrote:
    Nice work James!
    I use Firefox 2 and I can see the reflection with JavaScript enabled.
    The slider works well in IE6 too, but has some issues in IE5.5 (who cares?).

    IE5.5 currently has 0.1% market share, so I’m not too concerned about it :lol:

    "lucadp" wrote:
    I suggest to work a little on the slide effect, since Error 404 is displayed when you click on "portfolio" if JavaScript is disabled. Considering usability, you can set the green bar to be visible by default (in the portfolio page, just like the previous version of your site) if JavaScript is disabled.

    Hm, I hadn’t considered that. I don’t do much work with JavaScript. Do you know of a quick way I can test to see if JavaScript is disabled, and if so, to set the height of the submenu appropriately? Currently with the Spry effect applied I have to have an inline style on the submenu that sets the height to 0px, so it can animate it to 36px when you click on Portfolio.

    "lucadp" wrote:
    One more cool effect wuold be the back-slide of the green bar when you move out of the portfolio section, it shouldn’t take very long to fix it.

    Cool idea – I might give that a try. Thanks!

    # April 12, 2008 at 8:41 pm
    Quote:
    Do you know of a quick way I can test to see if JavaScript is disabled, and if so, to set the height of the submenu appropriately?

    Just set the inline image height to 36px. Then use the classic "document.getElementsById" to set the height of the portfolio submenu to 0px. In this way, if JavaScript is disabled the height will be 36px, since it’s not loaded the function that sets it to 0px.
    However in this way it’s going to be a strange menu, since the green bar is displayed even in the homepage and it’s not graphically connected to the portfolio button. Even now, if you click on portfolio the submenù is displayed, but the content remains the same of the home page. The spry effect is really cool, but IMHO it should appear in a separate main portfolio page, not above the content of the home page.

    Sorry for my English, I’m Italian!
    Take a look at my work too! http://www.buontalenti.it/prova

    # April 13, 2008 at 12:31 am
    "lucadp" wrote:
    Take a look at my work too! http://www.buontalenti.it/prova

    I was actually in Florence last June. According to Google Maps, my hotel (Hotel de la Pace, via Alfonso La Marmora) was only 2 km away from that gelateria. What are the odds? We spent most of our time around the Piazza del Duomo, though, which is in the other direction ;)

    # April 13, 2008 at 8:48 pm

    Great looking site!

    # April 19, 2008 at 6:37 pm

    Cool! I really like what you have done. It falls a little flat with out the drop shadow effect in webkit though. Invest in a domain and get yourself out there.

    # April 21, 2008 at 4:24 pm
    "devoinregress" wrote:
    Cool! I really like what you have done. It falls a little flat with out the drop shadow effect in webkit though. Invest in a domain and get yourself out there.

    I could easily make the header an image and thus have the drop shadow show up in every browser, but I like the idea of not using any images in the design :lol: Doing it this way, if your browser has better standards support, you get rewarded with a nicer looking design ;)

    # May 1, 2008 at 11:20 am

    Nice clean site. It looks very professional.

    # June 19, 2008 at 5:35 pm

    First of all, love the design and simplicity! You really let your work do the talking :)

    I’ve got just one question: How did you make such an awesome sub-menu? Thanks in advance :)

    # June 20, 2008 at 3:56 pm
    "Banzaiaap" wrote:
    First of all, love the design and simplicity! You really let your work do the talking :)

    I’ve got just one question: How did you make such an awesome sub-menu? Thanks in advance :)

    Thanks very much :)

    You’re talking about how the menu slides open, right? That was done with Adobe Spry effects. It’s a Javascript framework that has a bunch of pre-built visual effects for you to incorporate into your pages. All you really have to do is link to SpryEffects.js in your head, then call the effect you want and give it the necessary parameters (like starting/ending height) and it does the animation for you.

    CSS3 animations can do a lot of the same things, but Safari is the only browser that supports them at the moment. I hope the other major browsers add support soon, because you can pull off the same types of effects with literally just a few lines of CSS, rather than a whole huge JS library…

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".