-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
478 lines (439 loc) · 27.6 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- SEO Meta Tags -->
<meta name="description" content="The Website about backend Developer Sebi">
<meta name="author" content="Sebi">
<!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
<meta property="og:site_name" content="Sebi" /> <!-- website name -->
<meta property="og:site" content="https://thesebi.dev/" /> <!-- website link -->
<meta property="og:title" content="Sebi"/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="The Website about backend Developer Sebi" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="https://thesebi.dev/images/profile.jpg" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="https://thesebi.dev" /> <!-- where do you want your post to link to -->
<meta name="twitter:card" content="https://thesebi.dev/images/header-background.gif"> <!-- to have large image post format in Twitter -->
<!-- Webpage Title -->
<title>Sebi</title>
<!-- Links -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@600&display=swap" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Initialize Tooltips -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
</head>
<body data-spy="scroll" data-target=".fixed-top" id="top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<div class="container">
<a class="navbar-brand logo-text page-scroll" data-toggle="tooltip" data-placement="bottom" title="Don't Click Me!" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><i class="fas fa-code"></i> Sebi</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bots</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" target="_blank" href="https://discord.com/oauth2/authorize?client_id=870368752326295582&permissions=122406962320&scope=bot%20applications.commands">Thread Manager <span class="badge badge-success">Online</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" target="_blank" href="https://discord.com/oauth2/authorize?client_id=881217168023363584&permissions=19327428608&scope=bot%20applications.commands">Midnight <span class="badge badge-success">Online</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" target="_blank" href="https://discord.com/oauth2/authorize?client_id=883382730400886935&permissions=2147780672&scope=bot%20applications.commands">TropicoX <span class="badge badge-success">Online</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" target="_blank" href="https://discord.com/oauth2/authorize?client_id=692456221952966738&scope=bot&permissions=2146958591&scope=bot%20applications.commands">Infinity Lounge <span class="badge badge-success">Online</span></a>
</div>
</li>
</ul>
<!--GitHub-->
<span class="fa-stack">
<a href="https://github.com/Dev-Sebi">
<i class="fas fa-circle fa-stack-2x" data-toggle="tooltip" data-placement="bottom" title="GitHub"></i>
<i class="fab fa-github fa-stack-1x" data-toggle="tooltip" data-placement="bottom" title="GitHub"></i>
</a>
</span>
<!--Discord-->
<span class="fa-stack">
<a href="https://discord.gg/dUyBRSwRnC">
<i class="fas fa-circle fa-stack-2x" data-toggle="tooltip" data-placement="bottom" title="Discord"></i>
<i class="fab fa-discord fa-stack-1x" data-toggle="tooltip" data-placement="bottom" title="Discord"></i>
</a>
</span>
</div> <!-- end of navbar-collapse -->
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header id="header" class="header">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h1 class="h1-large">A Backend and Bot Developer</h1>
<a class="btn-solid-lg page-scroll" href="#about">Discover</a>
<a class="btn-outline-lg page-scroll" href="#contact"><i class="fas fa-user"></i>Contact Me</a>
</div> <!-- end of text-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of header -->
<!-- end of header -->
<!-- About-->
<div id="about" class="basic-1 bg-gray">
<div class="container">
<div class="row">
<h2 aria-label="Hi! I'm a developer">Hi! I'm <span class="typewriter"></span></h2>
<p>Currently Im <a id="age"></a> Years old, born and living in Germany. I started coding back in 2015 with a good friend, back then it was basic HTML and CSS, we both didn't have a clue how JavaScript, Bootstrap or other things worked but rather just experimented with the Knowledge we had. About 2 Years later I started to develop Discord bots with something similar to Scratch, not exactly coding, but you get the idea on how it works aka Javascript ~ it suddenly became easy to understand and I don't know why. I also started to take a deeper look into Bootstrap and how things work in the general coding / Programming scene. With 17 Years old (2019) I started an apprenticeship as an it system electronics technician, and will be finished Jul 2022. When I was new in the apprenticeship, I started to learn C++ in school, after a year switched schools and then learned C# and the basics of Java. With this knowledge on "real" Programming (not HTML or CSS) I started to become very interested in JavaScript again, and I really fast understood how it works and how to use it. Starting back in middle 2020 I developed my first own Online Websocket Chatting site (similar to Discord) with HTML, CSS (Bootstrap) and PHP, soon to find out all I've build was easy to exploitable (for example to XSS attacks), then got unmotivated very fast. BUT the same speed I got unmotivated I started to get motivated again after I heard about Node.js (yes don't blame me, that I didn't know earlier), starting with Node.js, Express, Socket.io and fresh motivation, recoded the whole Project called Sepma.net. The motivation had reached its peek and fell again, but with the knowledge I've earned, started to develop Discord bots again and here Iam now ~ Not the best but nobody can know everything 😊.</p>
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of basic-1 -->
<!-- end of about -->
<!-- Details -->
<div class="split">
<div class="area-1">
<div></div>
</div><!-- end of area-1 on same line and no space between comments to eliminate margin white space --><div class="area-2 bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Text Container -->
<div class="text-container">
<h5>🏆 AWARDS</h5>
<ul>
<li>Discord Verified Bot Developer</li>
<li>2 Verified Discord Bots</li>
</ul>
<h5>🔨 SOFTWARE</h5>
<ul>
<li>Visual Studio Code</li>
<li>Visual Studio</li>
<li>Node.js</li>
<li>HCL Notes</li>
<li>MariaDB</li>
<li>GitHub</li>
<li>Discord</li>
<li>Linux / Windows</li>
<li>Udemy</li>
</ul>
<h5>🤖 DEVELOPMENT SKILLS</h5>
<p>I am familiar and work on a daily basis with HTML, CSS, JavaScript, Bootstrap and other modern frameworks</p>
<div class="icons-container">
<img src="images/details-icon-html.png" data-toggle="tooltip" data-placement="bottom" title="HTML5" alt="alternative">
<img src="images/details-icon-css.png" data-toggle="tooltip" data-placement="bottom" title="CSS3" alt="alternative">
<img src="images/details-icon-bootstrap.png" data-toggle="tooltip" data-placement="bottom" title="Bootstrap" alt="alternative">
<img src="images/details-icon-javascript.png" data-toggle="tooltip" data-placement="bottom" title="JavaScript" alt="alternative">
</div> <!-- end of icons-container -->
</div> <!-- end of text-container -->
<!-- end of text container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of area-2 -->
</div> <!-- end of split -->
<!-- end of details -->
<!-- Projects -->
<div id="projects" class="basic-2">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="h2-heading">Discord Bots I work on right now</h2>
<p class="p-heading">"What are Discord bots?"" - You might ask, if you don't know the platform "Discord". Discord is the easiest way to talk over voice, video and text - all free. Discord bots simply said are Robots that help you get a nice Discord Experience. These Bots can be Developed in many ways, such as using Python, Javascript or other Libraries. I Personally Code all of my bots in a Node.js Application using the Discord.js Library.</p>
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-4">
<div class="text-box">
<i class="fas fa-code"></i>
<h4>Thread Manager <span class="badge badge-success">Online</span></h4>
<p>Threads just got released and not many bots are currently capable of moderating them. Since threads are a whole different type of communication then Discord had before it will take a while for other bots to catch up. Thankfully Thread Manager is always ahead of the game! Thread Manager is a bot that will look over all threads created in your Server and logs all activities made on or in them. <a target="_blank" class="no-line" href="https://discord.com/oauth2/authorize?client_id=870368752326295582&permissions=122406962320&scope=bot%20applications.commands">Invite me</a></p>
<a href="https://top.gg/bot/870368752326295582"><img src="https://top.gg/api/widget/870368752326295582.svg" alt="Thread Manager" /></a>
</div> <!-- end of text-box -->
</div> <!-- end of col -->
<div class="col-lg-4">
<div class="text-box">
<i class="fas fa-code"></i>
<h4>Midnight <span class="badge badge-success">Online</span></h4>
<p>As Scams on Discord start to become annoying and more dangerous, I have made the bot for you! Midnight is a bot that prevents people to send scam links around in your server, without a setup needed! People that send scam links will get its message deleted and will gain +1 infraction. The Infractions are globally, so everyone with access to this bot can see the Infractions. <a target="_blank" class="no-line" href="https://discord.com/oauth2/authorize?client_id=881217168023363584&permissions=19327428608&scope=bot%20applications.commands">Invite me</a></p>
<a href="https://top.gg/bot/881217168023363584"><img src="https://top.gg/api/widget/881217168023363584.svg" alt="Midnight" /></a>
</div> <!-- end of text-box -->
</div> <!-- end of col -->
<div class="col-lg-4">
<div class="text-box">
<i class="fas fa-code"></i>
<h4>TropicoX <span class="badge badge-success">Online</span></h4>
<p>TropicoX is the next generation Economy bot for your server with many features, jobs and other coming soon, currently in Development! <a target="_blank" class="no-line" href="https://discord.com/oauth2/authorize?client_id=883382730400886935&permissions=2147780672&scope=bot%20applications.commands">Invite me</a></p>
<a href="https://top.gg/bot/883382730400886935"><img src="https://top.gg/api/widget/883382730400886935.svg" alt="TropicoX" /></a>
</div> <!-- end of text-box -->
</div> <!-- end of col -->
<div class="col-lg-4">
<div class="text-box">
<i class="fas fa-code"></i>
<h4>Infinity Lounge <span class="badge badge-success">Online</span></h4>
<p>Infinity Lounge is a basic Fun / Meme Bot, currently in rework. <a target="_blank" class="no-line" href="https://discord.com/oauth2/authorize?client_id=692456221952966738&scope=bot&permissions=2146958591&scope=bot%20applications.commands">Invite me</a></p>
<a href="https://top.gg/bot/692456221952966738"><img src="https://top.gg/api/widget/692456221952966738.svg" alt="Infinity Lounge" /></a>
</div> <!-- end of text-box -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of basic-2 -->
<!-- end of Projects -->
<!-- Section Divider -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="section-divider">
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
<!-- end of section divider -->
<br>
<br>
<br>
<!-- Servers -->
<div class="basic-4">
<div class="container">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="https://discord.gg/JQC7NfEXcv">
<img class="img-fluid" src="images/banner.png" alt="">
</a>
</div>
<p><b>Server:</b> Sebi's Townhall<br> This is my official Server, here you can join if you need support or have suggestions about any of my bots.</p>
</div>
</div>
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="https://discord.gg/gA7ckVQbAs">
<img class="img-fluid" src="images/banner2.png" alt="">
</a>
</div>
<p><b>Server:</b> Velithora <br> A Small friendly Community, where you can play games with each other.</p>
</div>
</div>
<!--
<div class="col-lg-4">
<div class="text-container">
<div class="image-container">
<a href="https://discord.gg/badges">
<img class="img-fluid" src="https://cdn.discordapp.com/banners/899431224618127380/3906c8453d4fd0416cd0e6660a46d8f2.jpg?size=512" alt="">
</a>
</div>
<p><b>Server:</b> Discord Badges <br> A Big Community for people with badges, Users without are also welcome. This Server is for everyone to chat and have a great time.</a></p>
</div>
</div>
-->
</div>
</div>
</div>
<!-- end of servers -->
<!-- Testimonials -->
<!--
<div class="cards-1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="h2-heading">A few words from people that chose to work with me</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<p class="testimonial-text">“Mark is a skilled developer which will do everything possible to deliver the project on time and I really appreciate that”</p>
<div class="details">
<img src="images/testimonial-1.jpg" alt="alternative">
<div class="text">
<div class="testimonial-author">Samantha Bloom</div>
<div class="occupation">Team Leader - Syncnow</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
-->
<!-- end of testimonials -->
<!-- Section Divider -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="section-divider">
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
<!-- end of section divider -->
<!-- Questions -->
<div class="accordion-1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="h2-heading">Frequently asked questions</h2>
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-12">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Do you code custom Discord bots for free / paid?
</button>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
As of right now i am not Developing custom bots for everyone, only for Discord servers with 10.000 Members or more and a good amount of activity. For Questions or Inquiries you can join my <a class="blue no-line" href="https://discord.gg/JQC7NfEXcv">server</a> and contact me there.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Do you create bots from ground up or are you using Templates?
</button>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
I actually do use a Template, not a random one, but rather one I made by myself. If you want to check out the template, click <a class="blue no-line" href="https://github.com/Dev-Sebi/discord-bot-template-v13">here</a>.
</div>
</div>
</div>
</div> <!-- end of accordion -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of accordion-1 -->
<!-- end of questions -->
<!-- Contact -->
<div id="contact" class="form-1 bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Contact details</h2>
<p class="p-heading">For any type of online project please don't hesitate to get in touch with me. The fastest way is to send me your message using the following email: <a class="blue no-line" href="mailto:sebi@thesebi.dev" data-toggle="tooltip" data-placement="bottom" title="Click me!">sebi@thesebi.dev</a></p>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of form-1 -->
<!-- end of contact -->
<!-- Footer -->
<div class="footer bg-gray">
<div class="container">
<div class="col-lg-12">
<a class="upscroll btn-solid-lg page-scroll" href="#top"></a>
</div>
<br>
<div class="row">
<div class="col-lg-12">
<div class="social-container">
<!--Twitter-->
<span class="fa-stack">
<a href="https://twitter.com/S3BI_YT">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</a>
</span>
<!--Instagram-->
<span class="fa-stack">
<a href="https://www.instagram.com/s3bi.png/">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x"></i>
</a>
</span>
<!--Youtube-->
<span class="fa-stack">
<a href="https://www.youtube.com/channel/UC0O37NN-aSqcOuleXWxRLLw">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x"></i>
</a>
</span>
<!--GitHub-->
<span class="fa-stack">
<a href="https://github.com/Dev-Sebi">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x"></i>
</a>
</span>
<!--Discord-->
<span class="fa-stack">
<a href="https://discord.gg/dUyBRSwRnC">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-discord fa-stack-1x"></i>
</a>
</span>
</div> <!-- end of social-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of footer -->
<!-- end of footer -->
<!-- Copyright -->
<div class="copyright bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="p-small">Copyright © Sebi</p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
<br>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="p-small">Distributed By <a class="no-line" href="https://themewagon.com/">Themewagon</a></p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<!-- end of copyright -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
<!-- Load Date Oriented Data -->
<script>
const date = new Date();
const day = date.getDate()
const month = date.getMonth() + 1
const year = date.getFullYear();
const age = year - 2002
if(month < 4)
{
document.getElementById('age').textContent = age - 1
}
if ((month == 4 && day >= 15) || month > 4)
{
document.getElementById('age').textContent = age
}
</script>
</body>
</html>