Zac Clark Web Design
Folio Lite
Quickstart Guide

The following are instructions about how to customize index.html & where/how to save your media.

Add a Title, Description, & Keywords 
(These are used by Google and other search engines.)

<title>Name</title>

<meta name="description" content="Your Description Here">
Suggestion: A short (less than 120 character) description of your roles, projects, and location.

<meta name="keywords" content="Name, Position, Location”>
Suggestion placeholders are given.
Keywords should be separated by commas.


Add Your Project Thumbnails and Labels

Project Thumbnails

Save your thumbnails as a 78x44px (16:9 ratio) PNG under: 
“resources/images”

Thumbnails are shown with placeholders by default, referenced in places that look like this:
<img class="thumbnail" src="resources/images/placeholder.png">

The path you save your thumbnail should correspond with the image source path.

Project Labels

Immediately following the thumbnail images are their corresponding labels:

<div class="label">
<h1>Project Title #</h1><h2>Category</h2>
</div>

The project title and its category are represented above, and should be changed appropriately. The ‘#’ symbol above just represents the project number, which varies by default.

Project thumbnail images and labels are wrapped in a unique thumbnail id <div>, the last one named this:

<a href="" id="projectthumbnail12” class="add">
…
</a>

<a href=“”> can remain an empty link at all times, as there is script overriding the link’s default behavior.

If there are more or less than the default 12 projects, “resources/stylesheets/style.css“ must be edited:

#projectthumbnail12 {
  margin: 0 0 28px;
}

‘projectthumbnail12’ above should be the id of the last ‘projectthumbnail’ <div> on the page.


Add Project Slideshow Images and Details

Add Project Slideshow Images

<div class="swiper-wrapper">
<img class="swiper-slide" src="resources/images/placeholder.png" alt="">
<img class="swiper-slide" src="resources/images/placeholderd.png" alt="">
</div>

These slides can be added/deleted as needed within the wrapper <div>, where src values are paths to the proper project images.


Add Your Project Details

<h1 class="projecttitle">Project Title #</h1>
<div class="projectdescription">
<p>…</p>
<a class="projectlink" href="">Visit website &#8250;</a>
</div>

The ‘projecttitle’ <h1> tag should contain the title of project, matching the previous <h1> tag used in the thumbnail.
Paragraphs within the ‘projectdescription’ <div> should contain information about the proper project. 
The ‘projectlink’ path is currently empty and can be changed to another website that the project can be viewed on.

The last paragraph within the ‘projectdescription’ <div> should have the class ‘last’, like shown below:
<p class="last”>…</p>


Add Your Information, Image, and Links

All of the information content is given in this format:

<div id="informationblock">
<img src="resources/images/placeholder.png">
<p>…</p>
<div id="informationlinks">
<a href="">Link &#8250;</a>
<a href="">Link &#8250;</a>
<a href="">Link &#8250;</a>
</div>
</div>

The image within the ‘informationblock’ <div> should be changed to a picture you would like display on your information page.
Paragraph tags within the ‘informationblock’ <div> should consist of an introduction to you, your experiences, approach, and where people can find you.
Links shown should be ways to connect with you on other platforms. They can be added, edited, or deleted as long as they are in the same format as above.