-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (72 loc) · 2.79 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=1500" />
</head>
<body>
<div class="nav_wrapper" id="nav_wrapper_id">
<div class="navigation_div" id="navigation_id">
<button onclick="redirectToHome();">Home</button>
<button onclick="redirectToOcclusion();">Occlusion</button>
</div>
<div class="nav_icon_list">
<button class="twitter_img" id="twitter_img_id" onclick="window.open('https://twitter.com/jamdoggie')"></button>
</div>
</div>
<div class="header_div">
<img class="header_img" src="jd_01.jpg"></img>
<text class="header_text header_large">John-Daniel</text>
<text class="header_text_aka">also known as JamDoggie</text>
<p class="bio_text">A software engineer based in Florida</p>
<img class="header_bg" src="background_01.jpg"></img>
</div>
<div class="projects-div">
<text class="projects-header">My projects</text>
<div class="occlusion-project">
<img src="occlusion.png" class="occlusion-project-icon"></img>
<text class="occlusion-title">Occlusion Voice Chat</text>
<p class="occlusion-paragraph">A directional voice chat (VoIP) client & server for Minecraft, with possible developer support for using in other games or applications in the future. Similar to Mumble, except specifically tailored for it's use case and controlled more on the server side than the client side; meaning that you as the server host have much more control.</p>
<button class="occlusion-button" onclick="redirectToOcclusion();">See more</button>
</div>
</div>
<script>
var navWrapper = document.getElementById("nav_wrapper_id");
var navigation = document.getElementById("navigation_id");
window.addEventListener('scroll', function(e)
{
updateScrolledElements();
console.log(getScrollPercent());
}, true)
function getScrollPercent() {
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}
function updateScrolledElements()
{
var scroll = getScrollPercent() / 100;
if (scroll == 0)
{
navWrapper.style.setProperty("background-color", "rgba(230, 230, 230, 0.1)");
navWrapper.style.setProperty("box-shadow", "-0.1em 0em 2.5em 0.2em rgba(0,0,0,0)");
}
else
{
navWrapper.style.setProperty("background-color", "rgba(100, 100, 100, 0.8)");
navWrapper.style.setProperty("box-shadow", "-0.1em -0.6em 2em 0.2em rgba(0,0,0,0.4)");
}
}
function redirectToOcclusion()
{
window.location.href="occlusion.html";
}
function redirectToHome()
{
window.location.href="index.html";
}
</script>
</body>
</html>