-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
315 lines (306 loc) · 15 KB
/
index.html
File metadata and controls
315 lines (306 loc) · 15 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Jolly Joe - Game Designer and Developer">
<title>Jolly Joe's Portfolio</title>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<!-- FontAwesome Icons -->
<script src="https://kit.fontawesome.com/d4094e761b.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-lg py-2" style="backdrop-filter: blur(8px); background: rgba(24,28,36,0.92); border-bottom: 2px solid #3fd0ff;">
<div class="container">
<a class="navbar-brand fw-bold d-flex align-items-center gap-2" href="#" style="font-size:1.5rem; letter-spacing:0.04em; color:#3fd0ff;">
<i class="fa-solid fa-terminal"></i> Jolly Joe
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav gap-1">
<li class="nav-item">
<a class="nav-link px-4" href="#about"><i class="fa-solid fa-address-card"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link px-4" href="#demo-games"><i class="fa-brands fa-unity"></i> Two Week Games</a>
</li>
<li class="nav-item">
<a class="nav-link px-4" href="#projects"><i class="fa-brands fa-python"></i> Python Programs</a>
</li>
<li class="nav-item">
<a class="nav-link px-4" href="#xiii"><i class="fa-solid fa-file-code"></i> XIII Wiki</a>
</li>
<li class="nav-item">
<a class="nav-link px-4" style="color: #3fd0ff; font-weight:600;" href="/drawboard.html">
<i class="fa-solid fa-chalkboard-user"></i> Drawing Board
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<ma class="container mt-5 pt-5">
<!-- About Section -->
<section id="about" class="my-5" tabindex="-1">
<h2 class="text-center mb-4"><i class="fa-solid fa-address-card"></i> About Me</h2>
<div id="bio">
<p class="lead text-center">
Hello and welcome! I'm Jolly Joe—a passionate game designer, developer, and certified Python programmer. I love crafting immersive experiences and unique game tools.
</p>
<p class="lead text-center">
After completing Harvard's CS50 Python course, I've been expanding my skills in HTML5, CSS, and JavaScript. I believe the best solutions are the ones you create for tomorrow's challenges.
</p>
</div>
</section>
<!-- Games Section -->
<section id="demo-games" class="my-5" tabindex="-1">
<h2 class="text-center mb-4 border rounded" style="max-width:400px;margin:auto;">
<i class="fa-brands fa-unity"></i> Two Week Games
</h2>
<p class="text-center">
Every game below was built from scratch—art, code, and design—in just two weeks as part of various game jams.
</p>
<div class="d-flex justify-content-center flex-wrap gap-3">
<iframe title="Sky's the Limit" src="https://itch.io/embed/2177013?bg_color=1a4e6e&fg_color=d6dcd6&link_color=5a0505&border_color=3da73f" width="300" height="150" frameborder="0"></iframe>
<iframe title="Sweet Pea & Robyte's Hunger" src="https://itch.io/embed/805734?bg_color=88b06a&fg_color=222222&link_color=5a0505&border_color=dd6868" width="300" height="150" frameborder="0"></iframe>
<iframe title="Tooth Break Demo" src="https://itch.io/embed/754327?bg_color=8d9a10&fg_color=000000&link_color=5a0505&border_color=dd5e65" width="300" height="150" frameborder="0"></iframe>
</div>
</section>
<hr>
<!-- ModDB & Python Programs Sections -->
<section id="projects" class="row my-5 g-4" tabindex="-1">
<!-- ModDB Tools -->
<div class="col-lg-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h3 class="card-title text-success mb-3">ModDB Toolkits</h3>
<h5 class="mb-2 text-primary">Carnivores 2 Toolkit</h5>
<ul>
<li><strong>OBJ_VN_FIXXER</strong>: Enhance OBJ files with better lighting and shading.</li>
<li><strong>MTL File Generator</strong>: Quickly create material files for OBJ models.</li>
<li><strong>TGA to PNG Converter</strong>: Batch convert TGA images to PNG.</li>
</ul>
<a href="https://www.moddb.com/games/carnivores-2/downloads/jolly-carnivores-2-toolkit" class="btn btn-outline-primary mb-3">View Toolkit</a>
<hr>
<h5 class="mb-2 text-danger">Thief: The Dark Project Toolkit</h5>
<ul>
<li><strong>Jolly Thief Mesh Parser v7</strong>: Convert Thief object files to OBJ for 3D rendering.</li>
<li><strong>Jolly Thief MTL Maker v7</strong>: Generate MTL files from Thief material lists.</li>
</ul>
<a href="https://www.moddb.com/games/thief-the-dark-project/downloads/jolly-thief-toolkit-v1" class="btn btn-outline-primary mb-3">View Toolkit</a>
<hr>
<h5 class="text-secondary text-success">ModDB Blog</h5>
<p>
Certified Python developer, game tool creator, and enthusiast for extracting assets from classic games like Carnivores 2 and Thief: The Dark Project.
</p>
<a href="https://www.moddb.com/members/jolly-joe/blogs" class="btn btn-outline-primary">Visit My DevLog</a>
</div>
</div>
</div>
<!-- Python Programs -->
<div class="col-lg-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h3 class="card-title text-warning mb-3"><i class="fa-brands fa-python"></i> Python Programs</h3>
<hr>
<div class="mb-4">
<h6 style="color:rgb(85, 218, 174)">COMING SOON!</h6>
<h5>Xbox Game Texture Extractor</h5>
<p>Tony Hawk Pro Skater 4, Conker: Live and Reloaded, Toejam and Earl III and more.</p>
<a href="#" class="btn btn-primary">*View Project*</a>
</div>
<hr>
<div class="mb-4">
<h6 style="color:rgb(85, 218, 174)">COMING SOON!</h6>
<h5>Tony Hawk Pro Skater 4 (Xbox)</h5>
<h5>Blender Addon</h5>
<p>Model extractor for .skin.xbx and .mdl.xbx files.</p>
<a href="#" class="btn btn-primary">*View Project*</a>
</div>
<hr>
<div class="mb-4">
<h5>CSV Blender Importer</h5>
<p>Blender addon to import CSV files (from RenderDoc) as 3D meshes.</p>
<a href="https://github.com/JollyShmo/CSV_Import_Blender" class="btn btn-primary">View Project</a>
</div>
<hr>
<div class="mb-4">
<h5>CSV Peek</h5>
<p>Visualize CSV data as 3D objects; export to .obj, .ply, and .stl formats.</p>
<a href="https://github.com/JollyShmo/CSV_Peek" class="btn btn-primary">View Project</a>
</div>
<hr>
<div>
<h5>Controller-Debugger</h5>
<p>Monitor and visualize controller axis ranges and button presses in real time.</p>
<a href="https://github.com/JollyShmo/Controller-Debugger" class="btn btn-primary">View Project</a>
</div>
</div>
</div>
</div>
</section>
<!-- XIII Wiki and Cheat Codes -->
<section id="xiii" class="my-5 text-center" tabindex="-1">
<div class="card mx-auto" style="max-width:480px;">
<div class="card-body">
<h3 class="card-title mb-3">XIII (Classic) Cheat Codes</h3>
<p>
I contributed to a comprehensive database of cheat codes for <strong>XIII (Classic)</strong>—compiling, testing, and organizing codes to help players get the most from the game. I also actively help improve the XIII Wiki.
</p>
<div class=" card">
<a href="https://xiii-jolly-cheat-codes.notion.site/XIII-Classic-Jolly-Joe-Cheat-Codes-14a98676227c800ab7b0d4752025a208?pvs=4" target="_blank" class="btn btn-primary mb-2">Jolly Joe Cheat Codes</a>
<a href="https://xiii.fandom.com/wiki/XIII_Wiki" target="_blank" class="btn btn-primary">XIII Wiki</a>
</div>
</div>
</div>
</section>
<!-- Support Button -->
<div class="text-center my-4">
<a href="https://www.buymeacoffee.com/JollyJoe" target="_blank">
<button class="btn-coffee-support" aria-label="Support me on Buy Me a Coffee">🧇 Buy Me A Waffle</button>
</a>
</div>
</main>
<!-- Custom Styles -->
<style>
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}
.card {
background-color: #23272f;
color: #e6e6e6;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
font-size: 1.05rem;
line-height: 1.6;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(24,28,36,0.18);
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 20px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.btn-coffee-support {
background-color: #ff813f;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
text-transform: uppercase;
transition: background-color 0.3s;
}
.btn-coffee-support:hover {
background-color: #ff6021;
}
@media (max-width: 768px) {
.card-container, .d-flex {
flex-direction: column !important;
align-items: center;
}
.card {
width: 95% !important;
}
}
.navbar {
box-shadow: 0 4px 24px rgba(63,208,255,0.08), 0 2px 12px rgba(24,28,36,0.18);
border-bottom: 2px solid #3fd0ff;
background: rgba(24,28,36,0.92) !important;
backdrop-filter: blur(8px);
}
.navbar-brand {
color: #3fd0ff !important;
font-weight: 700;
letter-spacing: 0.04em;
font-size: 1.5rem;
text-shadow: 0 2px 8px #1e90ff22;
}
.navbar-nav .nav-link {
border-radius: 16px 16px 0 0;
margin-right: 2px;
color: #e6e6e6 !important;
font-weight: 500;
font-size: 1.08rem;
padding-top: 10px;
padding-bottom: 10px;
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
position: relative;
z-index: 1;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:focus {
background: linear-gradient(90deg, #23272f 80%, #3fd0ff22 100%);
color: #3fd0ff !important;
border-radius: 16px 16px 0 0;
font-weight: 700;
box-shadow: 0 4px 24px #3fd0ff22;
border-bottom: 3px solid #3fd0ff;
z-index: 2;
}
.navbar-nav .nav-link:hover {
color: #3fd0ff !important;
background: #23272f;
box-shadow: 0 2px 8px #3fd0ff22;
}
@media (max-width: 991px) {
.navbar-nav .nav-link {
border-radius: 10px;
margin-bottom: 4px;
padding-left: 18px;
padding-right: 18px;
}
.navbar-nav .nav-link.active {
border-radius: 10px;
border-bottom: 2px solid #3fd0ff;
}
}
</style>
<!-- Footer -->
<footer class="bg-dark text-light text-center py-3">
<p>© 2024-2025 Jolly Joe — Website Designer & Developer</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Smooth scroll with offset for anchor links
function scrollWithOffset(event) {
const href = this.getAttribute('href');
if (href && href.startsWith('#')) {
const target = document.querySelector(href);
if (target) {
event.preventDefault();
const yOffset = -90; // buffer for fixed navbar
const y = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({ top: y, behavior: 'smooth' });
history.replaceState(null, '', href);
}
}
}
document.addEventListener('DOMContentLoaded', function () {
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbarNav',
offset: 90
});
document.querySelectorAll('.navbar-nav .nav-link[href^="#"]').forEach(function(link) {
link.addEventListener('click', scrollWithOffset);
});
});
</script>
</body>
</html>