Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

WIP Portfolio site

Featured Replies

Hi all,

 

Now I am going to start freelancing full time, I'm making my first serious portfolio site to promote myself.

 

I always struggle 'selling' myself, so am getting a little stuck what to do next. My portfolio preview is going under the home page content (as well as a full section on its own). I'm a little unsure about the second box on the right under testimonials - I was going to put contact information in here, but I feel like i am wasting an opportunity for something better, so if anyone has any ideas, I'd be grateful!

 

http://tinyurl.com/5uqjfd

 

Whenever I make a client site, I can get through them with no problems - when it comes to something for myself, I often get so far and then fill my head with criticism as I try to be too perfect :(

 

Anyway, appreciate any honest comments and ideas!

 

Thanks, Paul.

It's very good. The only thing I see design wise, is the P of paul looks a littlt too much like a b. May need fading a little more.

  • Author
It's very good. The only thing I see design wise, is the P of paul looks a littlt too much like a b. May need fading a little more.

 

Ha! Thanks Helen - didnt think of that :) So used to seeing the word 'Paul' (as are friends and family who I've asked for feedback), that nobody has mentioned that.

 

Used that logo for business cards too! Drats....

I think this looks very nice. I like the simplicity but there's enough visual interest to hold it up. I think a couple of portfolio items may look nice in the second box. Other than that, the login input fields don't quite line up in my browser (FF2 Linux).

 

Good work :)

  • Author
I think this looks very nice. I like the simplicity but there's enough visual interest to hold it up. I think a couple of portfolio items may look nice in the second box. Other than that, the login input fields don't quite line up in my browser (FF2 Linux).

 

Good work :)

 

Thanks - so far so good! Wasnt expecting such +ve comments :)

 

I've noticed the problem with the login boxes too on my EEE laptop (which I think has FF2), but its ok in all other browsers - including IE6 and FF3... odd! I'll sort it out before launch anyway.

 

Thanks again.

Just a quick tip. don't use .jpg for text, it creates noticeable artifacts. Use .png instead. And give your page a title!

  • Author
Just a quick tip. don't use .jpg for text, it creates noticeable artifacts. Use .png instead. And give your page a title!

 

Cheers for the PNG tip calum - I've always tended to shy away from them due to the transparency probs in IE, but I dont see why I cannot use them here. I will make the change tomorrow.

 

And yea, will definately have titles :D still a way from being complete yet and I normally leave the META stuff till quite late as I generate it dynamically using PHP, so like to get most of the rest of the coding in place first - thanks for the spot though.

You haven't put any portfolio in your website....may be you should target you customers for the type of websites you have done previously....

 

You can have a look at our company's website for your reference.......we do website design, web hosting and domain name registration....

  • Author
You haven't put any portfolio in your website....may be you should target you customers for the type of websites you have done previously....

 

You can have a look at our company's website for your reference.......we do website design, web hosting and domain name registration....

 

Hiya,

 

The site is obviously not finished (hence the WIP in the title :D) - but least you got a plug in!

 

:huh:

Nice looking site matey. I would consider saving space by making the navigation text instead of images, use a list to order it to keep the "block" properties. I really like the greys and the pink is used really nicely to bring things out, however if it were me I would use the pink a little bit more for extra headings etc. I think it would give it more life.

 

Nice site though, keep up the good work

  • Author
Nice looking site matey. I would consider saving space by making the navigation text instead of images, use a list to order it to keep the "block" properties. I really like the greys and the pink is used really nicely to bring things out, however if it were me I would use the pink a little bit more for extra headings etc. I think it would give it more life.

 

Nice site though, keep up the good work

 

Thanks for the feedback Matt.

 

I quite like the headings (and they are a list in any case!) due to the font used, but its something to consider. I got bored of making site after site with the stock fonts and I rarely use graphics for headings... Hmmm... will consider it!

 

I'm also a little worried about the pink/purple colour as its lacking consistancy at the moment - the dark purple (smoke on the water man!) is really nice offset on the light grey, but on the darker backgrounds, it looks bad. So I've used a lighter varient on the dark, which I dont like doing as it looks messy.

 

