hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2024-11-07 08:05:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Text updates, style and readability improvements

Browse source
This commit is contained in:
Hamza Nasher-Alneam 2024-02-12 22:02:10 -05:00
parent 0b5b3bce30
commit ad265bc699
6 changed files with 32 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Documents/developer_jokes.pdf Normal file
View file

Binary file not shown.

10
Styles/home.css
View file

@ -12,7 +12,10 @@ body {
.title { .title {
margin: 2rem 2rem 1rem 2rem; margin: 2rem 2rem 1rem 2rem;
text-align: center; }
.subtitle {
margin: 0 2rem;
} }
h2 { h2 {
@ -25,7 +28,7 @@ h2 {
h2::before { h2::before {
content: ""; content: "";
position: absolute; position: absolute;
top: .5rem; top: .3rem;
left: -.6rem; left: -.6rem;
height: 1rem; height: 1rem;
width: .25rem; width: .25rem;
@ -81,12 +84,13 @@ a {
} }
.main-text { .main-text {
max-width: 900px; max-width: 750px;
transition: .2s; transition: .2s;
} }
.thoughts-preview { .thoughts-preview {
padding-top: 8.5em; padding-top: 8.5em;
margin-right: 2em;
} }
.thoughts-preview a { .thoughts-preview a {

78
Styles/roadmap.css
View file

@ -1,78 +0,0 @@
body {
background-color: #ffbbbb;
color: #fff;
}
.header {
background-color: #663399;
}
.tabswitcher {
display: grid;
grid-template-columns: auto auto auto;
background-color: #222;
text-align: center;
}
.tabswitcherbtn {
padding: .8em 0;
display: inline-block;
background-color: #222;
font: 1em sans-serif;
transition: .2s;
}
.activeswitcher {
background-color: #444;
}
.active-section { background-color: #00ff00; }
.timeline-section { background-color: #00ffff; }
.roadmap-section { background-color: #ffff00; }
.activetab { background-color: #ffffff; }
.sections {
padding: 2em 0;
overflow: auto;
white-space: nowrap;
overflow-x: hidden;
}
.sections::-webkit-scrollbar { display: none; }
.section {
box-sizing: border-box;
display: inline-block;
width: 100vw;
white-space: initial;
color: #222;
transition: .05s;
}
.project-block {
padding: 4em 3em;
display: grid;
grid-template-columns: 50% 50%;
background-color: #ddd;
border-bottom: solid .2em #222;
}
.img-parent {
text-align: center;
}
.img-parent img {
max-width: 40vw;
}
.text-block {
background-color: #fff;
}
@media only screen and (max-width: 700px) {
.project-block {
grid-template-columns: auto;
}
}

44
index.html
View file

@ -8,7 +8,7 @@
<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">
<title>Hamza N's Website</title> <title>Hamza Nasher-Alneam</title>
</head> </head>
<body> <body>
<div class="progress-parent"> <div class="progress-parent">
@ -18,13 +18,14 @@
<div class="content"> <div class="content">
<div class="main-text"> <div class="main-text">
<h1 class="title">I'm Hamza N</h1> <h1 class="title">I'm Hamza Nasher-Alneam</h1>
<center><em>hi there</em></center> <em class="subtitle">A second-generation Syrian immigrant with an interest in computer stuff</em>
<br><br>
<h2 id="about-me">About me</h2> <h2 id="about-me">About me</h2>
<p>I'm a high school student. I spend a lot of time programming. I've mostly done full stack web dev, but am learning Kotlin for Android development, and trying out Godot for the school Game Dev Club. Also in school robotics! Writing C++ for that (doing Vex robotics). Used to use Linux (Kubuntu), waiting to use it again (prob. Fedora). Btw, I use the programmer's dvorak (~100 wpm).</p> <p>I'm a high school student in the United States. When I have time, I like to do programming, which in the past has been mostly full stack web dev. Now, I'm learning Kotlin for Android development, trying out Godot for the school Game Dev Club, and writing C++ code for the school robotics team. I used to run Linux (Kubuntu), and am waiting to use it again (prob. KDE spin of Fedora).</p>
<br> <br>
<h2 id="work">Work</h2> <h2 id="work">Work</h2>
<p>Like I mentioned above, I've been just experimenting around recently. Working on a bunch of small projects in Python, GDscript, Java, and Kotlin. Until I find something good enough to stick with, because web dev doesn't sound great as a career choice. If you want to see whatever project I'm working on this week, it'll be up on my GitHub.</p> <p>As hinted above, I've been just experimenting around recently. Working on a bunch of small projects in Python, GDscript, Java, and Kotlin, until I find something good enough to stick with. If you want to see whatever project I'm working on this week, it'll be up on my <a href="https://github.com/hnasheralneam">GitHub</a>.</p>
<p>A ambitious project I was working on in JavaScript was <a href="https://github.com/hnasheralneam/git-organized">Git Organized</a>, a project management and planning tool; web hosting isn't working right now, but you can set it up yourself if you like.</p> <p>A ambitious project I was working on in JavaScript was <a href="https://github.com/hnasheralneam/git-organized">Git Organized</a>, a project management and planning tool; web hosting isn't working right now, but you can set it up yourself if you like.</p>
<h3>Other work</h3> <h3>Other work</h3>
<p>Another small tool I made is <a href="activity-log/">Activity Log</a>, which is meant to be used for tracking time. It's a really cool project, with a nice design and charts and everything. I'm trying to make this an Android app.</p> <p>Another small tool I made is <a href="activity-log/">Activity Log</a>, which is meant to be used for tracking time. It's a really cool project, with a nice design and charts and everything. I'm trying to make this an Android app.</p>
@ -32,34 +33,31 @@
<p>My really old work includes some games; they are still up on my GitHub.</p> <p>My really old work includes some games; they are still up on my GitHub.</p>
<br> <br>
<h2 id="workflow">Tools</h2> <h2 id="workflow">Tools</h2>
<p>When working with JavaScript: Node.js, Ejs, Tailwind CSS, and MongoDB</p> <p>Languages: JavaScript, Java, Python, GDscript, Kotlin, C++</p>
<p>Android development: Kotlin, Jetpack Compose, Android Studio. The built in Jetbrains editor is actually really nice</p> <p>IDEs: VS Code, Android Studio, Godot built-in, Eclipse, VEXcode (sadly)</p>
<p>Game development: Godot, GDscript</p>
<p>Python, sometimes, when I can't avoid it. The worst parts are how varibles are declared and the dependance on indentation</p>
<p>Some Java, with Eclipse because Comp Sci A. The type checking in Java is actually really nice</p>
<h3>Software</h3> <h3>Software</h3>
<p>Browser of choice is Firefox, because there is enough chromium in the world.</p> <p>Browser of choice is Firefox, because there is enough chromium in the world.</p>
<p>IDE depends on the language, but usually VS code.</p> <p>Programmer's dvorak (~100 wpm).</p>
<p>Blender, Kdenlive, Simplenote, Inkscape, Gimp</p> <p>For operating systems, I have to use Windows now, but I hate it every day. As soon as possible, I'm switching to Linux and never looking back. I have used Linux and it is like a dream; one day I'll use it again.</p>
<p>Trying to switch to more open source stuff, like libreoffice. It's not bad, just having everything online is helpful because I can't exactly install libreoffice write on a school chromebook.</p> <h3>Opinions</h3>
<p>For operating systems, I have to use Windows now, but hate it with a passion. As soon as possible, I'm switching to Linux and never looking back. I installed Asahi on an Apple Silicon Macbook; some stuff didn't work. But everything else is so much faster.</p> <p>I use Python, sometimes, when I can't avoid it. The worst parts are how variables are declared and the dependance on indentation.</p>
<br> <p>The type checking in Java is actually really nice.</p>
<h2>Strange behavior</h2> <p>I will use only open source when possible.</p>
<h3>Empty start menu, task bar, and desktop</h3> <p>There is nothing pinned on my desktop or taskbar; I search when I need something.</p>
<p>I know what app I need, and the fastest way to find it is with a quick search. Having a good launcher that searches only through apps and files, not the web, is a great way to find everything I need on my computer. And I do like to keep everything on my computer, with only Google docs and code backed up to GitHub staying in the cloud, and I plan on moving from docs to libre office. Keeping a clean desktop, start menu, and file system is important to find what I need. What would be great is if the search was much better so I could look through my files without folder searching, but I'll just have to wait until I switch to Linux.</p>
<br> <br>
<h2>More</h2> <h2>More</h2>
<p>Developer jokes! <a href="https://docs.google.com/document/d/e/2PACX-1vT9Kvy57jQ1nlwBzSdQS_hvxl6CxbG-pRgtHLLJtjMjuM371riglrc_2k61b89VPrd3HNzkh5Ahb04w/pub">Check them out</a></p> <p>Developer jokes! <a href="Documents/developer_jokes.pdf">Check them out</a></p>
<p>See my friend <a href="https://github.com/tildejustin">tildejustin</a>'s GitHub. It's a lot of minecraft stuff</p> <p>See my friend <a href="https://github.com/tildejustin">tildejustin</a>'s GitHub. It's a lot of minecraft stuff</p>
<br> <br>
<h2>Achievements</h2> <h2>Achievements</h2>
<p>Justin and I won third place at the MAGIC cybersecurity CTF! Here are <a href="https://magicinc.org/announcing-winners-of-ctf-14">the results</a>.</p> <p>Justin and I won third place at the MAGIC cybersecurity CTF! Here are <a href="https://magicinc.org/announcing-winners-of-ctf-14">the results</a>. <i>April 20 2023</i></p>
<p>Our school robotics team got into the VEX state championship! <i>February 11 2024</i></p>
<br> <br>
<h2 id="funsies">Fun stuff</h2> <h2 id="funsies">Fun stuff</h2>
<div class="funsies"> <div class="funsies">
<p>Change the website color theme</p> <p>Change the website color theme</p>
<button onclick="changeThme()">Random</button> <button onclick="changeTheme()">Random</button>
<button onclick="changeThmeHex()">Hex code</button> <button onclick="changeThemeHex()">Hex code</button>
</div> </div>
</div> </div>
<div class="thoughts-preview"> <div class="thoughts-preview">
@ -95,7 +93,7 @@
<div class="footer"> <div class="footer">
<div> <div>
<h2>Find me</h2> <h2>Find me</h2>
<p>My Github -> <a href="https://github.com/hnasheralneam">GitHub</a></p> <p>Github -> <a href="https://github.com/hnasheralneam">GitHub</a></p>
<p class="faded-footer">A lot of my work is on GitHub</p> <p class="faded-footer">A lot of my work is on GitHub</p>
<p>Replit -> <a href="https://replit.com/@hnasheralneam">Replit</a></p> <p>Replit -> <a href="https://replit.com/@hnasheralneam">Replit</a></p>
<p class="faded-footer">Some smaller projects</p> <p class="faded-footer">Some smaller projects</p>

10
main.js
View file

@ -1,18 +1,16 @@
console.log("JavaScript Connected!"); console.log("hello");
console.log("Nice to see you :)");
console.log("Have a great day! -حمزة");
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);
function changeThme() { function changeTheme() {
let color = (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, "0"); let color = (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, "0");
setThemeColor(`#${color}`); setThemeColor(`#${color}`);
} }
function changeThmeHex() { function changeThemeHex() {
let hex = prompt("Enter valid hexidecimal code :)"); let hex = prompt("Enter valid hexadecimal code :)");
if (hex) { if (hex) {
if (hex.charAt(0) != "#") hex = `#${hex}`; if (hex.charAt(0) != "#") hex = `#${hex}`;
if (/^#[0-9A-F]{3}$/i.test(hex) || /^#[0-9A-F]{6}$/i.test(hex) || /^#[0-9A-F]{8}$/i.test(hex)) { if (/^#[0-9A-F]{3}$/i.test(hex) || /^#[0-9A-F]{6}$/i.test(hex) || /^#[0-9A-F]{8}$/i.test(hex)) {

82
roadmap.html
View file

@ -1,82 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<meta name="description" content="The developer Editor Rust's personal website!">
<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=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/roadmap.css">
<title>Roadmap | Editor Rust</title>
</head>
<body>
<div class="header">
<h1>Projects</h1>
<h2>What I'm working on</h2>
<a href="/">go home</a>
<div class="tabswitcher">
<div class="tabswitcherbtn switcher-active activeswitcher" onclick="switchtabto('active')">Active</div>
<div class="tabswitcherbtn switcher-timeline" onclick="switchtabto('timeline')">Timeline</div>
<div class="tabswitcherbtn switcher-roadmap" onclick="switchtabto('roadmap')">Roadmap</div>
</div>
</div>
<div class="sections">
<div class="section active-section activetab" id="active-section">
one
<p>hi</p>
</div>
<div class="section timeline-section" id="timeline-section">
<div class="project-block">
<div class="img-parent">
<img src="https://goldrush.cyclic.app/Images/astroid.png" alt="Gold Rush astroid">
</div>
<div class="text-block">
<h3 class="date">Dec 7 2020</h3>
<h2 class="title">Gold Rush</h2>
<p class="desc">hmfmdnnsh</p>
</div>
</div>
<div class="project-block">
<div class="text-block">
<h3 class="date">Jan 1 2021</h3>
<h2 class="title">Vegetable Dash</h2>
<p class="desc">keuiahshbm</p>
</div>
<div class="img-parent">
<img src="https://vegetabledash.cyclic.app/Images/Plots/plot.png" alt="Vegetable Dash plot">
</div>
</div>
</div>
<div class="section roadmap-section" id="roadmap-section">
three
<p>hi</p>
</div>
</div>
<div class="footer">
<div>
<h2>Find me</h2>
<p>My Github -> <a href="https://github.com/editorrust">GitHub</a></p>
<p class="faded-footer">GitHub is great, I host all my projects on it</p>
<p>Stack Overflow -> <a href="https://stackoverflow.com/users/14818357/editor-rust">Stack Overflow</a></p>
<p class="faded-footer">I kinda hate Stack Overflow because they blocked me from doing anything</p>
<p>CodePen -> <a href="https://codepen.io/editorrust">CodePen</a></p>
<p class="faded-footer">I don't use this account very often, but here it is</p>
</div>
<div>
<h2>Email me</h2>
<p>My developer account -> <a href="mailto:editorrust@gmail.com">editorrust@gmail.com</a></p>
<p>My personal account -> <a href="mailto:hamza.elabi1@gmail.com">hamza.elabi1@gmail.com</a></p>
</div>
</div>
</body>
<script>
function switchtabto(tab) {
document.querySelector(".activetab").classList.remove("activetab");
document.querySelector(`.${tab}-section`).classList.add("activetab");
document.querySelector(".activeswitcher").classList.remove("activeswitcher");
document.querySelector(`.switcher-${tab}`).classList.add("activeswitcher");
document.querySelector(`#${tab}-section`).scrollIntoView({ behavior: "smooth" });
}
</script>
</html>