chrisw7.github.com/index.html at master · chrisw7/chrisw7.github.com · GitHub

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
---
layout: default
title: portfolio
---

<div class="container">
	{% assign schools = "University of Waterloo, MIT/Harvard, McMaster University" | split: ", " %}
	{% assign projects = site.projects | sort: "order" %}
	<div style="display: flex;">
		<div><br></div>
		<div style="text-align: left; margin: 8px 0 5px 0; font-family: 'Open Sans', Helvetica, Arial, sans-serif;">
			<b>hover to filter ⌄<br></b> <span style="color:#999;"><span id="RD">R&D</span> | <span id="bio">Biomedical</span>
				| <span id="MATLAB">MATLAB</span> | <span id="python">Python</span> | <span id="C">C++</span> | <span id="LabVIEW">LabVIEW</span></span>
		</div>
	</div>
	<div class="grid tiles">
		{% for project in projects %}
		{% if project.img-tall %}
		<div class="tile square {{ project.categories | join: ' ' }} {% case project.school %}{% when 'University of Waterloo' %}uw"
		 {% when 'MIT/Harvard' %}mit"{% when 'McMaster University' %}mc"{% endcase %}">
			<a href="{{ project.url | prepend: site.baseurl }}">
				<img src="{{ site.baseurl}}/images/{{ project.img-tall }}"></img>
				<span class="caption">{{ project.title | join: ' ' }}</span>
			</a>
		</div>
		{% elsif project.img-wide %}
		<div class="tile wide {{ project.categories | join: ' ' }} {% case project.school %}{% when 'University of Waterloo' %}uw" {%
		 when 'MIT/Harvard' %}mit"{% when 'McMaster University' %}mc"{% endcase %}">
			<a href="{{ project.url | prepend: site.baseurl }}">
				<img src="{{ site.baseurl}}/images/{{ project.img-wide }}"></img>
				<span class="caption">{{ project.title }}</span>
			</a>
		</div>
		{% else %}
		<div class="tile small {{ project.categories | join: ' ' }} {% case project.school %}{% when 'University of Waterloo' %}uw"
		 {% when 'MIT/Harvard' %}mit"{% when 'McMaster University' %}mc"{% endcase %}">
			<a href="{{ project.url | prepend: site.baseurl }}">
				<img src="{{ site.baseurl}}/images/{{ project.img }}"></img>
				<span class="caption">{{ project.title }}</span>
			</a>
		</div>
		{% endif %}
		{% endfor %}
	</div>
</div>

<script>
	$('#RD').hover(function () {
		$(".tile:not(.RD)").addClass("fade");
		this.style.color = "black";
		this.style.background = "#fce234";
	}, function () {
		$(".tile:not(.RD)").removeClass("fade");
		this.style.color = "#999";
		this.style.background = "none";
	});

	$('#bio').hover(function () {
		$(".tile:not(.bio)").addClass("fade");
		this.style.color = "black";
		this.style.background = "#fce234";
	}, function () {
		$(".tile:not(.bio)").removeClass("fade");
		this.style.color = "#999";
		this.style.background = "none";
	});

	$('#MATLAB').hover(function () {
		$(".tile:not(.MATLAB)").addClass("fade");
		this.style.color = "black";
		this.style.background = "#fce234";
	}, function () {
		$(".tile:not(.MATLAB)").removeClass("fade");
		this.style.color = "#999";
		this.style.background = "none";
	});

	$('#C').hover(function () {
		$(".tile:not(.C)").addClass("fade");
		this.style.color = "black";
		this.style.background = "#fce234";
	}, function () {
		$(".tile:not(.C)").removeClass("fade");
		this.style.color = "#999";
		this.style.background = "none";
	});

	$('#python').hover(function () {
		$(".tile:not(.python)").addClass("fade");
		this.style.color = "black";
		this.style.background = "#fce234";
	}, function () {
		$(".tile:not(.python)").removeClass("fade");
		this.style.color = "#999";
		this.style.background = "none";
	});

	$('#LabVIEW').hover(function () {
		$(".tile:not(.LabVIEW)").addClass("fade");
		this.style.color = "black";
		this.style.background = "#fce234";
	}, function () {
		$(".tile:not(.LabVIEW)").removeClass("fade");
		this.style.color = "#999";
		this.style.background = "none";
	});
</script>