hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2025-05-13 10:25:20 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add projects page, move guestbook to new page, add navigation menu, made menu and footer partials

Browse source
This commit is contained in:
Hamza Nasher-Alneam 2025-05-05 12:04:00 -04:00
parent bea621a82d
commit 3f7805278d
27 changed files with 521 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
documents/developer_jokes.pdf
View file

Binary file not shown.

BIN
documents/resume.pdf Normal file
View file

Binary file not shown.

BIN
documents/situation_in_gaza.pdf
View file

Binary file not shown.

63
guestbook.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46">
<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 rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/guestbook.css">
<title>Guestbook | Hamza Nasher-Alneam</title>
</head>
<body>
<div class="progress-parent">
<div class="progress"></div>
</div>
<br><br>
<div class="content" style="min-height: 60vh">
<div class="main-text">
<div>
<!-- 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>
<br><br>
<div w3-include-html="partials/footer.html"></div>
<div w3-include-html="partials/menu.html"></div>
</body>
<script src="scripts/include-html.js"></script>
<script defer src="https://umami.hnasheralneam.dev/script.js"
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
<script src="https://hnasheralneam.github.io/digit/main.js"></script>
<script src="scripts/guestbook.js"></script>
</html>

1
icons/developer_guide.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-640v560h560v-560h-80v245q0 12-10 17.5t-20-.5l-49-30q-10-6-21-6t-21 6l-49 30q-10 6-20 .5T480-515v-245H200Zm0 560v-560 560Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 368 B

1
icons/home.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 441 B

1
icons/rss_feed.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200q0-33 23.5-56.5T200-280q33 0 56.5 23.5T280-200q0 33-23.5 56.5T200-120Zm540 0q-26 0-43.5-19T676-184q-11-97-52.5-181.5T516-516q-66-66-150.5-107.5T184-676q-26-3-45-20.5T120-740q0-26 18-42.5t43-14.5q123 11 230.5 62.5T601-601q82 82 133.5 189.5T797-181q2 25-14.5 43T740-120Zm-240 0q-25 0-43-17.5T434-180q-9-49-31.5-90.5T346-346q-34-34-75.5-56.5T180-434q-25-5-42.5-23T120-500q0-26 18-43t43-13q73 10 136.5 42.5T431-431q50 50 82.5 113.5T556-181q4 25-13 43t-43 18Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 611 B

1
icons/web_stories.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M680-160v-640q33 0 56.5 23.5T760-720v480q0 33-23.5 56.5T680-160ZM160-80q-33 0-56.5-23.5T80-160v-640q0-33 23.5-56.5T160-880h360q33 0 56.5 23.5T600-800v640q0 33-23.5 56.5T520-80H160Zm680-160v-480q25 0 42.5 17.5T900-660v360q0 25-17.5 42.5T840-240Zm-680 80h360v-640H160v640Zm0-640v640-640Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 410 B

BIN
images/projects/activitylog.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
images/projects/fetchcv.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 221 KiB

BIN
images/projects/gitorganized.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
images/projects/gitorganizedalt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
images/projects/goldrush.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
images/projects/mediumrare.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
images/projects/produceddemand.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 184 KiB

BIN
images/projects/sleepwalker.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 383 KiB

BIN
images/projects/vegetabledash.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

35
index.html
View file

