Skip to content

Commit 4200501

Browse files
kungfukoalakungfukoala
committed
marucci
1 parent cb281db commit 4200501

45 files changed

Lines changed: 797 additions & 3 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎_layouts/casestudy.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
layout: default
3+
---
4+
<div class="page">
5+
<article class="page-content">
6+
{{ content }}
7+
</article>
8+
<div class="side-note">
9+
10+
<ul class="contact-information">
11+
<h3>Contact</h3>
12+
<li>+1.541.610.8948</li>
13+
<li>ben <sup>at</sup> benjaminkinzer <sup>dot</sup> com</li>
14+
<li><strong>twitter</strong> <a href="https://twitter.com/benjaminkinzer/">@benjaminkinzer</a></li>
15+
<li><strong>instagram</strong> <a href="https://instagram.com/benjaminkinzer/">@benjaminkinzer</a></li>
16+
<li><strong>github</strong> <a href="https://github.com/kungfukoala">@kungfukoala</a></li>
17+
<li><a href="https://www.linkedin.com/in/benjaminkinzer">LinkedIn</a></li>
18+
<li><small>Illustration by Soojeong Gwon</small></li>
19+
</ul>
20+
21+
</div>
22+
23+
</div>

‎_site/about/index.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>About &#8211; Benjamin Kinzer </title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description" content="Benjamin Kinzer - Creative Director and Designer who loves great ideas and making them real.">
9+
<meta name="author" content="Benjamin Kinzer">
10+
11+
<link rel="canonical" href="http://benjaminkinzer.com/about/">
12+
<link rel="apple-touch-icon" href="apple-touch-icon.png">
13+
14+
15+
<link rel="stylesheet" href="/assets/css/styles.css">
16+
17+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
18+
<script>window.jQuery || document.write('<script src="assets/javascript/vendor/jquery-1.11.2.min.js"><\/script>')</script>
19+
<script src="/assets/javascript/vendor/modernizr-2.8.3.min.js"></script>
20+
21+
<meta property="og:locale" content="en_US">
22+
<meta property="og:type" content="article">
23+
<meta property="og:title" content="About">
24+
<meta property="og:description" content="Benjamin Kinzer - Creative Director and Designer who loves great ideas and making them real.">
25+
<meta property="og:url" content="http://benjaminkinzer.com/about/">
26+
<meta property="og:site_name" content="Benjamin Kinzer">
27+
28+
29+
30+
31+
32+
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
33+
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
34+
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
35+
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
36+
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
37+
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
38+
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
39+
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
40+
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
41+
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
42+
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
43+
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
44+
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
45+
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
46+
</head>
47+
<body class="about">
48+
<!--[if lt IE 8]>
49+
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
50+
<![endif]-->
51+
<div class="container">
52+
<header class="masthead">
53+
<nav class="navigation">
54+
<ul>
55+
<li>
56+
<h1 class="logo">
57+
<a href="/" class="inactive">
58+
Benjamin Kinzer /
59+
</a>
60+
</h1>
61+
</li>
62+
63+
64+
65+
<li><a href="/profile/" class="inactive">Profile /</a>
66+
</li>
67+
68+
69+
70+
<li><a href="/a-little-love/" class="inactive">&#9829; /</a>
71+
</li>
72+
73+
74+
75+
<li><a href="/story-behind-the-site/" class="inactive">Story Behind the Site /</a>
76+
</li>
77+
78+
</ul>
79+
</nav>
80+
<div class="subtitle">
81+
Art Director and Designer
82+
</div>
83+
</header>
84+
<div class="page">
85+
<div class="side-note">
86+
87+
<div class="profile-image">
88+
<img src="/assets/images/BK_Profile.png" alt="">
89+
</div>
90+
91+
92+
</div>
93+
<article class="page-content">
94+
<div class="who">
95+
<p>Imagine you are holding a holographic photo of a rose. Now, for some reason you decide to cut that image into 1,000 different pieces. To the naked eye the rose would no longer exist, but within each of the 1,000 pieces lying before you the original image of the rose is intact. My approach to design is similar in that I look for the sum of the indivdual parts, and find the original narrative that makes the project or client unique.</p>
96+
97+
<p>So, instead of cutting a project up into a million pieces, I take a moment and step back to see the various perspectives the project has to offer. I invest time working collaboratively with stakeholders, read, listen, observe, ask questions, listen well and refine.</p>
98+
</div>
99+
100+
<div class="people">
101+
<strong>Clients I've had the pleasure to collaborate with</strong>
102+
The Ale Apothecary
103+
- TBD Agency
104+
- 21st Amendment Brewery
105+
- Swiss Water Decaf Process
106+
- American Licorice Company
107+
- JUJU
108+
- Adobe
109+
- Crux Fermentation Project
110+
- Deschutes Brewery
111+
- Oregon Chai
112+
- BrandNavigation
113+
- Park Hyatt
114+
- TEDxBend
115+
- High Desert Journal
116+
- Caldera
117+
</div>
118+
119+
</article>
120+
</div>
121+
</div>
122+
<footer class="footer">
123+
<div class="newsletter">
124+
<form action="http://benjaminkinzer.createsend.com/t/r/s/bykykh/" method="post" id="subForm">
125+
<p>
126+
<input id="fieldName" name="cm-name" type="text" class="name" placeholder="Name">
127+
</p>
128+
<p>
129+
<input id="fieldEmail" name="cm-bykykh-bykykh" type="email" class="required email" placeholder="Email Address" required>
130+
</p>
131+
<p>
132+
<button type="submit" class="button">Subscribe</button>
133+
</p>
134+
</form>
135+
</div>
136+
<div class="contact">
137+
<small class="description">
138+
PHONE
139+
</small>
140+
<span class="phone-number">+1.541.610.8948</span>
141+
<br>
142+
<a class="email-address" href="mailto:iam@benjaminkinzer.com" alt="Contact Benjamin Kinzer">iam@benjaminkinzer.com</a>
143+
</div>
144+
<div class="legal">
145+
<small>
146+
Benjamin Kinzer &copy; 2015
147+
</small>
148+
</div>
149+
</footer>
150+
151+
152+
<script>
153+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
154+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
155+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
156+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
157+
ga('create', 'UA-857352-1', 'auto');
158+
ga('send', 'pageview');
159+
</script>
160+
161+
</body>
162+
</html>

