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:ebb8568ca107a7c3d81d4307bb2f90c64529b750
Branches Tags
hnasheralneam:master
hnasheralneam:redirect
..
compare: hnasheralneam:3f7805278d1ea669cb9626f0cd3591732af3fb61
Branches Tags
hnasheralneam:master
hnasheralneam:redirect

No commits in common. "ebb8568ca107a7c3d81d4307bb2f90c64529b750" and "3f7805278d1ea669cb9626f0cd3591732af3fb61" have entirely different histories.
ebb8568ca1 ... 3f7805278d

13 changed files with 130 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

13
guestbook.html
View file

@ -1,13 +1,15 @@
<!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/phil.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/race.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>
@ -20,12 +22,14 @@
<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(); getAll()">Show all messages</button> <button onclick="this.remove(); showAll()">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>
@ -35,7 +39,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" maxlength="500"></textarea><br> <textarea type="text" name="message" placeholder="your post"></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)">
@ -43,6 +47,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
<br><br> <br><br>
@ -50,7 +56,6 @@
<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
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 777 B

BIN
icons/race.png Normal file
View file

Binary file not shown.
Side by side

After

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/phil.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/race.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,7 +12,9 @@
<title>Hamza Nasher-Alneam</title> <title>Hamza Nasher-Alneam</title>
</head> </head>
<body> <body>
<div class="progress-parent"><div class="progress"></div></div> <div class="progress-parent">
<div class="progress"></div>
</div>
<br><br> <br><br>
<div class="content"> <div class="content">
@ -62,18 +64,63 @@
<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>
<br><br> <!-- <div class="thoughts-preview">
<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,16 +1,24 @@
<div class="menu"> <div class="menu">
<div> <div>
<a class="item" href="index.html" title="home"> <div class="item">
<img src="icons/home.svg" alt="home"> <a href="index.html" title="home">
</a> <img src="icons/home.svg" alt="home">
<a class="item" href="projects.html" title="projects"> </a>
<img src="icons/web_stories.svg" alt="projects"> </div>
</a> <div class="item">
<a class="item" href="thoughts.html" title="thoughts"> <a href="projects.html" title="projects">
<img src="icons/rss_feed.svg" alt="thoughts"> <img src="icons/web_stories.svg" alt="projects">
</a> </a>
<a class="item" href="guestbook.html" title="guestbook"> </div>
<img src="icons/developer_guide.svg" alt="guestbook"> <div class="item">
</a> <a href="thoughts.html" title="thoughts">
<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/phil.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/race.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,7 +21,6 @@
<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
View file

@ -1,24 +0,0 @@
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,10 +5,6 @@ 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!";
} }
@ -62,4 +58,12 @@ function toggleElement(elementName) {
element.style.opacity = 0; element.style.opacity = 0;
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,3 +1,5 @@
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);
@ -18,6 +20,8 @@ function changeThemeHex() {
} }
} }
function resetTheme() { function setThemeColor(color) {
setThemeColor("#f69b46"); document.documentElement.style.setProperty("--theme-color", color);
let metaThemeColor = document.querySelector("meta[name=theme-color]");
metaThemeColor.setAttribute("content", color);
} }

11
scripts/script.js
View file

@ -1,11 +0,0 @@
// 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,73 +1,3 @@
* {
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;
@ -79,6 +9,11 @@ a {
.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;
} }
@ -91,7 +26,7 @@ a {
margin: 0 .3rem; margin: 0 .3rem;
min-height: 14rem; min-height: 14rem;
min-width: 20rem; min-width: 20rem;
max-width: 24rem; max-width: 25rem;
/* 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: .3rem; left: .2rem;
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/phil.png"> <link rel="shortcut icon" type="image/x-icon" href="icons/race.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,7 +40,31 @@
<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>
<script src="scripts/copypopup.js"></script> 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);
}
</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>