@ -67,7 +67,7 @@
</div>
<br><br>
<!-- Guestbook -->
<div class="guestbook">
<!-- <div class="guestbook">
<h2 class="guestbook-title">Guest book - leave a note!</h2>
<div class="messages"></div>
<div class="show-all-messages">
@ -86,9 +86,9 @@
</form>
</div>
</div>
</div> -->
</div>
</div>
<div class="thoughts-preview">
<!-- <div class="thoughts-preview">
<h2>Thoughts</h2>
<a hre="articles/plasma-widgets.html#publish-widget">
<div class="thoughts-bit"
@ -98,7 +98,7 @@
hopefully!</p>
</div>
</a>
<!-- <a href="thoughts.html#imessage-lockin">
<a href="thoughts.html#imessage-lockin">
<div class="thoughts-bit">
<h4>The social issues with iMessage</h4>
<i>Dec 1 2022</i>
@ -111,29 +111,18 @@
<i>Dec 1 2022</i>
<p>I mention the impracticalities in more words than strictly necessary.</p>
</div>
</a> -->
</div>
</a>
</div> -->
</div>
</div>
<br><br>
<div class="footer">
<div>
<h2>Social</h2>
<p>GitHub -> <a href="https://github.com/hnasheralneam">@hnasheralneam</a></p>
<p class="faded-footer">See what I'm working on</p>
<p>LinkedIn - > <a href="https://www.linkedin.com/in/hamza-nasher-alneam-8b6b6a338/">LinkedIn</a></p>
<p class="faded-footer">For professional connections</p>
</div>
<div>
<h2>Contact</h2>
<p>Email account -> <a href="mailto:hnasheralneam@gmail.com">hnasheralneam@gmail.com</a></p>
<p>Discord account -> <a href="#">namegoes.here</a></p>
</div>
</div>
<div w3-include-html="partials/footer.html"></div>
<div w3-include-html="partials/menu.html"></div>
</body>
<script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
<script src="main.js"></script>
<script src="scripts/include-html.js"></script>
<script src="scripts/main.js"></script>
<script src="https://hnasheralneam.github.io/digit/main.js"></script>
<script src="scripts/guestbook.js"></script>
<script defer src="https://umami.hnasheralneam.dev/script.js"
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
</html>

14
partials/footer.html Normal file
View file

@ -0,0 +1,14 @@
<div class="footer">
<div>
<h2>Social</h2>
<p>GitHub -> <a href="https://github.com/hnasheralneam">@hnasheralneam</a></p>
<p class="faded-footer">See what I'm working on</p>
<p>LinkedIn - > <a href="https://www.linkedin.com/in/hnasheralneam">LinkedIn</a></p>
<p class="faded-footer">For professional connections</p>
</div>
<div>
<h2>Contact</h2>
<p>Email -> <a href="mailto:hnasheralneam@gmail.com">hnasheralneam@gmail.com</a></p>
<p>Discord -> <a href="#">namegoes.here</a></p>
</div>
</div>

24
partials/menu.html Normal file
View file

@ -0,0 +1,24 @@
<div class="menu">
<div>
<div class="item">
<a href="index.html" title="home">
<img src="icons/home.svg" alt="home">
</a>
</div>
<div class="item">
<a href="projects.html" title="projects">
<img src="icons/web_stories.svg" alt="projects">
</a>
</div>
<div class="item">
<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>

27
projects.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46">
<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 rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/projects.css">
<title>Projects | Hamza Nasher-Alneam</title>
</head>
<body>
<div class="carousel">
<h2 class="title">My Projects</h2>
<div class="carousel-inner"></div>
</div>
<div w3-include-html="partials/footer.html"></div>
<div w3-include-html="partials/menu.html"></div>
</body>
<script src="scripts/include-html.js"></script>
<script src="scripts/projects.js"></script>
<script defer src="https://umami.hnasheralneam.dev/script.js"
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
</html>

28
scripts/include-html.js Normal file
View file

@ -0,0 +1,28 @@
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) { elmnt.innerHTML = this.responseText; }
if (this.status == 404) { elmnt.innerHTML = "Page not found."; }
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
includeHTML();

0
main.js → scripts/main.js
View file

139
scripts/projects.js Normal file
View file

