Giter VIP home page Giter VIP logo

peteguan.github.io's Introduction

How to Use This Theme

Just go ahead and read up on how to install Jekyll. It's not too hard I promise!

Download this repository here and save it to any folder you want.

Open a terminal window or a command line and cd to that location.

Then enter: bundle exec jekyll serve. You can now access your new Jekyll site from http://127.0.0.1:4000/. Have fun exploring your new site!

Features

Auto-Generating Sitemap

The sitemap is auto generated! Just simply change the sitemap variable in front matter of each page. It looks like so...

sitemap:
    priority: 0.7
    lastmod: 2017-11-02
    changefreq: weekly

Formspring.io Integration

Formspring is supported out of the box! Just add your email to _config.yml

Credits

Original README from HTML5 UP

Massively by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)


This is Massively, a text-heavy, article-oriented design built around a huge background
image (with a new parallax implementation I'm testing) and scroll effects (powered by
Scrollex). A *slight* departure from all the one-pagers I've been doing lately, but one
that fulfills a few user requests and makes use of some new techniques I've been wanting
to try out. Enjoy it :)

Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
you can use for pretty much whatever.

(* = not included)

AJ
[email protected] | @ajlkn


Credits:

	Demo Images:
		Unsplash (unsplash.com)

	Icons:
		Font Awesome (fortawesome.github.com/Font-Awesome)

	Other:
		jQuery (jquery.com)
		Misc. Sass functions (@HugoGiraudel)
		Skel (skel.io)
		Scrollex (github.com/ajlkn/jquery.scrollex)

layout: page title: Jekyll Theme - Elements Reference - Massively description: Having a massive list of every element of a theme is useful for quick referencing and ideas. Here is every component of Massively! sitemap: priority: 0.7 lastmod: 2017-11-02 changefreq: weekly

Elements
Reference

<h2>Text</h2>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>.
Finally, this is a <a href="#">link</a>.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr />
<header>
	<h2>Heading with a Subtitle</h2>
	<p>Subtitle text is italicized</p>
</header>
<p>This is the text that goes under the heading and the subtitle, most commonly referred to as: the paragraph. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
<header>
	<h3>Heading with a Subtitle</h3>
	<p>This is the subtitle</p>
</header>
<p>This is the text that goes under the heading and the subtitle, most commonly referred to as: the paragraph. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
<header>
	<h4>Heading with a Subtitle</h4>
	<p>Here is the subtitle again</p>
</header>
<p>This is the text that goes under the heading and the subtitle, most commonly referred to as: the paragraph. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>

<hr />

<h2>Lists</h2>
<div class="row">
	<div class="6u 12u$(small)">

		<h3>Unordered</h3>
		<ul>
			<li>The first item on the list.</li>
			<li>The second item.</li>
			<li>And the fourth item!</li>
			<li>Just kidding that last one was the third.</li>
		</ul>

		<h3>Alternate</h3>
		<ul class="alt">
			<li>The first item on the list.</li>
			<li>The second item.</li>
			<li>And the fourth item!</li>
			<li>Just kidding that last one was the third.</li>
		</ul>

	</div>
	<div class="6u$ 12u$(small)">

		<h3>Ordered</h3>
		<ol>
			<li>The first item on the list.</li>
			<li>The second item.</li>
			<li>And the fourth item</li>
			<li>Just kidding that last one was the third.</li>
		</ol>

		<h3>Icons</h3>
		<ul class="icons">
			<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
			<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
			<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
			<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
			<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
		</ul>
		<ul class="icons alt">
			<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
			<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
			<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
			<li><a href="#" class="icon alt fa-github"><span class="label">Github</span></a></li>
			<li><a href="#" class="icon alt fa-dribbble"><span class="label">Dribbble</span></a></li>
		</ul>

	</div>
</div>
<h3>Definition</h3>
<dl>
	<dt>Item 1</dt>
	<dd>
		<p>For item number one we have a brand new set of sample text that is purely meant to help you visualize what a completed website might look like. Definitely replace this!</p>
	</dd>
	<dt>Item 2</dt>
	<dd>
		<p>For item number one we have a brand new set of sample text that is purely meant to help you visualize what a completed website might look like. Definitely replace this!</p>
	</dd>
	<dt>Item 3</dt>
	<dd>
		<p>For item number one we have a brand new set of sample text that is purely meant to help you visualize what a completed website might look like. Definitely replace this!</p>
	</dd>
</dl>

<h3>Actions</h3>
<ul class="actions">
	<li><a href="#" class="button special">Special</a></li>
	<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions small">
	<li><a href="#" class="button special small">Small</a></li>
	<li><a href="#" class="button small">Small</a></li>
