/
index.html
211 lines (199 loc) · 11.2 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Portfolio</title>
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
</head>
<body>
<section class="landing-page" id="home">
<!-- W3Validator: No header necessary! -->
<ul class="scene" id="scene">
<li class="layer big-layer" data-depth="0.10">
<div class="bg-container">
<div class="bg-media">
<!-- add ?autoplay=1 to video url for autoplay -->
<!-- youtube params https://developers.google.com/youtube/player_parameters?hl=de-->
<!--<iframe id="bg-video" src="https://www.youtube.com/embed/tarY3Z0yTZw?controls=0&autoplay=1" frameborder="0" allowfullscreen="false"></iframe>-->
<!-- in style.css change "section.landing-page .bg-media iframe" to "section.landing-page .bg-media img"-->
<!--<img src="https://2sczrg31729t1djmg132q5a7-wpengine.netdna-ssl.com/wp-content/uploads/2016/06/edc-1600x900.png">-->
<!--<div id="player" class="gray-scale-filter"></div>-->
<video class="bg-video" id="bg-video" autoplay loop>
<source src="https://github.com/joelklingler/portfolio/blob/master/assets/qdance.mp4?raw=true" type="video/mp4">
</video>
</div>
</div>
</li>
<li class="layer" style="width: 200%; height: 200%; margin-top: -30%; margin-left: -30%;" data-depth="1.00">
<!-- Interruptor layer. Disable youtube iframe functions -->
</li>
<li class="layer logo-layer" data-depth="0.30">
<div class="animated-logo">
<div class="pseudo-bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="vinyl">
<div class="middle">
<div class="hole"></div>
</div>
</div>
</div>
</li>
<li class="layer scroll-layer" data-depth="0.10">
<div class="scroll-info">
<a class="scroll" href="#pictures"><i class="fa fa-chevron-down fa-3x arrow-down" aria-hidden="true"></i></a>
</div>
<div class="video-controls">
<ul>
<li><a class="control" href="#" id="pause"><i class="fa fa-pause fa-2x" aria-hidden="true"></i></a></li>
</ul>
</div>
</li>
</ul>
</section>
<nav>
<div class="centered">
<a href="#home" class="scroll"><img src="assets/images/logo.svg" alt=""/></a>
<ul>
<li class="active"><a class="scroll" href="#home">Start</a></li>
<li><a class="scroll" href="#pictures">Media</a></li>
<li><a class="scroll" href="#places" data-scroll="places">Places</a></li>
<li><a class="scroll" href="#impressum">Impressum</a></li>
<li><a href="javascript:void(0)" class="nav-toggle">☰</a></li>
</ul>
</div>
<div class="overlay">
<a href="javascript:void(0)" class="nav-close">×</a>
<ul class="overlay-content">
<li class="active"><a class="scroll" href="#home">Start</a></li>
<li><a class="scroll" href="#pictures">Media</a></li>
<li><a class="scroll" href="#places" data-scroll="places">Places</a></li>
<li><a class="scroll" href="#impressum">Impressum</a></li>
</ul>
</div>
</nav>
<section class="content-wrapper" id="pictures">
<h1 class="title">Media</h1>
<!--<div class="parallax-image-container" id="container-1">-->
<div class="centered">
<h2>Bildbearbeitung</h2>
<p>Über das Bild fahren um die bearbeitete Version zu sehen!</p>
<div class="images">
<div class="block img1">
<img src="assets/images/1-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img2">
<img src="assets/images/2-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img3">
<img src="assets/images/3-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img4">
<img src="assets/images/4-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img5">
<img src="assets/images/5-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img6">
<img src="assets/images/6-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img7">
<img src="assets/images/7-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img8">
<img src="assets/images/8-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img9">
<img src="assets/images/9-1.jpeg" alt="Bildbearbeitung">
</div>
<div class="block img10">
<img src="assets/images/10-1.jpeg" alt="Bildbearbeitung">
</div>
</div>
<h2>Kurzfilm</h2>
<div class="video">
<iframe src="https://player.vimeo.com/video/217389693" width="1024" height="768" allowfullscreen></iframe>
</div>
<!--</div>-->
</div>
</section>
<section class="places" id="places">
<h1 class="title">Visited Places</h1>
<div id="map"></div>
</section>
<div class="parallax-image-container" id="container-1"></div>
<section class="impressum" id="impressum">
<h1 class="title">Impressum</h1>
<div class="centered">
<h2>About</h2>
<div class="dev-images">
<a href="https://github.com/joelklingler"><img src="https://avatars3.githubusercontent.com/u/9310366?v=3&s=460" alt="Profilbild Joèl Klingler"></a>
<a href="https://github.com/lucahuber"><img src="https://scontent.cdninstagram.com/t51.2885-15/e35/13827392_1565837947055231_936897826_n.jpg" alt="Profilbild Luca Huber"></a>
</div>
<p>Diese Website wurde im Rahmen der Abschlussprojektarbeit im Modul <a href="http://m152.informatik.sg/">M152</a> an der <a href="https://www.gbssg.ch/">GBS St. Gallen</a>
im Auftrag von <a href="http://oliverlux.ch/#!main">Oliver Lux</a> durch <a href="https://github.com/lucahuber">Luca Huber</a> und <a href="https://github.com/joelklingler">Joèl Klingler</a> erstellt.</p>
<p>Das Konzept und die Dokumentation findet sich <a href="https://github.com/joelklingler/portfolio/wiki">online</a>.</p>
<p>Der Code befindet sich auf <a href="https://github.com/joelklingler/portfolio">GitHub</a> und wird mit <a href="https://pages.github.com/">GitHub-Pages</a> unter <a href="https://joelklingler.github.io/portfolio/">www.joelklingler.github.io/portfolio</a> gehostet. </p>
<h2>Quellen</h2>
<h3>Web</h3>
<ul>
<li>JQuery <a href="https://jquery.com/"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Font Awesome <a href="http://fontawesome.io/"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Parallax (Landing page) <a href="http://matthew.wagerfield.com/parallax/"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Parallax (Scroll) <a href="https://github.com/pixelcog/parallax.js/"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Google Maps <a href="https://developers.google.com/maps/"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
</ul>
<h3>Medien</h3>
<ul>
<li>Electric Love Festival 2016 - Official Aftermovie <a href="https://www.youtube.com/watch?v=vAuwk2hmp1A"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Tomorrowland Belgium 2016 | Official Aftermovie <a href="https://www.youtube.com/watch?v=AtdnWYqbMwc"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Decibel outdoor 2016 - the festival official aftermovie <a href="https://www.youtube.com/watch?v=awAkIrfDl8c"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Q-dance @ Electric Love Festival 2016 | Official Q-Dance Aftermovie <a href="https://www.youtube.com/watch?v=trBanf5xBUg"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Defqon.1 Weekend Festival 2016 | Official Q-dance Aftermovie <a href="https://www.youtube.com/watch?v=tarY3Z0yTZw"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Tomorrowland Mainstage (Parallax scroll #1) <a href="http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2014/11/1366.jpg"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Ultra Japan Festival Mainstage (Parallax scroll #2) <a href="https://ultrajapan.com/wp-content/uploads/2015/11/japan-og-2.jpg"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
<li>Defqon.1 Mainstage (Parallax scroll #3) <a href="http://hardstylemag.com/wp-content/uploads/2015/07/Defqon.1-2015-Mainstage-HardstyleMag.jpg"><i class="fa fa-external-link" aria-hidden="true"></i></a></li>
</ul>
</div>
</section>
<div class="parallax-image-container" id="container-2"></div>
<footer>
<div class="centered">
<p class="credits">Made with <i class="fa fa-heart" aria-hidden="true"></i> in Switzerland.</p>
<div class="social">
<a href="https://www.github.com/joelklingler/portfolio"><i class="fa fa-2x fa-github" aria-hidden="true"></i></a>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnPzYQfCOJscC0VH4uBTbEvpc8uhZdxq0"></script>
<script src="js/lib/jquery.sticky.js"></script>
<script src="js/lib/jquery.parallax.min.js"></script>
<script>
// Rename jquery.parallax.min.js parallax() for parallax.min.js parallax()
$.fn.parallaxEngine = $.fn.parallax;
</script>
<script src="js/lib/parallax.min.js"></script>
<script src="js/app/map.js"></script>
<script src="js/app/navigation.js"></script>
<script src="js/app/effects.js"></script>
</body>
</html>