@ -0,0 +1,139 @@
const data = [{
title: "Gold Rush",
description: "A web-based incremental game about collecting gold",
date: "2019",
image: "../images/projects/goldrush.png",
link: "https://goldrush.hnasheralneam.dev",
github: "https://github.com/hnasheralneam/gold-rush"
},
{
title: "Vegetable Dash",
description: "A farming game built for the browser",
date: "2020",
image: "../images/projects/vegetabledash.png",
link: "https://vegetabledash.hnasheralneam.dev",
github: "https://github.com/hnasheralneam/vegetable-dash"
},
{
title: "Git Organized",
description: "A project management app built around managing cards",
date: "2022",
image: "../images/projects/gitorganized.png",
link: "https://gitorganized.hnasheralneam.dev",
github: "https://github.com/hnasheralneam/git-organized"
},
{
title: "FetchCV",
description: "Your centralized developer profile",
date: "2024",
image: "../images/projects/fetchcv.png",
link: "https://fetchcv.hnasheralneam.dev",
github: "https://github.com/FetchCV/fetchcv"
},
{
title: "Activity Log",
description: "A time tracking application",
date: "2022",
image: "../images/projects/activitylog.png",
link: "https://activitylog.hnasheralneam.dev",
github: "https://github.com/hnasheralneam/activity-log"
},
{
title: "Medium Rare",
description: "A multiplayer co-op cooking game made for a hackathon",
date: "2024",
image: "../images/projects/mediumrare.png",
link: "https://mediumrare.hnasheralneam.dev/",
github: "https://github.com/hnasheralneam/medium-rare"
},
{
title: "Sleepwalker",
description: "A terminal-looking web game, built for an overnight hackathon",
date: "2024",
image: "../images/projects/sleepwalker.png",
link: "https://sleepwalker.quest",
github: "https://github.com/MichaByte/sleepwalker"
},
{
title: "Produced Demand",
description: "A bus maanagement game",
date: "2025",
image: "../images/projects/produceddemand.png",
link: "https://hnasheralneam.itch.io/produced-demand",
github: "https://github.com/produced-demand/produced-demand"
}
];
data.forEach((item) => {
let element = document.createElement("div");
element.classList.add("carousel-item");
element.innerHTML = `
<div class="carousel-item-inner">
<img src="${item.image}">
<div class="text-items">
<h2>${item.title}</h2>
<p>${item.description}</p>
<p class="more">
<span class="started">Started ${item.date}</span>&nbsp;|&nbsp;
<a href="${item.link}">Try it</a>&nbsp;|&nbsp;
<a href="${item.github}">GitHub Repository</a>
</p>
</div>
</div>`;
document.querySelector(".carousel-inner").append(element);
});
// + prayertimes
const items = document.querySelectorAll(".carousel-item");
let activeIndex = 1;
let carouselLoop;
let lastChange = Date.now();
function updateCarousel() {
const total = items.length;
items.forEach((item, index) => {
item.classList.remove("prev", "active", "next", "hidden-left", "hidden-right");
const diff = (index - activeIndex + total) % total;
if (index === activeIndex) item.classList.add("active");
else if (diff === total - 1) item.classList.add("prev");
else if (diff === 1) item.classList.add("next");
else if (diff < total / 2) item.classList.add("hidden-right");
else item.classList.add("hidden-left");
});
}
document.querySelector(".carousel").addEventListener("click", (event) => {
if (event.target.parentElement.parentElement.classList.contains("next")) {
if ((Date.now() - lastChange) < 500) return;
nextSlide();
resetCarouselLoop();
lastChange = Date.now();
} else if (event.target.parentElement.parentElement.classList.contains("prev")) {
if ((Date.now() - lastChange) < 500) return;
lastSlide();
resetCarouselLoop();
lastChange = Date.now();
}
});
function nextSlide() {
activeIndex = (activeIndex + 1) % items.length;
updateCarousel();
}
function lastSlide() {
activeIndex = (activeIndex - 1 + items.length) % items.length;
updateCarousel();
}
updateCarousel();
carouselLoop = setInterval(nextSlide, 2000);
function resetCarouselLoop() {
lastChange = Date.now();
clearInterval(carouselLoop);
carouselLoop = setInterval(nextSlide, 2000);
}

145
styles/projects.css Normal file
View file