</ul>
<div class="row">
	<div class="6u 12u$(small)">
		<ul class="actions vertical">
			<li><a href="#" class="button special">Default</a></li>
			<li><a href="#" class="button">Default</a></li>
		</ul>
	</div>
	<div class="6u 12u$(small)">
		<ul class="actions vertical small">
			<li><a href="#" class="button special small">Small</a></li>
			<li><a href="#" class="button small">Small</a></li>
		</ul>
	</div>
</div>
<div class="row">
	<div class="6u 12u$(small)">
		<ul class="actions vertical">
			<li><a href="#" class="button special fit">Default</a></li>
			<li><a href="#" class="button fit">Default</a></li>
		</ul>
	</div>
	<div class="6u$ 12u$(small)">
		<ul class="actions vertical small">
			<li><a href="#" class="button special small fit">Small</a></li>
			<li><a href="#" class="button small fit">Small</a></li>
		</ul>
	</div>
</div>

<hr />

<h2>Blockquote</h2>
<blockquote>Here is where you would generally insert a life-changing, Instagram worthy quote that will make all your friends jealous of your smartness.</blockquote>

<hr />

<h2>Table</h2>

<h3>Default</h3>
<div class="table-wrapper">
	<table>
		<thead>
			<tr>
				<th>Name</th>
				<th>Description</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Item 1</td>
				<td>This item costs money.</td>
				<td>29.99</td>
			</tr>
			<tr>
				<td>Item 2</td>
				<td>And this one is not free either.</td>
				<td>19.99</td>
			</tr>
			<tr>
				<td>Item 3</td>
				<td>Here we have another item.</td>
				<td>29.99</td>
			</tr>
			<tr>
				<td>Item 4</td>
				<td>More items and stuff.</td>
				<td>19.99</td>
			</tr>
			<tr>
				<td>Item 5</td>
				<td>The last item and stuff.</td>
				<td>29.99</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2"></td>
				<td>100.00</td>
			</tr>
		</tfoot>
	</table>
</div>

<h3>Alternate</h3>
<div class="table-wrapper">
	<table class="alt">
		<thead>
			<tr>
				<th>Name</th>
				<th>Description</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Item 1</td>
				<td>This item costs money.</td>
				<td>29.99</td>
			</tr>
			<tr>
				<td>Item 2</td>
				<td>And this one is not free either.</td>
				<td>19.99</td>
			</tr>
			<tr>
				<td>Item 3</td>
				<td>Here we have another item.</td>
				<td>29.99</td>
			</tr>
			<tr>
				<td>Item 4</td>
				<td>More items and stuff.</td>
				<td>19.99</td>
			</tr>
			<tr>
				<td>Item 5</td>
				<td>The last item and stuff.</td>
				<td>29.99</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2"></td>
				<td>100.00</td>
			</tr>
		</tfoot>
	</table>
</div>

<hr />

<h2>Buttons</h2>
<ul class="actions">
	<li><a href="#" class="button special">Special</a></li>
	<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions">
	<li><a href="#" class="button special big">Big</a></li>
	<li><a href="#" class="button">Default</a></li>
	<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions fit">
	<li><a href="#" class="button special fit">Fit</a></li>
	<li><a href="#" class="button fit">Fit</a></li>
</ul>
<ul class="actions fit small">
	<li><a href="#" class="button special fit small">Fit + Small</a></li>
	<li><a href="#" class="button fit small">Fit + Small</a></li>
</ul>
<ul class="actions">
	<li><a href="#" class="button special icon fa-search">Icon</a></li>
	<li><a href="#" class="button icon fa-download">Icon</a></li>
</ul>
<ul class="actions">
	<li><span class="button special disabled">Special</span></li>
	<li><span class="button disabled">Default</span></li>
</ul>

<hr />

<h2>Form</h2>

