Home Explore Help
Register Sign In
thallada
/
thallada.github.io
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 194 Releases 0 Wiki
Browse Source

Initial jekyll set-up & homepage

Tyler Hallada 9 years ago
parent
fc846060b7
commit
f7737d3ca3
18 changed files with 1924 additions and 0 deletions
Split View Show Diff Stats
  1. 3 0
      .gitignore
  2. 2 0
      Gemfile
  3. 3 0
      _config.yml
  4. 44 0
      _layouts/default.html
  5. 36 0
      _layouts/home.html
  6. 9 0
      _layouts/post.html
  7. 24 0
      _posts/2014-04-24-welcome-to-jekyll.markdown
  8. 13 0
      blog/index.html
  9. BIN
      css/ClearSans-Thin-webfont.eot
  10. 667 0
      css/ClearSans-Thin-webfont.svg
  11. BIN
      css/ClearSans-Thin-webfont.ttf
  12. BIN
      css/ClearSans-Thin-webfont.woff
  13. 353 0
      css/main.css
  14. 425 0
      css/normalize.css
  15. 60 0
      css/syntax.css
  16. 43 0
      index.html
  17. 242 0
      js/magic.js
  18. BIN
      profile_icon_128x128.png

+ 3 - 0
.gitignore
View File 

@@ -0,0 +1,3 @@
1 
+Gemfile.lock
2 
+*.swp
3 
+_site/

+ 2 - 0
Gemfile
View File 

@@ -0,0 +1,2 @@
1 
+source 'http://rubygems.org'
2 
+gem 'github-pages'

+ 3 - 0
_config.yml
View File 

@@ -0,0 +1,3 @@
1 
+name: Your New Jekyll Site
2 
+markdown: redcarpet
3 
+pygments: true

+ 44 - 0
_layouts/default.html
View File 

@@ -0,0 +1,44 @@
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>{{ page.title }}</title>
7 
+        <meta name="viewport" content="width=device-width">
8 
+
9 
+        <!-- syntax highlighting CSS -->
10 
+        <link rel="stylesheet" href="/css/syntax.css">
11 
+
12 
+        <!-- Custom CSS -->
13 
+        <link rel="stylesheet" href="/css/main.css">
14 
+
15 
+    </head>
16 
+    <body>
17 
+
18 
+        <div class="site">
19 
+          <div class="header">
20 
+            <h1 class="title"><a href="/">{{ site.name }}</a></h1>
21 
+            <a class="extra" href="/">home</a>
22 
+          </div>
23 
+
24 
+          {{ content }}
25 
+
26 
+          <div class="footer">
27 
+            <div class="contact">
28 
+              <p>
29 
+                Tyler Hallada<br />
30 
+                Programmer and writer<br />
31 
+                tyler@hallada.net
32 
+              </p>
33 
+            </div>
34 
+            <div class="contact">
35 
+              <p>
36 
+                <a href="https://github.com/yourusername">github.com/thallada</a><br />
37 
+                <a href="https://twitter.com/yourusername">twitter.com/tyhallada</a><br />
38 
+              </p>
39 
+            </div>
40 
+          </div>
41 
+        </div>
42 
+
43 
+    </body>
44 
+</html>

+ 36 - 0
_layouts/home.html
View File 

@@ -0,0 +1,36 @@
1 
+<!DOCTYPE html>
2 
+<html style="background: whitesmoke">
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 
+    <title>{{ page.title }}</title>
7 
+    <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
8 
+
9 
+    <!-- 3rd party CSS -->
10 
+    <link rel="stylesheet" href="/css/normalize.css">
11 
+    <!-- Fix IE -->
12 
+    <!--[if lt IE 9]>
13 
+      <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
14 
+      <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
15 
+    <![endif]-->
16 
+
17 
+    <!-- syntax highlighting CSS -->
18 
+    <link rel="stylesheet" href="/css/syntax.css">
19 
+
20 
+    <!-- Custom CSS -->
21 
+    <link rel="stylesheet" href="/css/main.css">
22 
+
23 
+    <!-- Web Fonts -->
24 
+    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300' rel='stylesheet' type='text/css'>
25 
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italics,300,300italics,200' rel='stylesheet' type='text/css'>
26 
+
27 
+    <!-- Scripts -->
28 
+    <script src="js/magic.js"></script>
29 
+  </head>
30 
+  <body>
31 
+  <canvas id="magic"></canvas>
32 
+    <div class="container">
33 
+      {{ content }}
34 
+    </div>
35 
+  </body>
36 
+</html>

+ 9 - 0
_layouts/post.html
View File 

@@ -0,0 +1,9 @@
1 
+---
2 
+layout: default
3 
+---
4 
+<h2>{{ page.title }}</h2>
5 
+<p class="meta">{{ page.date | date_to_string }}</p>
6 
+
7 
+<div class="post">
8 
+{{ content }}
9 
+</div>

+ 24 - 0
_posts/2014-04-24-welcome-to-jekyll.markdown
View File 

