-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (112 loc) · 6.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connect with Joël!</title>
<link
rel="stylesheet"
href="./styles.css">
</head>
<body>
<script src="./script.js"></script>
<div class="imagesBanner">
<div class="image-container" >
<img class="rounded-image" src="./Images/profilePicture.jpg" alt="ProfilePicture" style="position:relative; bottom:30px;">
</div>
<div class="image-container">
<img class="rounded-image" src="./Images/Company.png" alt="Company" style="position:relative; top:10.px;">
</div>
</div>
<div class="titlecontainer">
<div style="margin-top:0px">
<h1>Joël van Herwaarden</h1>
<h2>Parametric Design Engineer</h2>
<h3>Royal HaskoningDHV</h3>
</div>
</div>
<div class="container">
<button class="icon-button" id="showPopup" onclick="copyToClipboard('[email protected]')">
<span class="button-text">Mail me!</span>
<svg class="icon" width="30" height="30" viewBox="0 0 24 24">
<!-- Your SVG icon path here -->
<path d="M8.56 12.03Q8.56 12.41 8.5 12.76 8.39 13.1 8.2 13.38 8 13.65 7.71 13.81 7.41 13.97 7 13.97 6.58 13.97 6.29 13.8 6 13.63 5.81 13.35 5.62 13.07 5.54 12.72 5.45 12.37 5.45 12 5.45 11.64 5.54 11.28 5.62 10.93 5.81 10.65 6 10.37 6.31 10.2 6.61 10.03 7.03 10.03 7.46 10.03 7.75 10.2 8.05 10.38 8.23 10.66 8.41 10.95 8.5 11.3 8.56 11.66 8.56 12.03M22 12V19.81Q22 20.2 21.73 20.5 21.45 20.75 21.06 20.75H7.94Q7.55 20.75 7.27 20.5 7 20.2 7 19.81V17H2.83Q2.5 17 2.24 16.76 2 16.5 2 16.17V7.83Q2 7.5 2.24 7.24 2.5 7 2.83 7H8.25V4.13Q8.25 3.76 8.5 3.5 8.76 3.25 9.13 3.25H19.87Q20.24 3.25 20.5 3.5 20.75 3.76 20.75 4.13V11.04L21.79 11.64H21.8Q21.88 11.7 21.94 11.8 22 11.89 22 12M17 5.13V7.63H19.5V5.13M17 8.88V11.38H19.5V8.88M17 12.63V14.15L19.54 12.63M12.63 5.13V7.63H15.75V5.13M12.63 8.88V11.38H15.75V8.88M12.63 12.63V14.32L14.64 15.56L15.75 14.9V12.63M9.5 5.13V7H11.27Q11.33 7 11.38 7.04V5.12M7 15.32Q7.73 15.32 8.32 15.06 8.9 14.8 9.31 14.35 9.71 13.9 9.91 13.28 10.12 12.66 10.13 11.94 10.13 11.25 9.92 10.65 9.72 10.06 9.32 9.62 8.93 9.18 8.37 8.93 7.8 8.68 7.08 8.68 6.31 8.68 5.71 8.93 5.12 9.18 4.71 9.63 4.3 10.09 4.09 10.71 3.88 11.34 3.88 12.08 3.88 12.78 4.09 13.38 4.31 13.97 4.71 14.4 5.11 14.83 5.68 15.08 6.26 15.32 7 15.32M8.25 19.5H18.57L12 15.4V16.17Q12 16.5 11.76 16.76 11.5 17 11.17 17H8.25M20.75 19.39V13.36L15.83 16.31Z" /></svg>
</button>
<button class="icon-button" onclick="OpenLinkedIn()">
<span class="button-text">LinkedIn</span>
<svg class="icon" width="30" height="30" viewBox="0 0 24 24">
<!-- Your SVG icon path here -->
<path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
</svg>
</button>
<button class="icon-button" onclick="OpenGithub()">
<span class="button-text">GitHub</span>
<svg class="icon" width="30" height="30" viewBox="0 0 24 24">
<!-- Your SVG icon path here -->
<path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</svg>
</button>
<button class="icon-button" onclick="showPopupButton('Coming soon!', '1e90ff')">
<span class="button-text">Career Portfolio</span>
<svg class="icon" width="30" height="30" viewBox="0 0 24 24">
<!-- Your SVG icon path here -->
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /></svg>
</button>
<button class="icon-button" onclick="downloadResume()">
<span class="button-text">Download Resume</span>
<svg class="icon" width="30" height="30" viewBox="0 0 24 24">
<!-- Your SVG icon path here -->
<path d="M14,2H6C4.89,2 4,2.89 4,4V20C4,21.11 4.89,22 6,22H18C19.11,22 20,21.11 20,20V8L14,2M12,19L8,15H10.5V12H13.5V15H16L12,19M13,9V3.5L18.5,9H13Z" /></svg>
</button>
</div>
<div id="popupContainer">
<h3 id="popupText"></h3>
</div>
<script>
function OpenLinkedIn() {
const url = 'https://www.linkedin.com/in/joel-van-herwaarden/'; // Replace with your desired URL
window.open(url, '_blank');
}
function OpenGithub() {
const url = 'https://github.com/JoelvanHerwaarden'; // Replace with your desired URL
window.open(url, '_blank');
}
function copyToClipboard(text) {
// Create a temporary input element
const tempInput = document.createElement('input');
tempInput.value = text;
document.body.appendChild(tempInput);
// Select the text inside the input field
tempInput.select();
document.execCommand('copy'); // Copy the selected text to the clipboard
// Clean up: remove the temporary input element
document.body.removeChild(tempInput);
// Alert the user
showPopupButton(`Copied ${text}!`, '#04aa6d');
}
function Comingsoon() {
// Alert the copied text
alert("Coming Soon!");
}
JavaScript
function showPopupButton(text, color) {
// Get the reference to the element with ID "popupText"
const popupTextElement = document.getElementById("popupText");
// Update the text content
popupTextElement.textContent = text;
// Show the popup
popupContainer.style.display = 'block';
popupContainer.style.backgroundColor = color;
// Hide the popup after 5 seconds
setTimeout(() => {
popupContainer.style.display = 'none';
}, 2000);
}
function downloadResume() {
// Replace 'path_to_your_pdf.pdf' with the actual path to your PDF file
const pdfUrl = './Resources/Resume_Joel_van_Herwaarden.pdf';
// Trigger the download
// window.location.href = pdfUrl;
window.open(pdfUrl, '_blank');
}
</script>
</body>