-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
644 lines (603 loc) · 29.8 KB
/
script.js
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
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
// Function to handle click events on content elements
function handleClick(e, contentId) {
e.preventDefault(); // This prevents the default action, i.e., navigating to "#"
showContent(contentId);
}
// Function to show a specific content element and hide others
function showContent(contentId) {
const contentElements = document.getElementsByClassName('content');
for (var i = 0; i < contentElements.length; i++) {
if (contentElements[i].id === contentId) {
contentElements[i].style.display = 'block';
} else {
contentElements[i].style.display = 'none';
}
}
localStorage.setItem('contentId', contentId);
}
// Function to adjust column width based on viewport size
function adjustColumnWidth() {
const viewportWidth = window.innerWidth;
const columnElements = document.querySelectorAll('.column');
const modalContent = document.querySelector('.modal-content');
columnElements.forEach(function (column) {
if (viewportWidth >= 1000) {
column.style.flex = '0 0 850px';
column.style.maxWidth = '850px';
modalContent.style.flex = '0 0 750px';
modalContent.style.maxWidth = '750px';
} else if (viewportWidth <= 768) {
column.style.flex = '0 0 100%';
column.style.maxWidth = '720px';
modalContent.style.flex = '0 0 90%';
modalContent.style.maxWidth = '620px';
} else {
const width =
720 /*width below 768px*/ +
((viewportWidth - 768) * 130) /*900-720*/ / 232; /*1000-768*/
column.style.flex = '0 0 ' + width + 'px';
column.style.maxWidth = width + 'px';
modalContent.style.flex = '0 0 ' + width - 100 + 'px';
modalContent.style.maxWidth = width - 100 + 'px';
}
});
}
// Function to handle scroll event and show/hide the "back to top" button
function scrollFunction() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
document.getElementById('back-to-top').style.display = 'block';
} else {
document.getElementById('back-to-top').style.display = 'none';
}
}
// Function to scroll to the top of the page smoothly
function topFunction() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Event listener for click on theme toggle image
document
.getElementById('theme-toggle-img')
.addEventListener('click', function () {
// Get necessary elements by ID
let root = document.documentElement;
let themeToggleImage = document.getElementById('theme-toggle-img');
let profile = document.getElementById('profpic');
let xdaicon = document.getElementById('xda');
let codewarsicon = document.getElementById('codewars');
let googledevicon = document.getElementById('googledev');
let statcounterDigit = document.getElementById('statcounter-digit');
// Get the computed background color
let bgColor = getComputedStyle(root).getPropertyValue('--color-background');
// Check the current background color and toggle the theme accordingly
if (bgColor.trim() == '#F2F2F2') {
// Apply dark theme
root.style.setProperty('--color', '#FFFFFF');
root.style.setProperty('--color-background', '#000000');
root.style.setProperty('--color-text', '#F2F2F2');
root.style.setProperty('--color-button', '#a9a9a9');
root.style.setProperty('--color-transparent', 'rgba(256,256,256,0.3)');
root.style.setProperty(
'--color-button-text-transparent',
'rgba(0,0,0,0.7)'
);
themeToggleImage.src = 'images/lamp_on.png';
profile.src = 'images/profpicd.png';
xdaicon.src = 'images/xda-muted.png';
codewarsicon.src = 'images/codewars-muted.png';
statcounterDigit.classList.add('negative-image');
googledevicon.src = 'images/google-developers-muted.png';
// Set a timeout to change the theme toggle image back to off after 500ms
setTimeout(function () {
themeToggleImage.src = 'images/lamp_off.png';
}, 500);
// Store the current theme in localStorage
localStorage.setItem('theme', 'dark');
} else {
// Set a timeout to change the theme toggle image back to on after 500ms
setTimeout(function () {
root.style.setProperty('--color', '#000000');
root.style.setProperty('--color-background', '#F2F2F2');
root.style.setProperty('--color-text', '#000000');
root.style.setProperty('--color-button', '#888888');
root.style.setProperty('--color-transparent', 'rgba(0,0,0,0.3)');
root.style.setProperty(
'--color-button-text-transparent',
'rgba(256,256,256,0.7)'
);
themeToggleImage.src = 'images/lamp_on2.png';
profile.src = 'images/profpicb.png';
xdaicon.src = 'images/xda-muted-light.png';
codewarsicon.src = 'images/codewars-muted-light.png';
statcounterDigit.classList.remove('negative-image');
googledevicon.src = 'images/google-developers-muted-light.png';
}, 500);
themeToggleImage.src = 'images/lamp_on.png';
// Store the current theme in localStorage
localStorage.setItem('theme', 'light');
}
});
// Get necessary elements by ID
let tooltip = document.getElementById('tooltip');
let themeToggleImage = document.getElementById('theme-toggle-img');
// Add event listener to the theme toggle image when mouse enters
themeToggleImage.addEventListener('mouseenter', function () {
// Show tooltip with animation
tooltip.style.visibility = 'visible';
tooltip.style.opacity = '1';
tooltip.style.transition = 'all 0.25s ease-in';
// Set a timeout to hide the tooltip after 2500ms
setTimeout(function () {
tooltip.style.visibility = 'hidden';
tooltip.style.opacity = '0';
tooltip.style.transition = 'all 0.4s ease';
}, 2500);
});
// Add event listener to the theme toggle image when mouse leaves
themeToggleImage.addEventListener('mouseleave', function () {
// Set a timeout to hide the tooltip after 500ms
setTimeout(function () {
tooltip.style.visibility = 'hidden';
tooltip.style.opacity = '0';
}, 500);
});
// Add event listener when the DOM content is loaded
document.addEventListener('DOMContentLoaded', function () {
// Get the stored theme from localStorage
let theme = localStorage.getItem('theme');
let root = document.documentElement;
let themeToggleImage = document.getElementById('theme-toggle-img');
let profile = document.getElementById('profpic');
let xdaicon = document.getElementById('xda');
let codewarsicon = document.getElementById('codewars');
let googledevicon = document.getElementById('googledev');
let statcounterDigit = document.getElementById('statcounter-digit');
let contentId = localStorage.getItem('contentId');
if (theme === 'dark') {
// Apply dark theme
root.style.setProperty('--color', '#F2F2F2');
root.style.setProperty('--color-background', '#000000');
root.style.setProperty('--color-text', '#F2F2F2');
root.style.setProperty('--color-button', '#a9a9a9');
root.style.setProperty('--color-transparent', 'rgba(256,256,256,0.3)');
root.style.setProperty(
'--color-button-text-transparent',
'rgba(0,0,0,0.7)'
);
themeToggleImage.src = 'images/lamp_off.png';
profile.src = 'images/profpicd.png';
xdaicon.src = 'images/xda-muted.png';
codewarsicon.src = 'images/codewars-muted.png';
googledevicon.src = 'images/google-developers-muted.png';
statcounterDigit.classList.add('negative-image');
} else {
// Apply light theme (or default theme)
root.style.setProperty('--color', '#000000');
root.style.setProperty('--color-background', '#F2F2F2');
root.style.setProperty('--color-text', '#000000');
root.style.setProperty('--color-button', '#888888');
root.style.setProperty('--color-transparent', 'rgba(0,0,0,0.3)');
root.style.setProperty(
'--color-button-text-transparent',
'rgba(256,256,256,0.7)'
);
themeToggleImage.src = 'images/lamp_on2.png';
profile.src = 'images/profpicb.png';
xdaicon.src = 'images/xda-muted-light.png';
codewarsicon.src = 'images/codewars-muted-light.png';
googledevicon.src = 'images/google-developers-muted-light.png';
statcounterDigit.classList.remove('negative-image');
}
// Call the showContent function with the stored contentId
if (contentId) {
showContent(contentId);
}
});
// Create an IntersectionObserver to handle fading in of sections
let observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
} else {
entry.target.style.opacity = '0';
}
});
},
{ threshold: 0 }
);
// Apply the observer to all elements with class 'column'
document.querySelectorAll('.column').forEach((section) => {
section.style.opacity = '0';
section.style.transition = 'opacity 0.73s ease';
observer.observe(section);
});
const googledevicon = document.getElementById('googledev');
const xdaicon = document.getElementById('xda');
const codewarsicon = document.getElementById('codewars');
// Add event listener when mouse is over the googledev icon
googledevicon.addEventListener('mouseover', function () {
googledevicon.src = 'images/google-developers.png';
});
// Add event listener when mouse leaves the googledev icon
googledevicon.addEventListener('mouseout', function () {
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
googledevicon.src = 'images/google-developers-muted.png';
} else {
googledevicon.src = 'images/google-developers-muted-light.png';
}
});
// Add event listener when mouse is over the xda icon
xdaicon.addEventListener('mouseover', function () {
xdaicon.src = 'images/xda.png';
});
// Add event listener when mouse leaves the xda icon
xdaicon.addEventListener('mouseout', function () {
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
xdaicon.src = 'images/xda-muted.png';
} else {
xdaicon.src = 'images/xda-muted-light.png';
}
});
// Add event listener when mouse is over the codewars icon
codewarsicon.addEventListener('mouseover', function () {
codewarsicon.src = 'images/codewars.png';
});
// Add event listener when mouse leaves the codewars icon
codewarsicon.addEventListener('mouseout', function () {
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
codewarsicon.src = 'images/codewars-muted.png';
} else {
codewarsicon.src = 'images/codewars-muted-light.png';
}
});
// Add event listener to window resize event
window.addEventListener('resize', adjustColumnWidth);
// Add event listener to all anchor elements with href starting with '#'
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth',
});
});
});
// Get the modal element and other related elements
let modal = document.getElementById('myModal');
let btns = document.querySelectorAll('.project.button');
let span = document.getElementsByClassName('close')[0];
let projectLinkBtn = document.getElementById('project-link-btn');
let repoLinkBtn = document.getElementById('repo-link-btn'); // New line
let readmeContent = document.getElementById('readme-content');
// Add event listener to the document body to handle project button clicks
document.body.addEventListener('click', function (e) {
// Find the closest ancestor element with class 'project.button'
const btn = e.target.closest('.project.button');
if (btn) {
modal.style.display = 'block';
projectLinkBtn.href = btn.dataset.projectLink;
repoLinkBtn.href = btn.dataset.repoLink;
// Extract the project name from the link
let parts = btn.dataset.projectLink.split('/');
let projectName = parts[parts.length - 2];
// Generate the repository URL based on the project name
let repoUrl = `https://github.com/EleoXDA/${projectName}`;
repoLinkBtn.href = repoUrl;
// Fetch and display the README content for the project
fetchReadme(btn.dataset.projectLink);
// Open the project link in a new window/tab when clicked
projectLinkBtn.onclick = function () {
window.open(this.href);
};
// Open the repository link in a new window/tab when clicked
repoLinkBtn.onclick = function () {
window.open(this.href);
};
}
});
// Add event listener to the close button in the modal
span.onclick = function () {
modal.style.display = 'none';
};
// Add event listener to the window when clicked outside the modal
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = 'none';
}
};
let converter = new showdown.Converter();
// Function to fetch and display the README content for a project
function fetchReadme(projectLink) {
let parts = projectLink.split('/');
let projectName = parts[parts.length - 2];
let branch = projectName === 'portfolio' ? 'gh-pages' : 'master';
let url = `https://github.com/raw/EleoXDA/${projectName}/${branch}/README.md`;
// Fetch the README content using the provided URL
fetch(url)
.then((response) => response.text())
.then((data) => {
let html = converter.makeHtml(data); // This line converts markdown to HTML
// Render the README content in the modal
readmeContent.innerHTML = html;
})
.catch((error) => {
console.error('Error:', error);
// Display an error message if the README content cannot be fetched
readmeContent.innerHTML = 'Error loading README';
});
}
window.onscroll = function () {
scrollFunction();
};
adjustColumnWidth();
/*
After this line the code is for injection of the content to HTML
*/
let homeContent = `<h2>About Me</h2>
<p>As a detail-oriented and versatile software developer, I have honed my skills in both the development and testing phases of web and mobile applications. With a proven background in QA, my testing expertise spans across multiple testing frameworks including RSpec, Widget Tester Jest and etc; my development expertise spans across mobile development (Kotlin, Flutter) and Web development (Javascript, Typescript, Ruby and etc).
</p><hr><p>My pursuit of knowledge and technical skills led me to Le Wagon Coding Bootcamp, a transformative experience that certified me as a Web Developer. This immersive program introduced me to a variety of programming languages, such as Ruby on Rails, JavaScript, and CSS, effectively preparing me for a dynamic career in the tech industry. Upon completion of the bootcamp, I took up a freelance role as a Junior Developer with XDA-Developers, leveraging my newly acquired skills to develop web, Android, and cross-platform applications.
</p><hr><p>Furthering my career, I embraced the opportunity to work as a Junior Cross-Platform Developer with koviko GmbH. During this tenure, I spearheaded the development of a German language learning app using Flutter/Dart, demonstrating my ability to work with cross-platform mobile frameworks and languages. Additionally, my role involved using the PHP backend with the Yii framework and performing application testing using Widget Tester, ultimately consolidating my experience in project management and software development.
</p><hr><p>In summary, my career journey has been characterized by continuous learning, versatility, and a commitment to excellence. With my extensive skills in software development, testing, and project management, I am eager to contribute to a new position, where I can continue to ensure the delivery of high-quality software solutions.
</p>`;
let experienceContent = `<h2>Experience</h2>
<div>
<h3>Junior Cross-Platform Developer at koviko GmbH</h3>
<p>Responsible for building a cross-platform app for learning German language using Flutter/Dart and PHP backend with Yii framework.</p>
</div>
<hr>
<div>
<h3>Junior Developer at XDA-Developers</h3>
<p>Worked on Web, Android, and cross-platform app development using Ruby (on Rails), JavaScript, Typescript and Flutter.</p>
</div>
<hr>
<div>
<h3>Research Assistant/Project Responsible at Friedrich Schiller University of Jena</h3>
<p>Increased effectivity of CPU and GPU preparation on silicon chips. Managed project budget for 30 months and increased cost effectivity by 15%. Demonstrated strong writing skills in original correspondence and reports.</p>
</div>
<hr>
<div>
<h3>Junior Mobile Developer at recruiT</h3>
<p>Modified mobile android applications using Kotlin and smali language. Tested applications using JUnit, adapted the app for fur. Prepared, rewrote, and edited parts of apps' user interfaces using UI/UX tools.</p>
</div>
<hr>
<div>
<h3>MSc. Researcher/Project Responsible at Middle East Technical University</h3>
<p>Involved in silicon chip manufacturing and MEMS for automated testing. Validated incoming data to check information accuracy and integrity while locating and correcting concerns. Published research and review papers in peer-reviewed scientific journals.</p>
</div>`;
let educationContent = `<h2>Education</h2>
<div>
<h3>Le Wagon Coding Bootcamp - Web Development</h3>
<p>9-week full-time intensive coding bootcamp learning HTML, CSS, Bootstrap,
<br>JavaScript ES6, SQL, Git, GitHub, Heroku and Ruby on Rails.</p>
</div>
<hr>
<div>
<h3>Master of Science: Micro and Nanotechnology</h3>
<p>Development of silicon chips and MEMS devices for automated testing.</p>
</div>
<hr>
<div>
<h3>Bachelor of Science: Biology</h3>
<p>Basics of scientific research - introduction to general scientific applications.</p>
</div>`;
let softContent = `<h2 id='softh2'>Software Proficiency</h2>
<hr id='softhr'>
<div class="category">
<div class="section">
<h3>Development</h3>
<ul>
<li><u>Web Development:</u><ul>Javascript-Typescript (Vue.JS, Node.JS), CSS(Sass, SCSS), HTML</ul></li>
<li><u>Server-side Scripting:</u><ul>Ruby (Ruby on Rails), PHP (Yii)</ul></li>
<li><u>Mobile Development:</u><ul>Kotlin (Ktor), Dart (Flutter)</ul></li>
<li><u>Agile Development:</u><ul>Kanban, Jira, Scrum</ul></li>
</ul>
<hr>
</div>
<div class="section">
<h3>Testing and Version Control</h3>
<ul>
<li><u>Test Frameworks:</u><ul>Javascript(Jest, Jasmine, Mocha), Ruby (RSpec), Flutter (Widget Tester), Kotlin (JUnit, Espresso), PHP (PHPUnit), Web (Selenium)</ul></li>
<li><u>Integrated Development Environments (IDEs):</u><ul>Visual Studio Code, IntelliJ IDEA, Android Studio</ul></li>
<li><u>Version Control Systems (VCS):</u><ul>Git (Platforms: GitHub, GitLab, Bitbucket)</ul></li>
</ul>
<hr>
</div>
<div class="section">
<h3>Design and Database Management</h3>
<ul>
<li><u>Prototype tools:</u><ul>Figma, Adobe XD, Sketch</ul></li>
<li><u>Databases and Database Tools:</u><ul>MySQL, MariaDB, Redis, DB Browser, SQL, SQLite, PostgreSQL, pgAdmin, phpMyAdmin</ul></li>
</ul>
<hr>
</div>
<div class="section">
<h3>Command Line, Build Tools, and API Testing</h3>
<ul>
<li><u>Command Line Interface (CLI):</u><ul>Bash, Powershell, Command Prompt, Terminal</ul></li>
<li><u>Build Tools and Package Managers:</u><ul>npm, Yarn, Webpack, Gradle, Maven, Rake</ul></li>
<li><u>API Testing Tools:</u><ul>Postman</ul></li>
</ul>
<hr>
</div>
<div class="section">
<h3>Containerization, Cloud, and Continuous Integration</h3>
<ul>
<li><u>Containerization and Virtualization Tools:</u><ul>Docker, VMWare</ul></li>
<li><u>Cloud Platforms:</u><ul>Google Cloud, AWS (novice)</ul></li>
<li><u>Continuous Integration/Continuous Deployment (CI/CD) Tools:</u><ul>Jenkins, GitHub Actions</ul></li>
</ul>
</div>
</div>
</div>
</div>`;
let langContent = `<h2>Language Proficiency</h2>
<p> - English
<br> - German
<br> - Turkish
<br> - Azerbaijani
<br> - Russian
</p>`;
let projects = `<h2 style="margin-bottom: 0px;">Projects</h2>
<div>
<p>In the following list you will find some of the open source projects that I built. Unfortunately I cannot share the source of private projects that I worked on during my employment, or the projects that were presented during my freelance work time.</p>
</div>
<h6 style="font-weight: 500; margin-top: 0px; margin-bottom: 20px;"><br>For more information on code, documentation and execution of each project, please <span style="text-decoration:underline;">click the button on the left side</span> to open the ReadMe of the Github projects.</h6>
<hr>
<div class="project-container">
<button class="project button" data-project-link="https://eleoxda.github.io/Ace_Hunter_JS/"><h3 class="project-name">Ace Hunter</h3></button>
<div class="project-description">
<h6 style="font-weight: 500; margin: 1pt;">A card game to find the Ace of Spades card among four cards.
<a target="_blank" href="https://github.com/EleoXDA/Ace_Hunter_JS" style="text-decoration: underline;" class="hyperlink-in-projects">Link to Repo</a>
<br>Tech Stack: HTML, CSS, Javascript, GitHub Actions, GitHub Pages</h6>
</div>
</div>
<hr>
<div class="project-container">
<button class="project button" data-project-link="https://eleoxda.github.io/Quiz_TS/"><h3 class="project-name">Quiz</h3></button>
<div class="project-description">
<h6 style="font-weight: 500; margin: 1pt;">A Quiz app that asks 5 random questions.
<a target="_blank" href="https://github.com/EleoXDA/Quiz_TS" style="text-decoration: underline;" class="hyperlink-in-projects">Link to Repo</a>
<br>Tech Stack: HTML, CSS, Typescript, Javascript, GitHub Actions, GitHub Pages</h6>
</div>
</div>
<hr>
<div class="project-container">
<button class="project button" data-project-link="https://eleoxda.github.io/Countdown_Timer_TS/"><h3 class="project-name">Timer</h3></button>
<div class="project-description">
<h6 style="font-weight: 500; margin: 1pt;">A countdown timer app.
<a target="_blank" href="https://github.com/EleoXDA/Countdown_Timer_TS" style="text-decoration: underline;" class="hyperlink-in-projects">Link to Repo</a>
<br>Tech Stack: HTML, CSS, Typescript, Javascript, GitHub Actions, GitHub Pages</h6>
</div>
</div>
<hr>
<div class="project-container">
<button class="project button" data-project-link="https://eleoxda.github.io/Calculator_TS/"><h3 class="project-name">Calculator</h3></button>
<div class="project-description">
<h6 style="font-weight: 500; margin: 1pt;">A calculator app.
<a target="_blank" href="https://github.com/EleoXDA/Calculator_TS" style="text-decoration: underline;" class="hyperlink-in-projects">Link to Repo</a>
<br>Tech Stack: HTML, CSS, Typescript, Javascript, GitHub Actions, GitHub Pages</h6>
</div>
</div>
<hr>
<div class="project-container">
<button class="project button" data-project-link="https://eleoxda.github.io/Expense_Tracker_TS/"><h3 class="project-name">Expense Tracker</h3></button>
<div class="project-description">
<h6 style="font-weight: 500; margin: 1pt;">A budget tracker to count your expenses.
<a target="_blank" href="https://github.com/EleoXDA/Socialize_RB" style="text-decoration: underline;" class="hyperlink-in-projects">Link to Repo</a>
<br>Tech Stack: HTML, CSS, Typescript, Javascript, GitHub Actions, GitHub Pages</h6>
</div>
</div>
<hr>
<div class="project-container">
<button class="project button" data-project-link="https://eleoxda.github.io/Tip_Calculator_TS/"><h3 class="project-name">Tip Calculator</h3></button>
<div class="project-description">
<h6 style="font-weight: 500; margin: 1pt;">A tip calculator for extreme cases.
<a target="_blank" href="https://github.com/EleoXDA/Tip_Calculator_TS" style="text-decoration: underline;" class="hyperlink-in-projects">Link to Repo</a>
<br>Tech Stack: HTML, CSS, Typescript, Javascript, GitHub Actions, GitHub Pages</h6>
</div>
</div>
<hr>
<div class="project-container">
<button class="project button" data-project-link="https://eleoxda.github.io/portfolio/"><h3 class="project-name">My Portfolio</h3></button>
<div class="project-description">
<h6 style="font-weight: 500; margin: 1pt;">The source code to this beautiful and responsive wesbite.
<a target="_blank" href="https://github.com/EleoXDA/portfolio" style="text-decoration: underline;" class="hyperlink-in-projects">Link to Repo</a>
<br>Tech Stack: HTML, CSS, Javascript, GitHub Actions, GitHub Pages, Web Hosting</h6>
</div>
</div>`;
let skills = `<h2 id='softh2'>Skills and Tools</h2>
<hr id='softhr'>
<div>
<table>
<thead>
<tr>
<th>Languages and Frameworks</th>
</tr>
</thead>
<tbody>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-plain.svg"/><br>JavaScript</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg"/><br>TypeScript</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg"/><br>Node. JS</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg"/><br>Vue. JS</td>
<td><img src="images/react.svg"/><br>React. JS</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg"/><br>Svelte</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"/><br>CSS</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg"/><br>Bootstrap</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"/><br>HTML</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg"/><br>Dart</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg"/><br>Flutter</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg"/><br>Kotlin</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg"/><br>Ruby</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rails/rails-original-wordmark.svg"/><br>Rails</td>
<td><img src="images/php.svg"/><br>PHP</td>
<td><img src="images/yii.svg"/><br>Yii</td>
<td><img src="images/mongodb.svg"/><br>MongoDB</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg"/><br>PostgreSQL</td>
</tbody>
</table>
<hr id='softhr'>
<table>
<thead>
<tr>
<th>Tools and Software</th>
</tr>
</thead>
<tbody>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/webpack/webpack-original.svg"/><br>WebPack</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/heroku/heroku-original.svg"/><br>Heroku</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg"/><br>Figma</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg"/><br>Git</td>
<td><img src="images/github.svg"/><br>GitHub</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/gitlab/gitlab-original.svg"/><br>GitLab</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-original.svg"/><br>Android Studio</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/intellij/intellij-original.svg"/><br>IntelliJ</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg"/><br>VSCode</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/visualstudio/visualstudio-plain.svg"/><br>Visual Studio</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vim/vim-original.svg"/><br>Vim</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg"/><br>Google Cloud</td>
<td><img src="images/codepen.svg"/><br>CodePen</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg"/><br>Docker</td>
<td><img src="images/postman.svg"/><br>Postman</td>
<td><img src="images/xampp.svg"/><br>XAMPP</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/eslint/eslint-original.svg"/><br>ESLint</td>
<td><img src="images/gradle.svg"/><br>Gradle</td>
<td><img src="images/jenkins.svg"/><br>Jenkins</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jetbrains/jetbrains-original.svg"/><br>JetBrains</td>
<td><img src="images/scrum.svg"/><br>Scrum</td>
<td><img src="https://user-images.githubusercontent.com/27622683/192119213-9a958b20-d3ba-460e-935f-dccb6a3de7e6.png"/><br>Kanban</td>
<td><img src="images/tdd.png"/><br>T.D.D.</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jira/jira-original.svg"/><br>Jira</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/yarn/yarn-original.svg"/><br>Yarn</td>
<td><img src="images/bash.svg"/><br>Bash</td>
<td><img src="images/markdown.svg"/><br>Markdown</td>
</tbody>
</table>
<hr id='softhr'>
<table>
<thead>
<tr>
<th>Operating Systems</th>
</tr>
</thead>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/windows8/windows8-original.svg"/><br>Windows</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg"/><br>Linux</td>
<td><img src="images/mac.svg"/><br>MacOS</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg"/><br>Android</td>
<td><img src="images/ios.svg"/><br>iOS</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ubuntu/ubuntu-plain.svg"/><br>Ubuntu</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/debian/debian-plain.svg"/><br>Debian</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/fedora/fedora-plain.svg"/><br>Fedora</td>
<td><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/chrome/chrome-original.svg"/><br>ChromeOS</td>
</tbody>
</table>
<hr id='softhr'>
</div>`;
document.getElementById('projects').innerHTML = projects;
document.getElementById('lang').innerHTML = langContent;
document.getElementById('soft').innerHTML = softContent;
document.getElementById('education').innerHTML = educationContent;
document.getElementById('experience').innerHTML = experienceContent;
document.getElementById('home').innerHTML = homeContent;
document.getElementById('skills').innerHTML = skills;