Project 9 for Foundry & Foundation available now


(Gary) #1

Project 9 is now available. This project is a singe page design suitable for a personal portfolio or CV (Resume). For someone who wants to make a statement with a current design CV then this is a powerful looking quick solution.

There are 2 versions of the Project - one for Foundry and one for Foundation.

This project uses SectionsPro and ProStyles from BWD. These are 2 really clever and powerful stacks that everyone should learn how to use. The Project shows how to setup ProStyles to:

  1. Setup multiple background images with blend effects. There are 5 included with project, and one setting changes the Hero BG to help chose the image for this important part of the site.
  2. ProStyles is used to control the proportional padding between all Sections, so by altering one setting you can adjust the entire Sections padding in the whole page.
  3. Build background effects such as the pseudo parallax effect of the bubble background. Again proStyles makes this easy to switch between different configurations.

Also there is a Timeline display that can be edited and scaled and as it is text based, the information is searchable. Usually these type of timeline displays are images. The Timeline display layout is supplied in a light and also a dark set of images.

With this Project, you can also learn how to achieve the overlapping of content. The Initial Hero page has an image of the girl overlapping a dark grey box which overlaps the main image. SectionsPro makes this a breeze.

Demo1 is at http://webdeersign.com/pr9demo/pr9demo1/
Demo2 is at http://webdeersign.com/pr9demo/pr9demo2/

Product page at http://webdeersign.com/projects/?post=project9%23rapidweaver


(r) #2

hi, the timeline that you use in this project, does it adjust automatically according to the length of text used? or do you have to manually adjust the distance between points? I’m curious to know what happens when each point on the timeline has different amount of copy, thanks


(Gary) #3

Hi,

It is fully adjustable and caters for extra time points and also the length of the text. It can be configured to cater for pretty much any number of time points, have different distances between the points and cater with the text display elongating as the screen width reduces. It will auto adjust to a certain degree and you can extend the distance between 2 points if needed. However, it can’t defy the laws of physics and works best with 2 or 3 lines of text of about 500px wide. You could have say 6 lines of text between 2 points but you would need to adjust that part with the extra images provided.

There is a light and also a dark set of timeline graphics as well as the original vector graphics for you to make your own if you want.


(Gary) #4

@rolisize Here is a demo of an extra item added to the Education timeline that has twice as much text. You can see how the space for the extra item is longer and the graphic extends from the bottom and and keeps its correct shape.

http://d.pr/i/WZDVhttp://d.pr/i/WZDV


(r) #5

thanks for the reply, i have one of your early projects/templates that had a animated time line did you use a different method in this project? got the above link to work http://d.pr/i/WZDV (looks like its there twice )yes that what i was looking to do


(Gary) #6

@rolisize Yes this is a completely different technique that is simpler, quicker to build and implement.


(Steve Folker) #7

Nice looking site.
FYI: just noticed that on mobile on the Foundation site there is no margin below the contact form and and your ‘Webdeersign project 9 Foundation’ text butts right up to it.


(Gary) #8

Thanks. That shouldn’t be too difficult to sort out.


(Jannis from inStacks Software) #9

Really a great project @webdeer.


(Gary) #10

So less that 24 hours after releasing Project 9, a customer uses Project 9 to create this perfect front end to their main web site. This is what RapidWeaver, Stacks and our Projects are all about.
http://www.patrickreynolds.co.uk


(Gary) #11

Just updated this Project to V1.01 with new higher optimised images and an easier to use round image for the girl image.

When using blend modes, such high quality images are not needed, and so higher levels of image optimisation can be used for the blended image producing a smaller image.