merctraider.github.io/collapsible-works.html at master · merctraider/merctraider.github.io · GitHub

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
<!DOCTYPE html>

<html>
    <head>
        <title>Games</title>
        <link rel="stylesheet" href="styles.css">

    </head>

    <body>
        <header class="main-header">
            <nav class="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="projects.html#game">Game Dev</a></li>
                    <li><a href="projects.html#web">Web Dev</a></li>
                    <li><a href="projects.html#android">Android App Dev</a></li>
                    <li><a href="projects.html#other">Other Projects</a></li>

                </ul>
            </nav>
        </header>

        <div class="project-container">
            <section class="project-section" id="game">
                <h1>Game Dev</h1>
                <h2>School Projects</h2>

                <button type="button" class="collapsible">The Ronin (2018)</button>
                <div class="project-details">
                    <img src="img/the-ronin-featured.png">
                    <div>
                        <h3>About</h3>
                        <p>You are a Cyborg Samurai who wants to take revenge on the ones who tried to kill you before: The Robot Shogunate. Slash and destroy all who stand in your way.</p>
                        <p>You might be the only one without a gun, but fear not, for your cybernetic form allows you to deflect all laser projectiles fired your way.</p>
                        <hr>
                        <p>Developed on the Unity Game Engine.</p>
                        <p>Role: Team Lead, Sound Designer, Programmer</p>
                    </div>

                    <iframe src="https://drive.google.com/file/d/1riMNrOQvjqzjHcK-XDw2CooCF19350uZ/preview" width="480" height="270"></iframe>
                    <iframe src="https://drive.google.com/file/d/19XmxUXSfPwntap8kv4sIHrHJX_jf_Gy7/preview" width="480" height="270"></iframe>
                </div>

                <button type="button" class="collapsible">Yokai Parade (2019)</button>
                <div class="project-details">
                    <iframe width="480" height="270" src="https://www.youtube.com/embed/77EWA91ZD_U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>About</h3>
                        <p>Alyse is under attack and she needs your help! </p>
                        <p>Get ready to slice and smite the parades of Yokai invading the gate to the human realm!</p>
                        <hr>
                        <p>Role: Team Lead, Sound Designer, Programmer</p>
                        <a href="https://play.google.com/store/apps/details?id=com.DGDD.YokaiParade" class="btn">Download on Google Play</a>
                    </div>
                </div>

                <button type="button" class="collapsible">Ace of Trades(2018)</button>
                <div class="project-details">
                    <iframe width="480" height="270" src="https://drive.google.com/file/d/1qN8X0tJJgHfO2VGV5Nx5noGnPFMJabcv/preview" ></iframe>
                    <div>
                        <h3>About</h3>
                        <p>Play as a leader of your own country. Protect and raise your industries’ productivity from foreign competition and be the next World Power. Do you have what it takes to lead your country against the rest of the world to achieve Financial Supremacy? </p>
                        <hr>
                        <p>Role: Gameplay/Concept</p>

                    </div>
                </div>


                <button type="button" class="collapsible">Ex-Terminator (2020)</button>
                <div class="project-details">
                    <iframe width="480" height="270" src="https://www.youtube.com/embed/As1Czobt_NQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>About</h3>
                        <p>Build your Machine Empire by expanding your territory into the darkness, while defending against waves of constant human resistance.</p>
                        <p>Decimate the enemy forces with your arsenal of turrets, fortified by sturdy walls.</p>
                        <hr>

                        <p>Role: Team Lead, Sound Designer, Programmer</p>
                        <a href="https://drive.google.com/open?id=14ToFo88XJGKwnK1Kj8uEqmyPiSvULzIU" class="btn">Download the Game</a>
                    </div>
                </div>

                <button type="button" class="collapsible" id="block-empires">Block Empires (2019)</button>
                <div class="project-details">
                    <img src="img/block-empires-featured.png">
                    <div>
                        <h3>About</h3>
                        <p>A short local multiplayer game made with Zi Bin Lee, inspired by the Flash game, Boxhead. You play as a cube and your goal is to destroy your opponent's base, while taking down their creeps and collecting ammunition for your weapons.</p>
                        <hr>
                        <p>Developed on the Unity Game Engine.</p>
                        <p>Role: Programming</p>

                    </div>
                </div>

                <h2>Personal Projects</h2>


                <button type="button" class="collapsible" id="the-cover-of-darkness">The Cover of Darkness (2019)</button>
                <div class="project-details">
                    <img src="img/cover-of-darkness-featured.jpeg">
                    <div>
                        <h3>About</h3>
                        <p>Submission for itch.io Buddy Jam 4. Joint project with <a href="https://sites.google.com/view/wolfordlee/games?authuser=0">Zi Bin Lee</a> and Geminox</p>
                        <p>Command an army of darkness to conquer the world of elemental creatures.</p>
                        <hr>
                        <p>Developed on the Unity Game Engine.</p>

                        <a href="https://merctraider.itch.io/the-cover-of-darkness" class="btn">Play the Game</a>
                    </div>
                </div>

                <button type="button" class="collapsible" id="portal-hopper">Portal Hopper (2019)</button>
                <div class="project-details">
                    <img src="img/portal-hopper-featured.png">
                    <div>
                        <h3>About</h3>
                        <p>A solo project made in a week for the "I Can't Draw But Want To Make A Game" jam on itch.io, which involves the use of the Programmer Art aesthetic. </p>
                        <p>Hop through portals to different universes in search of materials to build your space cruiser. Explore up to 5 different universes to get stuff for your space cruiser.</p>
                        <hr>
                        <p>Developed on the Unity Game Engine.</p>
                        <a href="https://merctraider.itch.io/portal-hopper" class="btn">Play the Game</a>
                    </div>
                </div>
            </section>
            <section class="project-section" id="web">
                <h1>Web Dev</h1>
                <button type="button" class="collapsible" id="stmary">St Mary's Evangelical Lutheran Church (2019)</button>
                <div class="project-details">
                    <img src="img/stmarys-featured.png">
                    <div>
                        <h3>About</h3>
                        <p>St. Mary's Evangelical Lutheran Church is a Lutheran church based in Metro Manila, Philippines. The site is designed on WordPress. </p>

                        <hr>
                        <p>Scope: Website Design and Maintenance</p>
                        <a href="http://stmarysnavotas.org/" class="btn">Visit Site</a>
                    </div>
                </div>

                <button type="button" class="collapsible">My Portfolio Site</button>
                <div class="project-details">
                    <img src="img/portfolio-ception.png">
                    <div>
                        <h3>About</h3>
                        <p>I made this site from scratch with html, javascript and css. Yes, you are viewing this site right now.</p>

                    </div>
                </div>


            </section>
            <section class="project-section" id="android">
                <h1>Android Apps</h1>
                <button type="button" class="collapsible" id="catechism-learner">Catechism Learner</button>
                <div class="project-details">
                    <img src="img/catechism-learner-featured.png">
                    <div>
                        <h3>About</h3>
                        <p>My first Android app, and a short project I did on the side over the course of 2 weeks. </p>
                        <p>This app allows you to go through each part of the catechism at your own pace, breaking down large sections into phrases you can memorise one at a time. It also helps you to retain the section you've learnt, with the Review feature. </p>
                        <hr>
                        <a href="https://play.google.com/store/apps/details?id=com.merctraider.catechismlearner" class="btn">Download on Google Play</a>
            </section>
            <section class="project-section" id="other">
                <h1>Other Projects</h1>

                <button type="button" class="collapsible" id="reformation-anime">Reformation Anime Opening (2018)</button>
                <div class="project-details">
                    <iframe width="480" height="270" src="https://www.youtube.com/embed/0jcErc7Itmc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>About</h3>
                        <p>A parody of the Neon Genesis Evangelion opening to feature the 16th Century movement known as the Protestant Reformation, with clips from the 2003 film Luther. </p>
                        <hr>
                        <p>Scope: Video Composition and editing with Adobe Premiere Pro</p>

                    </div>
                </div>
            </section>


        </div>
        <footer>© 2020 merctraider</footer>
        <script src="scripts.js"></script>
    </body>
</html>