Super simple portfolio template
polycounter lvl 6
Hey all, I was updating my site over the weekend and decided to create a simple template that can be used for creating a portfolio site that the community can have/modify. I'd like to get any ideas on improvement to make it more artist friendly if you have them. Also, feel free to swipe the code and modify it and repost the results so others can benifit from having some more options. Currently it requires knowledge of html and how to read it so it's been suggested that a tutorial could be needed so, I might do that in the future. So here are the stats-
no links to other pages
vertical scrolling layout for images
download link for resume
customizable CSS with notations
xhtml compliant and tentatively compliant with html-5
*still requires your own hosting solution
site link:
http://dan-art.com/SimpleSite.html
view source to grab the code etc. Anyway, hope it's useful to someone.
no links to other pages
vertical scrolling layout for images
download link for resume
customizable CSS with notations
xhtml compliant and tentatively compliant with html-5
*still requires your own hosting solution
site link:
http://dan-art.com/SimpleSite.html
view source to grab the code etc. Anyway, hope it's useful to someone.
Replies
So you won't be using it?
and I really need my website! is that free? have a question
or have to buy own domain and use it?
I have still no idea for web something
There are a lot of services out there that have various deals and levels of support, which you normally don't need unless something breaks on their end, then they fix it and a few hours later you're site is back up. It's all pretty painless, the scary part is creating the pages, and with a template like this that part is done. so the only thing you really need to worry about is making awesome art.
I've been with Yahoo business for 11 years and I can only remember one 2hr outage while they upgraded some hardware. They let everyone know about it ahead of time and originally said it would be 4-6hrs but it was back up in 2.
There are probably cheaper services out there so hunt around. I've heard good things about Go-Daddy but then I've also heard complaints about slowness and spotty service so you might want to ask around.
I'm not sure if blogspot allows this, but another option for you might be purchasing a domain ($ 10 - $ 15 annually for a dotcom) and binding it to your blog.
I had a wpress account with a custom domain for a year, but gave up on it because of WP quirks.
2 OP
that's an awesome layout, perfect for any potfolio imo.
however, with what you have there, it would take someone maybe 30 minutes to an hour to learn and implement themselves. its plain-jane html site with a tid bit of css (which really isnt needed in this case assuming you are wanting people with no knowledge of coding to use it).
dont get me wrong, im not trying to talk it down in anyway; its a superb idea, i just feel its useful in some light to know basic html. if you were to browse w3schools.com you could work your way through a site like this very quickly.
nice job :thumbup:
HTML ftw
Here's a great link comparing the most commonly used web design widths, now I just need to make some time to fix up a couple things on my website.
http://www.iteracy.com/resources/build-a-better-website/size-and-layout-of-a-web-page/
Oh and I just noticed Adam made my favorite asset from Space Marine, the ork meteorite ship, nice work dude!
I'll work in some proper documentation in the source, in the meantime here's the current version. I separated out the css and hopefully the html is clear enough to edit without any guidance.
http://dl.dropbox.com/u/1751508/Template/index.html
div#container { text-align: left; /* horizontal centering hack for IE */ width: 900px; /* desired width */ margin: 0 auto; /* required */ clear: left; /* required */ }then add after the <body> tag and add before the </body> tag.Let me know if you'd like some more specific help (I am a webdesigner)
Thanks
SAMPLE
ZIP
-Fixed position header with your name and specialization
-Optional caption if you want to say a few words about each image
-Roll your own 40x40 icon
-CSS in an external file keeps the HTML focused purely on content
-Aside from the text drop shadow, minimal CSS gimmickry
-Clean, easy to read HTML. Simple to edit and add your own content.
-Readable fallback if the CSS fails to load.
www.artbyhawkins.com
http://xoliulshader.com/
Granted the Xouliul site has a bit of code and such the photoshop design and slice process will atleast get you started in a good direction.
$19 / £12.50 a year. Just signed up then myself.
I'm trying to modify snowfly's template so I can get a 2 column x 2 row orientation of images. I've been hunting the interwebs trying to figure out how to do this but web code is a bit confusing. Anyone know how to do that?
http://www.alistapart.com/articles/css-floats-101/
To get two columns you need to make sure the image is about half the size of the container, here's a quick an dirty example:
CSS:
#container{width:800px; display:block}
#container img{width:400px; height:auto; margin:0; float:left; display:block}
.clear{clear:both}
HTML:
<body>
<div id="container">
<img src="#" alt="#">
<img src="#" alt="#">
<div class="clear"></div>
</div>
</body>
I'm also trying to change the simple images to linked images but I'm having problems. I'm guessing what is happening is the image gets set to link to another page but since the image is underneath a css frame you can't actually click on the image.
Not sure if that can be done with the way this template is set up.
<a href="image.jpg"><img src="image.jpg"></a>
I can't seem to get things to align correctly in Snowfly's version.
http://wesleymackinder.com/testIndex.html
4th image, it's shifted to the right.
I've not changed the .css, all I've tried is putting some center tags around different parts in the index. All I've added is some code to link the image to its larger size.
.frame
{
width: 100%;
margin: auto;
margin-top: 60px;
text-align: center;
}
I can't believe this hasn't been mentioned yet but this website has a super simple system and nice layout with options to customize. It's really easy to use and you can view your changes easily. They even provide hosting, although your website will be yourwebsite.carbonmade.com but you can also purchase a domain name and forward it to your carbonmade portfolio so when people type in www.yourwebsite.com it brings up your portfolio. Here is a couple of example portfolios they have listed.
http://agniinteractive.carbonmade.com/
http://azazel.carbonmade.com/
They have options for how you want your front page to look and how you want your images to be viewed, such as list, flipbook, or thumbnails. I use to hassle with updating my portfolio, now I just go to their website press 'create project' then 'upload images' and I'm done.
Costs $22 a month I think and that gets you hosting and a super easy portfolio to use.
You can then use google apps to redirect www.yourdomain.com to yourdomain.com just for the internet noobs that still type www.
There's a brief guide on doing this here http://aws.typepad.com/aws/2011/02/host-your-static-website-on-amazon-s3.html and googling around will provide more docs on the subject.
Costs me about 50 pence per month to host this way and I was previously paying around £30 a month to use their elastic cloud instances for a dynamic ruby on rails portfolio
http://thomasrwbutters.co.uk/ the issue being is that originally, all the images and text, on resizing the window, would go all over the place. I think i've fixed that. Buuuut, they don't move at all any more.
The fix was setting a div.class width:
div.wid
{
width:1500px;
}
and set the body/div as this:
<body>
<div class="wid">
Am i doing it right?
www.rad-3d.com
Thanks Dan! ...!