forked from DeBraid/www.cacheflow.ca
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
260 lines (191 loc) · 10.6 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
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/normalize.css">
<link rel="stylesheet" href="/styles/foundation.css">
<link rel="stylesheet" href="/styles/custom.css">
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.ico">
<title>Derek Braid: Web Developer</title>
<script type="text/javascript" src="/styles/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/styles/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/styles/js/d3/d3.v3.js" charset="utf-8"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-33814886-2', 'cacheflow.ca');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="svg-nav"></div>
<div class="section" id="header">
<div class="row">
<div class="small-12 columns">
<h1 class="text-center">Cache Flow</h1>
<div class="btn-group text-center">
<a href="/blog/index.html" class="button small radius">Blog</a>
<a href="cv.html" class="button small radius">CV</a>
<a href="mailto:de.braid@gmail.com" class="button small radius">Contact</a>
</div>
<h4 class="text-center">Web Development and Data Visualization by Derek Braid</h4>
</div>
</div>
<div class="row">
<div class="small-12 large-8 large-centered columns">
<img id="headshot1" src="/img/dbheadshotbiz.png" class="right rounded headerpic small thumbnail" />
<div class="large-6 columns">
<h3>Mission</h3>
<ul>
<li>Create personalized web applications to enhance your digital experience or promote a worthy cause.</li>
<li>Data analysis and visualization. Share powerful interactive graphics anytime, anywhere.</li>
<li>Deliver a message to the world through search engines to mobile devices.</li>
<li>Blend great content and tactical presentation with social media.</li>
</ul>
</div>
<div class="large-12 columns">
<h3>Solution</h3>
<p>Respect the value of a strong digital presence. Don't slap together a web page and leave it to rot. <strong>Hire me to build, create and maintain a community around your products and web apps.</strong> Email a link to your existing business or personal website as a starting point.
</div>
</div>
</div>
<div class="row">
<div id="arrow-cont" class="large-12 columns text-center">
<h4 class="subheader">Digital Projects I've Built</h4>
<div id="svg-arrow"></div>
</div>
</div>
</div>
<div class="section">
<div class="row">
<div class="small-12 columns">
<h2 id="devocracy"class="text-center"> <a href="https://devocracy.herokuapp.com/bootcamps" target="_blank">Devocracy.org</a></h2>
<h4 class="text-center subheader">Fall 2013</h4>
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
<p class="ingress">Devocracy helps students find and fund scholarships. It gives anyone the freedom to contribute to a student or cause, and students the opportunity to sell themselves and their dreams.</p>
<p class="ingress">Crowdfunding scholarships with Devocracy is an alternative to burdensome student loans. Funders support students with vision, creativity and passion who reach out for financial aid prior to investing in education.</p>
</div>
<div class="small-12 large-6 columns">
<iframe class="youtubeEmbed" width="420" height="315" src="//www.youtube.com/embed/BiVXlBUZgHo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="small-12 large-4 columns">
<h5>Interactive Graphics</h5>
<p>Used modern web browser technology to build an <a href="https://devocracy.herokuapp.com/bootcamps">interactive map</a> as shown in the video, as well as a <a href="https://devocracy.herokuapp.com/statistics">statistics page</a> with dynamic data-driven charts which render beautifully on your phone or tablet.</p>
</div>
<div class="small-12 large-4 columns">
<h5>Payment Processing</h5>
<p>This app will accept major credit cards to fund scholarships. To ensure a secure and functional page, this feature was added by forking and modifying an exiting project <a href="https://www.crowdtilt.com/">Crowdtilt</a> on Github.</p>
</div>
<div class="small-12 large-4 columns">
<h5>Technology</h5>
<p> FrontEnd => { HTML5, CSS3, SVG, jQuery, javascript, data visualization with d3.js }</p>
<p> :back-end => { Ruby on Rails, foreman, Postgres }</p>
</div>
</div>
</div>
<div class="section">
<div class="row">
<div class="small-12 columns">
<h2 class="text-center"> <a href="http://tributary.io/s/6094415?user=DeBraid" target="_blank">Interactive Stock Charts</a></h2>
<h4 class="text-center subheader">d3.js and Tributary.io</h4>
</div>
</div>
<div class="row">
<div class="small-12 large-centered columns">
<iframe src="http://tributary.io/e/8361294" scrolling="no" frameborder="0" width="100%" height="550px"></iframe>
</div>
</div>
<div class="row">
<div class="small-12 large-4 columns">
<h5>Interactive graphics with d3.js</h5>
<p>Dynamic data-driven charts which render beautifully on your phone or tablet. Create artful displays of shapes, lines and curves.</p>
</div>
<div class="small-12 large-4 columns">
<h5>Dynamic, Real-time Updates</h5>
<p>Adding or removing data points is easy as the chart will automatically adjust the size, positioning and scale of the image.</p>
</div>
<div class="small-12 large-4 columns">
<h5>Customize</h5>
<p>Visualizations can be formed into dashboards for reporting, analyics and educational tools.</p>
</div>
</div>
</div>
<div class="section" id="headerBG">
<div class="row">
<div class="small-12 columns">
<h2 class="text-center">Why Build a Web App?</h2>
<h5 class="text-center subheader">"Nothing is too small for your fullest attention to the finest detail."</h5>
</div>
</div>
<div class="row">
<div id="node-container" class="small-12 large-6 columns"></div>
<div class="small-12 large-6 columns">
<p class="ingress">A mission to solve every problem on Earth is unattainable and silly unless you approach each problem, feature, or moment equally.</p>
<p class="ingress"> My observations in various disciplines, from tech, medicine or economics, show common patterns of success and failure. Three keys to success:</p>
</div>
</div>
<div id="ball-text" class="row" >
<div class="small-12 large-4 columns">
<h5>Adapt</h5>
<p id="AdaptText">Like a frog that won't jump out of a boiling pot, the people and businesses that neglect a changing landscape are in deep trouble. Ideas and products once sold in stores or on TV are now purchased with tablets. Digitize your marketing immediately.</p>
</div>
<div class="small-12 large-4 columns">
<h5>Plan</h5>
<p id="PlanText">There has never been a tool or appliance with greater adoption rate than mobile computers! Without a customized web app delivering information to tablets and smartphones you're lost at sea.</p>
</div>
<div class="small-12 large-4 columns">
<h5>Act</h5>
<p id="ActText">Step out from the cold lonely waters of ink and paper marketing and get digital. Contact me now and I will provide a plan to boost your online presence accompanied with data on how this will improve your bottom line.</p>
</div>
</div>
</div>
<div class="section">
<div class="row">
<div class="small-12 large-centered columns text-center">
<p>
<strong>Email:</strong> de.braid@gmail.com, <strong>Twitter:</strong> <a href="http://twitter.com/Royal_Arse">@Royal_Arse</a>, <strong>Blog:</strong><a href="/blog/index.html"> Cache Flow Blog</a>
</p>
<p>
For more formal look, see: <a href="cv.html">CV</a> and <a href="http://www.linkedin.com/pub/derek-braid/6/613/326">LinkedIn</a>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="styles/js/d3nav.js"></script>
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "styles/js/d3choices.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "styles/js/d3arrow.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
-->
<script type="text/javascript" src="styles/js/d3arrow.js"></script>
</body>
</html>