A repo for my personal website
Finished with the homepage, now onto the portfolio page
+77
-60
+22
scripts/link_setup.js
+22
scripts/link_setup.js
···
1
+
function setupLinks(document) {
2
+
var a = document.getElementsByTagName('a');
3
+
4
+
for (var index = 0; index < a.length; index++) {
5
+
a.item(index).addEventListener('click', (e) => {
6
+
if (a.item(index).href === null) {
7
+
e.preventDefault();
8
+
} else if (a.item(index).href == '') {
9
+
e.preventDefault();
10
+
} else if ((a.item(index).href.indexOf('#') == 1) && (a.item(index).href.indexOf('mailto:') == -1) && (a.item(index).href.indexOf('javascript:') == -1) && (a.item(index).target != '_blank')) {
11
+
e.preventDefault();
12
+
var i = a.item(index).href;
13
+
document.body.classList.remove('loaded');
14
+
setTimeout(() => {
15
+
window.location = i;
16
+
}, 250);
17
+
}
18
+
}, false);
19
+
}
20
+
}
21
+
22
+
export default setupLinks;
+9
-60
scripts/main.js
+9
-60
scripts/main.js
···
1
1
import getBase from './base.js';
2
2
import getProject from './project.js';
3
+
import parseMarkdown from './markdown.js';
4
+
import setupNavAnim from './nav_anim.js';
5
+
import setupLink from './link_setup.js';
3
6
4
7
(function () {
5
8
var projects = [{id: 'fourwoods', title: 'The Four Woods Podcast', description: 'An audio drama podcast about myth and magic - Writer, Director, Editor, Producer'}, {id: 'mememachine', title: 'Meme Machine', description: 'Download, Rate, and Create Memes - Programmer'}, {id: 'shutin', title: 'Shut In', description: 'Short Film - Gaffer, Foley Artist, Sound Editor'}, {id: 'bulletrush', title: 'Bullet Rush', description: 'Cuphead meets First Person Shooter games - Programmer, Project Manager'}, {id: 'dndcombatsim', title: 'Dungeons and Dragons Combat Simulator', description: 'Combat simulator for the 5th Edition of the Tabletop RPG Dungeons and Dragons - Programmer, Project Manager'}, {id: 'cansat', title: 'CanSat', description: 'A simulated sattelite in an enclosure the shape and size of a soda can - Programmer'}];
···
11
14
document.querySelector('.projects-feed.cf').innerHTML += getProject(projects[i]);
12
15
}
13
16
14
-
var isLateralNavAnimating = false;
15
-
16
-
document.querySelector('.cd-nav-trigger').addEventListener('click', (e) => {
17
-
e.preventDefault();
18
-
19
-
if (!isLateralNavAnimating) {
20
-
isLateralNavAnimating = true;
21
-
document.body.classList.toggle('navigation-is-open');
22
-
23
-
function checker() {
24
-
isLateralNavAnimating = false;
25
-
document.querySelectorAll('.cd-navigation-wrapper').forEach((element, key, parent) => {
26
-
element.removeEventListener('webkitTransitionEnd', checker, false);
27
-
element.removeEventListener('otransitionend', checker, false);
28
-
element.removeEventListener('oTransitionEnd', checker, false);
29
-
element.removeEventListener('msTransitionEnd', checker, false);
30
-
element.removeEventListener('transitionend', checker, false);
31
-
});
32
-
}
33
-
34
-
document.querySelectorAll('.cd-navigation-wrapper').forEach((element, key, parent) => {
35
-
element.addEventListener('webkitTransitionEnd', checker, false);
36
-
element.addEventListener('otransitionend', checker, false);
37
-
element.addEventListener('oTransitionEnd', checker, false);
38
-
element.addEventListener('msTransitionEnd', checker, false);
39
-
element.addEventListener('transitionend', checker, false);
40
-
});
41
-
}
42
-
}, false);
43
-
44
-
document.querySelectorAll('.markdown').forEach((element, key, parent) => {
45
-
var converter = new showdown.Converter();
46
-
var convertedMessage = converter.makeHtml(element.innerHTML).replaceAll('<p>', '<div>').replaceAll('</p>', '</div>');
47
-
var colors = ['#00eeff', '#fffb00', '#ff3e3e', '#ff70e7'];
48
-
49
-
element.innerHTML = convertedMessage.replaceAll(/!(\d)+\[([*A-Za-z0-9 <>/\-".!']+)\]/gm, function(str, numMatch, innerText) {
50
-
var num = parseInt(numMatch, 10) - 1;
51
-
return '<span style="color:' + colors[num] + ';">' + innerText + '</span>';
52
-
});
53
-
});
17
+
setupNavAnim(document);
18
+
parseMarkdown(document);
54
19
55
20
setTimeout(() => {
56
21
document.body.classList.add('loaded');
57
22
}, 150);
58
23
59
-
imagesLoaded(document.querySelectorAll('projects-feed .project'), (instance) => {
60
-
console.log(instance);
61
-
instance.elements.forEach((element, index, arr) => {
24
+
imagesLoaded('projects-feed .project', (instance) => {
25
+
document.querySelectorAll('.projects-feed .project').forEach((element, key, parent) => {
62
26
setTimeout(() => {
63
27
element.classList.add('loaded');
64
-
}, 50 + 150 * index);
28
+
}, 50 + 50 * key);
65
29
});
66
30
});
67
31
68
-
var a = document.getElementsByTagName('a');
69
-
70
-
for (var index = 0; index < a.length; index++) {
71
-
a.item(index).addEventListener('click', (e) => {
72
-
if ((a.item(index).href == '') || (a.item(index).href == null)) {
73
-
e.preventDefault();
74
-
} else if ((a.item(index).href.indexOf('#') == 1) && (a.item(index).href.indexOf('mailto:') == -1) && (a.item(index).href.indexOf('javascript:') == -1) && (a.item(index).target != '_blank')) {
75
-
e.preventDefault();
76
-
var i = a.item(index).href;
77
-
document.body.classList.remove('loaded');
78
-
setTimeout(() => {
79
-
window.location = i;
80
-
}, 250);
81
-
}
82
-
}, false);
83
-
}
32
+
setupLink(document);
84
33
})();
+14
scripts/markdown.js
+14
scripts/markdown.js
···
1
+
function parseMarkdown(document) {
2
+
document.querySelectorAll('.markdown').forEach((element, key, parent) => {
3
+
var converter = new showdown.Converter();
4
+
var convertedMessage = converter.makeHtml(element.innerHTML).replaceAll('<p>', '<div>').replaceAll('</p>', '</div>');
5
+
var colors = ['#00eeff', '#fffb00', '#ff3e3e', '#ff70e7'];
6
+
7
+
element.innerHTML = convertedMessage.replaceAll(/!(\d)+\[([*A-Za-z0-9 <>/\-".!']+)\]/gm, function(str, numMatch, innerText) {
8
+
var num = parseInt(numMatch, 10) - 1;
9
+
return '<span style="color:' + colors[num] + ';">' + innerText + '</span>';
10
+
});
11
+
});
12
+
}
13
+
14
+
export default parseMarkdown;