But the lighter pink on the light grey background looks wishy-washy.

 

Dont know whether to leave it (dark purple on light, pink on dark), or find a more consistant colour - an orange or light blue/green....

 

Hmmmm... food for thought - but thanks again. Really like your portfolio site, especially the reflective badges at the top. I'm working on a large ecommerce site at the moment and have used dynamic reflections on the product images, but it doesnt look so good on white as it does on black!

 

Cheers, Paul

Hmm a popular colour dilemna ey? Its not the headings i said were images matey, but the navigation bar just under the banner, they look good and they look like text but me (with a dodgey internet connection this morning) noticed that that they were images...

 

I tried uploading an image, but my connection is so bad right now i cant ftp. I'll show you in your source code :)

 

<ul class="menu">
			<li class="menhome"><a href="http://development.paulboreham.co.uk/page/1/home/"><img src="http://development.paulboreham.co.uk/images/menu_home.png" alt="Website Home" name="home" id="home" title="Website Home" onmouseover="MM_swapImage('home','','http://development.paulboreham.co.uk/images/menu_home2.png',1)" onmouseout="MM_swapImgRestore()" border="0"></a><img src="http://development.paulboreham.co.uk/images/arrow.gif" class="arrow" alt=""></li>
			<li class="menservices"><a href="http://development.paulboreham.co.uk/page/2/my-services/"><img src="http://development.paulboreham.co.uk/images/menu_services.png" alt="My Services" name="services" id="services" title="My Services" onmouseover="MM_swapImage('services','','http://development.paulboreham.co.uk/images/menu_services2.png',1)" onmouseout="MM_swapImgRestore()" border="0"></a></li>
			<li class="menabout"><a href="http://development.paulboreham.co.uk/page/3/about-me/"><img src="http://development.paulboreham.co.uk/images/menu_aboutme.png" alt="About Me" name="aboutme" id="aboutme" title="About Me" onmouseover="MM_swapImage('aboutme','','http://development.paulboreham.co.uk/images/menu_aboutme2.png',1)" onmouseout="MM_swapImgRestore()" border="0"></a></li>
			<li class="menportfolio"><a href="http://development.paulboreham.co.uk/page/4/portfolio/"><img src="http://development.paulboreham.co.uk/images/menu_portfolio.png" alt="Portfolio" name="potfolio" id="potfolio" title="Portfolio" onmouseover="MM_swapImage('potfolio','','http://development.paulboreham.co.uk/images/menu_portfolio2.png',1)" onmouseout="MM_swapImgRestore()" border="0"></a></li>
			<li class="menfaqs"><a href="http://development.paulboreham.co.uk/page/5/faqs/"><img src="http://development.paulboreham.co.uk/images/menu_faqs.png" alt="Frequently Asked Questions" name="faqs" id="faqs" title="Frequently Asked Questions" onmouseover="MM_swapImage('faqs','','http://development.paulboreham.co.uk/images/menu_faqs2.png',1)" onmouseout="MM_swapImgRestore()" border="0"></a></li>
			<li class="mencontact"><a href="http://development.paulboreham.co.uk/page/6/contact-me/"><img src="http://development.paulboreham.co.uk/images/menu_contact.png" alt="Contact Me" name="contact" id="contact" title="Contact Me" onmouseover="MM_swapImage('contact','','http://development.paulboreham.co.uk/images/menu_contact2.png',1)" onmouseout="MM_swapImgRestore()" border="0"></a></li>
		</ul>

 

Do these really need to be images? can't you use a simple hover CSS property to output the same display :)

  • Author
Hmm a popular colour dilemna ey? Its not the headings i said were images matey, but the navigation bar just under the banner, they look good and they look like text but me (with a dodgey internet connection this morning) noticed that that they were images...

 

I tried uploading an image, but my connection is so bad right now i cant ftp. I'll show you in your source code :)

 

Do these really need to be images? can't you use a simple hover CSS property to output the same display :)

 

The :hover class will not work in IE though on an image, only a basic link... I think! Maybe as the images are links it will work...

 

Will give it a go - probably some CSS hack can get it to be valid and work ok and lose the JS code.

