-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (109 loc) · 3.4 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parameter</title>
<meta name="description" content="Home of Parameter">
<meta name="author" content="Parameter portfolio">
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css?v=1.0">
</head>
<body>
<main>
<section>
<div class="row">
<h1>Parameter productions</h1>
<p>My name's Pär and I've been making stuff on the internet since 2010</p>
</div>
<div class="row">
<ul class="links">
<li><a class="anchor" href="#ask-me">Ask me something</a></li>
<li><a class="anchor" href="#my-stuff">Look at some stuff</a></li>
</ul>
</div>
<div class="row">
<h2>Keywords (unsorted)</h2>
<ul class="keywords">
<li><a href="#javascript">Javascript</a></li>
<li><a href="#react">React (preact?)</a></li>
<li><a href="#wordpress">Wordpress</a></li>
<li><a href="#php">PHP</a></li>
<li><a href="#laravel">Laravel</a></li>
</ul>
</div>
</section>
<section id="ask-me">
<div class="row">
<h1>How can I help you?</h1>
<p>Tell me about your project/problem/opportunity</p>
</div>
<div class="row lined_paper">
<form class="request">
<div class="textarea_holder">
<textarea name="request" placeholder="What time is it?"></textarea>
</div>
<div class="row align_right">
<button class="send" type="button" name="send">Send</button>
</div>
</form>
</div>
</section>
<section id="my-stuff">
<div class="row">
<h1>Portfolio</h1>
</div>
</section>
</main>
<!-- keep first of all script-tags -->
<script src="https://www.gstatic.com/firebasejs/5.5.1/firebase.js"></script>
<script src="js/scrollto.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyA4UiQLQovAoFRArCbeB6W9rhYLmx6PgCo",
authDomain: "parameter-caa52.firebaseapp.com",
databaseURL: "https://parameter-caa52.firebaseio.com",
projectId: "parameter-caa52",
storageBucket: "parameter-caa52.appspot.com",
messagingSenderId: "731455147933"
};
firebase.initializeApp(config);
var requests = firebase.database().ref('requests');
/*
var newRequest = requests.push();
newRequest.set({
message: 'Testing to save a message'
});
*/
var main = document.getElementsByTagName('main')[0];
document.addEventListener('click', function (event) {
if (event.target.matches('.anchor')) {
event.preventDefault();
transitionToSection(event.target);
return false;
}
}, false);
var transitionToSection = function(target) {
main.classList.add('blurred');
var href = target.href;
var hash = href.substring(href.indexOf("#")+1);
var section = document.getElementById(hash);
var sectionOffset = offset(section).top;
setTimeout( function() {
main.classList.remove('blurred');
},500);
scrollTo(sectionOffset, function() {
}, 1300);
}
// Methods
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
</script>
</body>
</html>