Help With Portfolio Site
polycounter lvl 11
Hey all,
Right now i already have a portfolio website but after getting a few critiques ive decided to change it to the way i want it to look, problem is, i know nothing about html or javascript or anything of the sort i have the entire site design setup in my head but im not sure where to start, Can anyone help me? maybe point me in the right direction of what type of code to look for to do what, here's a quick image of what i want the main page to look like and do
I also have an idea of what i want the secondary pages to do, have the images all scaled down in sort of columns per enviro/prop/wip and then when moused over or clicked one or the other, they scale to full size with description
Right now i already have a portfolio website but after getting a few critiques ive decided to change it to the way i want it to look, problem is, i know nothing about html or javascript or anything of the sort i have the entire site design setup in my head but im not sure where to start, Can anyone help me? maybe point me in the right direction of what type of code to look for to do what, here's a quick image of what i want the main page to look like and do
I also have an idea of what i want the secondary pages to do, have the images all scaled down in sort of columns per enviro/prop/wip and then when moused over or clicked one or the other, they scale to full size with description
Replies
EDIT: Chris beat me to the punch. Really this is all you need
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>portfolio site</title>
<style type="text/css">
<!--
body{
background-color:#333333;/* your background color */
font-family: Arial, Helvetica, sans-serif;/* font family */
font-size: 16px;
color: #CCCCCC;/* text color */
text-align: left;/* text allignment */
line-height: 5px
}
a:link {color:#CC66CC;} /* unvisited link */
a:visited {color:#CCCCCC;} /* visited link */
a:hover {color:#CCCCCC;} /* mouse over link */
a:active {color:#CC66CC;} /* selected link */
div {text-align: left;} /* content alignment */
.Name { /* this is the style for your name */
color: #CC66CC;
font-size: 24px;
font-weight: bold;
}
.smallText{/* this is for a smaller text */
font-size: 10px;
}
/* these are the references used to make this site-you can delete all of this
http://www.w3schools.com/
http://validator.w3.org/
http://www.html-5.com/
*/
-->
</style>
</head>
<body>
<p class="Name">Game Artist</p>
<p>Contact:email@website.com</p>
<p> Resume: <a href="yourResume.pdf">Download</a></p>
<div>
<p><img src="yourfilestructure/yourimage.jpg" alt="your image" width="225" height="225" /></p>
<p><img src="yourfilestructure/yourimage.jpg" alt="your image 2" width="225" height="225" /></p>
<p><img src="yourfilestructure/yourimage.jpg" alt="your image 3" width="225" height="225" /></p>
</div>
<p>Contact:email@website.com </p>
<p class="smallText">All artwork is (c) the artist unless otherwise stated.</p>
</body>
</html>[/html]
What you have there is just adding extra clicks, and not really maximizing the screen space you have, plus it is over complicated.. Even If you decide you want to keep the content structured in sections like that, scrap those vertical thumbnails, they don't give you a good preview of the actual content.
Your idea
Your work isn't in the reviewers face and its cut up and there's some weird scrolling menu.
He clicks on one image that looks cool, he sees 5 angles of the same project and props,
its okay, clicks back, the next one scrolls out too slow.
The reviewer looses interest, gets bored and goes to the next portfolio.
vs a scrolling gallery
Reviewer pulls up your website and all your best work is right in his face.
He quickly scrolls down and sees your best 5 or 6 pieces without searching.
he'll bookmark it and email you later.
You want to have the most effortless portfolio ever. Unless your awesome, then it doesn't matter.
Don't put mediocre work on your portfolio. Only put your absolute best. Scrolling is easier and more accessible than making people click to reveal your work. Zac's point about HR having to go through your portfolio is gold - Don't underestimate how quickly making your website more complicated than it needs to be will turn people away from it. Only takes one click to close your site. How many clicks do you think it should take people to get to your work?
Don't do anything fancy. If you're not a web designer, there is no point in having a fancy portfolio site. Just make it easy to look at. The fancier it is, the larger the pain in your ass it'll be to update it.
So, only your best work. Keep it simple.
http://www.isaacoster.com/?page_id=120
that way it can all be scrolled through or people could click category links.
site doesn't load ;_;
There's a good option here:
http://www.polycount.com/forum/showthread.php?t=91572
http://dan-art.com/SimpleSite.html