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

Site text and Design Updated

Browse source
This commit is contained in:
Editor Rust 2023-03-12 15:50:46 +00:00
parent ec474e82db
commit 1c2330453f
4 changed files with 131 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
Styles/home.css
View file

@ -2,6 +2,10 @@
font-family: "Nunito", "Times New Roman", Times, serif; font-family: "Nunito", "Times New Roman", Times, serif;
} }
body {
overflow-x: hidden;
}
.content { .content {
transition: .2s; transition: .2s;
} }
@ -42,7 +46,7 @@ h3 {
margin: .75rem 0 0 2rem; margin: .75rem 0 0 2rem;
} }
p { .main-text p {
margin: .5rem 2rem; margin: .5rem 2rem;
} }
@ -70,6 +74,45 @@ a {
color: var(--theme-color); color: var(--theme-color);
} }
.content {
display: grid;
grid-template-columns: 70% calc(30% - 2em);
gap: 1em;
}
.main-text {
max-width: 900px;
transition: .2s;
}
.thoughts-preview {
padding-top: 8.5em;
}
.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:before {
display: none;
}
.thoughts-bit {
padding: .8em 0;
border-bottom: .1em solid #bbb;
}
.thoughts-bit.first-of-class {
border-top: .1em solid #bbb;
}
.thoughts { .thoughts {
margin: 2rem 2rem 0 0; margin: 2rem 2rem 0 0;
float: right; float: right;
@ -116,6 +159,29 @@ a {
animation-fill-mode: both; animation-fill-mode: both;
} }
@media only screen and (min-width: 1200px) {
.main-text, .thoughtsblock {
padding: 0 2rem 0 4rem;
line-height: 1.7rem;
}
}
@media only screen and (max-width: 700px) {
.content {
grid-template-columns: 100%;
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) { @media (prefers-color-scheme: dark) {
.progress-parent { .progress-parent {
background-color: #444; background-color: #444;
@ -123,11 +189,9 @@ a {
button { button {
box-shadow: 0 .2rem .2rem #000; box-shadow: 0 .2rem .2rem #000;
} }
} @media only screen and (max-width: 700px) {
.thoughts-preview {
@media only screen and (min-width: 1200px) { background-color: #77777720;
.content { }
padding: 0 6rem;
line-height: 1.7rem;
} }
} }

7
Styles/styles.css
View file

@ -27,6 +27,7 @@ a {
color: #fff; color: #fff;
border-bottom: solid .4rem var(--theme-color); border-bottom: solid .4rem var(--theme-color);
font-family: "Nunito", "Times New Roman", Times, serif; font-family: "Nunito", "Times New Roman", Times, serif;
overflow: auto;
} }
.footer h2 { .footer h2 {
@ -64,6 +65,12 @@ a {
color: #bbb; color: #bbb;
} }
@media only screen and (max-width: 750px) {
.footer {
grid-template-columns: auto;
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.footer { .footer {
background-color: #000; background-color: #000;

99
index.html
View file

@ -14,57 +14,60 @@
<div class="progress"></div> <div class="progress"></div>
</div> </div>
<a class="thoughts" href="/thoughts.html">Thoughts</a> <!-- <a class="thoughts" href="/thoughts.html">Thoughts</a> -->
<br><br> <br><br>
<div class="content"> <div class="content">
<h1 class="title">Hi! I'm Editor Rust.</h1> <div class="main-text">
<center><em>This site is still under active construction, and yes, this is inside a <code>center</code> tag.</em></center> <h1 class="title">Hi! I'm Editor Rust.</h1>
<h2 id="about-me">About me</h2> <center><em>This site is still under construction! And yes, this is in a <code>center</code> tag.</em></center>
<p>I'm a high school student who spends just about all their spare time programming. I do mostly full-stack web development, with Node as the backend. I enjoy working with JavaScript and CSS, and am a little <i>too</i> determined to make my websites look perfect. Still waiting to work on a project with someone, and only slightly lonely.</p> <h2 id="about-me">About me</h2>
<p>I'm a high school student and spend just about all my spare time programming. I do mostly full-stack web development, with Node as the backend.</p>
<br>
<h2 id="work">Work</h2>
<p>My current big projects are <a href="https://github.com/editorrust/git-organized">Git Organized</a>, a project management and planning tool for developer projects, and an <a href="https://github.com/editorrust/chat-ex">unnamed chat project</a>, which is just a bunch of experiments with web sockets and the others nice stuffs. If you like them, you can email me to contribute.</p>
<h3>Other work</h3>
<p>Some other work I've done include <a href="https://hillside-township.github.io/">Hillside Township</a>, an imaginary town with a satirical newspaper. The website's nice, so just... ignore the content.</p>
<p>Another cool little thing is <a href="https://editorrust.github.io/activity-log/">Activity Log</a>, which is meant to be used for tracking time. It's a really cool project, with a cool design and charts and everything.</p>
<p>I also made a small JS library called <a href="https://editorrust.github.io/digit/">Digit</a>, which writes out long numbers in words. I'm still polishing this, and plan on adding time related features, as well as number animations.</p>
<p>Some of my really old work include some games. These early games include dreadful styling and questionable code, so I reccomend you don't try them.</p>
<br>
<h2 id="workflow">Workflow</h2>
<p>My current workflow includes JSON and Markdown. I know they aren't languages, but still, they're amazing, right? Also, Node, Ejs, Tailwind CSS, MongoDB, JavaScript, and obviously CSS and HTML. Visual Studio Code, the hands-down best JavaScript IDE (JetBrains's IDEs cost money, booooo). Clearly I use GitHub for source control.</p>
<h3>Software</h3>
<p>I use Firefox, because it's amazing, bookmark managment is everything I ever wanted, and it's the last non-blink browser. Safari dosen't count. Also open source!</p>
<h3>OS</h3>
<p>Open source, Linux, free stuff!</p>
<br>
<h2>More</h2>
<p>Developer jokes! <a href="https://docs.google.com/document/d/e/2PACX-1vRKinOJRXxrcpdMauNaTAzLNVHom4OkadGgdm6ja82330EJFr_5FRw4ThSj71GcjG9Ll_7jh-7mox95/pub">Check them out</a></p>
<p>See my BFF <a href="https://github.com/tildejustin">tildejustin</a>'s stuff'</p>
<h2 id="work">Work</h2> <h2 id="funsies">Funsies</h2>
<p>My current big projects are Git Organized, a project management and planning tool for developer projects, and an unnamed chat project, meant to be an open chat like Twitter, a place to make communities to meet people like you, similar to Discord, and a place for private messaging, like Google Chat. Please check them out, and consider contributing!</p> <div class="funsies">
<h3>Old work</h3> <p>Change the website color theme</p>
<p>Some other work I've done include Hillside Township, an imaginary town with a satirical newspaper, where I can exercise my love of creative writing as well as poke fun at politics and technology (Get Hillside Plus, premium citizenship!). Another website is the Schoolarly Bay, a place for research articles. Some of my friends chipped in with articles, and I might come back and fix this.</p> <button onclick="changeThme()">Random</button>
<p>I also made my own little JS library called Digit, which writes out long numbers in words. I'm still polishing this, and plan on adding time related features, as well as number animation.</p> <button onclick="changeThmeHex()">Hex code</button>
</div>
<br><br> </div>
<p>Note that from here on out this website gets very opinionated, so just keep that in mind.</p> <div class="thoughts-preview">
<a href="/thoughts.html">
<h2 id="operating-systems">Operating Systems</h2> <h2>Thoughts</h2>
<p>Linux is the best OS, hands down. Open source, free, a great community, all the features you need and more you don't, and that amazing terminal. What could possibly compete? MacOS has a design that's like 15 years old, and has had no real updates in forever. Also, that price tag! Not everyone has wallets that deep. And Windows is garbage. Also, what's with the new glassmorphism? If only they'd implement it fully. It's just a patched together operating system made for businesses. Also PowerShell is the stuff of nightmares.</p> </a>
<p>Best mobile operating system is... depends. Linux on mobile is a joke. iOS would be best for ordinary people who are willing to shell out for a better OS. Android has <i>all</i> the options, making it a lot like Linux in many ways. So for anyone who knows what they want out of a device should go with Android. And tablets? Android on tablets is a joke. A kinda sad one. No Windows tablets. iPads would be great for anyone who... has a computer and just wants to doomscroll on their couch. It's useless for any real work. So if you want to use a tablet for work, I suppose you're stuck with a Windows device. Or a Surface Book with Linux. It all comes back to Linux, dosen't it?</p> <a href="/thoughts.html#imessage-lockin">
<div class="thoughts-bit first-of-class">
<h2 id="workflow">Workflow</h2> <h4>The iMessage Lockin</h4>
<p>My current workflow includes JSON and Markdown. I know they aren't languages, but still, they're amazing, right? Also, Node, Ejs, Tailwind CSS, MongoDB (if you want the password to my database, just look through my old commits) JavaScript, and obviously CSS and HTML. I believe in cloud IDEs because of convenience, so I use Github Codespaces for Visual Studio Code. Which is the hands-down best JavaScript IDE, and I am ready to defend that position. Clearly I use GitHub for source control. Note that I use these software because I have tried the competition and still consider these superior.</p> <i>Dec 1 2022</i>
<h3>Software</h3> <p>Apple is mean, and they hate interoperability. Also nobody needs your proprietary messaging app anyway, not when I have such a cool open source one.</p>
<p>I love web apps. I use Inkscape for SVGs (SVGs are amazing, and CSS takes it them to the next level). I use Chrome because of feature support for CSS, but I use Firefox for everything else, because it's not Chromium based. Also Opera is great. I've made attempts to use note apps like Obsidian, but now just... remember? It works, okay? For now anyway.</p> </div>
<h3>OS</h3> </a>
<p>I use Windows right now (not by choice!), but I've tried Macs and spent time with Linux, mainly Kubuntu. I also tried Deepin which was great, and want to test Zorin OS. Also use ChromeOS for school, and would not recommend it unless you only use the Google ecosystem.</p> <a href="/thoughts.html#reject-folding-phones">
<h3>Docs</h3> <div class="thoughts-bit">
<p>I often use Stack Overflow, even though I'm blocked. Yes, I posted <i>one</i> answer, and the person who'd posted the question marked it down, and now I can't post answers. AND can't fix it. I used to use W3Schools, but now stick with Mozilla Docs, because open source and it's much more complete.</p> <h4>Reject Folding Phones</h4>
<h3>Learning</h3> <i>Dec 1 2022</i>
<p>I want to learn more about JavaScript libraries and front end web development, as well as touching into web protocols, cybersecurity, machine learning, and app development. I also plant on learning Angular, React, TypeScript, Socket.io, Rust, and Swift.</p> <p>They're bad, and impractical, and I'll tell you why if you click right here.</p>
</div>
<br><br> </a>
<h2 id="games">Games</h2>
<h3>It's probably best to skip over this</h3>
<p>Some of my really old work include some games. These early games include dreadful styling and questionable code, so I suggest you proceed with caution.</p>
<p>Gold Rush was my first game, what really got me into JavaScript and web development. It's an incremental game, inspired by Cookie Clicker. It has exactly one image, and my recent attempts to modernize the UI had made it a disaster zone. Look at me, throwing around terms like UI, and UX, and accessibility. I'm a web designer now, through and through. The game is about as unbalanced math-wise as it gets, and half the ideas are unfinished, but I think I'm done here. Rest easy, Gold Rush.</p>
<p>Vegetable Dash was my next big project, and I'm still kinda proud of it. It really helped me get a grasp of core JavaScript features, and helped push my knowledge forward with Node. The whole thing was image-based, and since I was going through my SVG craze, is a little strange. The code will cause you nightmares if Grampa Jenkins doesn't. For now I'm done with it, but maybe one day...</p>
<p>Cookin' in the Kitchen is one of my more recent works. It was inspired by an old game I used to play, Cooking Fever. I have hopes of making this multiplayer and all, but I probably won't get to. It was a really cool experiment with drag and drop though.</p>
<h2>More</h2>
<p>Developer jokes jokes! <a href="https://docs.google.com/document/d/e/2PACX-1vRKinOJRXxrcpdMauNaTAzLNVHom4OkadGgdm6ja82330EJFr_5FRw4ThSj71GcjG9Ll_7jh-7mox95/pub">Check them out</a></p>
<p>BFF <a href="https://github.com/tildejustin">tildejustin</a>, see his stuff</p>
<h2 id="funsies">Funsies</h2>
<div class="funsies">
<p>Change the website color theme</p>
<button onclick="changeThme()">Random</button>
<button onclick="changeThmeHex()">Hex code</button>
</div> </div>
</div> </div>
@ -73,7 +76,7 @@
<div> <div>
<h2>Find me</h2> <h2>Find me</h2>
<p>My Github -> <a href="https://github.com/editorrust">GitHub</a></p> <p>My Github -> <a href="https://github.com/editorrust">GitHub</a></p>
<p class="faded-footer">I love GitHub, and host all my projects on it</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>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 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>CodePen -> <a href="https://codepen.io/editorrust">CodePen</a></p>

4
thoughts.html
View file

@ -14,7 +14,7 @@
<a class="home" href="/">Home</a> <a class="home" href="/">Home</a>
<br><br> <br><br>
<div class="content"> <div class="content thoughtsblock">
<div class="article"> <div class="article">
<h1 id="imessage-lockin" onclick="copy('imessage-lockin')">The iMessage Lockin</h1> <h1 id="imessage-lockin" onclick="copy('imessage-lockin')">The iMessage Lockin</h1>
<h2>Dec 1 2022</h2> <h2>Dec 1 2022</h2>
@ -42,7 +42,7 @@
<div> <div>
<h2>Find me</h2> <h2>Find me</h2>
<p>My Github -> <a href="https://github.com/editorrust">GitHub</a></p> <p>My Github -> <a href="https://github.com/editorrust">GitHub</a></p>
<p class="faded-footer">I love GitHub, and host all my projects on it</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>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 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>CodePen -> <a href="https://codepen.io/editorrust">CodePen</a></p>