mmoser/markamoser.com
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

style guide noodles

Browse Source
This commit is contained in:
Mark Moser
2017-08-05 22:44:03 -05:00
committed by Mark Moser
parent 8b0e536819
commit 6f7f5b8836
16 changed files with 386 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
site/pages/about.hbs
View File

@ -1,23 +0,0 @@
<h1>Mark Moser - digital handyman</h1>
<p>
I&rsquo;m a ruby developer exploring and learning everything I can about being a better
developer. This place is where I share my findings, explorations, and other creative
outlets.
</p>
<p>
I&rsquo;m also fond of working in video post production: editing, compositing, and
motion graphics. I can either be your &ldquo;one man band&rdquo; for those smaller
productions, put together a killer team when you need even greater production value,
or be the go-to post production guy you call to join your existing team.
I have experience shooting interviews and putting together short informational
videos. I am very comfortable in the whole Adobe Production Suite of tools.
</p>
<p>
I have a high value for quality craftsmanship. I want to do great work, with people who
also do great work. I love to explore and learn about my world. I enjoy being
challenged. I take pleasure in providing creative solutions to specific needs, always
keeping the bigger picture in mind. I was raised to work hard and play hard.
</p>

50
site/pages/index.hbs
View File

@ -1,41 +1,15 @@
<h1>Looking at styling for an h1</h1>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h2>Looking at styling for an h2</h2>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h3>Looking at styling for an h3</h3>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h4>Looking at styling for an h4</h4>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h5>Looking at styling for an h5</h5>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h6>Looking at styling for an h6</h6>
<p class="small">Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h1>I build web things.</h1>
<h2>Fonts</h2>
{{> sample font="roboto" }}
{{> sample font="tahoma" }}
{{> sample font="inconsolata" }}
<p>
I&rsquo;m a web developer exploring and learning everything I can about being a better
developer. This place is where I share my findings, explorations, and other creative
outlets.
</p>
<h2>Colors</h2>
<p>
I have a high value for quality craftsmanship. I want to do great work, with people who
also do great work. I love to explore and learn about my world. I enjoy being
challenged. I take pleasure in providing creative solutions to specific needs, always
keeping the bigger picture in mind. I was raised to work hard and play hard.
</p>
<h2>Misc elements</h2>
<code>
function thing1(thing2) {
var thing3 = 'some default value';
return thing2 + thing3;
}
</code>
<ul>
<li>item 1 in unordered list</li>
<li>item 2 in unordered list</li>
<li>item 3 in unordered list</li>
<li>item 4 in unordered list</li>
<li>item 5 in unordered list</li>
</ul>
<a class="cta-primary" href="#cta-primary">Do a Thing!</a>
<a class="cta-secondary" href="#cta-secondary">Do another thing</a>

46
site/pages/misc.hbs Normal file
View File

@ -0,0 +1,46 @@
---
title: Misc links and such
---
<h1>{{title}}</h1>
<ul>
<li>
<a href="mailto:markamoser@gmail.com">markamoser@gmail.com</a>
</li>
</ul>
<ul>
<li>
some videos can be found on
<a href="http://www.vimeo.com/mmoser">vimeo</a>
</li>
<li>
I occasionally play on
<a href="http://www.obleys.net">obleys.net</a>
</li>
<li>
and sometimes
<a href="http://www.youtube.com/user/ObleyWan">youtube</a>
</li>
</ul>
<ul>
<li>
<a href="skype:fullsightstudios?userinfo">skype: fullsightstudios</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.bluehost.com/track/fullsight">bluehost</a>
is my preferred shared web host
</li>
<li>
<a href="https://www.digitalocean.com/?refcode=0d1758a3ccb2">digital ocean</a>
is my preferred vps host
</li>
<li>
free cloud storage from
<a href="https://www.getdropbox.com/referrals/NTUzODQzOQ">dropbox</a>
</li>
</ul>

47
site/pages/styleguide.hbs Normal file
View File