Neat design, certainly has potention. Just a couple of things i noticed.

 

- Like said before the curve on you line makes you P look a bit wierd. Theres also a small edge in you curve, it's not totally fluent.

- The purple seems to be coming out of the blue (hmm that sounds wierd :pp) Anywayz you dont see purple anywhere an the suddenly 1 word in a header is purple. Try using the purple in other places aswell, maybe your banner etc.

- The list of thing you do under you name looks a lot like the actual menu and confused me. Try to create no doubt as to what the menu is.

- The arrow at the active page is aligned to the left, it somehow looks a bit wierd there, maybe you can try to center it.

- Container blocks have graphical errors at the corners. Not entirely sure about the round corners. Maybe you can try square corners. To create some contrast with the curvey background image.

 

Well thats it, gl with your website and hoefully this is of any help.

 

Greetz R-J

  • Author
Neat design, certainly has potention. Just a couple of things i noticed.

 

- Like said before the curve on you line makes you P look a bit wierd. Theres also a small edge in you curve, it's not totally fluent.

- The purple seems to be coming out of the blue (hmm that sounds wierd :pp) Anywayz you dont see purple anywhere an the suddenly 1 word in a header is purple. Try using the purple in other places aswell, maybe your banner etc.

- The list of thing you do under you name looks a lot like the actual menu and confused me. Try to create no doubt as to what the menu is.

- The arrow at the active page is aligned to the left, it somehow looks a bit wierd there, maybe you can try to center it.

- Container blocks have graphical errors at the corners. Not entirely sure about the round corners. Maybe you can try square corners. To create some contrast with the curvey background image.

 

Well thats it, gl with your website and hoefully this is of any help.

 

Greetz R-J

 

Yea, cool - thanks R-J, that all makes good sense and I'm going to change alot of those things now.

 

This place is great!

 

EDIT: Boxes now square - and smaller. Think this looks much better now personally, so thanks. Means I may even be able to squeeze a 3rd in.

 

The logo curve had a CSS error - didnt allow enough height for the image, so it looked chopped at the bottom. Have changed now and it looks better - I think it would be better in Illustrator though, but that will have to wait until I have time to learn more about Illustrator.

 

I'll have a play with the other things you mentioned later, but thanks again for the input!

The :hover class will not work in IE though on an image, only a basic link... I think! Maybe as the images are links it will work...

 

Will give it a go - probably some CSS hack can get it to be valid and work ok and lose the JS code.

 

But what I am getting at here mate, is why are they images? they are just text yes? It would be clearer, lighter (file size) and more accessible as just text with a CSS hover in my opinion, thats just how I have been bought up to do it :)

 

Sorry if I wasn't clearer before. Not sure if this helps now, but here is the image I was trying to upload:

 

portfeed.png

 

Something like this would generate the same feel:

 

 

CSS

#nav

{
height: 30px;
list-style: none;
line-height: 30px;
text-align: center;
}

#nav li
{
float: left;
display: block;
width: 100px;
}

#nav li a
{
float: left;
display: block;
width: 100px;
}

.links
{
color: #333333;
}

.links:hover
{
color:#9013E0;
}

 

HTML

 

<ul id="nav">

<li><a href="#" title="Link 1" class="links">link1</a></li>

<li><a href="#" title="Link 2" class="links">link2</a></li>

<li><a href="#" title="Link 3" class="links">link3</a></li>

<li><a href="#" title="Link 4" class="links">link4</a></li>

</ul>

 

Hope this makes sense, with tweaking of the height attribute it allows the hover affect to appear like a blocked button. There is an example of this on the nav bar on my site.

  • Author
But what I am getting at here mate, is why are they images? they are just text yes? It would be clearer, lighter (file size) and more accessible as just text with a CSS hover in my opinion, thats just how I have been bought up to do it :)

 

Sorry if I wasn't clearer before. Not sure if this helps now, but here is the image I was trying to upload:

 

portfeed.png

 

Something like this would generate the same feel:

CSS

#nav

{
height: 30px;
list-style: none;
line-height: 30px;
text-align: center;
}

#nav li
{
float: left;
display: block;
width: 100px;
}

