mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-06 15:45:54 -05:00
Site redesign
This commit is contained in:
parent
5b0323b3db
commit
ccda42a32c
4 changed files with 86 additions and 97 deletions
110
index.html
110
index.html
|
|
@ -19,71 +19,77 @@
|
|||
<div class="content">
|
||||
<div class="main-text">
|
||||
<h1 class="title">I'm Hamza Nasher-Alneam</h1>
|
||||
<em class="subtitle">A high school with an interest in software and system management</em>
|
||||
<br><br>
|
||||
<h2 id="about-me">About me</h2>
|
||||
<p>I'm a high school student in the United States. When I have time, I enjoy writing code or messing around with Linux and servers. Fedora KDE btw.</p>
|
||||
<p class="subtitle">A high school with an interest in software and system management</p>
|
||||
<br>
|
||||
<h2 id="work">Work</h2>
|
||||
<p>With school starting again, it's difficult to find time to work on any projects, but over the summer I was able to work on some projects, the most prominent among them being <a href="https://fetchcv.hnasheralneam.dev/">FetchCv</a>, a developer profile site that I'm working on with a <a href="https://github.com/Urdons/">friend</a>. If you want to see what project I'm working on this week, it'll be up on my <a href="https://github.com/hnasheralneam">GitHub</a>.</p>
|
||||
<p>Recently, I've been working on a server, an old desktop from around 2010. It's running Kubuntu, because for some reason I decided a desktop OS would be great for a server. Now I'm trying to self-host everything, from photo backup with Immich to file backup with Rysnc to AI with Ollama (yes on a server with 4gb of memory), along with a self-hosted <a href="https://git.hnasheralneam.dev/">Forgejo</a> instance. Everything's up on my website at <a href="https://hnasheralneam.dev">hnasheralneam.dev</a>.</p>
|
||||
<p>Another small tool I made is <a href="activity-log/">Activity Log</a>, a time tracking tool with graphs.</p>
|
||||
<br>
|
||||
<h2 id="workflow">Tools</h2>
|
||||
<p>The language I'll use depends on the project, but I'm relativly proficient at JavaScript, Python, and Java. When I'm writing Java I'll use IDEA, but for anything else it's VS Code.</p>
|
||||
<p>Keyboard layouts are programmer's dvorak (~100wpm) and arabic 101 (~15wpm).</p>
|
||||
<br>
|
||||
<h2>Achievements</h2>
|
||||
<p><a href="https://github.com/Urdons">Urdons</a> and I won <b>first place</b> and the technical award at the MAGIC STEP Challenge! Here is our <a href="https://github.com/FetchCV/fetchcv">project</a> and <a href="https://docs.google.com/presentation/d/1i0Ufa3MRJhdeG6oTuq_ee8EPQ2ZBzV3qKtWBHWU25Wc/edit?usp=sharing">presentation</a>. <i>February 24 2024</i></p>
|
||||
<p>Our school robotics team got into the VEX Over Under state championship! <i>February 11 2024</i></p>
|
||||
<p><a href="https://github.com/tildejustin">Justin</a> 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>
|
||||
<br>
|
||||
<h2 id="funsies">Fun stuff</h2>
|
||||
<p><a href="documents/developer_jokes.pdf">Developer jokes!</a></p>
|
||||
<div class="funsies">
|
||||
<p>Change the website color theme</p>
|
||||
<button onclick="changeTheme()">Random</button>
|
||||
<button onclick="changeThemeHex()">Hex code</button>
|
||||
<div>
|
||||
<h2 id="about-me">About me</h2>
|
||||
<p>I'm a high school student in the United States. When I have time, I enjoy writing unoptimized code or messing around with Linux and servers. Fedora KDE btw.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thoughts-preview">
|
||||
<a href="/thoughts.html">
|
||||
<br>
|
||||
<div>
|
||||
<h2 id="work">Work</h2>
|
||||
<p>With school starting again, it's difficult to find time to work on any projects, but over the summer I was able to work on some projects, the most prominent among them being <a href="https://fetchcv.hnasheralneam.dev/">FetchCv</a>, a developer profile site that I'm working on with a <a href="https://github.com/Urdons/">friend</a>. If you want to see what project I'm working on this week, it'll be up on my <a href="https://github.com/hnasheralneam">GitHub</a>.
|
||||
</p>
|
||||
<p>Recently, I've been working on a server, an old desktop from around 2010. It's running Kubuntu, because for some reason I decided a desktop OS would be great for a server. Now I'm trying to self-host everything, from photo backup with Immich to file backup with Rysnc to AI with Ollama (yes on a server with 4gb of memory), along with a self-hosted <a href="https://git.hnasheralneam.dev/">Forgejo</a> instance. Everything's up on my website at <a href="https://hnasheralneam.dev">hnasheralneam.dev</a>.</p>
|
||||
<p>A small tool I've made is <a href="activity-log/">Activity Log</a>, a time tracking tool with graphs.</p>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<h2>Achievements</h2>
|
||||
<p><a href="https://github.com/Urdons">Urdons</a> and I won <b>first place</b> and the technical award at the MAGIC STEP Challenge! Here is our <a href="https://github.com/FetchCV/fetchcv">project</a> and <a href="https://docs.google.com/presentation/d/1i0Ufa3MRJhdeG6oTuq_ee8EPQ2ZBzV3qKtWBHWU25Wc/edit?usp=sharing">presentation</a>.
|
||||
<i>February 24 2024</i></p>
|
||||
<p>Our school robotics team got into the VEX Over Under state championship! <i>February 11 2024</i></p>
|
||||
<p><a href="https://github.com/tildejustin">Justin</a> 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>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<h2 id="funsies">Fun stuff</h2>
|
||||
<p><a href="documents/developer_jokes.pdf">Developer jokes!</a></p>
|
||||
<div class="funsies">
|
||||
<p>Change the website color theme</p>
|
||||
<button onclick="changeTheme()">Random</button>
|
||||
<button onclick="changeThemeHex()" class="hex-code-label">Hex code</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="thoughts-preview">
|
||||
<h2>Thoughts</h2>
|
||||
</a>
|
||||
|
||||
<a href="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>Didn't update this for the RCS announcement, but that'll take a while to come into effect and still won't change much socially in the U.S.</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>
|
||||
<a href="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>Didn't update this for the RCS announcement, but that'll take a while to come into effect and still won't
|
||||
change much socially in the U.S.</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>
|
||||
|
||||
<br><br>
|
||||
<div class="footer">
|
||||
<div>
|
||||
<h2>Find me</h2>
|
||||
<h2>Social</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>
|
||||
<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>
|
||||
|
|
|
|||
1
main.js
1
main.js
|
|
@ -15,6 +15,7 @@ function changeThemeHex() {
|
|||
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)) {
|
||||
setThemeColor(hex);
|
||||
document.querySelector(".hex-code-label").textContent = "Hex code: " + hex;
|
||||
} else alert("Invalid hex code!");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,22 @@ body {
|
|||
transition: .2s;
|
||||
}
|
||||
|
||||
.main-text {
|
||||
margin: auto;
|
||||
max-width: 750px;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.main-text p {
|
||||
margin: .5rem 2rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 2rem 2rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-style: italic;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -49,10 +60,6 @@ h3 {
|
|||
margin: .75rem 0 0 2rem;
|
||||
}
|
||||
|
||||
.main-text p {
|
||||
margin: .5rem 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: .2rem .5rem;
|
||||
font-size: 1.1rem;
|
||||
|
|
@ -77,48 +84,31 @@ a {
|
|||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 70% calc(30% - 2em);
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.main-text {
|
||||
max-width: 750px;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.thoughts-preview {
|
||||
padding-top: 8.5em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.thoughts-preview a {
|
||||
color: initial;
|
||||
text-decoration: initial;
|
||||
}
|
||||
|
||||
.thoughts-preview h2 {
|
||||
margin: 0 0 .4em -.1em;
|
||||
font-family: sans-serif;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.thoughts-preview h2:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.thoughts-preview h2:before {
|
||||
display: none;
|
||||
.thoughts-bit p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.thoughts-bit {
|
||||
padding: .8em 0;
|
||||
border-bottom: .1em solid #bbb;
|
||||
padding: 1rem;
|
||||
border-radius: .5em;
|
||||
margin: .4rem 1rem;
|
||||
border: solid transparent .2rem;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
.thoughts-bit.first-of-class {
|
||||
border-top: .1em solid #bbb;
|
||||
.thoughts-bit:hover {
|
||||
background-color: #aaaaaa20;
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
|
||||
.thoughts-bit:hover h4 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.thoughts {
|
||||
|
|
@ -180,14 +170,6 @@ a {
|
|||
margin-right: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
.thoughts-preview {
|
||||
margin: 0 .6em;
|
||||
padding: 1em 1.4em;
|
||||
background-color: #dddddd20;
|
||||
border-radius: .4em;
|
||||
width: calc(100% - 2em);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ a {
|
|||
|
||||
/* Footer styles */
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
padding: 3rem 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
background-color: #222;
|
||||
|
|
|
|||
Loading…
Reference in a new issue