hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2025-06-27 14:57:26 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: hnasheralneam:3f7805278d1ea669cb9626f0cd3591732af3fb61
Branches Tags
hnasheralneam:master
hnasheralneam:redirect
...
compare: hnasheralneam:ebb8568ca107a7c3d81d4307bb2f90c64529b750
Branches Tags
hnasheralneam:master
hnasheralneam:redirect

2 commits
3f7805278d ... ebb8568ca1

Author SHA1 Message Date
Hamza Nasher-Alneam
ebb8568ca1 Save theme color across pages 2025-05-05 18:15:42 -04:00
Hamza Nasher-Alneam
9c0a834c71 Character limit on guestbook entries, guestbook takes full space, menu links can be clicked anywhere 2025-05-05 15:09:15 -04:00
13 changed files with 139 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

13
guestbook.html
View file

@ -1,15 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!"> <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46"> <meta name="theme-color" content="#f69b46">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link <link
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/styles.css"> <link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/guestbook.css"> <link rel="stylesheet" href="styles/guestbook.css">
<title>Guestbook | Hamza Nasher-Alneam</title> <title>Guestbook | Hamza Nasher-Alneam</title>
@ -22,14 +20,12 @@
<br><br> <br><br>
<div class="content" style="min-height: 60vh"> <div class="content" style="min-height: 60vh">
<div class="main-text">
<div>
<!-- Guestbook --> <!-- Guestbook -->
<div class="guestbook"> <div class="guestbook">
<h2 class="guestbook-title">Guest book - leave a note!</h2> <h2 class="guestbook-title">Guest book - leave a note!</h2>
<div class="messages"></div> <div class="messages"></div>
<div class="show-all-messages"> <div class="show-all-messages">
<button onclick="this.remove(); showAll()">Show all messages</button> <button onclick="this.remove(); getAll()">Show all messages</button>
</div> </div>
<br> <br>
<button class="post-button" onclick="toggleElement('new-message')">Post a message</button> <button class="post-button" onclick="toggleElement('new-message')">Post a message</button>
@ -39,7 +35,7 @@
<form class="new-message-form" method="POST" <form class="new-message-form" method="POST"
action="https://guestbook-api.hnasheralneam.dev/message"> action="https://guestbook-api.hnasheralneam.dev/message">
<label class="message-header" for="message">Your message for the world</label><br> <label class="message-header" for="message">Your message for the world</label><br>
<textarea type="text" name="message" placeholder="your post"></textarea><br> <textarea type="text" name="message" placeholder="your post" maxlength="500"></textarea><br>
<label class="text-label" for="github">Your GitHub username</label><br> <label class="text-label" for="github">Your GitHub username</label><br>
<input class="text" type="text" name="github" placeholder="github username"> <input class="text" type="text" name="github" placeholder="github username">
<input type="submit" value="Post" onclick="checkSubmissionValid(event)"> <input type="submit" value="Post" onclick="checkSubmissionValid(event)">
@ -47,8 +43,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
<br><br> <br><br>
@ -56,6 +50,7 @@
<div w3-include-html="partials/menu.html"></div> <div w3-include-html="partials/menu.html"></div>
</body> </body>
<script src="scripts/include-html.js"></script> <script src="scripts/include-html.js"></script>
<script src="scripts/script.js"></script>
<script defer src="https://umami.hnasheralneam.dev/script.js" <script defer src="https://umami.hnasheralneam.dev/script.js"
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script> data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
<script src="https://hnasheralneam.github.io/digit/main.js"></script> <script src="https://hnasheralneam.github.io/digit/main.js"></script>

BIN
icons/phil.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 777 B

BIN
icons/race.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

