Grow your CSS skills. Land your dream job.

My New Portfolio Site

  • # August 11, 2008 at 1:00 am

    Hi everyone,
    I am new here to the forums. I am getting started as a freelancer and I just created my first portfolio site. I have been scouring the web and looking at other peoples sites. Now I am looking for some more critique on my site so any comments and/or criticisms are welcome and will be very much appreciated.

    My site is at http://www.JDHDevelopment.com

    Thanks in advance.

    # August 11, 2008 at 5:16 pm

    Great start…
    I would suggest a few graphical fixes though…

    The bottom CDs and USB cable have some white pixels left around the edges still, so it looks a little unpolished.

    The wire spiral brads look a tad unrealistic, especially in contrast to the actual picture of a mac keyboard you have at the top.

    Also, I noticed there is a slight shadow dropped on the wire spirals… this is fine i think, but then the bottom of the notebook needs some shadows onto the CDs, which need a shadow onto the wood… The way it is now, it looks like the CDs and the notebook page are one, and almost a part of the table.

    and, if this was me, I would put the Developing Your Web Presence So You Can Develop Your Business slogan somewhere as a logo, not text on top of the notebook, I almost mistook it for content.

    The more detailed your site is, the more people will think that you will uphold this standard when you create for them as well(a given trait for any good designer)

    just my 2 cents. =)

    # August 12, 2008 at 2:41 am

    Thanks for the comments.

    The slogan I have been looking for a good place to put that from the start. I have an idea at the moment, I just need some time to implement it.

    The spirals I have wanted realistic spiral from the beginning but I have been having some trouble with it and this was what I was able to come up with. If anyone can suggest any good tutorials on it or some royalty free imagery I could chop up for it, it would be appreciated.

    I worked on the footer some removing the white areas and strengthening the shadows on all the elements. Let me know what you think.

    As always comments and criticisms are always welcome and requested.

    # August 14, 2008 at 4:52 pm

    I have updated the site again this time I put the slogan into a ribbon at the top of the page.

    Let me know what you think about this or anything else.

    HJ05

    # September 17, 2008 at 1:59 pm

    Hey everyone,

    I am having a small problem when it comes to google. I have the title tag on my site change based on what the url of the page is but for some reason google doesn’t recognize it when it crawls my site, it just goes for the default title tag for every page and then web master tools tells me I need different title tags for each page even though it works fine in normal browsers. My code is listed below. It is written in php. Any help would be appreciated as would any other comments about my site in general.

    <title>
    <?php
    $requestURI = explode(‘/’, $_SERVER);
    if ($requestURI[1] == "index.php" || $requestURI[1] == "")
    {
    echo(‘Freelance Web Developer | JDH Development’);
    }
    else if ($requestURI[1] == "portfolio.php")
    {
    echo(‘My Portfolio | JDH Development’);
    }
    else if ($requestURI[1] == "about.php")
    {
    echo(‘My Services and Technologies | JDH Development’);
    }
    else if ($requestURI[1] == "contact.php")
    {
    echo(‘Contact Me | JDH Development’);
    }
    else
    {
    echo(‘Freelance Web Developer | JDH Development’);
    }
    ?>
    </title>

    Thanks.

    # September 19, 2008 at 1:25 pm

    Hey I love the idea you have got going here!

    Some recommendations:

    For your menu links try using CSS Sprites. When you roll over the images, it takes nearly 3-5 seconds for the hover state background image to show up. CSS Sprites will allow this change to be instant.

    I don’t mean this in a mean way, so please don’t take it too much to heart – but it look too clip arty… like you can tell all of these are stock images and just kinda plopped in. For example the ribbon at the top doesn’t look like it belongs. You have mostly office/computery type of theme going on, and then a red ribbon shows up.

    Also, your images at the bottom of the cds and the cord need some photoshop loving. The edges are very jagged and you can see the white of where the background was. Because you are having this as a portfolio site, and you want to generate business from this it’s vitally important that you only show your best work, and leave no detail out. Otherwise people will get the idea that you don’t care enough about your own design and be skeptical about what you could do for them.

    I think what’s really throwing off the design is because the lighting/shadows are different for all the different images you’ve place in the layout, giving a kinda hectic flow to the design because your eye is bouncing around so much. Also because the background has so much detail/wood texture I would make it darker and take it down a bit so it isn’t so overwhelming. When I’m trying to read my eye keeps drawing back to the wood. And I doubt that’s what you want the focal point to be :)

    Also, you’re probably aware of this, but when you hover or click on one of the menu links a red outline appears (in firefox) that extends all the way to the left side of the screen.

    # September 19, 2008 at 1:59 pm

    When I started this design I thought it would look really cool and allow me to stand out some but after I was "done" with it I realized it wasn’t that great and I have been trying to come up with a new design maybe something more simplified but still give it some way of standing out. As for the red box around the links this is something that firefox and I think there is a simple CSS thing for it but I havn’t been able to find any way of fixing it.

    Also, I have been meaning to add a JavaScript image loader so that the images appear immediately instead of taking a second to load.

    Thanks for the feedback.

    I also think I might have figured out what Google’s problem is with the title tags: they havn’t indexed it since August they just update their site which is weird. I don’t know why they put something saying it was updated even through they haven’t actually gone back and re-indexed my site.

    # September 19, 2008 at 3:34 pm

    Actually I think it would still be a really cool design with just a bit of polishing. :)

    I believe the CSS for that is outline:0 — something like:

    a:active, a:hover {
    outline: 0;
    }

    # September 20, 2008 at 2:23 pm

    Thanks for the tips.

    I was able to remove the red outlines in Firefox by using:

    a:focus, a:hover, a:active { outline:none }

    I will work on polishing this design and possible work on a new design as time permits.

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

You must be logged in to reply to this topic.

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