-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (230 loc) · 16.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7]> <html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=620">
<title>User Experience Designer, Web Developer, and Hacker for Hire</title>
<!-- Open Graph Protocol - Makes you Facebook "Like" Button & Share Friendly -->
<meta name="title"property="og:title" content="Wil Everts: User Experience Designer, Web Developer, and Hacker for Hire" />
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://cousinwil.com/"/>
<meta property="og:image" content="http://cousinwil.com/images/stickers/cousinwil.png"/>
<meta property="og:site_name" content="Cousinwil.com"/>
<meta property="fb:admins" content="cousinwil"/>
<meta name="description" property="og:description" content="Wil Everts is a User Experience Developer who works with companies needing help with Product Conceptualization, UI Design & Development." />
<meta name="copyright" content="Copyright 2012, William Everts. All Rights Reserved." />
<meta name="author" content="William P. Everts II" />
<link rel="stylesheet" href="stylesheets/eeze.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Averia+Serif+Libre:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/app.css" media="all" />
<link rel="shortcut icon" href="images/cousinwil-tiny.png"/>
<link rel="apple-touch-icon" href="images/cousinwil-tiny.png"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- This is where you work your magic, do your best! -->
<nav class="container">
<div class="row">
<div class="fivecol">
<span class="cousinwil-logo"></span> <h1 class="inline site-title">Cousin Wil</h1>
</div>
<div class="sevencol last clearfix">
<ul class="nav clearfix">
<li class="left-list"><h3>Find me on:</h3></li>
<li class="left-list"><a href="http://twitter.com/cousinwil">Twitter</a>,</li>
<li class="left-list"><a href="http://linkedin.com/in/cousinwil">LinkedIn</a>,</li>
<li class="left-list"><a href="https://github.com/cousinwil">GitHub</a>,</li>
<li class="left-list">or <a href="http://cousinwil.posterous.com">Posterous</a>.</li>
<li class="left-list facebook last"><iframe class="main" src="http://www.facebook.com/plugins/like.php?app_id=111858025576257&href=cousinwil.com&send=false&layout=button_count&width=90&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowtransparency="true"></iframe></li>
</ul>
</div>
</div>
</nav>
<div class="container first-container">
<div class="row">
<div class="tencol centered">
<p class="header">“I started tinkering on the web in school, in 1994; today, I make things that millions of people use worldwide... My high school guidance counselor is due to eat some crow.”</p>
</div>
</div>
</div>
<div class="container vert-border bg-black">
<article>
<div class="row">
<div class="eightcol">
<img src="images/portfolio/wil-marquee.jpg" class="marquee-image">
</div>
<div class="fourcol last">
<h1 class="gold">Wil Everts</h1>
<h2 class="gold">User Experience Web Geek</h2>
<p class="white">I’m a veteran web designer and developer obsessed with building intuitive, pragmatic, and surprising web experiences that are as beautiful as they are functional. My experience working on large scale web products comes from my time working with companies like Yammer, Wikia, Top Fans, and Zivity.</p>
<p class="white">I live in San Francisco with my girlfriend, Karie, and our English Bulldog, Cash. I love cycling, snowboarding, karaoke, baseball (Go Cardinals!), literature, poker, and hacking on web applications.</p>
</div>
</div>
</article>
<article>
<div class="row">
<div class="fourcol">
<h1 class="gold">Author of Eeze</h1>
<h2 class="gold">2012: Front-end development (LESS, CSS3, HTML5)</h2>
<p class="white"><a href="http://github.com/cousinwil/eeze" class="red">Eeze</a> is a clean slate for professional developers creating custom applications. eeze.min.css comes out of the box at under 6K (BEFORE G-Zipping & you can gain ~2k by swapping to the HTML5 Reset) and sets up a great LESS workflow.</p>
<p class="white">Unlike Twitter Bootstrap, Eeze comes as a minimal starting point for your app. I’ve only included the most common building blocks and base file structure that you might need to create a custom application. There are no base preset styles to work around, delete, or overwrite. Just clone the app and start writing *your* code in seconds.</p>
</div>
<div class="eightcol last">
<img src="images/portfolio/eeze-marquee.jpg" class="marquee-image">
</div>
</div>
</article>
<article>
<div class="row">
<div class="eightcol">
<img src="images/portfolio/yammer-marquee.png" class="marquee-image">
</div>
<div class="fourcol last">
<h1 class="gold">Sr. UI Geek at Yammer</h1>
<h2 class="gold">2010-2012: Front-end development (HTML5, CSS, JavaScript, Rails) on the Web Team.</h2>
<p class="white"><a href="http://yammer.com" class="red">Yammer</a> is the original enterprise social network, providing a secure way for employees to communicate, collaborate, and share information.</p>
<p class="white">During my tenure we overcame Salesforce to own the lion’s share of the social enterprise space with over 4 million users and networks in 85% of the Fortune 500, we expanded our featureset and level of finish in the product with Yammer 3, raised lots of funding, and tripled in size.</p>
</div>
</div>
<div class="row second-row">
<div class="sixcol">
<p class="gold">You can see my code all over Yammer’s web interface. In my year and five months there I fixed countless bugs, worked on dozens of A/B tests to perfect our sign-up process and new features, I coded the new header and nav for Yammer 3 (allows for custom background colors to which we need to respond with font colors and menus), and most recently helped build the new stats dashboard on the site today.</p>
<p class="gold">Perhaps even more pride inducing is the front-end talent that I interviewed, pitched, and helped bring on to Yammer. At one point I was *the* front-end enginner on their web team, but when I left we had 7 of the most intelligent and fun UI Engineers I have ever worked with!</p>
</div>
<div class="sixcol last">
<h2 class="white quote">“Wil’s pretty much the complete package: fantastic design skills, solid front-end engineer, absolute blast to work with, and a hilarious dog. He’s deeply missed at Yammer and remains firmly on my ‘work with again’ list.”</h2>
<p class="white quote">- Coda Hale, Infrastructure Architect at Yammer</p>
</div>
</div>
</article>
<article>
<div class="row">
<div class="fourcol">
<h1 class="gold">User Interface for NodeConf SummerCamp</h1>
<h2 class="gold">2011: Design, Artwork, Front-end development</h2>
<p class="white">NodeConf SummerCamp is an unconference for javascript geeks in the hills of Northern California. I quickly ran with the creative freedom this project provided me, whipping out my pen tablet and painting trees, a cave, and a wooden summer camp sign! The end product is a whimsical little one page website to promote the fun weekend retreat.</p>
</div>
<div class="eightcol last">
<img src="images/portfolio/nodeconf-marquee.jpg" class="marquee-image">
</div>
</div>
</article>
<article>
<div class="row">
<div class="eightcol">
<img src="images/portfolio/wikia-marquee.jpg" class="marquee-image">
</div>
<div class="fourcol last">
<h1 class="gold">UX Contractor at Wikia</h1>
<h2 class="gold">2010: Product design, front-end development (HTML, CSS, jQuery, PHP)</h2>
<p class="white">Wikia empowers more than 75,000 communities like Wookieepedia, WoW Wiki, and Lostpedia. They’re the largest user-generated media company and a top 100 web property. It can be a fun challenge because they're an extremely high-volume site which allows custom CSS/Javascript modifications by each wiki!</p>
</div>
</div>
<div class="row second-row">
<div class="sixcol">
<p class="gold">You can see my work in their hub pages (UI engineering) and the popular user achievements release (product consulting and UI engineering). They wanted a way for users to make customizable achievements for their wikis with a custom graphic. At the same time we needed a way to maintain some level of quality. So, I suggested we make several different frames (bronze, silver, and gold) and layer it over the user uploaded artwork. I brought in my friend Tom to draw up the frames and building it was a snap!</p>
</div>
<div class="sixcol last">
<h2 class="white quote">“Wil is a smart, creative designer. We worked on a complicated project with a lot of moving parts, and he came up with solutions and new ideas on the fly.”</h2>
<p class="white quote">- Danny Horn, Product Manager at Wikia</p>
</div>
</div>
</article>
<article>
<div class="row">
<div class="fourcol">
<h1 class="gold">Creator of Powder Envy</h1>
<h2 class="gold">2010: Concept, art direction, layout design, logo, end-to-end development (HTML, CSS, jQuery, PHP/MySQL)</h2>
<p class="white">Powder Envy is a project that I’ve had in my back pocket for a long time. One day the idea for the gondola visualization just hit me out of the blue. I sketched it up in my moleskine and emailed it to my pal, Tom. After that things started moving quickly. I suddenly found myself with this very striking center-piece, and that made everything that much more fun to make!</p>
</div>
<div class="eightcol last">
<img src="images/portfolio/powderenvy-marquee.png" class="marquee-image">
</div>
</div>
</article>
<article>
<div class="row">
<div class="eightcol">
<img src="images/portfolio/zangzing-marquee.jpg" class="marquee-image">
</div>
<div class="fourcol last">
<h1 class="gold">UI Contractor at ZangZing</h1>
<h2 class="gold">2010: Product Consulting, Front-end development (HTML5, CSS, jQuery, Rails)</h2>
<p class="white">ZangZing is a photo sharing start-up based in the Presidio area of San Francisco which I worked on while it was still pre-launch. I spearheaded the front-end development of their alpha launch. It’s a challenging and UI-heavy application which made it fun.</p>
</div>
</div>
</article>
<article>
<div class="row">
<div class="fourcol">
<h1 class="gold">Author, St.eeze Front-End Development Starter Kit</h1>
<h2 class="gold">2010: Front-end development (HTML5, CSS, jQuery, Rails)</h2>
<p class="white">St.eeze is my personal front-end boilerplate updated for HTML5 and CSS3. In addition to being my first public github project it has also been a very useful one as a place to come when creating a new project. I then try and take what I’ve learned developing other sites back into the boilerplate.</p>
</div>
<div class="eightcol last">
<img src="images/portfolio/steeze-marquee.jpg" class="marquee-image">
</div>
</div>
</article>
<article>
<div class="row">
<div class="eightcol">
<img src="images/portfolio/zivity-marquee.jpg" class="marquee-image">
</div>
<div class="fourcol last">
<h1 class="gold">UI Architect at Zivity</h1>
<h2 class="gold">2009: Product conceptualization, design, engineering team coordination, front-end engineering, wire-framing, copy writing</h2>
<p class="white">In 2009 I became Zivity’s User Interface Architect. I immediately started work on a new home page design intended to overcome longstanding conversion issues, re-architecting the application flow, and fixing bugs. After 7 months of improvements we had doubled our 18 month-old subscriber base!</p>
</div>
</div>
<div class="row second-row">
<div class="sixcol">
<p class="gold">Lots of my work still exists on the production Zivity site, today. The home/sign-up pages are new, but when you do sign in to the actual site many of the application's views (Editor’s Picks, Photosets, User Profiles, etc.) remian mostly how I redesigned and developed them in 2009. On these views only the top nav has really changed, to match the logged out redesign.</p>
</div>
<div class="sixcol last">
<h2 class="white quote">“Wil Everts is a pleasure to work with. He’s got a passion for front-end design and and UI. I’ve seen him make some extremely beautiful pages in concert with other developers. It was a pleasure working with him, and I hope to work with him again someday.”</h2>
<p class="white quote">- Alex Choi, Ruby/Rails Senior Engineer at Zivity</p>
</div>
</div>
</article>
<article>
<div class="row">
<div class="fourcol">
<h1 class="gold">Senior Engineer, Top Fans</h1>
<h2 class="gold">2009: Front-end engineering for the launch team, unobtrusive + object oriented javascript, merb templating, iPhone CSS, flash video player.</h2>
<p class="white">Top Fans was fun because it was a chance for us to work on a brand new application and develop it right from the ground up. It was by far the best development team that Zivity had during the two years I worked there. In no time at all the site was conceptualized, developed, designed, and launched. Over the next few months we made countless improvements and fun-to-develop features like a posterous-style handler of video, audio, and images from blackberries, iphones, etc.</p>
</div>
<div class="eightcol last">
<img src="images/portfolio/topfans-marquee.jpg" class="marquee-image">
</div>
</div>
</article>
<article class="final">
<div class="row">
<div class="eightcol">
<img src="images/portfolio/zivity-1-marquee.jpg" class="marquee-image">
</div>
<div class="fourcol last">
<h1 class="gold">Sr. UI Engineer at Zivity</h1>
<h2 class="gold">2008-2010: Front-end engineering, unobtrusive javascript, Ruby on Rails templating, jQuery</h2>
<p class="white">Working for Zivity was a charmed life for many reasons. Zivity was my first Rails development job and my first "mainstream" (Silicon Valley VC funded) start-up. My first day at Zivity Forbes was in the office. A couple days after Zivity was prominent at “the Crunchies,” two months later we were funded. And, all the while, I got to work with some really great people making some really cool stuff.</p>
</div>
</div>
</article>
</div>
<!-- Javascript Last -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</body>
<!-- we built this city on rock and roll (and http://eeze.us by @cousinwil) -->
</html>