-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (119 loc) · 7.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section">
<div>
<h1>Welcome!</h1>
<p>This is a page showing work that I've done for school. If you'd like to see some of the work that I've done extra-curricularly (in my 13 years in professional software development) please go to <a target="_blank" href="https://aeiche.com">aeiche.com</a>. If you'd like to follow the fun stuff that I do in my off time, visit <a target="_blank" href="https://aaroneiche.com">AaronEiche.com</a>.</p>
</div>
</div>
<div><button type="button" onclick="toggleSub()" id="toggleSub">Toggle Apps/Topics</button></div>
<div class="section">
<div class="sub" id="apps">
<a class="block app shrink" id="todo" href="todo.html" data-title="Todo!">
<span class="content" data-date="22 Jan">
A ToDo App built with LocalStorage, and a bit of CSS3
</span>
</a>
<a class="block app shrink " id="rover" href="rover.html" data-title="Rover Picture Explorer">
<span class="content" data-date="26 Jan">A Mars Rover Picture Explorer getting data from the NASA Rover API</span>
</a>
<a class="block app shrink " id="canvas" href="canvas.html" data-title="Popup Video!">
<span class="content" data-date="27 Jan">
An exploration of Popup video with HTML5 Video and Canvas.
</span>
</a>
<a class="block app shrink " id="scene" href="scene.html" data-title="Make a Scene!">
<span class="content" data-date="11 Mar">
Uses CSS to paint a scene.
</span>
</a>
</div>
<div class="sub" id="topics">
<a class="block ready" id="javascript" href="rover.html" data-title="JavaScript">
<span class="content" data-date="29 Jan">Mars Rover Photo Explorer uses a lot of Javascript</span>
</a>
<a class="block ready" id="jsobjects" href="canvas.html" data-date="27 Jan" data-title="JavaScript Objects">
<span class="content" data-date="27 Jan">This popup video viewer uses Javascript objects to create popups.</span>
</a>
<a class="block ready" id="json" href="todo.html" data-title="JSON Parse, Stringify">
<span class="content" data-date="22 Jan">Parsing JSON out of LocalStorage. Utilizing in Todo App</span>
</a>
<a class="block ready" id="ajax" href="rover.html" data-title="AJAX">
<span class="content" data-date="26 Jan">This Mars Rover Photo explorer uses AJAX to request the data from NASA</span>
</a>
<a class="block ready" id="localstorage" href="todo.html" data-title="Local Storage ">
<span class="content" data-date="22 Jan">Todo App uses local storage to keep Todo objects.</span>
</a>
<a class="block ready" id="dom" href="todo.html" data-title="DOM Manipulation ">
<span class="content" data-date="26 Jan">Mars Rover Photo Explorer adds and removes items in the DOM after Requesting them.</span>
</a>
<a class="block ready" id="cssclass" href="scene.html" data-title="CSS Class Properties">
<span class="content" data-date="11 Mar">Make a scene uses class properties to define the panes presented</span>
</a>
<a class="block ready" id="jscsstransitions" href="scene.html" data-title="Javascript CSS3 Transitions and Animations">
<span class="content" data-date="11 Mar">Make a scene animates several items in the scene via css</span>
</a>
<a class="block ready" id="jsevents" href="rover.html" data-title="JavaScript Events">
<span class="content" data-date="11 Mar">Javascript events are utilized in The Rover Explorer</span>
</a>
<a class="block ready" id="html5" href="canvas.html" data-title="HTML5 Tags">
<span class="content" data-date="27 Jan">
This Pop-up video shows pop-ups over video playback.
</span>
</a>
<a class="block ready" id="csstransitions" href="scene.html" data-title="CSS3 Transitions">
<span class="content" data-date="11 Mar">Make a scene uses CSS transforms to change colors and positions of elements</span>
</a>
<a class="block ready" id="csstransforms" href="scene.html" data-title="CSS3 Transforms">
<span class="content" data-date="11 Mar">Make a scene uses CSS transitions to rotate panes.</span>
</a>
<a class="block ready" id="cssanimations" href="scene.html" data-title="CSS3 Animations">
<span class="content" data-date="11 Mar">Make a scene uses CSS animations for cows and a UFO.</span>
</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',e=>{
let set = document.querySelectorAll("div.block");
set.forEach((val,key)=>{
val.addEventListener("click",blockHandler);
})
});
function blockHandler(event) {
window.location = event.target.getAttribute("data-url");
// document.getElementById(event.target.id).classList.toggle("show");
}
function toggleTiles() {
//Get the elements and the document dimenions
var set = document.querySelectorAll("a.block");
var doc = document.body.getBoundingClientRect();
// var l = set[0].getBoundingClientRect().x - doc.x;
// var t = set[0].getBoundingClientRect().y - doc.y;
set.forEach(e=>{
e.style.left = -1 * (e.getBoundingClientRect().x + 200) + "px";
e.style.top = -1 * (e.getBoundingClientRect().y + 200) + "px";
})
}
function toggleSub() {
if(document.getElementById("apps").style.zIndex == 1) {
document.getElementById("apps").style.zIndex = 0;
document.getElementById("topics").style.zIndex = 1;
}else{
document.getElementById("apps").style.zIndex = 1;
document.getElementById("topics").style.zIndex = 0;
}
document.querySelectorAll("a.block").forEach(e=>{
e.classList.toggle("shrink");
})
}
</script>
</body>
</html>