@@ -0,0 +1,24 @@
1 
+---
2 
+layout: post
3 
+title:  "Welcome to Jekyll!"
4 
+date:   2014-04-24 18:53:43
5 
+categories: jekyll update
6 
+---
7 
+
8 
+You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
9 
+To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
10 
+
11 
+Jekyll also offers powerful support for code snippets:
12 
+
13 
+{% highlight ruby %}
14 
+def print_hi(name)
15 
+  puts "Hi, #{name}"
16 
+end
17 
+print_hi('Tom')
18 
+#=> prints 'Hi, Tom' to STDOUT.
19 
+{% endhighlight %}
20 
+
21 
+Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].
22 
+
23 
+[jekyll-gh]: https://github.com/mojombo/jekyll
24 
+[jekyll]:    http://jekyllrb.com

+ 13 - 0
blog/index.html
View File 

@@ -0,0 +1,13 @@
1 
+---
2 
+layout: default
3 
+title: Tyler Hallada
4 
+---
5 
+
6 
+<div id="home">
7 
+  <h1>Blog Posts</h1>
8 
+  <ul class="posts">
9 
+    {% for post in site.posts %}
10 
+      <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
11 
+    {% endfor %}
12 
+  </ul>
13 
+</div>

BIN
css/ClearSans-Thin-webfont.eot
View File


File diff suppressed because it is too large
+ 667 - 0
css/ClearSans-Thin-webfont.svg


BIN
css/ClearSans-Thin-webfont.ttf
View File


BIN
css/ClearSans-Thin-webfont.woff
View File


+ 353 - 0
css/main.css
View File 

