-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject.html
116 lines (101 loc) · 4.92 KB
/
project.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
<!DOCTYPE html>
<html lang="nl-NL" class="bg-dark">
<head>
<title>Jasper Platenburg</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Jasper Platenburg">
<meta name="description" content="Portfolio website">
<meta name="keywords" content="jasper, platenburg, kw1c, software developer">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div class="container vh-100 bg-dark pt-3">
<a href="/" class="btn-link text-white"><i class="bi bi-arrow-left"></i> Terug</a>
<div class="row text-white mt-3">
<div class="col-12 col-md-4">
<h1 class="text-white fw-bold" id="project-title">
</h1>
<p id="project-description">
</p>
<br>
<h5>Gebruikte technologieën</h5>
<ul id="project-technologies" class="horizontal"></ul>
</div>
<div class="col-12 col-md-8">
<img id="project-image" src="#" alt="Project image"
class="img-fluid rounded border border-1 border-secondary">
</div>
</div>
<div class="row">
<div class="col">
<a id="project-website" target="_blank" href="" class="btn btn-secondary d-none"><i
class="bi bi-globe"></i> Website</a>
<a id="project-github" target="_blank" href="" class="btn btn-secondary d-none"><i
class="bi bi-github"></i> GitHub</a>
</div>
</div>
<h2 class="text-white mt-3">Andere projecten</h2>
<div id="otherProjects" class="row row-cols-1 row-cols-md-3 g-3">
</div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search);
const project = urlParams.get('id');
if (isNaN(project)) {
window.location.href = '/';
}
fetch('projects.json')
.then(response => response.json())
.then(data => {
const projectData = data.projects.find(p => p.id === parseInt(project));
// remove current project from array
const index = data.projects.indexOf(projectData);
if (index > -1) {
data.projects.splice(index, 1);
}
document.querySelector('#project-title').innerText = projectData.title;
document.querySelector('#project-image').src = projectData.image;
projectData.description = projectData.description.replace(/\\n/g, '<br>');
const renderer = new marked.Renderer();
renderer.link = (href, title, text) => `<a target="_blank" href="${href}" title="${title}" class="text-white">${text}</a>`;
marked.use({ renderer });
document.querySelector('#project-description').innerHTML = marked.parse(projectData.description);
const website = document.querySelector('#project-website');
if (projectData.url) {
website.href = projectData.url;
website.classList.remove('d-none');
}
const github = document.querySelector('#project-github');
if (projectData.github) {
github.href = projectData.github;
github.classList.remove('d-none');
}
const technologies = document.querySelector('#project-technologies');
projectData.tech.forEach(t => {
const li = document.createElement('li');
li.innerText = t;
technologies.appendChild(li);
});
data.projects.sort(() => Math.random() - 0.5);
const relatedProjects = data.projects.slice(0, 3);
const otherProjects = document.querySelector('#otherProjects');
relatedProjects.forEach(p => {
const card = document.createElement('div');
card.classList.add('col');
card.innerHTML = `
<a href="project.html?id=${p.id}" class="text-white link-underline-none">
<div class="project-image-container">
<img src="${p.image}" class="img-fluid rounded border border-1 border-secondary" alt="${p.title}">
</div>
<h5>${p.title}</h5>
</a>`;
otherProjects.appendChild(card);
});
});
</script>
</body>
</html>