-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex2.html
250 lines (245 loc) · 12 KB
/
index2.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
250
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Andy Hull - web development, mapping, data visualization</title>
<meta name="description" content="">
<meta name="author" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />
<link rel="stylesheet/less" href="css/style.css" media="all" />
<script src="js/less-1.1.5.min.js"></script>
<script src="js/jquery/jquery.tablesorter.min.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script type="text/javascript" src="js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="js/chartInit.js"></script>
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Telex' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/highcharts/themes/transparent.js"></script>
<script type="text/javascript">
$(function() {
buildChart()
// $('#ex1').popover({
// 'content': 'This is the real content',
// 'title':'Example 1'
// });
// $('#ex2').popover({
// 'content': 'This is the real content',
// 'title':'Example 2'
// });
// $('#ex3').popover({
// 'content': 'This is the real content',
// 'title':'Example 3'
// });
// $('#ex4').popover({
// 'content': 'This was built using a combination of node.js, drupal and static html/css/javascript/jquery.',
// 'title':'Spinnaker'
// });
// $('#ex5').popover({
// 'content': 'This is the real content',
// 'title':'Example 5'
// });
// $('#ex6').popover({
// 'content': 'This is the real content',
// 'title':'Example 6'
// });
// $('#ex7').popover({
// 'content': 'This uses Wax, flot, and jquery.',
// 'title':'energytrap'
// });
// $('#ex8').popover({
// 'content': 'This is the real content',
// 'title':'Example 8'
// });
// $('#ex9').popover({
// 'content': 'This is the real content',
// 'title':'Example 9'
// });
});
</script>
</head>
<body>
<body data-spy="scroll">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">AH</a>
<ul class="nav">
<li><a href="#work">Portfolio</a></li>
<li><a href="#generalText">About</a></li>
<li><a href="#data">Technical Details</a></li>
</ul>
</div>
</div>
</div>
<header>
<div class="">
<div class="hero-unit">
<div class="container">
<div class="span12">
<h1>Andy Hull</h1>
<h2>I build websites, maps, and data visualizations<h2>
<h3>I've worked for non-profits, research groups, academic libraries and small businesses.</h3>
</div>
</div>
</div>
</div> <!-- /.container -->
</header>
<section class="main-content">
<div class="container">
<div id="work" class="row">
<div class="span12">
<h1>Selected Work</h1>
</div><!-- /.span12-->
<div class="span4">
<h2>Payment Infrastructure</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://newamericafoundation.github.com/gssp/maps/payment.html" target="_blank"><img src="img/screens/payment2.png" alt="mapping payment infrastructure"></a>
<h5>Mapping Microsite</h5>
<p>Mapping composite variables.</p>
<a id="ex1" href="http://newamericafoundation.github.com/gssp/maps/payment.html" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
<div class="span4">
<h2>Slate Map of the Week</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://www.slate.com/articles/technology/map_of_the_week.html" target="_blank"> <img src="img/screens/slate.png" alt="slate map of the week"></a>
<h5>Custom Interactive Maps</h5>
<p>Part of a three person team creating interactive maps for a weekly slate.com feature. </p>
<a id="ex2" href="http://www.slate.com/articles/technology/map_of_the_week.html" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
<div class="span4">
<h2>Mapping Debt</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://newamerica.net/files/debt/map.html" target="_blank"> <img src="img/screens/debt.png" alt="mapping debt in the eurozone"></a>
<h5>Mapping Microsite</h5>
<p>Create custom map.</p>
<a id="ex3" href="http://newamerica.net/files/debt/map.html" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
</div><!-- end #mapping /.row-->
<div id="web" class="row">
<div class="span4">
<h2>Spinnaker</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://spiinakernetwork.org" target="_blank"> <img src="img/screens/spinnaker.png" alt="spinnaker networkd"></a>
<h5>Collaborative Development</h5>
<p>A prototype site created focusing on savings products for the poor. This site is a combination data browser, article search and community site. </p>
<a id="ex4" href="http://spiinakernetwork.org" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
<div class="span4">
<h2>CDC GIS Exchange</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://www.cdc.gov/dhdsp/maps/GISX/index.html" target="_blank"> <img src="img/screens/cdc1.png" alt="cdc gis exchange"></a>
<h5>Public Health</h5>
<p>Lead developer on a CDC sponsored site to promote GIS in state health departments.</p>
<a id="ex5" href="http://www.cdc.gov/dhdsp/maps/GISX/index.html" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
<div class="span4">
<h2>Duke Digital Collections</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://library.duke.edu/digitalcollections/" target="_blank"> <img src="img/screens/digitalcollections.png" alt="duke digital collections"></a>
<h5>Web Development</h5>
<p>Part of a three person team responsible for redesigning the Duke Library's Digital Collections site.<!--<button class="btn btn-default"><a href="http://library.duke.edu/digitalcollections/sizes/adaccess_W0285/" target="_blank">Example Item Viewer</a></button>
<button class="btn btn-default"><a href="http://library.duke.edu/digitalcollections/adaccess/" target="_blank">Example Collection Page</a></button>
<button class="btn btn-default"><a href=" http://library.duke.edu/digitalcollections/adaccess/?page=1" target="_blank">Example Search Page</a></button>-->
</p>
<a id="ex6" href="http://library.duke.edu/digitalcollections/" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
</div><!-- end #web /.row-->
<div class="row">
<div class="span4">
<h2>EnergyTrap.org</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://stories.energytrap.org/" target="_blank"> <img src="img/screens/energytrap.png" alt="the energytrap"></a>
<h5>Visualizing Stories</h5>
<p>I worked as part of a team to create visualizations around the story of rising gas prices. Specifically I built stories 1, 3, 5, and 8.</p>
<a id="ex7" href="http://stories.energytrap.org/" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
<div class="span4">
<h2>Assets Budget Report</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://newamericafoundation.github.com/assets/report.html" target="_blank"> <img src="img/screens/assetsbudget.png" alt="the energytrap"></a>
<h5>From PDF to Interaction</h5>
<p>Development and project management</p>
<a id="ex8" href="http://newamericafoundation.github.com/assets/report.html" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
<div class="span4">
<h2>Assets Data</h2>
<ul class="thumbnails">
<li>
<div class="thumbnail">
<a href="http://newamericafoundation.github.com/assets/report.html" target="_blank"> <img src="img/screens/assetsdata.png" alt="the energytrap"></a>
<h5>Interactive Data</h5>
<p>Site used in conjunction with an event</p>
<a id="ex9" href="http://newamericafoundation.github.com/assets/report.html" target="_blank" class="btn btn-primary pull-right" rel="popover">View</a>
</div>
</li>
</ul>
</div><!-- /.span4-->
</div><!-- end #data /.row-->
<div id="generalText" class="row">
<p>My background is in Geographic Information Systems and web development. The unifying thread through my professional background is my desire to build tools that have an impact. At the Duke University Library I helped to make digital library resources more accessible. In my work at the Children's Environmental Health Initiative I created maps and web applications that enabled people to better understand public health issues. For my Master's project I built a tool to foster local communities through maps. And in my current position I am working toward providing individuals and institutions with an information gateway for savings products.</p>
<p>I have used a variety of tools and languages including Python, PHP, XML, Django, Drupal, Wordpress, Postgres, MySql, Linux and others. I am also well versed in the complete development cycle from user needs assessments, writing use cases, wireframing, prototyping, implementation and assessment. My coursework in Information Science has given me a solid theoretical understanding of human computer interaction, user interface design and systems analysis, all of which have helped me tremendously as a developer.</p>
<p><a href="http://b17studio.com/cv.html" target="_blank">Here is a link to my resume</a></p>
<p>Contact: andyhull3@gmail.com</p>
<h3 id="data">Below are some graphs of coding languages and geographic tools I've used.</h3>
</div><!-- end #generalText /.row-->
<div id="graphContainer" class="row">
<div id="mainGraph" style="width: 800px; height:400px; margin: 10px;padding:5px;"></div>
</div><!-- end #graphContainer /.row-->
<div id="graphContainer1" class="row">
<div id="geoGraph" style="width: 800px; height: 400px; margin: 10px;padding:5px;"></div>
</div><!-- end #graphContainer1 /.row-->
</div><!-- /.container -->
</section> <!-- /.main-container-->
</body>
</html>