‎_site/assets/css/projects/marucci.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/* Syntax Quick Reference
2+
--------------------------
3+
column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
4+
span($ratio: 1, $offset: 0)
5+
shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
6+
unshift()
7+
edit()
8+
center($max_width: 1410px, $pad: 0)
9+
stack($pad: 0, $align: false)
10+
unstack()
11+
align($direction: both)
12+
cf()
13+
*/
14+
/**
15+
* Grid settings.
16+
* All values are defaults and can therefore be easily overidden.
17+
*/
18+
/**
19+
* List functions courtesy of the wonderful folks at Team Sass.
20+
* Check out their awesome grid: Singularity.
21+
*/
22+
/**
23+
* Get percentage from a given ratio.
24+
* @param {number} [$ratio=1] - The column ratio of the element.
25+
* @returns {number} - The percentage value.
26+
*/
27+
/**
28+
* Work out the column widths based on the ratio and gutter sizes.
29+
* @param {number} [$ratios=1] - The column ratio of the element.
30+
* @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
31+
* @returns {list} $width $gutter - A list containing the with and gutter for the element.
32+
*/
33+
/**
34+
* Get the set layout direction for the project.
35+
* @returns {string} $direction - The layout direction.
36+
*/
37+
/**
38+
* Replace a specified list value with a new value (uses built in set-nth() if available)
39+
* @param {list} $list - The list of values you want to alter.
40+
* @param {number} $index - The index of the list item you want to replace.
41+
* @param {*} $value - The value you want to replace $index with.
42+
* @returns {list} $list - The list with the value replaced or removed.
43+
* @warn if an invalid index is supplied.
44+
*/
45+
/**
46+
* Reverse a list (progressively enhanced for Sass 3.3)
47+
* @param {list} $list - The list of values you want to reverse.
48+
* @returns {list} $result - The reversed list.
49+
*/
50+
/**
51+
* Get the opposite direction to a given value.
52+
* @param {string} $dir - The direction you want the opposite of.
53+
* @returns {string} - The opposite direction to $dir.
54+
* @warn if an incorrect string is provided.
55+
*/
56+
/**
57+
* Style an element as a column with a gutter.
58+
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
59+
* @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
60+
* @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
61+
* @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
62+
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
63+
*/
64+
/**
65+
* An alias for the column mixin.
66+
* @param [$args...] - All arguments get passed through to column().
67+
*/
68+
/**
69+
* Get the width of a column and nothing else.
70+
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
71+
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
72+
*/
73+
/**
74+
* Get the gutter size of a column and nothing else.
75+
* @param {number} [ratios=1] - A width relative to its container as a fraction.
76+
* @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
77+
*/
78+
/**
79+
* An alias for the column-width function.
80+
* @param [$args...] - All arguments get passed through to column().
81+
*/
82+
/**
83+
* An alias for the column-gutter function.
84+
* @param [$args...] - All arguments get passed through to column().
85+
*/
86+
/**
87+
* Style an element as a column without any gutters for a seamless row.
88+
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
89+
* @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
90+
* @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
91+
* @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
92+
*/
93+
/**
94+
* Reorder columns without altering the HTML.
95+
* @param {number} [$ratios=0] - Specify how far along you want the element to move.
96+
* @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
97+
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
98+
*/
99+
/**
100+
* Reset an element that has had shift() applied to it.
101+
*/
102+
/**
103+
* View the grid and its layers for easy debugging.
104+
* @param {string} [$color=black] - The background tint applied.
105+
* @param {boolean} [$important=false] - Whether to apply the style as !important.
106+
*/
107+
/**
108+
* Alias for edit().
109+
*/
110+
/**
111+
* Horizontally center an element.
112+
* @param {number} [$max-width=1410px] - The max width the element can be.
113+
* @param {number} [$pad=0] - Specify the element's left and right padding.
114+
*/
115+
/**
116+
* Uncenter an element.
117+
*/
118+
/**
119+
* Stack an element so that nothing is either side of it.
120+
* @param {number} [$pad=0] - Specify the element's left and right padding.
121+
* @param {boolean/string} [$align=false] - Specify the text align for the element.
122+
*/
123+
/**
124+
* Unstack an element.
125+
*/
126+
/**
127+
* Center an element on either or both axes.
128+
* @requires A parent container with relative positioning.
129+
* @param {string} [$direction=both] - Specify which axes to center the element on.
130+
*/
131+
/**
132+
* Apply a clearfix to an element.
133+
*/
134+
.introduction {
135+
font-size: 1.5em; }
136+
137+
.profile {
138+
background-color: black;
139+
padding: 5em; }

