forked from sayterdarkwynd/sayterdarkwynd.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
precursor.html
142 lines (119 loc) · 5.73 KB
/
precursor.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chris DeChamplain - Level Designer / Game Designer</title>
<meta name="description" content="Chris DeChamplain - Level Designer / Game Designer">
<meta name="author" content="Chris DeChamplain">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" href="css/colorbox.css">
<link rel="stylesheet" href="css/justifiedGallery.css">
<link rel="stylesheet" href="css/stylesmain.css">
<link rel="stylesheet" href="css/jquery.animatedheadline.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900|Poppins:200,300,300i,400,500,600,700,800,900" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="menu">
<nav class="main_navigation plain animate" style="top: 0px;">
<div class="namespace">
<p class="heading"><a href="index.html">Chris DeChamplain</a></p>
<p class="subheading">Level Designer and Game Designer</p>
</div>
<div class="linkspace">
<!--<a class="logo cta" href="index.html">
<span class="icon_logo"><img class="tinylogo" src="images/logotiny.png"/></span>
</a>-->
<ul class="nostyle">
<li class="start"><a href="index.html">PORTFOLIO</a></li>
<li><a href="cdechamplain_resume.pdf">RESUME/CV</a></li>
<li class="end"><a href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>
</div>
<section class="work">
<ul class="list">
<li class="list-itemmid2 plain">
<!--<div class="portpic_container">
<img src="images/port/fu/parallax1.jpg" class="portpic large" >
<span class="description">Custom Parallax graphics for Atropus biome</span>
</div>-->
<div class="textbox">
<p>Heavily inspired by Super Metroid, this dungeon will have the player exploring, backtracking and playing through complex and dangerous platforming elements. There are quite a few secrets, most of which require specialized gear to access. This is a mid-to-endgame level dungeon, and can be punishing to the unprepared.</p>
<div class="embed">
<iframe width="706" height="397" src="https://www.youtube.com/embed/leHEDkTeqcc" align="center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="706" height="397" src="https://www.youtube.com/embed/22E9UyzquYU" align="center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="706" height="397" src="https://www.youtube.com/embed/nU2zymyU0FQ" align="center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<a href="images/precursor/precursordungeon2.png" target="_new">Full Map (1.5mb)</a>
</div>
</li>
<li id="work" class="list-itembig topspace">
<div class="list-content">
<a name="work"></a>
<div id="basicExample" class="justified-gallery">
<a class="gallery" href="images/precursor/precursor1.png">
<img alt="The opening section sees the player within a dark cavern, winding their way to mysterious technology." src="images/precursor/precursor1_thumb.png"/>
</a>
<a class="gallery" href="images/precursor/precursor2.png">
<img alt="A metroid-like elevator ride into the bowels of the earth generates a feeling of anticipation and unease." src="images/precursor/precursor2_thumb.png"/>
</a>
<a class="gallery" href="images/precursor/precursor3.png">
<img alt="The alien ruins are complex, with numerous ways to get around, including secret passages that require unique technology found within the dungeon." src="images/precursor/precursor3_thumb.png"/>
</a>
<a class="gallery" href="images/precursor/precursor4.png">
<img alt="A huge ancient ship awaits, full of deadly android guardians intent on protecting the secrets of the past." src="images/precursor/precursor4_thumb.png"/>
</a>
<a class="gallery" href="images/precursor/precursor5.png">
<img alt="A boss battle in a large, industrial style facility ends the mission." src="images/precursor/precursor5_thumb.png"/>
</a>
</div>
</div>
</li>
</ul>
</section>
<a name="contact"></a>
<section class="contact">
<h2 class="uppercase spacing_mid">Get In Touch</h2>
<a href="cdechamplain_resume.pdf" >Resume</a>
<a href="https://www.linkedin.com/in/chris-dechamplain-bb259523/"><img class="linkedin" src="images/linkedin-512.png"/></a>
</section>
<div class="footer"></div>
</div>
<!-- jQ plugins -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$('#basicExample').justifiedGallery(
{
"rowHeight" : 300,
"margins" : 20,
"lastRow" : "nojustify",
"cssAnimation" : true,
"imagesAnimationDuration" : 240,
"captionSettings" : {
animationDuration :200,
visibleOpacity:0.9,
nonVisibleOpacity : 0
}
}
).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
</script>
</body>
</html>