-
Notifications
You must be signed in to change notification settings - Fork 11
/
precursor.html
157 lines (132 loc) · 6.56 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!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 encourage exploration, 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. I handled the following:</p>
<div class="descriptor">
<ul>
<li>• Created more than 30 new tile sprites.
<li>• Created more than 200 original pieces of artwork, including machines, armor, weapons, and monsters.
<li>• Wrote and implemented all narrative elements including tomes containing dozens of pages of lore.
<li>• Created and tested puzzle-based gameplay elements.
<li>• Handled all lighting and atmospheric elements.
<li>• Created unique loot and rewards for players to locate.
<li>• Implemented new status and particle effects exclusive to the level.
<li>• Responsible for sound design.
<li>• Iterations and improvements on existing content on an ongoing basis.
</ul>
</div>
<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>
<br/><br/><a href="images/precursor/precursordungeon2.png" target="_new">Full Map (1.5mb) [Tiled]</a><br/><br/>
</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="mailto:cdechamplain@gmail.com>cdechamplain@gmail.com" >cdechamplain@gmail.com</a>
<a href="cdechamplain_resume.pdf" >Resume</a>
<a href="mailto:sayterdarkwynd@gmail.com>cdechamplain@gmail.com" >sayterdarkwynd@gmail.com</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>