#nav li a
{
float: left;
display: block;
width: 100px;
}

.links
{
color: #333333;
}

.links:hover
{
color:#9013E0;
}

 

HTML

 

<ul id="nav">

<li><a href="#" title="Link 1" class="links">link1</a></li>

<li><a href="#" title="Link 2" class="links">link2</a></li>

<li><a href="#" title="Link 3" class="links">link3</a></li>

<li><a href="#" title="Link 4" class="links">link4</a></li>

</ul>

 

Hope this makes sense, with tweaking of the height attribute it allows the hover affect to appear like a blocked button. There is an example of this on the nav bar on my site.

 

 

Ah yea, I see. Yea, that would be fine, but I am using a custom font which isnt available as 'standard' - hence the images. Its not massively different to 'Geneva' actually, so I may well end up changing it! Thanks for looking into it - I will probably change it this evening.

 

Thanks!

 

EDIT: Couldnt wait and have now changed the menu system. Now a text based list with a :hover effect and also made another change to a) clearly define it as a menu and B) introduce the purple colour.

 

Would appreciate if you can have a look peeps and see what you think now?

 

Thanks!

 

EDIT 2!: The :hover effect doesnt work exactly as desired in IE6, but it degrades ok and you still get some effect on the link in the older browser.

  • Author

I've made a few changes from the feedback on here - would welcome any more comments on those please!

Hey again paul! I see you have been busy over night. I like the new navigation, looks a lot cleaner than the old images you were using, and its good to see the purple following through in the heading neatly. My only real problem with the site now is that i think the pink and purple clash.

 

I think maybe you should tweak the colours to get a happy medium between the purple and the pink and use that throughout, maybe you could change the colours of the side blocks if this helps to accomadate for the new purple pink.

  • Author
Hey again paul! I see you have been busy over night. I like the new navigation, looks a lot cleaner than the old images you were using, and its good to see the purple following through in the heading neatly. My only real problem with the site now is that i think the pink and purple clash.

 

I think maybe you should tweak the colours to get a happy medium between the purple and the pink and use that throughout, maybe you could change the colours of the side blocks if this helps to accomadate for the new purple pink.

 

Yea thanks Matt - I'm much happier with it overall now.

 

I was playing around with some colours last night and there aren't many (any?!) that work well on both light and dark backgrounds, so I think I will have to have a rethink on the sides as you say - though I do like their dark contrast to the rest of the site... helps frame it off.

 

Wish I had a 'designers eye'! :rolleyes:

Mate you obviously do have a designers eye because you can see the fault :) Rest assured we all get hurdles in websites we make :) Keep going! :)

Yea, cool - thanks R-J, that all makes good sense and I'm going to change alot of those things now.

 

This place is great!

 

EDIT: Boxes now square - and smaller. Think this looks much better now personally, so thanks. Means I may even be able to squeeze a 3rd in.

 

The logo curve had a CSS error - didnt allow enough height for the image, so it looked chopped at the bottom. Have changed now and it looks better - I think it would be better in Illustrator though, but that will have to wait until I have time to learn more about Illustrator.

 

I'll have a play with the other things you mentioned later, but thanks again for the input!

Huge improvement, website is really coming toghether. Still the purple looks a bit isolated. maybe you use it in your header some thing like Paulboreham and mabye client login.

Don't know weather the flickr borders are customizable but maybe you can hide them / change the color of them to match the style of thye website.

  • Author
Huge improvement, website is really coming toghether. Still the purple looks a bit isolated. maybe you use it in your header some thing like Paulboreham and mabye client login.

Don't know weather the flickr borders are customizable but maybe you can hide them / change the color of them to match the style of thye website.

 

Thanks for the input RJ - I'll definately consider the colour idea - it did occur to me last night too, but I wasnt sure.

 

As for the Flickr borders, they are cusomisable with custom CSS, but seems a bit inconsistant, so needs a bit of work before I launch!

 

Thanks!

  • Author

I've done a little more tweaking to this site, but I'm now entering the 'uncertain' phase you get when making a site for yourself!!

 

Can anyone take a look and let me know if you think its getting there please? Or what you would change etc.

 