@ -0,0 +1,47 @@
---
title: site style guide
---
<h1>Looking at styling for an h1</h1>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h2>Looking at styling for an h2</h2>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h3>Looking at styling for an h3</h3>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h4>Looking at styling for an h4</h4>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h5>Looking at styling for an h5</h5>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h6>Looking at styling for an h6</h6>
<p class="small">Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<a class="cta-primary" href="#cta-primary">Do a Thing!</a>
<a class="cta-secondary" href="#cta-secondary">Do another thing</a>
<h2>Colors</h2>
<div class="color-samples">
<div class="color-a"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-b"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-c"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-d"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-e"><div></div><div></div><div></div><div></div><div></div></div>
</div>
<h2>Misc elements</h2>
<code>
function thing1(thing2) {
var thing3 = 'some default value';
return thing2 + thing3;
}
</code>
<ul>
<li>item 1 in unordered list</li>
<li>item 2 in unordered list</li>
<li>item 3 in unordered list</li>
<li>item 4 in unordered list</li>
<li>item 5 in unordered list</li>
</ul>

105
site/pages/video.hbs Normal file
View File

@ -0,0 +1,105 @@
---
title: Old Video Projects
videos:
demo:
file: "reel2011.mp4"
title: "2011 Demo Reel"
width: "960"
height: "480"
options:
controls: true
autoplay: false
preload: "auto"
note: "A short sampling of my after effects work. I do love to edit. (<a href=\"video/MarkMoser_reel2011.mp4\">download</a>)"
vimeo: "<iframe src=\"//player.vimeo.com/video/29118777?byline=0&amp;portrait=0&amp;autoplay=0\" width=\"720\" height=\"360\" frameborder=\"0\" webkitAllowFullScreen allowFullScreen></iframe>"
las_invent:
file: "LAS_InventYourFuture_720x404.mp4"
title: "Invent Your Future"
width: "720"
height: "404"
options:
controls: true
autoplay: false
preload: "auto"
poster: "LAS_InventYourFuture_720x404.png"
role: "Editor"
credit: "DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Art Direction: <a href=\"http://www.bonadiescreative.com\">John Bonadies</a>"
bid_web:
file: "BackInTheDay_640x360.mov"
title: "Back In the Day"
width: "640"
height: "360"
options:
controls: true
autoplay: false
preload: "auto"
poster: "BackInTheDay_640x360.png"
role: "Editor"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Musician: <a href=\"http://www.rockymaffit.com\">Rocky Maffit</a><br />
<a href=\"http://www.jhanamusic.com/artists/Rocky%20Maffit/rockymaffit.html\">Jhana Music Group</a>"
ccrawl_large:
file: "CCrawl_purple_960x540.m4v"
title: "PW Container Crawl"
width: "960"
height: "540"
options:
controls: true
autoplay: false
preload: "auto"
poster: "CCrawl_purple_960x540.png"
role: "Edit / Compositing"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Stylist: Ron Walder <br />
<a href=\"http://provenwinners.com/\">Proven Winners</a>"
crawl_demo_lg:
file: "CrawlDemo_960x540.mov"
title: "Crawl Breakdown"
width: "960"
height: "540"
options:
controls: true
autoplay: false
preload: "auto"
poster: "CrawlDemo_960x540.png"
role: "Edit / Compositing"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Stylist: Ron Walder <br />
<a href=\"http://provenwinners.com/\">Proven Winners</a>"
pw_garden_640:
file: "SecretGarden_Alternate-640.m4v"
title: "PW Garden Spot"
width: "640"
height: "360"
options:
controls: true
autoplay: false
preload: "auto"
poster: "SecretGarden_Alternate-640.png"
role: "Edit / Compositing"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Stylist: Ron Walder <br />
Creative Director: Dave Lierman <br />
<a href=\"http://provenwinners.com/\">Proven Winners</a>"
balloon_time:
file: "BalloonTime_400x262.mov"
title: "Balloon Time!"
width: "400"
height: "262"
options:
controls: true
autoplay: false
preload: "auto"
poster: "BalloonTime_400x262.png"
role: "Prep / Shoot / Post"
---
<h1>{{title}}</h1>