-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
348 lines (346 loc) · 17.5 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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quan Tran - Game Developer Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header-content">
<h1>Quan Tran</h1>
<p>Game Developer</p>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="about" class="section">
<h2>About Me</h2>
<div class="about-content">
<img src="images/profile.jpg" alt="Quan Tran" class="profile-image">
<p>Hello! I'm Quan Tran, a passionate Game Developer with a Bachelor's degree in Computer Science from Ho Chi Minh University of Technology. Over the past three years, I've honed my skills at VNG Corporation, where I specialized in creating engaging and interactive game experiences using JavaScript.</p>
<p>At VNG, I was responsible for designing and implementing user interfaces, optimizing game performance, and collaborating with cross-functional teams to integrate complex features seamlessly. This experience has given me a robust foundation in game client development.</p>
<p>I thrive on solving challenging problems and continuously seek opportunities to learn and grow. My passion for game development drives me to stay updated with the latest industry trends and constantly improve my skills.</p>
<p>Thank you for visiting my portfolio. Feel free to explore my projects and get in touch if you'd like to discuss potential collaborations or opportunities.</p>
</div>
</section>
<section id="projects" class="section">
<h2>Projects</h2>
<div class="project-container">
<div class="project" onclick="openPopup('okey')">
<img src="images/okey.jpg" alt="101 Okey ZingPlay">
<h3>101 Okey ZingPlay</h3>
<div class="overlay">
<p><strong>Okey ZingPlay</strong> is a mobile game based on the traditional tabletop game Okey, popular in Mediterranean and Middle Eastern regions. The game supports multiplayer online play, allowing players to connect and compete with friends or other players from around the world.</p>
</div>
</div>
<div class="project" onclick="openPopup('crazy8')">
<img src="images/crazy8.jpg" alt="Crazy 8 - Mau Mau ZingPlay">
<h3>Crazy 8 - Mau Mau ZingPlay</h3>
<div class="overlay">
<p><strong>Crazy8 - Mau Mau ZingPlay</strong> is a mobile card game based on the traditional Mau Mau (also known as Crazy Eights in some regions). The game supports 2 to 4 players, and the objective is to be the first to get rid of all your cards by following specific rules.</p>
</div>
</div>
<div class="project" onclick="openPopup('dummy')">
<img src="images/dummy.jpg" alt="Dummy ZingPlay: Anime Clash">
<h3>Dummy ZingPlay: Anime Clash</h3>
<div class="overlay">
<p><strong>Dummy ZingPlay: Anime Clash</strong> is a mobile online strategic card game, blending card game elements with the Anime universe to deliver an immersive gaming experience.</p>
</div>
</div>
<div class="project" onclick="openPopup('caro')">
<img src="images/caro.jpg" alt="Caro Game">
<h3>Caro Game</h3>
<div class="overlay">
<p><strong>Caro Game</strong> is a simple X and O game, developed as a learning project to familiarize myself with the Cocos Creator engine. The game features basic gameplay mechanics for a two-player experience.</p>
</div>
</div>
<!-- Popup Modal -->
<div id="okey" class="popup">
<div class="popup-content">
<span class="close" onclick="closePopup('okey')">×</span>
<h2>Okey ZingPlay</h2>
<img src="images/okey.jpg" alt="101 Okey ZingPlay">
<p>
Okey ZingPlay is a mobile game based on the traditional tabletop game Okey, popular in Mediterranean and Middle Eastern regions. The game supports multiplayer online play, allowing players to connect and compete with friends or other players from around the world.
This game is developed by ZingPlay Game Studios.
</p>
<p>
<strong>Role and Responsibilities:</strong>
<br>
<ul>
<li>
Lead Client-Side Developer
</li>
<li>
Designed and developed the user interface (UI/UX)
</li>
<li>
Implemented main game logic and other features like mini games, events,...
</li>
<li>
Designed and implemented game effects, animations for a better gaming experience
</li>
<li>
Optimized game performance for various devices
</li>
</ul>
<br>
<strong>Technologies and Tools:</strong>
<br>
<ul>
<li>
<strong>Languages:</strong> JavaScript
</li>
<li>
<strong>Engine:</strong> Cocos2d-js
</li>
<li>
<strong>Tools:</strong> CocosStudio, Xcode, Git, SourceTree, IntelliJ IDEA
</li>
</ul>
</p>
<p>
<div class="project-links">
<strong>Links:</strong>
<div class="project-link">
<a href="https://play.google.com/store/apps/details?id=zps.game.okey&hl=vi&gl=US">
<img src="icons/google_play.png" alt="Android">
</a>
</div>
<div class="project-link">
<a href="https://apps.apple.com/us/app/okey-zingplay/id1630311171">
<img src="icons/app_store.png" alt="iOS">
</a>
</div>
</div>
</p>
</div>
</div>
<div id="crazy8" class="popup">
<div class="popup-content">
<span class="close" onclick="closePopup('crazy8')">×</span>
<h2>Crazy 8 - Mau Mau ZingPlay</h2>
<img src="images/crazy8.jpg" alt="Crazy 8 - Mau Mau ZingPlay">
<p>
Crazy8 - Mau Mau ZingPlay is a mobile card game based on the traditional Mau Mau (also known as Crazy Eights in some regions). The game supports 2 to 4 players, and the objective is to be the first to get rid of all your cards by following specific rules.
This game is developed by ZingPlay Game Studios.
</p>
<p>
<strong>Role and Responsibilities:</strong>
<br>
<ul>
<li>
Lead Client-Side Developer
</li>
<li>
Designed and developed the user interface (UI/UX)
</li>
<li>
Implemented main game logic and other features like mini games, events,...
</li>
<li>
Designed and implemented game effects, animations for a better gaming experience
</li>
<li>
Optimized game performance for various devices
</li>
</ul>
<br>
<strong>Technologies and Tools:</strong>
<br>
<ul>
<li>
<strong>Languages:</strong> JavaScript
</li>
<li>
<strong>Engine:</strong> Cocos2d-js
</li>
<li>
<strong>Tools:</strong> CocosStudio, Git, SourceTree, IntelliJ IDEA
</li>
</ul>
</p>
<p>
<div class="project-links">
<strong>Links:</strong> The game is no longer available
</div>
</p>
</div>
</div>
<div id="dummy" class="popup">
<div class="popup-content">
<span class="close" onclick="closePopup('dummy')">×</span>
<h2>Dummy ZingPlay: Anime Clash</h2>
<img src="images/dummy.jpg" alt="Dummy ZingPlay: Anime Clash">
<p>
Dummy ZingPlay: Anime Clash is a mobile online strategic card game developed by ZingPlay Game Studios, blending card game elements with the Anime universe to deliver an immersive gaming experience.
</p>
<p>
<strong>Role and Responsibilities:</strong>
<br>
<ul>
<li>
Client-Side Developer
</li>
<li>
Contributed to the development of user interface (UI/UX) elements
</li>
<li>
Implemented some client-side features logic and functionalities like mini games, events,...
</li>
<li>
Assisted in design and implement game effects, animations for a better gaming experience
</li>
<li>
Collaborated with the team to optimize game performance across various mobile devices
</li>
</ul>
<br>
<strong>Technologies and Tools:</strong>
<br>
<ul>
<li>
<strong>Languages:</strong> JavaScript
</li>
<li>
<strong>Engine:</strong> Cocos2d-js
</li>
<li>
<strong>Tools:</strong> CocosStudio, Git, SourceTree, IntelliJ IDEA
</li>
</ul>
</p>
<p>
<div class="project-links">
<strong>Links:</strong>
<div class="project-link">
<a href="https://play.google.com/store/apps/details?id=com.zps.dummy2.th&hl=vi&gl=US">
<img src="icons/google_play.png" alt="Android">
</a>
</div>
</div>
</p>
</div>
</div>
<div id="caro" class="popup">
<div class="popup-content">
<span class="close" onclick="closePopup('caro')">×</span>
<h2>Caro Game</h2>
<p>
Caro (X and O) Game is a learning project to familiarize myself with Cocos Creator. The game features basic gameplay mechanics for a two-player experience.
</p>
<p>
<strong>Let's play:</strong>
<iframe src="https://caro-game-quantm.vercel.app/index.html" width="800" height="600" frameborder="0" allowfullscreen></iframe>
</p>
<p>
<strong>Key Features:</strong>
<br>
<ul>
<li>
<strong>Interface:</strong> Designed and implemented a clean and intuitive UI for a seamless player experience.
</li>
<li>
<strong>Game Logic:</strong> Developed the core gameplay mechanics, including win/lose conditions and turn-based play.
</li>
<li>
<strong>Cocos Creator:</strong> Utilized Cocos Creator for game development, gaining hands-on experience with this powerful engine.
</li>
</ul>
<br>
<strong>Technologies and Tools:</strong>
<br>
<ul>
<li>
<strong>Languages:</strong> TypeScript
</li>
<li>
<strong>Engine:</strong> Cocos Creator 3.8.2
</li>
<li>
<strong>Tools:</strong> Visual Studio Code, Git
</li>
</ul>
</p>
<p>
<div class="project-links">
<strong>Links:</strong>
<div class="project-link">
<a href="https://caro-game-quantm.vercel.app">
caro-game-quantm.vercel.app
</a>
</div>
</div>
<div class="project-links">
<strong>Github:</strong>
<div class="project-link">
<a href="https://github.com/quantm0201/caro-game">
github.com/quantm0201/caro-game
</a>
</div>
</div>
</p>
</div>
</div>
</div>
</section>
<section id="skills" class="section">
<h2>Skills</h2>
<div class="skills-container">
<ul>
<li>
<img src="icons/cocos.png" alt="Cocos">
<span class="icon-description"></span>
</li>
<li>
<img src="icons/js.png" alt="JavaScript">
<span class="icon-description"></span>
</li>
<li>
<img src="icons/c_plus_plus.png" alt="C++">
<span class="icon-description"></span>
</li>
<li>
<img src="icons/python.png" alt="Python">
<span class="icon-description"></span>
</li>
</ul>
</div>
</section>
<section id="contact" class="section">
<h2>Contact</h2>
<div class="contact-info">
<div class="contact-item">
<img src="icons/gmail.png" alt="Email">
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="contact-item">
<img src="icons/phone.png" alt="Phone">
<a href="tel:0764282235">076-428-2235</a>
</div>
<div class="contact-item">
<img src="icons/linkedin.png" alt="LinkedIn">
<a href="https://www.linkedin.com/in/quantm0201">linkedin.com/in/quantm0201</a>
</div>
<div class="contact-item">
<img src="icons/github.png" alt="GitHub">
<a href="https://github.com/quantm0201">github.com/quantm0201</a>
</div>
</div>
</section>
<footer>
<p>© 2024 Quan Tran.</p>
</footer>
<button id="scrollToTopBtn">Top</button>
<script src="js/scripts.js"></script>
</body>
</html>