@@ -0,0 +1,353 @@
1 
+/*****************************************************************************/
2 
+/*
3 
+/* Common
4 
+/*
5 
+/*****************************************************************************/
6 
+
7 
+/* Box sizing. Courtesy of Paul Irish
8 
+ * (http://www.paulirish.com/2012/box-sizing-border-box-ftw/) */
9 
+*, *:before, *:after {
10 
+  -moz-box-sizing: border-box;
11 
+  -webkit-box-sizing: border-box;
12 
+  box-sizing: border-box;
13 
+}
14 
+
15 
+/* Global Reset */
16 
+/** {*/
17 
+  /*margin: 0;*/
18 
+  /*padding: 0;*/
19 
+/*}*/
20 
+
21 
+/*makes the page overflow, so commenting out for now*/
22 
+/*html, body { height: 100%; }*/
23 
+
24 
+/*body {*/
25 
+  /*background-color: #FFF;*/
26 
+  /*font: 13.34px Helvetica, Arial, sans-serif;*/
27 
+  /*font-size: small;*/
28 
+  /*text-align: center;*/
29 
+/*}*/
30 
+
31 
+/*h1, h2, h3, h4, h5, h6 {*/
32 
+  /*font-size: 100%; }*/
33 
+
34 
+/*h1 { margin-bottom: 1em; }*/
35 
+/*p { margin: 1em 0; }*/
36 
+
37 
+/*a         { color: #00a; }*/
38 
+/*a:hover   { color: #000; }*/
39 
+/*a:visited { color: #a0a; }*/
40 
+
41 
+/*****************************************************************************/
42 
+/*
43 
+/* Grid
44 
+/*
45 
+/*****************************************************************************/
46 
+
47 
+/* Grid. Courtesy of Adam Kaplan (http://www.adamkaplan.me/grid/) */
48 
+.container {
49 
+  margin: 0 auto;
50 
+  max-width: 48rem;
51 
+  width: 90%;
52 
+}
53 
+
54 
+@media (min-width: 40rem) {
55 
+  .column {
56 
+    float: left;
57 
+    padding-left: 1rem;
58 
+    padding-right: 1rem;
59 
+  }
60 
+
61 
+  .column.full { width: 100%; }
62 
+  .column.two-thirds { width: 66.7%; }
63 
+  .column.half { width: 50%; }
64 
+  .column.third { width: 33.3%; }
65 
+  .column.fourth { width: 25%; }
66 
+  .column.three-fourths { width: 75%; }
67 
+  .column.flow-opposite { float: right; }
68 
+}
69 
+
70 
+.clearfix:before,
71 
+.clearfix:after {
72 
+  content: " ";
73 
+  display: table;
74 
+}
75 
+
76 
+.clearfix:after {
77 
+  clear: both;
78 
+}
79 
+
80 
+.clearfix {
81 
+  *zoom: 1;
82 
+}
83 
+
84 
+@media (min-width: 40rem) {
85 
+  .column.flow-opposite { float: right; }
86 
+}
87 
+
88 
+/* More suggestions from Jorden Lev (http://jordanlev.github.io/grid/) */
89 
+@-webkit-viewport {width: device-width;}
90 
+@-moz-viewport {width: device-width;}
91 
+@-ms-viewport {width: device-width;}
92 
+@-o-viewport {width: device-width;}
93 
+@viewport {width: device-width;}
94 
+
95 
+img { width: auto; max-width: 100%; height: auto; }
96 
+
97 
+/* By me */
98 
+.hide-mobile {
99 
+  display: none;
100 
+}
101 
+
102 
+@media (min-width: 40rem) {
103 
+  .hide-desktop { display: none }
104 
+  .hide-mobile { }
105 
+}
106 
+
107 
+/*****************************************************************************/
108 
+/*
109 
+/* Home
110 
+/*
111 
+/*****************************************************************************/
112 
+.posts {
113 
+  list-style-type: none;
114 
+  margin-bottom: 2em;
115 
+}
116 
+
117 
+.posts li {
118 
+  line-height: 1.75em;
119 
+}
120 
+
121 
+.posts span {
122 
+  color: #aaa;
123 
+  font-family: Monaco, "Courier New", monospace;
124 
+  font-size: 80%;
125 
+}
126 
+
127 
+/*****************************************************************************/
128 
+/*
129 
+/* Site
130 
+/*
131 
+/*****************************************************************************/
132 
+
133 
+.site {
134 
+  font-size: 115%;
135 
+  text-align: justify;
136 
+  width: 42em;
137 
+  margin: 3em auto 2em;
138 
+  line-height: 1.5em;
139 
+}
140 
+
141 
+.header a {
142 
+  font-weight: bold;
143 
+  text-decoration: none;
144 
+}
145 
+
146 
+.title {
147 
+  display: inline-block;
148 
+  margin-bottom: 2em;
149 
+}
150 
+
151 
+.title a {
152 
+  color: #a00;
153 
+}
154 
+
155 
+.title a:hover {
156 
+  color: #000;
157 
+}
158 
+
159 
+.header a.extra {
160 
+  color: #aaa;
161 
+  margin-left: 1em;
162 
+}
163 
+
164 
+.header a.extra:hover {
165 
+  color: #000;
166 
+}
167 
+
168 
+.meta {
169 
+  color: #aaa;
170 
+}
171 
+
172 
+.footer {
173 
+  font-size: 80%;
174 
+  color: #666;
175 
+  border-top: 4px solid #eee;
176 
+  margin-top: 2em;
177 
+  overflow: hidden;
178 
+}
179 
+
180 
+.footer .contact {
181 
+  float: left;
182 
+  margin-right: 3em;
183 
+}
184 
+
185 
+.footer .contact a {
186 
+  color: #8085C1;
187 
+}
188 
+
189 
+.footer .rss {
190 
+  margin-top: 1.1em;
191 
+  margin-right: -.2em;
192 
+  float: right;
193 
+}
194 
+
195 
+.footer .rss img {
196 
+  border: 0;
197 
+}
198 
+
199 
+/*****************************************************************************/
200 
+/*
201 
+/* Posts
202 
+/*
203 
+/*****************************************************************************/
204 
+
205 
+/* standard */
206 
+.post pre {
207 
+  border: 1px solid #ddd;
208 
+  background-color: #eef;
209 
+  padding: 0 .4em;
210 
+}
211 
+
212 
+.post ul, .post ol {
213 
+  margin-left: 1.35em;
214 
+}
215 
+
216 
+.post code {
217 
+  border: 1px solid #ddd;
218 
+  background-color: #eef;
219 
+  padding: 0 .2em;
220 
+}
221 
+
222 
+.post pre code {
223 
+  border: none;
224 
+}
225 
+
226 
+/* terminal */
227 
+.post pre.terminal {
228 
+  border: 1px solid #000;
229 
+  background-color: #333;
230 
+  color: #FFF;
231 
+}
232 
+
233 
+.post pre.terminal code {
234 
+  background-color: #333;
235 
+}
236 
+
237 
+/*****************************************************************************/
238 
+/*
239 
+/* Homepage
240 
+/*
241 
+/*****************************************************************************/
242 
+
243 
+#home {
244 
+  font-family: 'Open Sans', Arial, sans-serif;
245 
+  color: #444;
246 
+  display: block;
247 
+  position: relative;
248 
+  padding-top: 1.5rem;
249 
+}
250 
+
251 
+/* credit to http://codepen.io/bennettfeely/pen/Ftczh for a lot of this css */
252 
+
253 
+.card {
254 
+  position: relative;
255 
+  z-index: 2;
256 
+  padding: 1rem;
257 
+  box-shadow: 0 1px 2px #aaa;
258 
+  background: white;
259 
+  margin: 0 1rem 1rem;
260 
+  border-radius: 3px;
261 
+  user-select: none;
262 
+}
263 
+
264 
+html {
265 
+  width: 100%;
266 
+  height: 100%;
267 
+}
268 
+
269 
+h1 {
270 
+  font-size: 2rem;
271 
+  font-weight: 200;
272 
+  margin-top: 0;
273 
+  text-align: center;
274 
+}
275 
+
276 
+strong {
277 
+  font-weight: 400;
278 
+  color: FireBrick;
279 
+}
280 
+
281 
+h2 {
282 
+  font-size: .9rem;
283 
+  line-height: 2.5;
284 
+  color: gray;
285 
+  font-weight: 400;
286 
+}
287 
+
288 
+hr {
289 
+  width: 75%;
290 
+}
291 
+
292 
+a {
293 
+  color:FireBrick;
294 
+  text-decoration: none;
295 
+}
296 
+
297 
+a:visited {
298 
+  color:#663366;
299 
+}
300 
+
301 
+a:hover {
302 
+  color:FireBrick;
303 
+  text-decoration: underline;
304 
+}
305 
+
306 
+canvas {
307 
+  position: fixed;
308 
+  top: 0;
309 
+  left: 0;
310 
+}
311 
+
312 
+blockquote {
313 
+  margin-left: 20px;
314 
+  margin-right: 20px;
315 
+  padding-left: 1rem;
316 
+  border-left: solid 3px #aaa;
317 
+}
318 
+
319 
+blockquote p {
320 
+  margin-bottom: 6px;
321 
+}
322 
+
323 
+#front-quote , #front-quote, p {
324 
+    margin-top: 0;
325 
+    margin-bottom: 0;
326 
+}
327 
+
328 
+.profile-card-portrait {
329 
+  width: 100%;
330 
+  margin-bottom: 1.5rem;
331 
+}
332 
+
333 
+.profile-card-quote {
334 
+  margin-top: 1.5rem;
335 
+}
336 
+
337 
+.profile-card-portrait img {
338 
+  margin: 0 auto;
339 
+  display: block;
340 
+}
341 
+
342 
+.profile-card-desc {
343 
+    margin-top: 1.25rem;
344 
+}
345 
+
346 
+@media (min-width: 40rem) {
347 
+  .profile-card-portrait {
348 
+    margin-bottom: 0;
349 
+  }
350 
+  .profile-card-links {
351 
+    margin-top: 0;
352 
+  }
353 
+}

