You add a bit of markup that defines you into the div with selector div.faces
The actual markup follows this general template:
<div class="face">
<div class="pic">
<img src="{{ PATH TO IMAGE }}" alt="{{ YOUR NAME }}">
</div>
<h3>{{ YOUR NAME }}</h3>
<p>{{ FUNNY QUOTE }}</p>
<div class="social">
{{ SOCIAL MEDIA LINKS }}
</div>
</div>You add a "face" into the "faces" list. Geddit geddit geddit? HUEHUEHUE. sigh Nevermind.
While writing your name remember to wrap your primary identifier with emphasis tags (<em></em>) this allows the CSS to style
the name you go by as being brighter than the rest of your name. Example:
<h3>James <em>Bond<em></h3>Note: Don't be an idiot. Do not add the em tags in the alt atribute for the image.
The image should be a square jpg with 200x200 px dimensions. Anything other
than a square and you will be pochafied. YOU HAVE BEEN WARNED.
You should store your image in the images/faces/ directory.
Just add a anchor tag with the icon class into the div.social like:
<div class="social">
<a href="https://facebook.com/zuck" class="icon-facebook" target="_blank"></a>
</div>Add as many links as you F***ING WANT!
Available icon classes:
.icon-fivehundredpx.icon-bitbucket.icon-skype.icon-twitter.icon-github.icon-facebook.icon-youtube.icon-vimeo.icon-gplus.icon-pinterest.icon-foursquare.icon-reddit.icon-blogger.icon-dribbble.icon-flickr.icon-linkedin.icon-email.icon-myspace.icon-wordpress.icon-stackoverflow.icon-codepen.icon-web.icon-instagram.icon-behance