@ -0,0 +1,145 @@
.carousel {
height: 100vh;
width: 100vw;
padding: 0 0;
overflow: hidden;
}
.carousel-inner {
position: relative;
width: 100%;
max-width: 900px;
height: 300px;
margin: auto;
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
scrollbar-width: none;
}
.carousel-inner::-webkit-scrollbar {
display: none;
}
.carousel-item {
position: absolute;
top: 10%;
left: 50%;
margin: auto;
height: 90vh;
width: 85vh;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
transition: 0.6s;
opacity: 0.1;
}
.carousel-item.active {
transform: translateX(-50%) scale(1);
opacity: 1;
z-index: 3;
}
.carousel-item.prev {
transform: translateX(-120%) scale(0.8);
opacity: 0.8;
filter: blur(2px);
z-index: 2;
}
.carousel-item.next {
transform: translateX(20%) scale(0.8);
opacity: 0.8;
filter: blur(2px);
z-index: 2;
}
.carousel-item.hidden-left {
transform: translateX(-120%) scale(0.8);
opacity: 0;
pointer-events: none;
z-index: 1;
}
.carousel-item.hidden-right {
transform: translateX(20%) scale(0.8);
opacity: 0;
pointer-events: none;
z-index: 1;
}
/* .carousel-item:hover {
transform: scale(1.05);
}
.carousel-item-last:hover,
.carousel-item-next:hover {
transform: scale(0.95);
} */
.carousel-item-inner {
background-color: #f5f5f5;
border-radius: 2rem;
padding: 0.5rem 0.5rem 1.5rem;
transition: 0.2s;
border: 0.2rem solid #ddd;
}
.carousel-item-inner:hover img {
box-shadow: 0 0.2rem 0.5rem #111;
transform: translateY(-0.3rem);
}
.carousel-item img {
width: 78vh;
border-radius: 1.6rem;
transition: 0.2s;
}
.carousel-item .text-items {
margin: 1rem 0;
}
.carousel-item h2 a {
text-decoration: none;
cursor: pointer;
}
.carousel-item h2 a:hover {
text-decoration: underline;
}
.carousel-item p {
margin: 0.2rem 0;
color: #222;
}
.title {
text-align: center;
font-size: 5rem;
margin-bottom: -3rem;
color: #333;
text-shadow: 0 0 .2rem #fff, .2rem .2rem cyan,
-.2rem -.2rem magenta;
}
@media (prefers-color-scheme: dark) {
.title {
color: #fff;
text-shadow: 0 0 .2rem #888, .2rem .2rem cyan,
-.2rem -.2rem magenta;
}
.carousel-item-inner {
background-color: #333;
border: 0.2rem solid #666;
}
.carousel-item p {
color: #ddd;
}
}

61
styles/styles.css
View file

@ -76,3 +76,64 @@ a {
background-color: #000;
}
}
/* menu */
.menu {
position: fixed;
top: 0;
left: .2rem;
bottom: 0;
width: 10rem;
display: flex;
justify-items: center;
align-items: center;
transition: .2s;
z-index: 10;
}
.menu:hover {
left: .6rem;
}
.menu .item {
height: 3rem;
width: 3rem;
background-color: #f4f4f4;
border: solid .2rem #ebebeb;
border-radius: 50%;
transition: .2s;
margin: .5rem auto;
display: flex;
justify-content: center;
align-items: center;
line-height: 1em;
}
.menu .item img {
filter: invert(80%);
transition: .2s;
}
.menu .item:hover img {
filter: none;
}
.menu .item:hover {
background-color: var(--theme-color);
transform: scale(1.15);
margin: 1rem auto;
}
@media (prefers-color-scheme: dark) {
.menu .item {
background-color: #333;
border: solid .2rem #444;
}
.menu .item img {
filter: none;
}
}

17
thoughts.html
View file

@ -11,9 +11,7 @@
<title>Thoughts | Hamza Nasher-Alneam</title>
</head>
<body>
<a class="home" href="index.html">Home</a>
<br><br>
<div class="content thoughtsblock">
<div class="article">
<h1 id="imessage-lockin" onclick="copy('imessage-lockin')">iMessage Lockin</h1>
@ -38,19 +36,10 @@
</div>
</div>
<br><br>
<div class="footer">
<div>
<h2>Find me</h2>
<p>Github -> <a href="https://github.com/hnasheralneam">GitHub</a></p>
<p class="faded-footer">Many of my projects are on GitHub</p>
</div>
<div>
<h2>Contact me</h2>
<p>Email account -> <a href="mailto:hnasheralneam@gmail.com">hnasheralneam at google mail</a></p>
<p>Discord account -> <a href="#">namegoes.here</a></p>
</div>
</div>
<div w3-include-html="partials/footer.html"></div>
<div w3-include-html="partials/menu.html"></div>
</body>
<script src="scripts/include-html.js"></script>
<script>
let url = document.location.href;