+ 425 - 0
css/normalize.css
View File 

@@ -0,0 +1,425 @@
1 
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
2 
+
3 
+/**
4 
+ * 1. Set default font family to sans-serif.
5 
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
6 
+ *    user zoom.
7 
+ */
8 
+
9 
+html {
10 
+  font-family: sans-serif; /* 1 */
11 
+  -ms-text-size-adjust: 100%; /* 2 */
12 
+  -webkit-text-size-adjust: 100%; /* 2 */
13 
+}
14 
+
15 
+/**
16 
+ * Remove default margin.
17 
+ */
18 
+
19 
+body {
20 
+  margin: 0;
21 
+}
22 
+
23 
+/* HTML5 display definitions
24 
+   ========================================================================== */
25 
+
26 
+/**
27 
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
29 
+ * Correct `block` display not defined for `main` in IE 11.
30 
+ */
31 
+
32 
+article,
33 
+aside,
34 
+details,
35 
+figcaption,
36 
+figure,
37 
+footer,
38 
+header,
39 
+hgroup,
40 
+main,
41 
+nav,
42 
+section,
43 
+summary {
44 
+  display: block;
45 
+}
46 
+
47 
+/**
48 
+ * 1. Correct `inline-block` display not defined in IE 8/9.
49 
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
50 
+ */
51 
+
52 
+audio,
53 
+canvas,
54 
+progress,
55 
+video {
56 
+  display: inline-block; /* 1 */
57 
+  vertical-align: baseline; /* 2 */
58 
+}
59 
+
60 
+/**
61 
+ * Prevent modern browsers from displaying `audio` without controls.
62 
+ * Remove excess height in iOS 5 devices.
63 
+ */
64 
+
65 
+audio:not([controls]) {
66 
+  display: none;
67 
+  height: 0;
68 
+}
69 
+
70 
+/**
71 
+ * Address `[hidden]` styling not present in IE 8/9/10.
72 
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
73 
+ */
74 
+
75 
+[hidden],
76 
+template {
77 
+  display: none;
78 
+}
79 
+
80 
+/* Links
81 
+   ========================================================================== */
82 
+
83 
+/**
84 
+ * Remove the gray background color from active links in IE 10.
85 
+ */
86 
+
87 
+a {
88 
+  background: transparent;
89 
+}
90 
+
91 
+/**
92 
+ * Improve readability when focused and also mouse hovered in all browsers.
93 
+ */
94 
+
95 
+a:active,
96 
+a:hover {
97 
+  outline: 0;
98 
+}
99 
+
100 
+/* Text-level semantics
101 
+   ========================================================================== */
102 
+
103 
+/**
104 
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105 
+ */
106 
+
107 
+abbr[title] {
108 
+  border-bottom: 1px dotted;
109 
+}
110 
+
111 
+/**
112 
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113 
+ */
114 
+
115 
+b,
116 
+strong {
117 
+  font-weight: bold;
118 
+}
119 
+
120 
+/**
121 
+ * Address styling not present in Safari and Chrome.
122 
+ */
123 
+
124 
+dfn {
125 
+  font-style: italic;
126 
+}
127 
+
128 
+/**
129 
+ * Address variable `h1` font-size and margin within `section` and `article`
130 
+ * contexts in Firefox 4+, Safari, and Chrome.
131 
+ */
132 
+
133 
+h1 {
134 
+  font-size: 2em;
135 
+  margin: 0.67em 0;
136 
+}
137 
+
138 
+/**
139 
+ * Address styling not present in IE 8/9.
140 
+ */
141 
+
142 
+mark {
143 
+  background: #ff0;
144 
+  color: #000;
145 
+}
146 
+
147 
+/**
148 
+ * Address inconsistent and variable font size in all browsers.
149 
+ */
150 
+
151 
+small {
152 
+  font-size: 80%;
153 
+}
154 
+
155 
+/**
156 
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
157 
+ */
158 
+
159 
+sub,
160 
+sup {
161 
+  font-size: 75%;
162 
+  line-height: 0;
163 
+  position: relative;
164 
+  vertical-align: baseline;
165 
+}
166 
+
167 
+sup {
168 
+  top: -0.5em;
169 
+}
170 
+
171 
+sub {
172 
+  bottom: -0.25em;
173 
+}
174 
+
175 
+/* Embedded content
176 
+   ========================================================================== */
177 
+
178 
+/**
179 
+ * Remove border when inside `a` element in IE 8/9/10.
180 
+ */
181 
+
182 
+img {
183 
+  border: 0;
184 
+}
185 
+
186 
+/**
187 
+ * Correct overflow not hidden in IE 9/10/11.
188 
+ */
189 
+
190 
+svg:not(:root) {
191 
+  overflow: hidden;
192 
+}
193 
+
194 
+/* Grouping content
195 
+   ========================================================================== */
196 
+
197 
+/**
198 
+ * Address margin not present in IE 8/9 and Safari.
199 
+ */
200 
+
201 
+figure {
202 
+  margin: 1em 40px;
203 
+}
204 
+
205 
+/**
206 
+ * Address differences between Firefox and other browsers.
207 
+ */
208 
+
209 
+hr {
210 
+  -moz-box-sizing: content-box;
211 
+  box-sizing: content-box;
212 
+  height: 0;
213 
+}
214 
+
215 
+/**
216 
+ * Contain overflow in all browsers.
217 
+ */
218 
+
219 
+pre {
220 
+  overflow: auto;
221 
+}
222 
+
223 
+/**
224 
+ * Address odd `em`-unit font size rendering in all browsers.
225 
+ */
226 
+
227 
+code,
228 
+kbd,
229 
+pre,
230 
+samp {
231 
+  font-family: monospace, monospace;
232 
+  font-size: 1em;
233 
+}
234 
+
235 
+/* Forms
236 
+   ========================================================================== */
237 
+
238 
+/**
239 
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
240 
+ * styling of `select`, unless a `border` property is set.
241 
+ */
242 
+
243 
+/**
244 
+ * 1. Correct color not being inherited.
245 
+ *    Known issue: affects color of disabled elements.
246 
+ * 2. Correct font properties not being inherited.
247 
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248 
+ */
249 
+
250 
+button,
251 
+input,
252 
+optgroup,
253 
+select,
254 
+textarea {
255 
+  color: inherit; /* 1 */
256 
+  font: inherit; /* 2 */
257 
+  margin: 0; /* 3 */
258 
+}
259 
+
260 
+/**
261 
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
262 
+ */
263 
+
264 
+button {
265 
+  overflow: visible;
266 
+}
267 
+
268 
+/**
269 
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
270 
+ * All other form control elements do not inherit `text-transform` values.
271 
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272 
+ * Correct `select` style inheritance in Firefox.
273 
+ */
274 
+
275 
+button,
276 
+select {
277 
+  text-transform: none;
278 
+}
279 
+
280 
+/**
281 
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282 
+ *    and `video` controls.
283 
+ * 2. Correct inability to style clickable `input` types in iOS.
284 
+ * 3. Improve usability and consistency of cursor style between image-type
285 
+ *    `input` and others.
286 
+ */
287 
+
288 
+button,
289 
+html input[type="button"], /* 1 */
290 
+input[type="reset"],
291 
+input[type="submit"] {
292 
+  -webkit-appearance: button; /* 2 */
293 
+  cursor: pointer; /* 3 */
294 
+}
295 
+
296 
+/**
297 
+ * Re-set default cursor for disabled elements.
298 
+ */
299 
+
300 
+button[disabled],
301 
+html input[disabled] {
302 
+  cursor: default;
303 
+}
304 
+
305 
+/**
306 
+ * Remove inner padding and border in Firefox 4+.
307 
+ */
308 
+
309 
+button::-moz-focus-inner,
310 
+input::-moz-focus-inner {
311 
+  border: 0;
312 
+  padding: 0;
313 
+}
314 
+
315 
+/**
316 
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
317 
+ * the UA stylesheet.
318 
+ */
319 
+
320 
+input {
321 
+  line-height: normal;
322 
+}
323 
+
324 
+/**
325 
+ * It's recommended that you don't attempt to style these elements.
326 
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
327 
+ *
328 
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
329 
+ * 2. Remove excess padding in IE 8/9/10.
330 
+ */
331 
+
332 
+input[type="checkbox"],
333 
+input[type="radio"] {
334 
+  box-sizing: border-box; /* 1 */
335 
+  padding: 0; /* 2 */
336 
+}
337 
+
338 
+/**
339 
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
340 
+ * `font-size` values of the `input`, it causes the cursor style of the
341 
+ * decrement button to change from `default` to `text`.
342 
+ */
343 
+
344 
+input[type="number"]::-webkit-inner-spin-button,
345 
+input[type="number"]::-webkit-outer-spin-button {
346 
+  height: auto;
347 
+}
348 
+
349 
+/**
350 
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351 
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352 
+ *    (include `-moz` to future-proof).
353 
+ */
354 
+
355 
+input[type="search"] {
356 
+  -webkit-appearance: textfield; /* 1 */
357 
+  -moz-box-sizing: content-box;
358 
+  -webkit-box-sizing: content-box; /* 2 */
359 
+  box-sizing: content-box;
360 
+}
361 
+
362 
+/**
363 
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364 
+ * Safari (but not Chrome) clips the cancel button when the search input has
365 
+ * padding (and `textfield` appearance).
366 
+ */
367 
+
368 
+input[type="search"]::-webkit-search-cancel-button,
369 
+input[type="search"]::-webkit-search-decoration {
370 
+  -webkit-appearance: none;
371 
+}
372 
+
373 
+/**
374 
+ * Define consistent border, margin, and padding.
375 
+ */
376 
+
377 
+fieldset {
378 
+  border: 1px solid #c0c0c0;
379 
+  margin: 0 2px;
380 
+  padding: 0.35em 0.625em 0.75em;
381 
+}
382 
+
383 
+/**
384 
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
385 
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386 
+ */
387 
+
388 
+legend {
389 
+  border: 0; /* 1 */
390 
+  padding: 0; /* 2 */
391 
+}
392 
+
393 
+/**
394 
+ * Remove default vertical scrollbar in IE 8/9/10/11.
395 
+ */
396 
+
397 
+textarea {
398 
+  overflow: auto;
399 
+}
400 
+
401 
+/**
402 
+ * Don't inherit the `font-weight` (applied by a rule above).
403 
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404 
+ */
405 
+
406 
+optgroup {
407 
+  font-weight: bold;
408 
+}
409 
+
410 
+/* Tables
411 
+   ========================================================================== */
412 
+
413 
+/**
414 
+ * Remove most spacing between table cells.
415 
+ */
416 
+
417 
+table {
418 
+  border-collapse: collapse;
419 
+  border-spacing: 0;
420 
+}
421 
+
422 
+td,
423 
+th {
424 
+  padding: 0;
425 
+}