57
index.html
View file

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!"> <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46"> <meta name="theme-color" content="#f69b46">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/home.css"> <link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/styles.css"> <link rel="stylesheet" href="styles/styles.css">
@ -12,9 +12,7 @@
<title>Hamza Nasher-Alneam</title> <title>Hamza Nasher-Alneam</title>
</head> </head>
<body> <body>
<div class="progress-parent"> <div class="progress-parent"><div class="progress"></div></div>
<div class="progress"></div>
</div>
<br><br> <br><br>
<div class="content"> <div class="content">
@ -64,63 +62,18 @@
<p>Change the website color theme</p> <p>Change the website color theme</p>
<button onclick="changeTheme()">Random</button> <button onclick="changeTheme()">Random</button>
<button onclick="changeThemeHex()" class="hex-code-label">Hex code</button> <button onclick="changeThemeHex()" class="hex-code-label">Hex code</button>
<button onclick="resetTheme()">Reset</button>
</div> </div>
<br><br>
<!-- Guestbook -->
<!-- <div class="guestbook">
<h2 class="guestbook-title">Guest book - leave a note!</h2>
<div class="messages"></div>
<div class="show-all-messages">
<button onclick="this.remove(); showAll()">Show all messages</button>
</div>
<br>
<button class="post-button" onclick="toggleElement('new-message')">Post a message</button>
<div class="new-message-container" onclick="if (event.target.classList.contains('new-message-container')) toggleElement('new-message')">
<div class="new-message">
<form class="new-message-form" method="POST" action="https://guestbook-api.hnasheralneam.dev/message">
<label class="message-header" for="message">Your message for the world</label><br>
<textarea type="text" name="message" placeholder="your post"></textarea><br>
<label class="text-label" for="github">Your GitHub username</label><br>
<input class="text" type="text" name="github" placeholder="github username">
<input type="submit" value="Post" onclick="checkSubmissionValid(event)">
</form>
</div>
</div>
</div> -->
</div> </div>
<!-- <div class="thoughts-preview"> <br><br>
<h2>Thoughts</h2>
<a hre="articles/plasma-widgets.html#publish-widget">
<div class="thoughts-bit"
<h4>Publish your Plasma widget</h4>
<i>May 15 2024</i>
<p>A quick tutorial that shows how publish a KDE widget on the widget store. More on KDE widgets coming soon
hopefully!</p>
</div>
</a>
<a href="thoughts.html#imessage-lockin">
<div class="thoughts-bit">
<h4>The social issues with iMessage</h4>
<i>Dec 1 2022</i>
<p>I discusses the technology behind SMS, which is used when messaging between iPhones and other devices, as well as the newer MMS and RCS standards.</p>
</div>
</a>
<a href="thoughts.html#reject-folding-phones">
<div class="thoughts-bit">
<h4>An argument against folding phones</h4>
<i>Dec 1 2022</i>
<p>I mention the impracticalities in more words than strictly necessary.</p>
</div>
</a>
</div> -->
</div> </div>
</div> </div>
<br><br> <br><br>
<div w3-include-html="partials/footer.html"></div> <div w3-include-html="partials/footer.html"></div>
<div w3-include-html="partials/menu.html"></div> <div w3-include-html="partials/menu.html"></div>
</body> </body>
<script src="scripts/include-html.js"></script> <script src="scripts/include-html.js"></script>
<script src="scripts/script.js"></script>
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>
<script src="https://hnasheralneam.github.io/digit/main.js"></script> <script src="https://hnasheralneam.github.io/digit/main.js"></script>
<script defer src="https://umami.hnasheralneam.dev/script.js" <script defer src="https://umami.hnasheralneam.dev/script.js"

32
partials/menu.html
View file

@ -1,24 +1,16 @@
<div class="menu"> <div class="menu">
<div> <div>
<div class="item"> <a class="item" href="index.html" title="home">
<a href="index.html" title="home"> <img src="icons/home.svg" alt="home">
<img src="icons/home.svg" alt="home"> </a>
</a> <a class="item" href="projects.html" title="projects">
</div> <img src="icons/web_stories.svg" alt="projects">
<div class="item"> </a>
<a href="projects.html" title="projects"> <a class="item" href="thoughts.html" title="thoughts">
<img src="icons/web_stories.svg" alt="projects"> <img src="icons/rss_feed.svg" alt="thoughts">
</a> </a>
</div> <a class="item" href="guestbook.html" title="guestbook">
<div class="item"> <img src="icons/developer_guide.svg" alt="guestbook">
<a href="thoughts.html" title="thoughts"> </a>
<img src="icons/rss_feed.svg" alt="thoughts">
</a>
</div>
<div class="item">
<a href="guestbook.html" title="guestbook">
<img src="icons/developer_guide.svg" alt="guestbook">
</a>
</div>
</div> </div>
</div> </div>

3
projects.html
View file

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!"> <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46"> <meta name="theme-color" content="#f69b46">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link <link
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap"
rel="stylesheet"> rel="stylesheet">
@ -21,6 +21,7 @@
<div w3-include-html="partials/menu.html"></div> <div w3-include-html="partials/menu.html"></div>
</body> </body>
<script src="scripts/include-html.js"></script> <script src="scripts/include-html.js"></script>
<script src="scripts/script.js"></script>
<script src="scripts/projects.js"></script> <script src="scripts/projects.js"></script>
<script defer src="https://umami.hnasheralneam.dev/script.js" <script defer src="https://umami.hnasheralneam.dev/script.js"
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script> data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>

24
scripts/copypopup.js Normal file
View file

@ -0,0 +1,24 @@
let url = document.location.href;
function copy(txt) {
let link = `${url}#${txt}`;
navigator.clipboard.writeText(link).then(() => {
console.log("Copied link!");
}, () => { console.log("Error copying link."); });
let alert = document.createElement("DIV");
alert.textContent = "Copied Link to Heading!";
alert.classList.add("tempAlert");
document.body.appendChild(alert);
setTimeout(() => {
alert.style.opacity = "1";
alert.style.bottom = ".5rem";
}, 200);
setTimeout(() => {
alert.style.opacity = "0";
alert.style.bottom = "-10rem";
}, 4200);
setTimeout(() => {
alert.remove();
}, 4400);
}

12
scripts/guestbook.js
View file

