-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
626 lines (587 loc) · 24.3 KB
/
index.html
File metadata and controls
626 lines (587 loc) · 24.3 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
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
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Sophie's Portfolio</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.png">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link rel="stylesheet" href="css/swiper.min.css">
<link href="css/style.css" rel="stylesheet">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,700"
rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="hero" id="everything">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6 col-xs-12">
<nav>
<div id="menu-toggle">
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<div class="cross">
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<ul class="main-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#study">Projects</a></li>
<li><a href="#base">Contact</a></li>
</ul>
</nav>
<!-- <a href="#" class="menu"><img src="assets/menu.png"></a> -->
<div class="hero-text" id="home">
<h1><span>Hi, I am</span><br>iSophes.</h1>
<h3>A Software Engineer from the UK</h3>
<a href="#about" class="btn btn-lg btn-primary">Know More</a>
<ul class="social-links">
<li class="label">Join me here</li>
<li><a href="https://bsky.app/profile/isophes.com"><img src="assets/bluesky.svg"></a></li>
<li><a href="https://github.com/isophes"><img src="assets/github.svg"></a></li>
<li><a href="https://twitch.tv/isophes"><img src="assets/logo-twitch.svg"></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section class="case-study" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="heading purple"><span class="purple">Who am I?</span></h1>
<br>
<p>I'm a Software Engineer from the UK, with over half a decade's experience in developing tooling and games
for the Roblox platform!</p>
<br />
<p>I have been a member of the Roblox Platform since January 2017, where I started developing games on the
platform in December of the same year</p>
<br>
<p>I believe I have a vocation for game development and aspire for it to be a full-time career, with computers
taking up a good portion of my childhood.</p>
<br>
<p>I've mostly worked as a solo programmer on my projects, however I have worked in teams previously and am
open to working in teams.</p>
<br>
I understand the industry standards, so you can get your projects delivered at the
<purple-underlined-p>absolute best quality.</purple-underlined-p>
</div>
</div>
</div>
</section>
<section class="case-study" id="study">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="sub-heading">I have worked with some</h4>
<h1 class="heading purple"><span class="purple">BIG</span> developers and on some <br><span
class="pink">COOL</span> projects!</h1>
<!-- Swiper -->
<div class="swiper-container client-swiper swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide client-box swiper-slide-active" style="width: 286px; margin-right: 60px;"
data-popup="box1">
<img src="assets/Meknor.jpg" class="client-logo">
<h3 class="text-left title">Back-end Programmer</h3>
<p class="text-left tag">Island Tycoon: Feb 2023</p>
<p class="know-more" data-popup="box1"><a href="#island-tycoon">Click here for more info</a></p>
</div>
<div class="swiper-slide client-box swiper-slide-next" style="width: 286px; margin-right: 60px;"
data-popup="box2">
<img src="assets/playverse.svg" class="client-logo">
<h3 class="text-left title">Software Engineer</h3>
<p class="text-left tag">Playverse Studios: June 2024 - Current</p>
<p class="know-more" data-popup="box2"><a href="#playverse-box">Click here for more info</a></p>
</div>
<div class="swiper-slide client-box" style="width: 286px; margin-right: 60px;" data-popup="box3">
<img src="assets/isophes_PROFILE.png" class="client-logo">
<h3 class="text-left title">iSophes.com</h3>
<p class="text-left tag">December 2024</p>
<p class="know-more" data-popup="box3"><a href="#website-box">Click here for more info</a></p>
</div>
<div class="swiper-slide client-box" style="width: 286px; margin-right: 60px;" data-popup="box4">
<img src="assets/SPE.webp" class="client-logo">
<h3 class="text-left title">Strongest Punch Ever</h3>
<p class="text-left tag">June 2025</p>
<p class="know-more" data-popup="box4"><a href="#website-box">Click here for more info</a></p>
</div>
<div class="swiper-slide client-box" style="width: 286px; margin-right: 60px;" data-popup="box5">
<img src="assets/brainrotwars.webp" class="client-logo">
<h3 class="text-left title">Brainrot Wars</h3>
<p class="text-left tag">August 2025</p>
<p class="know-more" data-popup="box5"><a href="#website-box">Click here for more info</a></p>
</div>
<div class="swiper-slide client-box" style="width: 286px; margin-right: 60px;" data-popup="box6">
<img src="assets/bubbles_gradient.png" class="client-logo">
<h3 class="text-left title">Team Hydrogen</h3>
<p class="text-left tag">June 2025 - Current</p>
<p class="know-more" data-popup="box6"><a href="#website-box">Click here for more info</a></p>
</div>
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-disabled"></div>
<div class="swiper-button-prev swiper-button-disabled"></div>
</div>
</div>
</div>
</section>
<!-- popup boxes -->
<div class="popup" id="island-gallery">
<div class="gallery-popup-box">
<h1>Island Tycoon Gallery</h1>
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<div class="gallery-section" id="Island-Tycoon-Gallery">
<div class="image-gallery">
<img id="Island-Tycoon-Gallery-image" src="assets/gallery/island-tycoon/Fishing.png" alt="">
</div>
<br>
<p class="gallery-white" id="Island-Tycoon-Gallery-text">An Image of Sophie Fishing in Island Tycoon</p>
<button class="gallery-button-prev" onclick="moveImage('Island-Tycoon-Gallery', 'prev')"></button>
<button class="gallery-button-next" onclick="moveImage('Island-Tycoon-Gallery', 'next')"></button>
</div>
</div>
</div>
<div class="popup" id="playverse-gallery">
<div class="gallery-popup-box">
<h1>Playverse Gallery</h1>
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<div class="gallery-section" id="Playverse-Gallery">
<div class="image-gallery">
<img id="Playverse-Gallery-image" src="" alt="">
</div>
<br>
<p class="gallery-white" id="Playverse-Gallery-text"></p>
<button class="gallery-button-prev" onclick="moveImage('Playverse-Gallery', 'prev')"></button>
<button class="gallery-button-next" onclick="moveImage('Playverse-Gallery', 'next')"></button>
</div>
</div>
</div>
<div class="popup" id="box1">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>Island Tycoon</h1>
<h5 class="heading-purple">Feb 2023 - Feb 2023</h5>
<p>
This game was a project with <a href="https://www.twitch.tv/Meknor">Meknor</a> and another developer named Barj.
<br>
<br>
Unfortunately, the game was discontinued due to Meknor's burnout and <br>
I was removed from the dev team due to my age at the time, which was only <br>
discussed after I had done some work.
<br>
<br>
</p><a href="#island-gallery" class="know-more" data-popup="island-gallery">Click here for the gallery</a>
<p></p>
</div>
</div>
<div class="popup" id="box2">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>Playverse Studio</h1>
<h5 class="heading-purple">June 2024 - Current</h5>
<p>Playverse Studio is a Roblox game studio with over 1 BILLION total visits.</p>
<p>I have worked on many projects, however none have been released yet due to unforseen circumstances.</p>
<p>My largest project was one named "Presidents!", a rap-battle styled game which involved two candidates arguing
for who would be the best president.</p>
<p>Unfortunately, we planned this project around the launch of the Presidential Election in the US, and we missed
our deadline - we also had problems with some of the features not working how we really wanted. This caused us
to scrap the game and move on.</p>
<p>The Gallery below will show some screenshots and code snippets from "Presidents"</p>
<a href="#playverse-gallery" class="know-more" data-popup="playverse-gallery">Click here for the gallery</a>
</div>
</div>
<div class="popup" id="box3">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>iSophes.com</h1>
<h5 class="heading-purple">December 2024</h5>
<p>
This website was made by me to replace my old website. I'm by no means a web developer however I do want to put
this here
to show what I made myself.
<br>
<br>
This site was originally from a template by Akash Bhadange, which I have modified a hell of a lot to get the
current results.
<br>
<br>
</p>
<h3>What I made myself: </h3>
<br>
I made the popup boxes which appear when you press "know more"
<br>
(The box you are reading this in now!)
<br>
I also made the entire gallery myself, which took a lot of trial and error but I had fun!
<br>
<br>
There is no gallery, as you are on the site right now. The code is also
<a href="https://github.com/isophes/new-site">open source on github.</a>
<p></p>
</div>
</div>
<div class="popup" id="box4">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>Strongest Punch Ever</h1>
<h5 class="heading-purple">June 2025</h5>
<p>Strongest Punch Ever is a small project that I worked on in collaboration with Morl Studios. It is a
simple game about punching and lifting weights to get more money and rebirthing. </p>
<br />
<p>I learnt a lot from this game, such as balancing economys and updating a game under deadlines. We have a 96%
L/D Ratio with a Max CCU of approximately 300, nearly 50,000 favourites and over 450,000 visits! Below you can
find a link to the game: </p>
<br />
<a href="https://www.roblox.com/games/103057683650197/Strongest-Punch-Ever">The game's link</a>
</div>
</div>
<div class="popup" id="box5">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>Brainrot Wars</h1>
<h5 class="heading-purple">August 2025</h5>
<br />
<p>Brainrot Wars is a small game that I contributed an update towards in August. </p>
<br />
<p>Unfortunately, our ideas were
clashing and we decided to part ways with the project. I however did get an update released, which added bosses
to the game. You can find the game's link below: </p>
<br />
<a href="https://www.roblox.com/games/119840395191021/Brainrot-Wars-BETA">The game's link</a>
</div>
</div>
<div class="popup" id="box6">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>Team Hydrogen</h1>
<h5 class="heading-purple">June 2025 - Current</h5>
<p>Team Hydrogem is my own development studio.</p>
<br />
<p>Team Hydrogen is currently specialising in open source software, developing frameworks such as: </p>
<a href="https://github.com/teamhydrogen/hydrogen">- Hydrogen</a>
<br />
<br />
<p>and other unreleased things. Our website can be found
<a href="https://teamhydrogen.isophes.com">here</a>
where it was made using NextJS, Tailwind and Framer Motion. The idea about this was so that I could learn web development without the pain of raw HTML and CSS.
</p>
<br />
<p>We also follow the principle of quality over quantity, where we would rather make one high-quality game than
many low effort brainrot games. Ethics and morals are important and shouldn't be overlooked in a business.
That's how things go wrong.</p>
<br />
<a href="https://github.com/teamhydrogen">Find our github here.</a>
</div>
</div>
<!-- Statistics -->
<section class="stats" id="stats">
<div class="container">
<div class="row">
<div class="col-md-4 text-center stat-box">
<h1 class="purple"><span class="counter-purple">4000</span>+</h1>
<h3>Hours Programming</h3>
</div>
<div class="col-md-4 text-center stat-box">
<h1 class="blue"><span class="counter-blue">30</span>+</h1>
<h3>Projects</h3>
</div>
<div class="col-md-4 text-center stat-box">
<h1 class="pink"><span class="counter-pink">400</span>K+*</h1>
<h3>Cans of Monster</h3>
</div>
<p>* Okay, maybe a bit less. But I do love monster.</p>
</div>
</div>
</section>
<!-- Contact Banner -->
<section class="contact-banner" id="base">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Let's chat!</h1>
<a href="https://discord.com/users/403962378200547328" class="btn btn-lg btn-primary">Get in touch on
discord!</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="popup" id="privacy">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>Privacy Policy</h1>
<h5>December 29 2024.</h5>
<p>
iSophes ("we," "our," or "us") is committed to protecting your privacy. This Privacy Policy explains our
practices regarding information collection, use, and safeguarding when you use our services, including [specific
platforms, games, or websites, if applicable].
<br>
<br>
By accessing or using our services, you agree to the terms of this Privacy Policy. If you do not agree, please
do not use our services.
<br>
<br>
1. Information We Collect
<br>
<br>
We do not directly collect personal information from users. However, third-party services integrated into our
platform may collect data to operate and enhance their functionality. Please review the privacy policies of any
third-party services you interact with through our platform.
<br>
<br>
2. How We Use Your Information
<br>
<br>
As we do not collect personal information directly, we do not use such data for our operations. Any data
collected by third-party services is subject to their privacy policies and practices. We recommend reviewing
these policies to understand how your information may be used.
<br>
<br>
3. Sharing Your Information
<br>
<br>
We do not sell or share your personal information. Third-party services integrated into our platform may collect
and process data independently. For information on how these services handle your data, refer to their privacy
policies.
<br>
<br>
4. Your Rights
<br>
<br>
Depending on your location, you may have rights regarding your data, including:
<br>
<br>
Accessing or correcting your data
<br>
Deleting your information
<br>
Opting out of data processing activities
<br>
Lodging a complaint with a data protection authority
<br>
For questions about third-party data practices, contact the respective third-party service provider.
<br>
<br>
5. Data Security
<br>
<br>
We prioritize your security but do not directly manage or process user data. Third-party services used on our
platform implement their own security measures. Please refer to their privacy policies for detailed information.
<br>
<br>
6. Third-Party Services
<br>
<br>
Our services may include links or integrations with third-party platforms. These third parties may collect,
store, and process data in accordance with their policies. We encourage users to review the privacy practices of
these services before engaging with them.
<br>
<br>
7. Children's Privacy
<br>
<br>
Our services are not intended for children under the age of 13 (or the minimum age required in your
jurisdiction). We do not knowingly collect personal information from children. Third-party services integrated
into our platform may have their own policies regarding children's data.
<br>
<br>
8. Changes to This Privacy Policy
<br>
<br>
We may update this Privacy Policy from time to time. The updated version will be effective as of the "Effective
Date" stated above. Please review this Privacy Policy periodically.
<br>
<br>
9. Contact Us
<br>
<br>
If you have questions or concerns about this Privacy Policy, please contact us at:
<br>
privacy@isophes.com
<br>
<br>
By using our services, you acknowledge that you have read and understood this Privacy Policy.
</p>
</div>
</div>
<div class="popup" id="changelogs">
<div class="popup-box">
<img src="assets/x.svg" alt="Close" class="popup-box-close">
<h1>Changelog</h1>
<br />
<H3>v2.1.1</H3>
<br />
<li>Updated Team Hydrogen's website link</li>
<li>Updated Team Hydrogen description</li>
<br />
<H3>v2.1.0</H3>
<br />
<li>Updated to include current work, such as Team Hydrogen</li>
<li>Changed the "Cups of Coffee" counter to be monster cans instead </li>
<p>Fun fact: I love Monster Energy. Mango Loco
is my favourite monster, however Monarch and Ultra are really good too!</p>
<br />
<li>Updated contact information to direct to my discord profile and changed some text to the box</li>
<li>Updated privacy policy</li>
<h3>v2.0.0</h3>
<br />
<li>Version Bump - Now pushed to main site as version 2!</li>
<li>Added some stuff to Playverse! Part of site</li>
<li>Changed gallery next and before to use SVGs</li>
<li>Added copyright notice</li>
<br />
<h3>BETA v1.5.2</h3>
<br />
<li>Added new background</li>
<li>Added custom highlight colours for different parts of page</li>
<br />
<h3>BETA v1.5.1</h3>
<br />
<li>Added a fade to background when site loads</li>
<br />
<h3>BETA v1.5.0</h3>
<br>
<p>
</p>
<li>Added animations when site is loaded</li>
<li>Added section on this site</li>
<li>Added changelogs</li>
<li>Added new background</li>
<li>Added twitch link</li>
<li>Minor tweaks</li>
<p></p>
<br>
<h3>BETA v1.4.0</h3>
<br>
<p>
</p>
<li>Added new gallery (that works!)</li>
<li>Added test image for "Playverse" section.</li>
<li>Removed unneccessary CSS for old gallery</li>
<p></p>
<br>
<h3>BETA v1.3.0</h3>
<br>
<p>
</p>
<li>Added Privacy Policy</li>
<li>Made infoboxes automatically have a scroll bar if content is too large</li>
<li></li>
<p></p>
<h3>BETA v1.2.0</h3>
<br>
<p>
</p>
<li>Added Gallery</li>
<li>Made infoboxes automatically have a scroll bar if content is too large</li>
<p></p>
<h3>BETA v1.1.0</h3>
<br>
<p>
</p>
<li>Added Infoboxes</li>
<li>Added "Who am I?"</li>
<li>Added "I have worked on..." text</li>
<li>Added Hover animation to project boxes</li>
<p></p>
<h3>BETA v1.0.0</h3>
<br>
<p>
</p>
<li>Project Initialisation</li>
<li>Removed stuff from template I didn't need</li>
<p></p>
</div>
</div>
<footer>
<div class="container-fluid" id="footer">
<div class="row footer">
<div class="col-md-12 text-center">
<h1>iSophes</h1>
<br>
<ul class="social-links">
<li><a href="https://bsky.app/profile/isophes.com"><img src="assets/bluesky.svg"></a></li>
<li><a href="https://github.com/isophes"><img src="assets/github.svg"></a></li>
<li><a href="https://twitch.tv/isophes"><img src="assets/logo-twitch.svg"></a></li>
</ul>
<br>
<p class="white">v2.1.1 | <a href="#privacy" class="know-more" data-popup="privacy">Privacy Policy</a> | <a
href="#changelogs" class="know-more" data-popup="changelogs">Changelogs</a> | Copyright 2025</p>
</div>
</div>
</div>
</footer>
<!-- Some Javascript -->
<script src="js/gallery.js"></script>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/anim.js"></script>
<!-- Initialize Client Swiper -->
<script>
var swiper2 = new Swiper('.client-swiper', {
slidesPerView: 3,
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 60,
// Responsive breakpoints
breakpoints: {
// when window width is <= 320px
320: {
slidesPerView: 1,
spaceBetween: 10,
pagination: '.swiper-pagination'
},
// when window width is <= 480px
480: {
slidesPerView: 1,
spaceBetween: 20
},
// when window width is <= 640px
640: {
slidesPerView: 1,
spaceBetween: 30
}
}
});
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script>
// Counterup
$('.counter-purple').counterUp({
time: 1000
});
$('.counter-blue').counterUp({
time: 1000
});
$('.counter-pink').counterUp({
time: 1000
});
// Main Navigation
$('#menu-toggle').click(function () {
$(this).toggleClass('open'),
$('.main-nav').toggleClass('show-it');
})
</script>
<script src="js/boxes.js"></script>
</body>
</html>