-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·146 lines (117 loc) · 5.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Evan Wagstaff is a journalist and developer at the Los Angeles Times.">
<meta name="author" content="Evan Wagstaff">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<title>Evan Wagstaff</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/heroic-features.css" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/8585621956.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<div class="row">
<div class="header-text col-sm-7">
<div class="social">
<a href="https://twitter.com/evanwagstaff" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="https://github.com/ewagstaff" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
<h1>Evan Wagstaff</h1>
<p id="print-text"></p>
</div>
<div class="header-image col-sm-5">
<img src="images/headshot.jpg" alt="Evan Wagstaff" />
</div>
</div>
</header>
<hr>
<!-- Title -->
<div class="col-lg-12">
<h3>Recent Projects</h3>
</div>
<!-- Page Items (populated from the csv) -->
<div id="items">
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Underscore -->
<script src="js/underscore.min.js"></script>
<!-- jQuery CSV parser -->
<script src="js/jquery-csv.min.js"></script>
<!-- Make the page go -->
<script>
$(document).ready(function() {
var itemTemplate = _.template('<div class="col-md-4 col-sm-6 hero-feature"><div class="thumbnail"><a href="<%= link %>"><img src="<%= image %>" alt="<%= title %>"><div class="caption"><h4><%= title %></h4><p><%= description %></p></div></a></div></div>');
$.ajax({
type: "GET",
url: "/data.csv",
dataType: "text",
success: function(data) {
var itemArray = $.csv.toObjects(data);
var itemHTML;
for (var i = 0; i < itemArray.length; i++){
itemHTML = itemTemplate({
image: "images/" + itemArray[i].image,
title: itemArray[i].title,
description: itemArray[i].description,
link: itemArray[i].link,
});
//Add rendered templates to page
$("#items").append(itemHTML);
}
}
});
// Keep cursor flashing
var flashCursor = function(){
if ($("#print-text").hasClass("cursor")){
// Remove cursor
$("#print-text").removeClass("cursor");
} else {
// Display cursor
$("#print-text").addClass("cursor");
}
}
var cursorInterval = setInterval(flashCursor, 750);
// Type letters
var textArray = "journalist, developer, dinosaur wrangler ".split("");
var typeLetter = function(){
//Clear interval when we start typing
clearInterval(cursorInterval);
$("#print-text").addClass("cursor");
//Pull letter out of the array
var newLetter = textArray.shift();
//Stagger the wait times to seem more realistic
var randomWait = Math.floor(Math.random() * (200 - 20 + 1)) + 20;
if (textArray.length > 0){
$("#print-text").text($("#print-text").text() + newLetter);
setTimeout(typeLetter, randomWait);
} else {
$("#print-text").removeClass("cursor");
}
}
// Wait a second before starting
setTimeout(typeLetter, 2000);
});
</script>
<!--
Welcome to my portfolio page! If you've found yourself here, you're probably curious about what's going on behind the scenes. Nothing too complicated. The Bootstrap template was a nice clean offering from Start Bootstrap (https://startbootstrap.com/template-overviews/heroic-features/). The data for "Recent Projects" is an exported CSV that's run through an Underscore.js template and printed onto the page. Hope you check some of them out!
-->
</body>
</html>