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’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 ;)
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.) ;)
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.
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).
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 :-)
Nice work James!
The slider works well in IE6 too, but has some issues in IE5.5 (who cares?).
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.
IE5.5 currently has 0.1% market share, so I’m not too concerned about it :lol:
Cool idea – I might give that a try. Thanks!
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
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 ;)
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 ;)
I’ve got just one question: How did you make such an awesome sub-menu? Thanks in advance :)
Thanks very much :)
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…
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".