AJ Burt

Learning is Living Better

415

3

Example Project: Photography Portfolio

Assignment

The goal here is to get going as soon as possible. Don't put it off. Pick your template and begin customizing it to fit your needs. I'll give you tips on design, and possibly even throw in some custom code to help you make your website even better. The aim of this project is to have a space online to show off your work, particularly all of the fun projects you'll come up with here on Skillshare. If you don't want to design a portfolio, that's totally okay! Any website will do.

Deliverable

Let's keep it simple and doable. A completed project will include:

  • A Squarespace site with at least one page
  • BONUS: Images from your research process

Don't be afraid to upload something that isn't complete! We'll work together to make it wonderful. 

Resources

All free unless otherwise indicated. No one has asked me to endorse any of these.

Coming Up with Color Palettes

Adobe Color CC

Colourlovers

Learning CSS

Codecademy

Code School (Some free lessons but most are paid, personally I find it a bit more robust than Codecademy, but most beginners should stick to Codecademy and avoid paying anything untill you're sure you want to learn)

Free Photo Pack

Check out the video for how to get it, and be sure to check out Death to the Stock Photo's license 

CSS Codes

/* For the prints */

.product-image {

border: 20px white solid;
box-shadow: #a9a9a9 5px 5px 30px;

}

/* For the gallery */

.thumbnail {
opacity: 0.8 !important;
}

/* For the Logo */

@keyframes greyout {
0% {opacity: 0.8; transform: scale(1.1);}
100% {opacity: 0.4; transform: scale(1);}

}

#navigator .siteTitle img {
animation-name: greyout;
animation-duration: 2s;
animation-fill-mode: forwards;
}

@keyframes blackhover {
0% {opacity: 0.4; transform: scale(1);}
100% {opacity: 0.8; transform: scale(1.1);}

}

#navigator .siteTitle img:hover {

animation-name: blackhover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
border: 20px white solid;
box-shadow: #a9a9a9 5px 5px 30px;

.thumbnail {
opacity: 0.8 !important;
}

@keyframes greyout {
0% {opacity: 0.8; transform: scale(1.1);}
100% {opacity: 0.4; transform: scale(1);}

}

#navigator .siteTitle img {
animation-name: greyout;
animation-duration: 2s;
animation-fill-mode: forwards;
}

@keyframes blackhover {
0% {opacity: 0.4; transform: scale(1);}
100% {opacity: 0.8; transform: scale(1.1);}

}

#navigator .siteTitle img:hover {

animation-name: blackhover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}

Comments

Please sign in or sign up to comment.