Skip to content

Commit 4c81118

Browse files
karimsayedrekarimsayedre
committed
silly mistake, discord icon just copies the username
1 parent 233b35e commit 4c81118

File tree

3 files changed

+134
-25
lines changed

3 files changed

+134
-25
lines changed

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,8 @@ <h4>Beyond Engine - October 2023 to Present</h4>
189189
</li>
190190
</ul>
191191
These enhancements have further expanded the capabilities of the Beyond Engine, demonstrating my ability to
192-
independently drive the development and improvement of complex graphics engines.
192+
independently drive the development and improvement of complex graphics engines. You can find the source
193+
code <a href="https://github.com/karimsayedre/Beyond" target="_blank">here</a>.
193194
</p>
194195
</div>
195196

‎scripts/bars.js‎

Lines changed: 97 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,83 @@
1+
2+
function addCopyBehaviour() {
3+
document.querySelectorAll('.copy-btn').forEach(button => {
4+
button.addEventListener('click', async (e) => {
5+
e.preventDefault();
6+
const text = button.dataset.text;
7+
try {
8+
await navigator.clipboard.writeText(text);
9+
const toast = button.parentElement.querySelector('.copy-toast');
10+
11+
// Calculate positions
12+
const buttonRect = button.getBoundingClientRect();
13+
const toastWidth = toast.offsetWidth;
14+
const toastHeight = toast.offsetHeight;
15+
const viewportWidth = window.innerWidth;
16+
const viewportHeight = window.innerHeight;
17+
18+
// Vertical positioning (2rem = 32px)
19+
let verticalPosition;
20+
if (viewportHeight - buttonRect.bottom > toastHeight + 32) {
21+
verticalPosition = buttonRect.bottom + 16; // Below button
22+
} else {
23+
verticalPosition = buttonRect.top - toastHeight - 16; // Above button
24+
}
25+
26+
// Horizontal positioning (centered with edge margins)
27+
let horizontalPosition = buttonRect.left + (buttonRect.width / 2) - (toastWidth / 2);
28+
horizontalPosition = Math.max(32, Math.min(horizontalPosition, viewportWidth - toastWidth - 32));
29+
30+
// Apply positions
31+
toast.style.left = `${horizontalPosition}px`;
32+
toast.style.top = `${verticalPosition}px`;
33+
34+
// Show toast
35+
const bsToast = new bootstrap.Toast(toast, {
36+
animation: true,
37+
autohide: true,
38+
delay: 2000
39+
});
40+
bsToast.show();
41+
} catch (error) {
42+
console.error('Copy failed:', error);
43+
}
44+
});
45+
});
46+
}
47+
148
function navbar() {
2-
let navbarHTML = `
49+
let navbarHTML = /*html*/`
350
<nav class="navbar navbar-dark bg-dark">
451
<span class="navbar-brand homepage-link">
5-
<a href="index.html" target="_blank" class="navbar-icons mb-0 h1" id="my-name">
6-
<img src="icons/Beyond.png" class="Beyond-logo" alt="Homepage">
7-
Karim Sayed
8-
</a>
52+
<a href="index.html" target="_blank" class="navbar-icons mb-0 h1" id="my-name">
53+
<img src="icons/Beyond.png" class="Beyond-logo" alt="Homepage">
54+
Karim Sayed
55+
</a>
956
</span>
1057
<div class="navbar-icons-div">
11-
1258
<div class="dropdown navbar-icons">
13-
<img src="icons/resume.png" class="navbar-icons dropdown-toggle" alt="Resume" data-bs-toggle="dropdown" aria-expanded="false">
59+
<img src="icons/resume.png" class="navbar-icons dropdown-toggle" alt="Resume" data-bs-toggle="dropdown"
60+
aria-expanded="false">
61+
1462
<ul class="dropdown-menu dropdown-menu-dark">
15-
<li><a class="dropdown-item" href="resumes/KarimSayedResumeGraphics.pdf" target="_blank">Graphics Programmer Resume</a></li>
16-
<li><a class="dropdown-item" href="resumes/KarimSayedResumeCPP.pdf" target="_blank">C++ Programmer Resume</a></li>
63+
<li><a class="dropdown-item" href="resumes/KarimSayedResumeGraphics.pdf" target="_blank">Graphics
64+
Programmer Resume</a></li>
65+
<li><a class="dropdown-item" href="resumes/KarimSayedResumeCPP.pdf" target="_blank">C++
66+
Programmer
67+
Resume</a></li>
1768
</ul>
1869
</div>
1970
20-
71+
<div class="position-relative">
72+
<a href="#" class="copy-btn" data-text="karimsayedib">
73+
<img src="icons/discord.png" class="navbar-icon" alt="Discord">
74+
</a>
75+
<!-- Change existing toast div to: -->
76+
<div class="toast copy-toast" style="min-width: 150px;">
77+
Copied Discord account to clipboard!
78+
</div>
79+
</div>
80+
2181
<a href="mailto:[email protected]" target="_blank">
2282
<img src="icons/email.png" class="navbar-icons" alt="Email Address">
2383
</a>
@@ -28,26 +88,29 @@ function navbar() {
2888
<img src="icons/github.png" class="navbar-icons" alt="Github Account">
2989
</a>
3090
31-
<a href="https://discord.com/users/karimsayedib" target="_blank">
32-
<img src="icons/discord.png" class="navbar-icons" alt="Discord Account">
33-
</a>
91+
3492
</div>
3593
</nav>
3694
`;
3795

38-
document.body.insertAdjacentHTML('beforeend', navbarHTML);
96+
document.body.insertAdjacentHTML('afterbegin', navbarHTML);
97+
addCopyBehaviour();
3998
}
4099

41100
function footer() {
42-
let footerHTML = `
101+
102+
let footerHTML = /*html*/`
43103
<footer>
44104
<div class="footer-icons text-center">
45-
105+
46106
<div class="dropdown footer-icons">
47-
<img src="icons/resume.png" class="navbar-icons dropdown-toggle" alt="Resume" data-bs-toggle="dropdown" aria-expanded="false">
107+
<img src="icons/resume.png" class="navbar-icons dropdown-toggle" alt="Resume" data-bs-toggle="dropdown"
108+
aria-expanded="false">
48109
<ul class="dropdown-menu dropdown-menu-dark">
49-
<li><a class="dropdown-item" href="resumes/KarimSayedResumeGraphics.pdf" target="_blank">Graphics Programmer Resume</a></li>
50-
<li><a class="dropdown-item" href="resumes/KarimSayedResumeCPP.pdf" target="_blank">C++ Programmer Resume</a></li>
110+
<li><a class="dropdown-item" href="resumes/KarimSayedResumeGraphics.pdf" target="_blank">Graphics
111+
Programmer Resume</a></li>
112+
<li><a class="dropdown-item" href="resumes/KarimSayedResumeCPP.pdf" target="_blank">C++ Programmer
113+
Resume</a></li>
51114
</ul>
52115
</div>
53116
@@ -60,12 +123,22 @@ function footer() {
60123
<a href="https://github.com/karimsayedre" target="_blank">
61124
<img src="icons/github.png" class="navbar-icons" alt="Github Account">
62125
</a>
63-
<a href="https://discord.com/users/karimsayedib" target="_blank">
64-
<img src="icons/discord.png" class="navbar-icons" alt="Discord Account">
65-
</a>
126+
127+
<div class="position-relative">
128+
<a href="#" class="copy-btn" data-text="karimsayedib">
129+
<img src="icons/discord.png" class="navbar-icon" alt="Discord">
130+
</a>
131+
<!-- Change existing toast div to: -->
132+
<div class="toast copy-toast">
133+
Copied Discord account to clipboard!
134+
</div>
135+
</div>
66136
</div>
67137
<p class="text-center">© 2025 Karim Sayed. All rights reserved.</p>
68-
</footer>`;
138+
</footer>
139+
`;
69140

70141
document.body.insertAdjacentHTML('beforeend', footerHTML);
71-
}
142+
addCopyBehaviour();
143+
}
144+

‎style/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,41 @@ a.btn-primary.hover {
147147
border-color: var(--primary-200) !important;
148148
}
149149

150+
/* Remove existing .toast styles and replace with: */
151+
.copy-toast {
152+
position: fixed;
153+
transform: translate(-50%, -50%);
154+
z-index: 1050;
155+
background-color: var(--primary-200);
156+
color: white;
157+
padding: 8px 16px !important;
158+
border-radius: 4px !important;
159+
font-size: 14px !important;
160+
white-space: nowrap;
161+
/* max-width: calc(100vw - 4rem); */
162+
text-align: center;
163+
/* pointer-events: none; */
164+
/* Initial position (will be overridden by JS) */
165+
166+
}
167+
168+
.copy-toast.show {
169+
opacity: 1;
170+
visibility: visible;
171+
}
172+
173+
.copy-toast.top {
174+
top: 2rem !important;
175+
/* Position 2rem from the top for navbar buttons */
176+
}
177+
178+
.copy-toast.bottom {
179+
bottom: 2rem !important;
180+
/* Position 2rem from the bottom for footer buttons */
181+
}
182+
183+
184+
150185
.my-photo {
151186
/* aspect-ratio: 1/1; */
152187
object-fit: cover;

0 commit comments

Comments
 (0)