@ -5,6 +5,10 @@ function checkSubmissionValid(event) {
event.preventDefault(); event.preventDefault();
document.querySelector('.status').textContent = "Fill out all fields"; document.querySelector('.status').textContent = "Fill out all fields";
} }
else if (message.length > 500) {
event.preventDefault();
document.querySelector('.status').textContent = "Message too long";
}
else { else {
document.querySelector('.status').textContent = "Post succesful!"; document.querySelector('.status').textContent = "Post succesful!";
} }
@ -59,11 +63,3 @@ function toggleElement(elementName) {
element.style.pointerEvents = "none"; element.style.pointerEvents = "none";
} }
} }
function showAll() {
getAll();
let messagesElement = document.querySelector(".messages");
messagesElement.style.overflowX = "hidden";
messagesElement.style.overflowY = "auto";
messagesElement.style.whiteSpace = "wrap";
}

8
scripts/main.js
View file

@ -1,5 +1,3 @@
console.log("hello");
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false); }, false);
@ -20,8 +18,6 @@ function changeThemeHex() {
} }
} }
function setThemeColor(color) { function resetTheme() {
document.documentElement.style.setProperty("--theme-color", color); setThemeColor("#f69b46");
let metaThemeColor = document.querySelector("meta[name=theme-color]");
metaThemeColor.setAttribute("content", color);
} }

11
scripts/script.js Normal file
View file

@ -0,0 +1,11 @@
// theme color
let themeColor = localStorage.getItem("theme-color");
if (!themeColor) themeColor = "#f69b46";
setThemeColor(themeColor);
function setThemeColor(color) {
document.documentElement.style.setProperty("--theme-color", color);
let metaThemeColor = document.querySelector("meta[name=theme-color]");
metaThemeColor.setAttribute("content", color);
localStorage.setItem("theme-color", color);
}

77
styles/guestbook.css
View file

@ -1,3 +1,73 @@
* {
font-family: "Nunito", "Times New Roman", Times, serif;
}
body {
overflow-x: hidden;
}
.content {
transition: .2s;
margin: auto;
max-width: 80rem;
transition: .2s;
}
h2 {
position: relative;
margin: 1rem .75rem .75rem 2.5rem;
font-size: 1.5rem;
transition: .2s;
}
h3 {
margin: .75rem 0 0 2rem;
}
button {
padding: .2rem .5rem;
font-size: 1.1rem;
color: #fff;
background-color: var(--theme-color);
border: solid .2rem var(--theme-color);
border-radius: .5rem;
box-shadow: 0 .1rem .2rem #ddd;
transition: .15s;
}
button:hover {
color: var(--theme-color);
background-color: transparent;
}
button:active {
transform: scale(.98);
}
a {
color: var(--theme-color);
}
@media only screen and (max-width: 700px) {
.content {
grid-template-columns: 100%;
margin-right: 0;
width: 100vw;
}
}
@media (prefers-color-scheme: dark) {
button {
box-shadow: 0 .2rem .2rem #000;
}
}
.guestbook { .guestbook {
padding-top: 2rem; padding-top: 2rem;
position: relative; position: relative;
@ -9,11 +79,6 @@
.guestbook .messages { .guestbook .messages {
margin: 1rem 0; margin: 1rem 0;
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
text-align: center; text-align: center;
} }
@ -26,7 +91,7 @@
margin: 0 .3rem; margin: 0 .3rem;
min-height: 14rem; min-height: 14rem;
min-width: 20rem; min-width: 20rem;
max-width: 25rem; max-width: 24rem;
/* max-width: 700px; */ /* max-width: 700px; */
border: solid .2rem var(--theme-color); border: solid .2rem var(--theme-color);
border-radius: 1rem; border-radius: 1rem;

2
styles/styles.css
View file

@ -84,7 +84,7 @@ a {
.menu { .menu {
position: fixed; position: fixed;
top: 0; top: 0;
left: .2rem; left: .3rem;
bottom: 0; bottom: 0;
width: 10rem; width: 10rem;
display: flex; display: flex;

30
thoughts.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!"> <meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/styles.css"> <link rel="stylesheet" href="styles/styles.css">
@ -40,31 +40,7 @@
<div w3-include-html="partials/menu.html"></div> <div w3-include-html="partials/menu.html"></div>
</body> </body>
<script src="scripts/include-html.js"></script> <script src="scripts/include-html.js"></script>
<script> <script src="scripts/script.js"></script>
let url = document.location.href; <script src="scripts/copypopup.js"></script>
function copy(txt) {
let link = `${url}#${txt}`;
navigator.clipboard.writeText(link).then(() => {
console.log("Copied link!");
}, () => { console.log("Error copying link."); });
let alert = document.createElement("DIV");
alert.textContent = "Copied Link to Heading!";
alert.classList.add("tempAlert");
document.body.appendChild(alert);
setTimeout(() => {
alert.style.opacity = "1";
alert.style.bottom = ".5rem";
}, 200);
setTimeout(() => {
alert.style.opacity = "0";
alert.style.bottom = "-10rem";
}, 4200);
setTimeout(() => {
alert.remove();
}, 4400);
}
</script>
<script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script> <script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
</html> </html>