John Smith. Personal CV/Portfolio Website Template
Easy part
‘John Smith’ is a one-page CV/Portfolio website template. It’s built to tell a story about a professional designer/web developer to a possible employer or a hirer. Smoothly navigating
from section to section a visitor will get the full picture of you as a professional.
A bit complicated one =)
Although ‘John Smith’ is meant to be one-page website template (and technically it’s only one html file) the visitor will still have several-page website experience but without any browser refreshment and with a nice scroll-to effect for switching between sections. Instead of scrolling the window content ‘John Smith’ template is built to scroll particular Div content. This method allows to hide superfluous sections and show selected only. A special javascript function recalculates main Div height for each viewing page. Please, take a look at live preview. Try to switch between pages/sections and to re-size window, check the window scroll bar. Detailed explanations are in the package docs.
Features
- Easy to use
- URL hash navigation
- Smooth scroll-to functionality
- Any height for content per page/section
- 7 backgrounds
- 2 predefined layouts
- Working AJAX /PHP contact form with validation
- @font-face for headliners
- Readable with turned off javascript
- Valid XHTML /CSS markup with CSS3 features
- Twitter implementation
- Fancybox for images
- Nivo slider for startpage
- Layered PSD files
- Static version included as a bonus
Live Preview EXTREMELY slow loading.
ReplyDeleteHi, Sticker!
ReplyDeleteJust called to Mediatemple (the hosting provider). They have apologized for the slow download problem. It should be fine now.
Hi Odincov,
ReplyDeleteNice clean design, couple of questions:
1.The header, is that html text or image?
2. Can I integrate ISSUU ? That is a publishing system for books and magazines, integrating means inserting a html code somewhere in your code and being able to read my magazine online on this template instead of going to ISSUU first.
3. How many of each module can I use? ie the module “websites”, can I use that like 5 times in the code?
4. In the module “websites”, is it possible when viewing the images, to have a next and previous button, instead of now, closie image and then click the next one.
Cheers
Hi TMW ,
ReplyDeleteThank you very much!
1. Yes, the header is a text and you can change it from the html files.
2. Yes, you can integrate ISSUU . Here is an example for you http://template.odincov.net/site/johnsmith/tmw.html#issuu. (Integrating embed objects keep in mind it’s width should be less or equal to 900px.)
3. 5 pages will be fine. Actually, you can have 10, 20, 30 if it’s reasonable. Javascript will render it fast. But the amount of images can affect the loading time.
4. Yes, it’s possible to have a next/previous buttons. You just have to add the same “rel” tag to each link of the group. Here is another example for you http://template.odincov.net/site/johnsmith/tmw.html#websites.
All the best!
Hi there!
ReplyDeleteLOVE IT !!!
Only thing is that the animation is very choppy for me. Firefox 3.6
Hi artliq,
ReplyDeleteThanks for pointing me. I see the difference but it still comfortable on my computer. There is a static version in the package (if you would like to buy it more because of design). I will study this problem and I will upload update if there is a solution.
Hi Odincov,
ReplyDeleteI wanted to add an additional Print Portfolio Page to my website making to 3 Portfolios. In my case it is for photography. I went to the – Navigation Starts – section under the header and copy and pasted another href – print file remaining the href, rel to photographs.
href="#photography" rel="photography" class="nav">Photography
I then copied and pasted the an additional print page changing the id=photography.
div class=”b-page page” id=”photography”
I can travel to the page without any problem and modify the first Portfolio Work but after renaming the link to the next block, when I attempt to go the the next Portfolio Work it complete breaks and does not side scroll to the next one.
Not sure if this make sense. I may just need to know all the steps for creating an additional Print Portfolio Page and renaming it.
I had no trouble modifying the original 2 Portfolio Pages (Website, Print), but attempting to add another is the problem.
Thanks,
Ben