Blog

Bio Sketch / Interactive Business Card

The objective of this project was to create an bio-sketch/ interactive business card that included 5 interactions using HTML, CSS & Bootstrap. My bio-sketch includes an "About Me" section that describes my background and experiences and a "Let's Talk" section that includes information on how to connect with me.

For this project I also practiced making a multi-layered parallax illustration with CSS & Javascript for the header image. The clip on the right demonstrates the multi-layered parallax effect.

gif.gif
 
Untitled-4.png

To create the parralax, I started by cutting the painting into layers and saving the different layers as png files that I could place on top of each-other. The layers move at different speeds as you scroll to create a sense of depth. Next, I got coding and used CSS & Javascript to style the images and to create the scroll effect. 

The next part of my interactive bio-sketch is an "About Me" section.  I decided to include a timeline in this section because I thought it was the clearest way to demonstrate my previous work experience and education. The timeline is styled with CSS.

 

timeline.gif
Screen Shot 2017-12-13 at 6.50.17 PM.png

The final part of my bio-sketch is the "Let's Talk" section.  This section includes my contact information, social media links, a link to view my resume, and photos that are linked to my Instagram account

Click here to check out my Bio-Sketch. 

carolina diaz