‎_site/assets/css/styles.css‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,24 @@ ul {
528528
ul li {
529529
list-style-type: none; }
530530

531+
h1, .h1 {
532+
font-size: 5em; }
533+
534+
h2, .h2 {
535+
font-size: 3em; }
536+
537+
h3, .h3 {
538+
font-size: 1.5em; }
539+
540+
h4, .h4 {
541+
font-size: 1em; }
542+
543+
h5, .h5 {
544+
font-size: 0.8em; }
545+
546+
h6, .h6 {
547+
font-size: 0.7em; }
548+
531549
.light-grey {
532550
color: #c8c8c8; }
533551

@@ -571,9 +589,29 @@ body {
571589
display: block;
572590
margin-right: auto;
573591
margin-left: auto;
574-
padding-left: 0;
575-
padding-right: 0;
592+
padding-left: 10px;
593+
padding-right: 10px;
576594
margin-bottom: 5.4em; }
595+
@media screen and (min-width: 480px) and (max-width: 1680px) {
596+
.container {
597+
width: auto;
598+
max-width: 1440px;
599+
float: none;
600+
display: block;
601+
margin-right: auto;
602+
margin-left: auto;
603+
padding-left: 30px;
604+
padding-right: 30px; } }
605+
@media screen and (min-width: 1680px) {
606+
.container {
607+
width: auto;
608+
max-width: 1440px;
609+
float: none;
610+
display: block;
611+
margin-right: auto;
612+
margin-left: auto;
613+
padding-left: 0px;
614+
padding-right: 0px; } }
577615

578616
.footer {
579617
float: left;

‎_site/images/baldhead/baldhead-cabinets-home-uncropped.png‎

580 KB
Loading

‎_site/images/chloefrommer/chloe-frommer-website-home.png‎

491 KB
Loading

‎_site/images/extendingsweetness/extending-sweetness-website-home-uncropped.png‎

756 KB
Loading

‎_site/images/highdesertjournal/highdesertjournal-issue20-Daphne@3x.png‎

1.07 MB
Loading

‎_site/images/highdesertjournal/highdesertjournal-issue20-blood@3x.png‎

478 KB
Loading

‎_site/images/highdesertjournal/highdesertjournal-issue20-contents@3x.png‎

1.44 MB
Loading

0 commit comments

Comments
 (0)