A repo for my personal website
Adding in portfolio item page
+230
-12
+17
portfolio-item.html
+17
portfolio-item.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
+
<meta charset="utf-8" />
6
+
<meta name="viewport" content="width=device-width" />
7
+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
8
+
<link rel="stylesheet" href="style.css" media="screen" />
9
+
<link href="fonts/righteous.css" rel="stylesheet" type="text/css" />
10
+
<link href="fonts/quicksand.css" rel="stylesheet" type="text/css" />
11
+
<script src="scripts/modernizr.js"></script>
12
+
<script src="scripts/showdown.min.js"></script>
13
+
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
14
+
<script src="scripts/portfolio_item.js" type="module"></script>
15
+
</head>
16
+
<body></body>
17
+
</html>
+1
-1
scripts/about.js
+1
-1
scripts/about.js
···
4
4
import setupLink from './link_setup.js';
5
5
6
6
(function() {
7
-
document.body.innerHTML = getBase(false);
7
+
document.body.innerHTML = getBase(false, false);
8
8
document.querySelector('.site-content').innerHTML = `
9
9
<div class="page-desc">
10
10
<p class="markdown">"Creativity is an energy. It's a precious energy, and it's something to be protected. A lot of people take for granted that they're a creative person, but I know from experience, feeling it in myself, it is a magic; it is an energy. And it can't be taken for granted." --Ava DuVernay</p>
+24
-10
scripts/base.js
+24
-10
scripts/base.js
···
2
2
import getHeader from './head.js';
3
3
import getFoot from './foot.js';
4
4
5
-
function getBase(is_index) {
6
-
return `
7
-
${getNav()}
8
-
<div class="site-container">
9
-
${getHeader(is_index)}
10
-
<section class="site-content">
11
-
</section>
12
-
${getFoot()}
13
-
</div>
14
-
`;
5
+
function getBase(is_index, add_nav) {
6
+
if (add_nav) {
7
+
return `
8
+
${getNav()}
9
+
<div class="site-container">
10
+
${getHeader(is_index)}
11
+
<section class="site-content">
12
+
</section>
13
+
<nav role="navigation" id="foot-nav">
14
+
</nav>
15
+
${getFoot()}
16
+
</div>
17
+
`;
18
+
} else {
19
+
return `
20
+
${getNav()}
21
+
<div class="site-container">
22
+
${getHeader(is_index)}
23
+
<section class="site-content">
24
+
</section>
25
+
${getFoot()}
26
+
</div>
27
+
`;
28
+
}
15
29
}
16
30
17
31
export default getBase;
+1
-1
scripts/main.js
+1
-1
scripts/main.js
···
5
5
import setupLink from './link_setup.js';
6
6
7
7
(function () {
8
-
document.body.innerHTML = getBase(true);
8
+
document.body.innerHTML = getBase(true, false);
9
9
document.querySelector('.site-content').innerHTML = `<div class="projects-feed cf"></div>`;
10
10
11
11
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'}];
+135
scripts/portfolio_item.js
+135
scripts/portfolio_item.js
···
1
+
import getBase from './base.js';
2
+
import parseMarkdown from './markdown.js';
3
+
import setupNavAnim from './nav_anim.js';
4
+
import setupLink from './link_setup.js';
5
+
import getProjectData from './project_data.js';
6
+
import generateProject from './portfolio_project.js';
7
+
8
+
var projectNames = ['fourwoods', 'mememachine', 'shutin', 'bulletrush', 'dndcombatsim', 'cansat'];
9
+
10
+
function previousProject(e) {
11
+
e.preventDefault();
12
+
var projectName = window.location.hash.substring(1);
13
+
var anonName = `project-${(projectNames.indexOf(projectName) + 1).toString()}`;
14
+
var lastAnonName = `project-${projectNames.indexOf(projectName).toString()}`;
15
+
16
+
if (projectNames.indexOf(projectName) == 0) {
17
+
window.location = `portfolio-item.html#${projectName}`;
18
+
window.scrollTo({top: 0, behavior: 'smooth'});
19
+
} else {
20
+
var newProjectName = projectNames[projectNames.indexOf(projectName) - 1];
21
+
window.location = `portfolio-item.html#${newProjectName}`;
22
+
window.scrollTo({top: 0, behavior: 'smooth'});
23
+
document.getElementById(anonName).style.transition = 'opacity 0.125s';
24
+
document.getElementById(anonName).style.opacity = 0;
25
+
26
+
setTimeout(() => {
27
+
document.getElementById(anonName).classList.remove('active-project');
28
+
var projectData = getProjectData(newProjectName);
29
+
document.getElementById('skills-label').innerHTML = projectData.skills;
30
+
document.getElementById(lastAnonName).style.transition = 'opacity 0.125s';
31
+
document.getElementById(lastAnonName).style.opacity = 1;
32
+
33
+
setTimeout(() => {
34
+
document.getElementById(lastAnonName).classList.add('active-project');
35
+
}, 125);
36
+
}, 125);
37
+
}
38
+
}
39
+
40
+
function nextProject(e) {
41
+
e.preventDefault();
42
+
var projectName = window.location.hash.substring(1);
43
+
var anonName = `project-${(projectNames.indexOf(projectName) + 1).toString()}`;
44
+
var nextAnonName = `project-${(projectNames.indexOf(projectName) + 2).toString()}`;
45
+
46
+
if (projectNames.indexOf(projectName) == (projectNames.length - 1)) {
47
+
window.location = `portfolio-item.html#${projectName}`;
48
+
window.scrollTo({top: 0, behavior: 'smooth'});
49
+
} else {
50
+
var newProjectName = projectNames[projectNames.indexOf(projectName) + 1];
51
+
window.location = `portfolio-item.html#${newProjectName}`;
52
+
document.getElementById(anonName).style.transition = 'opacity 0.125s';
53
+
document.getElementById(anonName).style.opacity = 0;
54
+
55
+
setTimeout(() => {
56
+
document.getElementById(anonName).classList.remove('active-project');
57
+
var projectData = getProjectData(newProjectName);
58
+
document.getElementById('skills-label').innerHTML = projectData.skills;
59
+
document.getElementById(nextAnonName).style.transition = 'opacity 0.125s';
60
+
document.getElementById(nextAnonName).style.opacity = 1;
61
+
62
+
setTimeout(() => {
63
+
document.getElementById(nextAnonName).classList.add('active-project');
64
+
}, 125);
65
+
}, 125);
66
+
}
67
+
}
68
+
69
+
(function () {
70
+
document.body.innerHTML = getBase(false, true);
71
+
72
+
document.querySelector('.site-content').innerHTML = `
73
+
<div class="page-desc">
74
+
<h1>Projects</h1>
75
+
<p>Skills:</p>
76
+
<p id="skills-label"></p>
77
+
</div>
78
+
`;
79
+
80
+
for (var i = 0; i < projectNames.length; i++) {
81
+
var projectData = generateProject(projectNames[i], i);
82
+
document.querySelector('.site-content').innerHTML += projectData.data;
83
+
84
+
for (var j = 0; j < projectData.links.length; j++) {
85
+
if (projectData.links[j].href == '') {
86
+
document.querySelector(`#project-${(i + 1).toString()} .project-content-container .project-content .table .table-cell`).innerHTML += `<div>${projectData.links[j].title}</div>`;
87
+
} else {
88
+
document.querySelector(`#project-${(i + 1).toString()} .project-content-container .project-content .table .table-cell`).innerHTML += `<div><a href="${projectData.links[j].href}">${projectData.links[j].title}</a></div>`;
89
+
}
90
+
}
91
+
92
+
for (var j = 0; j < projectData.embeds.length; j++) {
93
+
document.querySelector(`#project-${(i + 1).toString()} .project-content-container .project-content .table .table-cell`).innerHTML += `
94
+
<div class="embed embed-16by9">
95
+
<iframe src="${projectData.embeds[j]}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="embed-item">Your device does not support iframes.</iframe>
96
+
</div>
97
+
`;
98
+
}
99
+
}
100
+
101
+
document.getElementById('project-1').classList.add('active-project');
102
+
103
+
document.querySelector('#foot-nav').innerHTML = `
104
+
<ul class="cd-pagination animated-buttons custom-icons">
105
+
<li class="button"><a href="#"><i>Prev</i></a></li>
106
+
<li class="button-main"><a href="index.html"><i>Portfolio</i></a></li>
107
+
<li class="button"><a href="#"><i>Next</i></a></li>
108
+
</ul>
109
+
`;
110
+
111
+
setupNavAnim(document);
112
+
113
+
var projectName = `project-${(projectNames.indexOf(window.location.hash.substring(1)) + 1).toString()}`;
114
+
115
+
if (!document.getElementById(projectName).classList.contains('active-project')) {
116
+
document.querySelectorAll('.active-project').forEach((element, key, parent) => {
117
+
element.classList.remove('active-project');
118
+
});
119
+
120
+
document.getElementById(projectName).classList.add('active-project');
121
+
}
122
+
123
+
document.querySelector('.button:first-of-type a').addEventListener('click', previousProject, false);
124
+
document.querySelector('.button:last-of-type a').addEventListener('click', nextProject, false);
125
+
126
+
document.getElementById('skills-label').innerHTML = getProjectData(window.location.hash.substring(1)).skills;
127
+
128
+
parseMarkdown(document);
129
+
130
+
setTimeout(() => {
131
+
document.body.classList.add('loaded');
132
+
}, 150);
133
+
134
+
setupLink(document);
135
+
})();
+33
scripts/portfolio_project.js
+33
scripts/portfolio_project.js
···
1
+
import getProjectData from './project_data.js';
2
+
3
+
function generateProject(name, index) {
4
+
var projectData = getProjectData(name);
5
+
6
+
return {data: `
7
+
<article class="project project-page cf" id="project-${(index + 1).toString()}">
8
+
<div class="thumb">
9
+
<div data-picture data-alt="">
10
+
<div data-src="img/${name}.png"></div>
11
+
<!--if (lt IE 9) & (!IEMobile)]>
12
+
<div data-src="img/${name}.png">/div>
13
+
<![endif]-->
14
+
<noscript>
15
+
<img src="img/${name}.png" alt="" />
16
+
</noscript>
17
+
</div>
18
+
</div>
19
+
<div class="project-content-container">
20
+
<div class="project-content">
21
+
<div class="table">
22
+
<div class="table-cell">
23
+
<h2 class="thumbnail-title">${projectData.title}</h2>
24
+
<p>${projectData.longDescription}</p>
25
+
</div>
26
+
</div>
27
+
</div>
28
+
</div>
29
+
</article>
30
+
`, links: projectData.links, embeds: projectData.embeds};
31
+
}
32
+
33
+
export default generateProject;
+19
scripts/project_data.js
+19
scripts/project_data.js
···
1
+
function getProjectData(projectName) {
2
+
if (projectName == 'mememachine') {
3
+
return {skills: 'Python, Python Reddit Aggregator Wrapper (PRAW), ImgurPython', title: 'Meme Machine', longDescription: 'The Association for Computing Machinery, University of the Pacific chapter created a project in March 2017 that downloads and aggregates memes from various social media sites including Reddit, Imgur, Tumblr, and Imgflip using Python and Haskell. It included a plan to write a module that would gather ratings and use the data as input for machine learning to create its own memes.', links: [{title: 'GitHub Repository', href: 'https://github.com/uopacm/mememachinecollector'}], embeds: []};
4
+
} else if (projectName == 'shutin') {
5
+
return {skills: 'Final Cut Pro X, Adobe Premiere Pro, Foley Art, Lighting Setup', title: 'Shut In', longDescription: 'The San Joaquin County Office of Education held a two-week filmmaking workshop in June 2012. After a full day of shooting at a daycare in Manteca, CA, the crew premiered the film at the Lincoln High School theatre to a packed house. The crew then held a Q and A session with those in attendance.', links: [{title: 'IMDB Link', href: 'https://www.imdb.com/title/tt2644836/'}], embeds: ['https://www.youtube.com/embed/1g2i2bYbwC8']};
6
+
} else if (projectName == 'bulletrush') {
7
+
return {skills: 'Unity, C#, Project Management, Agile Development', title: 'Bullet Rush', longDescription: 'I took the Computer Game Technologies course at University of the Pacific in Fall 2019 to learn Video Game Design and Development. After pitching ideas to the class similarly to my earlier Application Development course, I was placed as the Project Manager of the Bullet Rush team along with a Lead Programmer, a general Programmer, and a Media Director. At the end of the course, we presented to the community for feedback.', links: [{title: 'Bitbucket Repository', href: 'https://bitbucket.org/jacob5567/bullet-rush'}], embeds: []};
8
+
} else if (projectName == 'dndcombatsim') {
9
+
return {skills: 'Java, JavaScript, Project Management', title: 'Dungeons and Dragons Combat Simulator', longDescription: 'I took the Application Development course at University of the Pacific to learn how to work on a team to develop an application. In our groups, we proposed our final projects for the class and began our work. There were no roles, so I took initiative to be the Project Manager along with doing basic coding on the JSON data and general backend programming.', links: [{title: 'Because we used data from 5e.tools, I am not including a link to the repository here.', href: ''}], embeds: []};
10
+
} else if (projectName == 'cansat') {
11
+
return {skills: 'C++, Arduino', title: 'CanSat', longDescription: 'During my junior year of high school, my dad approached me with an offer to work on a project involving a simulated sattelite in an enclosure the size and shape of a soda can run by an Arduino. He connected me and two of his students to Ted Tagami of Magnitude.io and we were all connected with Dr. Elizabeth Basha and her students at University of the Pacific. The CanSat project was eventually launched into low-Earth orbit in November 2019.', links: [{title: 'More Information', href: 'https://magnitude.io/cansat-stem-education/'}], embeds: []};
12
+
} else if (projectName == 'fourwoods') {
13
+
return {skills: 'Adobe Audition, Scriptwriting, Directing for Voiceover', title: 'The Four Woods Podcast', longDescription: 'The Four Woods Podcast, part of my senior project for my Media X degree at University of the Pacific, is an audio drama podcast about Ross Hansen, a 16-year-old kid who attends magical high school for the first time in his life after meeting his parents who he hasn\'t seen for thirteen years. A pilot episode of the podcast is currently available wherever you get your podcasts with more on the way in the coming months.', links: [{title: 'Anchor.FM Page', href: 'https://anchor.fm/4woodspodcast'}, {title: 'Apple Podcasts Page', href: 'https://www.google.com/podcasts?feed=aHR0cHM6Ly9hbmNob3IuZm0vcy81MjAwNTY0OC9wb2RjYXN0L3Jzcw=='}, {title: 'Amazon Music', href: 'https://music.amazon.com/podcasts/12dfc842-f2c5-42cd-9989-e43d1ac19e54/The-Four-Woods'}, {title: 'Stitcher', href: 'https://www.stitcher.com/show/the-four-woods'}, {title: 'Breaker', href: 'https://www.breaker.audio/p/the-four-woods'}, {title: 'Pocket Casts', href: 'https://pca.st/kexc4wrj'}], embeds: []};
14
+
} else {
15
+
return {};
16
+
}
17
+
}
18
+
19
+
export default getProjectData;