<form method="post" action="#" class="alt">
	<div class="row uniform">
		<div class="6u 12u$(xsmall)">
			<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
		</div>
		<div class="6u$ 12u$(xsmall)">
			<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
		</div>
		<!-- Break -->
		<div class="12u$">
			<div class="select-wrapper">
				<select name="demo-category" id="demo-category">
					<option value="">- Category -</option>
					<option value="1">Manufacturing</option>
					<option value="1">Shipping</option>
					<option value="1">Administration</option>
					<option value="1">Human Resources</option>
				</select>
			</div>
		</div>
		<!-- Break -->
		<div class="4u 12u$(small)">
			<input type="radio" id="demo-priority-low" name="demo-priority" checked>
			<label for="demo-priority-low">Low</label>
		</div>
		<div class="4u 12u$(small)">
			<input type="radio" id="demo-priority-normal" name="demo-priority">
			<label for="demo-priority-normal">Normal</label>
		</div>
		<div class="4u$ 12u$(small)">
			<input type="radio" id="demo-priority-high" name="demo-priority">
			<label for="demo-priority-high">High</label>
		</div>
		<!-- Break -->
		<div class="6u 12u$(small)">
			<input type="checkbox" id="demo-copy" name="demo-copy">
			<label for="demo-copy">Email me a copy</label>
		</div>
		<div class="6u$ 12u$(small)">
			<input type="checkbox" id="demo-human" name="demo-human" checked>
			<label for="demo-human">I am a human</label>
		</div>
		<!-- Break -->
		<div class="12u$">
			<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
		</div>
		<!-- Break -->
		<div class="12u$">
			<ul class="actions">
				<li><input type="submit" value="Send Message" class="special" /></li>
				<li><input type="reset" value="Reset" /></li>
			</ul>
		</div>
	</div>
</form>

<hr />

<h2>Image</h2>

<h3>Fit</h3>
<span class="image fit"><img src="{{ "/images/pic01.jpg" | absolute_url }}" alt="" /></span>
<div class="box alt">
	<div class="row 50% uniform">
		<div class="4u"><span class="image fit"><img src="{{ "/images/pic02.jpg" | absolute_url }}" alt="" /></span></div>
		<div class="4u"><span class="image fit"><img src="{{ "/images/pic03.jpg" | absolute_url }}" alt="" /></span></div>
		<div class="4u$"><span class="image fit"><img src="/images/pic04.jpg" alt="" /></span></div>
		<!-- Break -->
		<div class="4u"><span class="image fit"><img src="{{ "/images/pic04.jpg" | absolute_url }}" alt="" /></span></div>
		<div class="4u"><span class="image fit"><img src="{{ "/images/pic05.jpg" | absolute_url }}" alt="" /></span></div>
		<div class="4u$"><span class="image fit"><img src="{{ "/images/pic01.jpg" | absolute_url }}" alt="" /></span></div>
		<!-- Break -->
		<div class="4u"><span class="image fit"><img src="{{ "/images/pic02.jpg" | absolute_url }}" alt="" /></span></div>
		<div class="4u"><span class="image fit"><img src="{{ "/images/pic04.jpg" | absolute_url }}" alt="" /></span></div>
		<div class="4u$"><span class="image fit"><img src="{{ "/images/pic03.jpg" | absolute_url }}" alt="" /></span></div>
	</div>
</div>

<h3>Left &amp; Right</h3>
<p><span class="image left"><img src="{{ "/images/pic02.jpg" | absolute_url }}" alt="" /></span>In both layman and nerd-speak, this is a paragraph. This is a paragraph that goes on the right side of an image. This is the text that goes under the heading and the subtitle. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
<p><span class="image right"><img src="{{ "/images/pic03.jpg" | absolute_url }}" alt="" /></span>In both layman and nerd-speak, this is a paragraph. This is a paragraph that goes on the right side of an image. This is the text that goes under the heading and the subtitle. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>

<hr />

<h2>Box</h2>
<div class="box">
	<p>In both layman and nerd-speak, this is a paragraph. This is a paragraph that goes inside a box! Whoa so crazy. This is the text that goes under the heading and the subtitle. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
</div>

<hr />

<h2>Preformatted</h2>
<pre><code>i = 0;

while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}

print 'It took ' + i + ' iterations to sort the deck.';
</code></pre>

layout: post title: "Pete Guan" date: 2017-10-31 excerpt: "Huge thanks to HTML5 UP for making this awesome template! Let's see what it can do" image: "/images/pic02.jpg"

How to Use This Theme

Just go ahead and read up on how to install Jekyll. It's not too hard I promise!

Download this repository here and save it to any folder you want.

Open a terminal window or a command line and cd to that location.

Then enter: bundle exec jekyll serve. You can now access your new Jekyll site from http://127.0.0.1:4000/. Have fun exploring your new site!

Features

Auto-Generating Sitemap

The sitemap is auto generated! Just simply change the front matter of each site. It looks like so...

sitemap:
    priority: 0.7
    lastmod: 2017-11-02
    changefreq: weekly

Formspring integration

The contact form below each page on the footer actually collects information! Just change your email address in the _config.yml file!

peteguan.github.io's People

Contributors

dependabot[bot] avatar peteguan avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.