-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (148 loc) · 6.15 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mike Davis | UI Designer, Husband, Father, Christian</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="stylesheets/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|PT+Sans|Londrina+Outline|Londrina+Solid' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="billboard">
<div class="bigtext container">
<h1>I'm <strong>Mike Davis</strong></h1>
<h2>UI Designer</h2>
<h2>Husband Father Christian</h2>
</div>
</div>
<div class="main-container container">
<div class="social group">
<ul>
<li><a href="http://dribbble.com/mikedup" class="dribbble hide-text">Dribbble</a><span>Dribbble</span></li>
<li><a href="mailto:[email protected]" class="email hide-text">Email</a><span>Email</span></li>
<li><a href="https://www.facebook.com/mikedavis" class="facebook hide-text">Facebook</a><span>Facebook</span></li>
</ul>
<img src="images/profile.png" />
<ul>
<li><a href="http://instagram.com/miked_up" class="instagram hide-text">Instagram</a><span>Instagram</span></li>
<li><a href="https://twitter.com/miked_up" class="twitter hide-text">Twitter</a><span>Twitter</span></li>
<li><a href="http://www.rdio.com/people/MikeDavis/" class="rdio hide-text">Rdio</a><span>Rdio</span></li>
</ul>
</div>
<div class="tabs">
<ul class="tabs__nav group">
<li><a href="#about">About me</a></li>
<li><a href="#work">Work samples</a></li>
</ul>
<div id="about">
<p>Hi, I'm Mike. I'm a UI designer at <a href="http://www.engineyard.com">Engine Yard</a>. I live in Gainesville, FL with my <em>beautiful</em> wife, Liz, our infant son, Asher, our two dogs, Skyler and Rylan, and our two cats, Embry and Sulley. I love designing simple, usable interfaces. I use HTML, SCSS and JavaScript to build websites and apps that emphasize content in usable and visually striking ways on any device. I'm also the designer at <a href="http://broker.is">Broker</a> and <a href="http://www.humanitybox.com">Humanity Box</a>.</p>
</div>
<div id="work">
<p>Just a few of the projects I've had the opportunity to work on:</p>
<div class="work__item">
<h3>Broker</h3>
<a href="http//broker.is"><i class="fa fa-globe"></i> broker.is</a>
<p>UI, site design, presentational code</p>
<a class="popup" href="images/screen_broker.jpg">
<img class="popup" src="images/screen_broker.jpg">
</a>
</div>
<div class="work__item">
<h3>Showroom</h3>
<a href="http://showroom.is"><i class="fa fa-globe"></i> showroom.is</a>
<p>UI, site design</p>
<a class="popup" href="images/screen_showroom.jpg">
<img class="popup"src="images/screen_showroom.jpg">
</a>
</div>
<div class="work__item">
<h3>Pixelbots</h3>
<a href="http://thepixelbots.com"><i class="fa fa-globe"></i> thepixelbots.com</a>
<p>Site design, identity, presentational code</p>
<a class="popup" href="images/screen_pxb.jpg">
<img class="popup"src="images/screen_pxb.jpg">
</a>
</div>
<div class="work__item">
<h3>StoneVault</h3>
<p>UI</p>
<a class="popup" href="images/screen_sv.jpg">
<img class="popup" src="images/screen_sv.jpg">
</a>
</div>
<div class="work__item">
<h3>Collabmatch</h3>
<a href="http://collabmatch.org"><i class="fa fa-globe"></i> collabmatch.org</a>
<p>Site design, identity, presentational code</p>
<a class="popup" href="images/screen_collabmatch.jpg">
<img src="images/screen_collabmatch.jpg">
</a>
</div>
<div class="work__item">
<h3>Payday</h3>
<p>UI</p>
<a class="popup" href="images/screen_payday.jpg">
<img src="images/screen_payday.jpg">
</a>
</div>
<div class="work__item">
<h3>Humanity Box</h3>
<a href="http://humanitybox.com"><i class="fa fa-globe"></i> humanitybox.com</a>
<p>Site design, identity, presentational code</p>
<a class="popup" href="images/screen_humanitybox.jpg">
<img src="images/screen_humanitybox.jpg">
</a>
</div>
<div class="work__item">
<h3>For Journalism</h3>
<a href="http://forjournalism.com"><i class="fa fa-globe"></i> forjournalism.com</a>
<p>Site design, identity, presentational code</p>
<a class="popup" href="images/screen_fj.jpg">
<img src="images/screen_fj.jpg">
</a>
</div>
</div>
</div>
</div>
<footer class="container">
<p><span>©2014 Mike Davis</span></p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="js/bigtext.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script>
WebFont.load({
google: {
families: ['Londrina Outline', 'Londrina Solid']
},
active: function() {
$('.bigtext').bigtext({
childSelector: '> h1, > h2'
});
}
});
$(document).ready(function() {
$('.popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: false
}
});
$(function () {
var tabContainers = $('.tabs > div');
$('.tabs__nav a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('.tabs__nav li').removeClass('selected');
$(this).parent('li').addClass('selected');
return false;
}).filter(':first').click();
});
});
</script>
</body>
</html>