+ 60 - 0
css/syntax.css
View File 

@@ -0,0 +1,60 @@
1 
+.highlight  { background: #ffffff; }
2 
+.highlight .c { color: #999988; font-style: italic } /* Comment */
3 
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
4 
+.highlight .k { font-weight: bold } /* Keyword */
5 
+.highlight .o { font-weight: bold } /* Operator */
6 
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
7 
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
8 
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
9 
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
10 
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
11 
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
12 
+.highlight .ge { font-style: italic } /* Generic.Emph */
13 
+.highlight .gr { color: #aa0000 } /* Generic.Error */
14 
+.highlight .gh { color: #999999 } /* Generic.Heading */
15 
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
16 
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
17 
+.highlight .go { color: #888888 } /* Generic.Output */
18 
+.highlight .gp { color: #555555 } /* Generic.Prompt */
19 
+.highlight .gs { font-weight: bold } /* Generic.Strong */
20 
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
21 
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
22 
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
23 
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
24 
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
25 
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
26 
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
27 
+.highlight .m { color: #009999 } /* Literal.Number */
28 
+.highlight .s { color: #d14 } /* Literal.String */
29 
+.highlight .na { color: #008080 } /* Name.Attribute */
30 
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
31 
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
32 
+.highlight .no { color: #008080 } /* Name.Constant */
33 
+.highlight .ni { color: #800080 } /* Name.Entity */
34 
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
35 
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
36 
+.highlight .nn { color: #555555 } /* Name.Namespace */
37 
+.highlight .nt { color: #000080 } /* Name.Tag */
38 
+.highlight .nv { color: #008080 } /* Name.Variable */
39 
+.highlight .ow { font-weight: bold } /* Operator.Word */
40 
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
41 
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
42 
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
43 
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
44 
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
45 
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
46 
+.highlight .sc { color: #d14 } /* Literal.String.Char */
47 
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
48 
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
49 
+.highlight .se { color: #d14 } /* Literal.String.Escape */
50 
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
51 
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
52 
+.highlight .sx { color: #d14 } /* Literal.String.Other */
53 
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
54 
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
55 
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
56 
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
57 
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
58 
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
59 
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
60 
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

+ 43 - 0
index.html
View File 

@@ -0,0 +1,43 @@
1 
+---
2 
+layout: home
3 
+title: Tyler Hallada
4 
+---
5 
+
6 
+<div id=home>
7 
+  <div class="card profile-card">
8 
+    <div class="row clearfix">
9 
+      <div class="column full">
10 
+        <h1>Tyler Hallada</h1>
11 
+      </div>
12 
+    </div>
13 
+    <div class="row clearfix">
14 
+      <div class="column fourth">
15 
+        <div class="profile-card-portrait">
16 
+          <img src="profile_icon_128x128.png">
17 
+        </div>
18 
+        <hr class="hide-desktop">
19 
+      </div>
20 
+      <div class="column three-fourths">
21 
+        <div class="profile-card-content">
22 
+          <div class="profile-card-quote">
23 
+            <blockquote id="front-quote" cite="Fred Brooks"><p><i>"The programmer, like the poet,
24 
+              works only slightly removed from pure thought-stuff. He builds his
25 
+              castles in the air, from air, creating by exertion of the
26 
+              imagination."</i></p><footer>&mdash; Fred Brooks</footer></blockquote></p>
27 
+          </div>
28 
+        </div>
29 
+      </div>
30 
+    </div>
31 
+    <div class="row clearfix">
32 
+      <div class="column full">
33 
+        <div class="profile-card-desc">
34 
+          <p>I am a Computer Science student at
35 
+          <a href="http://www.northeastern.edu/">Northeastern University</a>
36 
+          and I'm helping make healthcare in the US more efficient at
37 
+          <a href="http://kyruus.com/">Kyruus</a> as a Software Engineering
38 
+          Co-op Intern.</p>
39 
+        </div>
40 
+      </div>
41 
+    </div>
42 
+  </div>
43 
+</div>

+ 242 - 0
js/magic.js
View File 

@@ -0,0 +1,242 @@
1 
+window.onload = function () {
2 
+
3 
+    /* Get the height and width of full document. To avoid browser
4 
+     * incompatibility issues, choose the maximum of all height/width values.
5 
+     *
6 
+     * Method from http://stackoverflow.com/a/1147768 */
7 
+    function getDocumentDimensions() {
8 
+        var body = document.body,
9 
+            html = document.documentElement;
10 
+
11 
+        var height = Math.max(body.scrollHeight, body.offsetHeight,
12 
+                              html.clientHeight, html.scrollHeight,
13 
+                              html.offsetHeight);
14 
+
15 
+        var width = Math.max(body.scrollWidth, body.offsetWidth,
16 
+                             html.clientWidth, html.scrollWidth,
17 
+                             html.offsetWidth);
18 
+
19 
+        return {"height": height, "width": width};
20 
+    }
21 
+
22 
+    /* Specifies what will be added to the red, green, and blue values of the
23 
+     * color at each interval. */
24 
+    function pickGradient() {
25 
+        var directions = [-1, 0, 1];
26 
+        var magnitudes = [1, 2, 3];
27 
+
28 
+        return {"r": directions[Math.floor(Math.random() * 3)] *
29 
+                     magnitudes[Math.floor(Math.random() * 3)],
30 
+                "g": directions[Math.floor(Math.random() * 3)] *
31 
+                     magnitudes[Math.floor(Math.random() * 3)],
32 
+                "b": directions[Math.floor(Math.random() * 3)] *
33 
+                     magnitudes[Math.floor(Math.random() * 3)]};
34 
+    }
35 
+
36 
+    /* Alters the given color by the given gradient and returns both.
37 
+
38 
+       If the red, green, or blue value of the color is at 0 or 255 and the
39 
+       gradient for that value is not zero, then the gradient for that value
40 
+       will change signs. */
41 
+    function nextColor(color, gradient) {
42 
+        var values = ["r", "g", "b"];
43 
+
44 
+        // Check if color at end of range and reverse gradient direction if so
45 
+        for (var i = 0; i < 3; i++) {
46 
+            var colorValue = color[values[i]];
47 
+            var gradientValue = gradient[values[i]];
48 
+            if ((colorValue === 255 && gradientValue > 0) ||
49 
+                    (colorValue === 0 && gradientValue < 0)) {
50 
+                gradient[values[i]] = gradientValue * -1;
51 
+            }
52 
+        }
53 
+
54 
+        // Modify the color according to the gradient
55 
+        for (i = 0; i < 3; i++) {
56 
+            color[values[i]] = color[values[i]] + gradient[values[i]];
57 
+        }
58 
+
59 
+        return {"color": color, "gradient": gradient};
60 
+    }
61 
+
62 
+    /* Choose a random RGB color to begin the color gradient with */
63 
+    function pickRandomColor() {
64 
+        return {"r": Math.floor(Math.random() * (255 + 1)),
65 
+                "g": Math.floor(Math.random() * (255 + 1)),
66 
+                "b": Math.floor(Math.random() * (255 + 1))};
67 
+    }
68 
+
69 
+    /* Most of this funtion is provided by Maissan Inc. in their tutorial:
70 
+       http://www.maissan.net/articles/simulating-vines */
71 
+    function drawTendrils(context, x, y, interations, sort, prune, prune_to) {
72 
+
73 
+        // Set stroke colour
74 
+        context.lineWidth = 0.5;
75 
+        var color = pickRandomColor();
76 
+        context.strokeStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
77 
+
78 
+        // Create initial branch
79 
+        var branches = [];
80 
+        branches.push({
81 
+            points:new Array({x:x, y:y}, {x:x, y:y}, {x:x, y:y}, {x:x, y:y}),
82 
+            angle:0,
83 
+            //distanceToLattice:1000
84 
+        });
85 
+
86 
+        // Start drawing splines at t=0
87 
+        var t = 0;
88 
+
89 
+        // Drawing interval
90 
+        var interval = setInterval(function() {
91 
+
92 
+            var gradient = pickGradient();
93 
+
94 
+            // Set stroke color
95 
+            var newColor = nextColor(color, gradient);
96 
+            color = newColor.color;
97 
+            gradient = newColor.gradient;
98 
+            context.strokeStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
99 
+
100 
+            // Draw branches
101 
+            for (var i in branches) {
102 
+
103 
+                // Draw spline segment
104 
+                var ax = (-branches[i].points[0].x + 3*branches[i].points[1].x - 3*branches[i].points[2].x + branches[i].points[3].x) / 6;
105 
+                var ay = (-branches[i].points[0].y + 3*branches[i].points[1].y - 3*branches[i].points[2].y + branches[i].points[3].y) / 6;
106 
+                var bx = (branches[i].points[0].x - 2*branches[i].points[1].x + branches[i].points[2].x) / 2;
107 
+                var by = (branches[i].points[0].y - 2*branches[i].points[1].y + branches[i].points[2].y) / 2;
108 
+                var cx = (-branches[i].points[0].x + branches[i].points[2].x) / 2;
109 
+                var cy = (-branches[i].points[0].y + branches[i].points[2].y) / 2;
110 
+                var dx = (branches[i].points[0].x + 4*branches[i].points[1].x + branches[i].points[2].x) / 6;
111 
+                var dy = (branches[i].points[0].y + 4*branches[i].points[1].y + branches[i].points[2].y) / 6;
112 
+                context.beginPath();
113 
+                context.moveTo(
114 
+                    ax*Math.pow(t, 3) + bx*Math.pow(t, 2) + cx*t + dx,
115 
+                    ay*Math.pow(t, 3) + by*Math.pow(t, 2) + cy*t + dy
116 
+                );
117 
+                context.lineTo(
118 
+                    ax*Math.pow(t+0.1, 3) + bx*Math.pow(t+0.1, 2) + cx*(t+0.1) + dx,
119 
+                    ay*Math.pow(t+0.1, 3) + by*Math.pow(t+0.1, 2) + cy*(t+0.1) + dy
120 
+                );
121 
+                context.stroke();
122 
+                context.closePath();
123 
+            }
124 
+
125 
+            // Advance t
126 
+            t += 0.1;
127 
+
128 
+            // When finished drawing splines, create a new set of branches
129 
+            if (t >= 1) {
130 
+
131 
+                // Create array to store next iteration of branchces
132 
+                var new_branches = [];
133 
+
134 
+                // Iterate over each branch
135 
+                for (var j in branches) {
136 
+
137 
+                    // Replace with 2 new branches
138 
+                    for (var k = 0; k < 2; k++) {
139 
+
140 
+                        // Generate random deviation from previous angle
141 
+                        var angle = branches[j].angle - (Math.random() * 180 - 90);
142 
+
143 
+                        // Determine closest lattice point
144 
+                        //var distanceToLattice = 100000
145 
+                        //for (var l in lattice) {
146 
+                            //var result = distancePointToLine(branches[j].points[3], lattice[l]);
147 
+                            //if (result < distanceToLattice) distanceToLattice = result;
148 
+                        //}
149 
+
150 
+                        // Generate random length
151 
+                        var length = Math.random() * 15 + 4;
152 
+
153 
+                        // Calculate new point
154 
+                        var x2 = branches[j].points[3].x + Math.sin(Math.PI * angle / 180) * length;
155 
+                        var y2 = branches[j].points[3].y - Math.cos(Math.PI * angle / 180) * length;
156 
+
157 
+                        // Add to new branch array
158 
+                        new_branches.push({
159 
+                            points:new Array(
160 
+                                branches[j].points[1],
161 
+                                branches[j].points[2],
162 
+                                branches[j].points[3],
163 
+                                {x:x2, y:y2}
164 
+                            ),
165 
+                            angle:angle,
166 
+                            //distanceToLattice:distanceToLattice
167 
+                        });
168 
+
169 
+                    }
170 
+                }
171 
+
172 
+                // Sort branches by distance to lattice
173 
+                //new_branches.sort(function(a, b) {
174 
+                    //return a.distanceToLattice - b.distanceToLattice;
175 
+                //});
176 
+
177 
+                // If over 10 branches, prune the branches
178 
+                if (prune) {
179 
+                    if (sort) {
180 
+                        while (new_branches.length > 20) new_branches.pop();
181 
+                    } else {
182 
+                        while (new_branches.length > prune_to) {
183 
+                            new_branches.splice(Math.floor(Math.random() * new_branches.length), 1);
184 
+                        }
185 
+                    }
186 
+                }
187 
+
188 
+                // Replace old branch array with new
189 
+                branches = new_branches;
190 
+
191 
+                // Restart drawing splines at t=0
192 
+                t = 0;
193 
+            }
194 
+
195 
+            // Count interations
196 
+            interations--;
197 
+            if (interations < 0) clearInterval(interval);
198 
+
199 
+        }, 16.67);
200 
+
201 
+        // Return interval
202 
+        return interval;
203 
+    }
204 
+
205 
+
206 
+    function draw() {
207 
+        // Initialize canvas
208 
+        console.log("draw");
209 
+        var canvas = document.getElementById("magic");
210 
+        var dimensions = getDocumentDimensions();
211 
+        console.log(dimensions.height);
212 
+        console.log(dimensions.width);
213 
+        canvas.height = dimensions.height;
214 
+        canvas.width = dimensions.width;
215 
+
216 
+        // Check for canvas support and get context
217 
+        if (canvas.getContext){
218 
+            var context = canvas.getContext("2d");
219 
+
220 
+            // Cast magic spells
221 
+            var metaInterval = setInterval(function () {
222 
+                // resize canvas if document size changed
223 
+                dimensions = getDocumentDimensions();
224 
+                if ((dimensions.height !== canvas.height) ||
225 
+                    (dimensions.width !== canvas.width)) {
226 
+                    console.log(dimensions.height);
227 
+                    console.log(dimensions.width);
228 
+                    canvas.height = dimensions.height;
229 
+                    canvas.width = dimensions.width;
230 
+                }
231 
+
232 
+                // Find random position
233 
+                var x = Math.floor(Math.random() * (canvas.width + 1));
234 
+                var y = Math.floor(Math.random() * (canvas.height + 1));
235 
+                var duration = Math.floor(Math.random() * (600 - 50 + 1)) + 50;
236 
+                var interval = drawTendrils(context, x, y, duration, false, true, 30);
237 
+            }, 3000);
238 
+        }
239 
+    }
240 
+
241 
+    draw();
242 
+};

BIN
profile_icon_128x128.png
View File