Thanks!

I love the design of the site, it's the kind of style I really like. There are really only a few minor improvements i'd say you need to make though. The first would be the text in your header (as previously mentioned). The gradient above the 'P' needs to go, as I first read it as 'baulboreham'. I also agree with the statement made about using a different colour for each word to differenciate between them, since you've opted not to put a space between the words.

 

The second thing I would do is use PNG's over JPEG's as stated by Calum (especially in your header area), due to the fact that 'horizontal stripes' are visible on the pattern graphic displayed beneath your login form. I'd assume this is because a low quality JPEG has been used.

 

The third and final thing I would say, is that the menu buttons as they are feel a little 'unfinished' to me. As they style they're designed in, would usually have rounded corners at the bottom. Yours are square so they give off a sort of rushed/unfinished feel to me.

 

Other than that, the design is spot on and I really like what you've done so far. Keep it up. ;)

  • Author
I love the design of the site, it's the kind of style I really like. There are really only a few minor improvements i'd say you need to make though. The first would be the text in your header (as previously mentioned). The gradient above the 'P' needs to go, as I first read it as 'baulboreham'. I also agree with the statement made about using a different colour for each word to differenciate between them, since you've opted not to put a space between the words.

 

The second thing I would do is use PNG's over JPEG's as stated by Calum (especially in your header area), due to the fact that 'horizontal stripes' are visible on the pattern graphic displayed beneath your login form. I'd assume this is because a low quality JPEG has been used.

 

The third and final thing I would say, is that the menu buttons as they are feel a little 'unfinished' to me. As they style they're designed in, would usually have rounded corners at the bottom. Yours are square so they give off a sort of rushed/unfinished feel to me.

 

Other than that, the design is spot on and I really like what you've done so far. Keep it up. ;)

 

Cheers, thanks for the feedback! I've changed the JPEGs to PNGs (was on my list to do!) and it looks much better.

 

For the menu buttons, though the 'half-glass' style is quite old-hat in a way now, its the first time I've tried it myself on any site. I thought keeping them square to fit in with the angles of the rest of the site - but I do see your point. Wonder if anyone else has an opinion on this too?

 

And I think due to the amount of feedback about the 'p' in my logo that I should change it - going to upload a new idea in a few mins!

 

Thanks again, really appreciate your help.

It looks much better now with the modified 'P' and higher quality images (just need to change the one's in your footer now).

 

I've created a mock up of what your menu could look like with rounded corners so you can see for yourself what you think, without having to go to the trouble of modifying everything. It only seems like a subtle change but in my opinion it looks a lot more professional, but I guess i'll have to see what you/the other members think. :rolleyes: Anyway here it is:

 

20gipw7.png

(Click image for full view)

  • Author
It looks much better now with the modified 'P' and higher quality images (just need to change the one's in your footer now).

 

I've created a mock up of what your menu could look like with rounded corners so you can see for yourself what you think, without having to go to the trouble of modifying everything. It only seems like a subtle change but in my opinion it looks a lot more professional, but I guess i'll have to see what you/the other members think. :rolleyes: Anyway here it is:

 

20gipw7.png

(Click image for full view)

 

Nah, I agree actually- that looks great thanks! Will make the change :)

 

Any thoughts on the colours? I quite like the purple + pink, but it doesnt clash too much does it? (I'm going to change the colours in the footer to the pink).

 

Thanks again!

Any thoughts on the colours? I quite like the purple + pink, but it doesnt clash too much does it? (I'm going to change the colours in the footer to the pink).

 

Thanks again!

 

The colours look fine to me, they work well together. I think you should be pretty much done now. Now that you've implemented all the changes suggested in this thread, the site looks more or less spot on. It's looking rather professional IMO, so well done. :D

  • Author
The colours look fine to me, they work well together. I think you should be pretty much done now. Now that you've implemented all the changes suggested in this thread, the site looks more or less spot on. It's looking rather professional IMO, so well done. :D

 

Yea, I pretty much agree! Thanks for the kind words - and also to everyone elses help who made a suggestion to improve my site :)

  • Jo 90 locked this topic
Guest
This topic is now closed to further replies.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.