mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-06 15:45:54 -05:00
New Design
This commit is contained in:
Editor Rust
parent
3a773b54ca
commit
c98c837c18
3 changed files with 0 additions and 837 deletions
566
old.css
566
old.css
|
|
@ -1,566 +0,0 @@
|
|||
/*==================================================
|
||||
Main
|
||||
==================================================*/
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { display: none; }
|
||||
|
||||
/*==================================================
|
||||
Common Classes
|
||||
==================================================*/
|
||||
|
||||
.block {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.block:nth-child(2n) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.next {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
color: aquamarine;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
box-shadow: 0 0 8px #262626;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 250%;
|
||||
border-radius: 50%;
|
||||
transition: 0.8s;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.last {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
color: aquamarine;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
left: 50px;
|
||||
box-shadow: 0 0 8px #262626;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 250%;
|
||||
border-radius: 50%;
|
||||
transition: 0.8s;
|
||||
font-weight: 900;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.next:hover {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
|
||||
.last:hover {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
animation: nudge 3s linear infinite;
|
||||
transition: .2s;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@keyframes nudge {
|
||||
0% { margin-right: 0px; }
|
||||
20% { margin-right: -8px; }
|
||||
40% { margin-right: -2px; }
|
||||
60% { margin-right: -8px; }
|
||||
80% { margin-right: 0px; }
|
||||
100% { margin-right: 0px; }
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
|
||||
.progress {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 75px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.progress li {
|
||||
position: relative;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
background-color: #d6d6d6;
|
||||
color: #f9f9f9;
|
||||
margin: 0 15px;
|
||||
transition: 0.2s;
|
||||
box-shadow: inset 2px 2px 10px #fff,
|
||||
0 0 2.5px #262626;
|
||||
}
|
||||
|
||||
.progress li:hover { transform: scale(1.2); }
|
||||
|
||||
#meetIndicator { background-color: #262626; }
|
||||
|
||||
/*==================================================
|
||||
Landing
|
||||
==================================================*/
|
||||
|
||||
.landing {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-family: Nunito;
|
||||
}
|
||||
|
||||
/* Hi Animation */
|
||||
|
||||
.hi {
|
||||
padding: 50px;
|
||||
font-size: 250%;
|
||||
display: inline-block;
|
||||
transition: all .3s;
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
.landing:hover .hi {
|
||||
color: #f9f9f9;
|
||||
font-size: 280%;
|
||||
background-color: #262626;
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.hi:before, .hi:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #262626;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hi:before { left: -50px; }
|
||||
.hi:after { right: -50px; }
|
||||
|
||||
.landing:hover .hi:before {
|
||||
left: 50%;
|
||||
transform: scale(1.5);
|
||||
animation: hi-opacity .6s 1 forwards;
|
||||
}
|
||||
|
||||
.landing:hover .hi:after {
|
||||
right: 50%;
|
||||
transform: scale(1.5);
|
||||
animation: hi-opacity .6s 1 forwards;
|
||||
}
|
||||
|
||||
@keyframes hi-opacity {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* About Me */
|
||||
|
||||
.about-me {
|
||||
margin: 0 80px;
|
||||
font-size: 120%;
|
||||
transform: translateY(-50px);
|
||||
opacity: 0;
|
||||
transition: all 1.5s;
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
.landing:hover .about-me {
|
||||
transform: translateY(2px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Vegetable Dash
|
||||
==================================================*/
|
||||
|
||||
/* General Information */
|
||||
|
||||
.about-vegetable {
|
||||
margin: 50px;
|
||||
font-size: 120%;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 1s;
|
||||
transition-delay: 1.5s;
|
||||
}
|
||||
|
||||
/* Opening Animation */
|
||||
|
||||
#vegetable-dash:hover .about-vegetable {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.space { width: 10px; }
|
||||
|
||||
.smokey {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.smokey li {
|
||||
list-style: none;
|
||||
transition: 1s;
|
||||
transform: rotate(45deg) translateY(-200px);
|
||||
opacity: 0;
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
#vegetable-dash:hover li {
|
||||
transform: rotate(0) translateY(0);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.smokey li:nth-child(2) { transition-delay: .05s; }
|
||||
.smokey li:nth-child(3) { transition-delay: .1s; }
|
||||
.smokey li:nth-child(4) { transition-delay: .15s; }
|
||||
.smokey li:nth-child(5) { transition-delay: .2s; }
|
||||
.smokey li:nth-child(6) { transition-delay: .25s; }
|
||||
.smokey li:nth-child(7) { transition-delay: .3s; }
|
||||
.smokey li:nth-child(8) { transition-delay: .35s; }
|
||||
.smokey li:nth-child(9) { transition-delay: .4s; }
|
||||
.smokey li:nth-child(10) { transition-delay: .35s; }
|
||||
.smokey li:nth-child(11) { transition-delay: .4s; }
|
||||
.smokey li:nth-child(12) { transition-delay: .45s; }
|
||||
.smokey li:nth-child(13) { transition-delay: .5s; }
|
||||
.smokey li:nth-child(14) { transition-delay: .55s; }
|
||||
.smokey li:nth-child(15) { transition-delay: .6s; }
|
||||
|
||||
/*==================================================
|
||||
Gold Rush
|
||||
==================================================*/
|
||||
|
||||
/* General */
|
||||
|
||||
#gold-rush h1 {
|
||||
margin: 25px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.about-gold {
|
||||
margin: 50px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
|
||||
#gold-rush h1 {
|
||||
background: linear-gradient(90deg, #000, #fff, #000);
|
||||
background-size: 80%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
#gold-rush:hover h1 { animation: show-text 1.2s 3 forwards; }
|
||||
|
||||
@keyframes show-text {
|
||||
0% { background-position: -100%; }
|
||||
100% { background-position: 250%; }
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
animation: bounce-out 3s ease-in forwards;
|
||||
transform: translate(1000px, 500px);
|
||||
margin: auto;
|
||||
transition: 0.8s;
|
||||
}
|
||||
|
||||
#gold-rush:hover .gold-text { animation: bounce-in 3s ease-in forwards; }
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: translateX(500px) translateY(-80px) scale(0);
|
||||
width: 500px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
75% {
|
||||
transform: translateX(200px) translateY(80px) scale(0.8);
|
||||
width: 500px;
|
||||
opacity: .8;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
width: 500px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes bounce-out {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
width: 500px;
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
transform: translateX(200px) translateY(80px) scale(0.8);
|
||||
width: 500px;
|
||||
opacity: .8;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(500px) translateY(-80px) scale(0);
|
||||
width: 500px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Coming Soon!
|
||||
==================================================*/
|
||||
|
||||
.coming {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.coming li {
|
||||
transition: 0.2s;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.coming:hover li {
|
||||
animation: shake 1s infinite alternate;
|
||||
margin: 0 4px;
|
||||
text-shadow: 0 25px 2px #262626;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: rotate(10deg) scaleY(1.2); }
|
||||
20% { transform: rotate(-10deg) scaleY(1); }
|
||||
40% { transform: rotate(10deg) scaleY(1.2); }
|
||||
60% { transform: rotate(-10deg) scaleY(1); }
|
||||
80% { transform: rotate(10deg) scaleY(1.2); }
|
||||
100% { transform: rotate(-10deg) scaleY(1); }
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(2) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(4) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(6) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(8) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(10) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(12) { animation-delay: 0.2s; }
|
||||
|
||||
/*==================================================
|
||||
Right Click Menu
|
||||
==================================================*/
|
||||
|
||||
#menu {
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
font-family: Nunito;
|
||||
font-size: 15px;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #f5f5f5;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
list-style-type: none;
|
||||
padding: 10px 25px;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#menu li:hover {
|
||||
text-shadow: 0 .2px .2px #262626;
|
||||
background-color: #fafafa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#menu hr {
|
||||
border: 1px solid #ebebeb;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/*==========================================================
|
||||
Links
|
||||
==========================================================*/
|
||||
|
||||
a {
|
||||
color: lightblue;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-link:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.5px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
background: lightblue;
|
||||
transition: all .5s;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Animations
|
||||
==================================================*/
|
||||
|
||||
@keyframes heavenly-glow {
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 5px 5px 5px whitesmoke,
|
||||
5px -5px 5px whitesmoke,
|
||||
-5px 5px 5px whitesmoke,
|
||||
-5px -5px 5px whitesmoke;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
@keyframes darkness-grows {
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 5px 5px 5px #262626,
|
||||
5px -5px 5px #262626,
|
||||
-5px 5px 5px #262626,
|
||||
-5px -5px 5px #262626;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
@keyframes rainbow-glow {
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 2px 2px 1px red,
|
||||
4px 4px 1px orange,
|
||||
6px 6px 1px yellow,
|
||||
8px 8px 1px lightgreen,
|
||||
10px 10px 1px lightblue,
|
||||
12px 12px 1px purple,
|
||||
|
||||
2px -2px 1px red,
|
||||
4px -4px 1px orange,
|
||||
6px -6px 1px yellow,
|
||||
8px -8px 1px lightgreen,
|
||||
10px -10px 1px lightblue,
|
||||
12px -12px 1px purple,
|
||||
|
||||
-2px 2px 1px red,
|
||||
-4px 4px 1px orange,
|
||||
-6px 6px 1px yellow,
|
||||
-8px 8px 1px lightgreen,
|
||||
-10px 10px 1px lightblue,
|
||||
-12px 12px 1px purple,
|
||||
|
||||
-2px -2px 1px red,
|
||||
-4px -4px 1px orange,
|
||||
-6px -6px 1px yellow,
|
||||
-8px -8px 1px lightgreen,
|
||||
-10px -10px 1px lightblue,
|
||||
-12px -12px 1px purple;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Personal
|
||||
==================================================*/
|
||||
|
||||
.will-not-find-me-at { font-family: Nunito; }
|
||||
.find-me { margin: 50px 50px 0 50px; }
|
||||
|
||||
.nothing-link:after { display: none; }
|
||||
|
||||
.will-not-find-me-at {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.will-not-find-me-at a {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background-color: #f1f1f1;
|
||||
margin: 10px;
|
||||
border-radius: 30%;
|
||||
color: #10ac84;
|
||||
box-shadow: 0 5px 15px -5px #00000070;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: 90px;
|
||||
font-size: 25px;
|
||||
transition: all 0.2s;
|
||||
margin-top: 35%;
|
||||
}
|
||||
|
||||
.will-not-find-me-at a:hover i {
|
||||
transform: scale(1.5) rotate(360deg);
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.will-not-find-me-at a:hover { background-color: #262626; }
|
||||
|
||||
#linux-rainbow {
|
||||
height: 20vh;
|
||||
border-radius: 5vh;
|
||||
animation: rainbow-glow 5s infinite;
|
||||
margin: 5vh auto;
|
||||
}
|
||||
|
||||
.hr, .hr-2 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #262626;
|
||||
opacity: .2;
|
||||
margin: 25px 75px;
|
||||
}
|
||||
|
||||
.hr-2 {
|
||||
opacity: 0;
|
||||
margin: 0 25px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
/* Should have nice hover that shows some content from link (iframe in tooltip?) */
|
||||
149
old.html
149
old.html
|
|
@ -1,149 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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&display=swap" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
|
||||
<script src="main.js" charset="utf-8" defer></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Meet Editor Rust</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Meet me -->
|
||||
<div class="landing" id="meet">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1 class="hi">
|
||||
Hi! I'm Editor Rust!
|
||||
</h1>
|
||||
<br><br>
|
||||
<p class="about-me">
|
||||
Tools
|
||||
<br>
|
||||
Think of some tool or language, I’ve probably checked it out.
|
||||
I’ve worked with Blender, Unity, LibreOffice, understand Inkscape as much as anyone can, used file types
|
||||
most people meet, messed around with GitLab, GitHub, tried Brave, Firefox, Thunderbird, Edge, Safari, Internet Explorer, loved Chrome and adored Opera, used Windows, ChromeOS and Kubuntu, tried Macs, Android, iPhone and Deepin, use iPad and Windows regularly, iPad by choice, because I love the feel of the Apple ecosystem, but Windows because I have to. I’ve played with Linux distros like Rasbian, would love to try Zorin. Visited Stack Overflow, messed with Mozilla, loved, accepted, then disregarded contemptuously W3Schools, now being a Mozilla Docs snob. Ocasionaly use Codepen, though it’s nothing special. Use Procreate and trying Vectornator, using Apple notes & Obsidian, and lovin’ Freeform. Gmail all the way. Used GitPod and Codespaces. I even tried at a Chrome extension, and can’t wait to try again.
|
||||
Check out C++, worked with and hoping to learn more about Python, and planning to learn Rust. Use JS, HTML, CSS, Tailwind CSS and Node, know Express, use MongoDB, tried React, though I want to learn more, want to check out Angular, and working to learn Vue. And Socket.io is amazing, and I want to do more work with it. I also plan on learning Swift and building some apps.
|
||||
<br>
|
||||
What I do
|
||||
<br>
|
||||
I’m a web developer and designer, and I build open source PWAs while messing about with JavaScript libraries. You might know me as the brilliant developer of Git Organized, or the creator of the world-renowned Chat Experiments. Most likely you haven’t heard of me at all, but I’ll remedy that soon enough, and you’ll grow to rue the day you ever heard of Editor Rust.
|
||||
<br>
|
||||
Me
|
||||
<br>
|
||||
I’m a fan of Linux and Open Source, and am working on contributing to open source projects. I want to do more with RSS, and am a devoted Markdown fanatic. It’s so simple and efficient! I believe that SVGs are amazing, and their level of integration into the web is stunning. I consider my self a web designer and developer, and try to balance both those roles in my work. My current workflow includes Node, Express, Tailwind CSS and Vanilla JavaScript, and obviously, being a web developer, I rock CSS and HTML. I believe in cloud IDEs because of convenience and that sweet Linux Terminal, and I use Visual Studio Code, no surprise there. I’ve used GitPod, but since for now GitHub Codespaces is free I’m using it, and loving it. I want to learn more about JavaScript libraries and front end web development, as well as touching into cybersecurity, machine learning, and app development. Currently I’m a student, so I don’t get much opportunity to work on my projects, but I still put my best effort into them whenever I can.
|
||||
<br>
|
||||
More
|
||||
<br>
|
||||
See my <a href="https://github.com/editorrust">GitHub</a> <a href="https://stackoverflow.com/users/14818357/editor-rust">Stack Overflow</a> <a href="https://codepen.io/editorrust">CodePen</a>
|
||||
Dev jokes! Checkout my list
|
||||
BFF tildejustin, see his stuff
|
||||
Work
|
||||
My current big projects are Git Organized, a project management and planning tool for developer projects, and an unnamed chat project, meant to be a public space like Twitter without any politics, controversial topics, or hate, a place to make communities to meet people like you, similar to Discord, and a place for private messaging, like Google Chat. I’m so excited for what both of them will become, so please check them out, and consider contributing!
|
||||
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 can’t wait to improve this.
|
||||
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.
|
||||
Games
|
||||
Some of my really old work include some games I made, ah, back in those days when I wanted to only make games. Ha, the world has turned me into a functional programmer now. These early games include dreadful styling and questionable code, so I suggest you proceed with caution.
|
||||
Gold Rush was my first game, what really got me into JavaScript and web development. It’s an incremental game, inspired by Cookie Clicker, the golden standard for all clicker games. I 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.
|
||||
Vegetable Dash was my next big thing, and I’m still kinda proud of it. It really helped me get a grasp on 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. I love you Vegetable Dash, and maybe one day I’ll come back for you…
|
||||
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.
|
||||
email me at editorrust@gmail.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="next" id="next" onclick="next()">
|
||||
<span class="arrow">⟶</span>
|
||||
</div>
|
||||
<ul class="progress">
|
||||
<li id="meetIndicator" onclick="ind('meet')"></li>
|
||||
<li id="vegetable-dashIndicator" onclick="ind('vegetable-dash')"></li>
|
||||
<li id="gold-rushIndicator" onclick="ind('gold-rush')"></li>
|
||||
<li id="coming-soonIndicator" onclick="ind('coming-soon')"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Vegetable Dash -->
|
||||
<div class="block" id="vegetable-dash">
|
||||
<div class="last" id="back" onclick="last()">
|
||||
<span class="arrow">⟵</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1 class="meet-vegetable">
|
||||
<ul class="smokey">
|
||||
<li>V</li><li>e</li><li>g</li><li>e</li><li>t</li><li>a</li><li>b</li><li>l</li><li>e</li><li class="space"></li><li>D</li><li>a</li><li>s</li><li>h</li><li>!</li>
|
||||
</ul>
|
||||
</h1>
|
||||
<p class="about-vegetable" onmouseover="window.open('https://vegetable-dash-beta.herokuapp.com/', '_blank');">My newest and greatest JavaScript browser game! With all the high quality images you could ever wish for, this game is simply fabulous! I recommend you try it! No, I insist you try it! Y'know what, I'm sending you there anyway! You can play the game <a href="https://vegetable-dash.herokuapp.com/">here</a>, the beta version <a href="https://vegetable-dash-beta.herokuapp.com/">here</a>, or visit the GitHub repository <a href="https://github.com/editorrust/vegetable-dash">here</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Gold Rush -->
|
||||
<div class="block" id="gold-rush">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1>Gold Rush!</h1>
|
||||
<p class="about-gold gold-text">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://goldrush.cyclic.app">here</a>, or check ou the GitHub repository <a href="https://github.com/editorrust/gold-rush">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coming Soon -->
|
||||
<div class="block" id="coming-soon">
|
||||
<div class="text">
|
||||
<br><br>
|
||||
<h1>
|
||||
<ul class="coming">
|
||||
<li>C</li>
|
||||
<li>O</li>
|
||||
<li>M</li>
|
||||
<li>I</li>
|
||||
<li>N</li>
|
||||
<li>G</li>
|
||||
<li class="space"></li>
|
||||
<li>S</li>
|
||||
<li>O</li>
|
||||
<li>O</li>
|
||||
<li>N</li>
|
||||
<li>!</li>
|
||||
</ul>
|
||||
</h1>
|
||||
<br><br>
|
||||
<h2>While you are waiting, check out these sites!</h2>
|
||||
<br><a href="https://github.com/editorrust/digit">digit on GitHub</a>
|
||||
<br><a href="https://github.com/editorrust/glish-translate">Glish Translate on GitHub</a>
|
||||
<br><a href="https://github.com/editorrust/style">Style on GitHub</a> <a href="https://editorrust.github.io/style/">Style</a>
|
||||
<br><a href="https://github.com/hillside-township/hillside-township.github.io">Hillside Township on GitHub</a> <a href="https://hillside-township.github.io">Hillside</a>
|
||||
<br><a href="https://github.com/schoolarlybay/schoolarlybay.github.io">The Schoolarly Bay on GitHub</a> <a href="https://schoolarlybay.github.io/">The Schoolarly Bay</a>
|
||||
</div>
|
||||
<div class="will-not-find-me-at">
|
||||
<h1 class="find-me">You won't find me at</h1>
|
||||
<hr class="hr">
|
||||
<a class="nothing-link" href="https://www.reddit.com/"><i class="fab fa-reddit"></i></a>
|
||||
<a class="nothing-link" href="https://www.twitch.tv/"><i class="fab fa-twitch"></i></a>
|
||||
<a class="nothing-link" href="https://dribbble.com/"><i class="fab fa-dribbble"></i></a>
|
||||
<a class="nothing-link" href="https://www.squarespace.com/"><i class="fab fa-squarespace"></i></a>
|
||||
<a class="nothing-link" href="https://www.linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a class="nothing-link" href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="nothing-link" href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
|
||||
<a class="nothing-link" href="https://www.youtube.com/"><i class="fab fa-youtube"></i></a>
|
||||
<a class="nothing-link" href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
|
||||
<a class="nothing-link" href="https://medium.com/"><i class="fab fa-medium"></i></a>
|
||||
<hr class="hr-2">
|
||||
<h1 class="find-me">You will find me at</h1>
|
||||
<hr class="hr">
|
||||
<a class="nothing-link" href="https://github.com/editorrust"><i class="fab fa-github"></i></a>
|
||||
<a class="nothing-link" href="https://stackoverflow.com/users/14818357/squirrel"><i class="fab fa-stack-overflow"></i></a>
|
||||
<a class="nothing-link" href="https://codepen.io/squirrel-314"><i class="fab fa-codepen"></i></a>
|
||||
</div>
|
||||
<div class="personal" style="text-align: center;">
|
||||
<p>Emails | <a href="mailto:editorrust@gmail.com?subject=feedback">editorrust@gmail.com</a>, <a href="mailto:hamza.elabi1@gmail.com?subject=feedback">hamza.elabi1@gmail.com</a></p><br>
|
||||
<p>Address | Oak forest, acorn path, that tree.</p><br>
|
||||
<img title="I like rainbows" id="linux-rainbow" src="Images/linux.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<div id="menu">
|
||||
<li class="menu-links"><a href="https://editorrust.github.io/vegetable-dash/">Check this out!</a></li>
|
||||
<li class="menu-links"><a href="https://editorrust.github.io/gold-rush/">And this!</a></li>
|
||||
<li>You won't regret it!</li>
|
||||
<li>Probably.</li>
|
||||
</div>
|
||||
</html>
|
||||
122
old.js
122
old.js
|
|
@ -1,122 +0,0 @@
|
|||
let pageLocation = "meet";
|
||||
let backButton = document.getElementById("back");
|
||||
let nextButton = document.getElementById("next");
|
||||
|
||||
function next() {
|
||||
if (pageLocation === "meet") {
|
||||
document.location = "#vegetable-dash";
|
||||
pageLocation = "vegetable-dash";
|
||||
}
|
||||
else if (pageLocation === "vegetable-dash") {
|
||||
document.location = "#gold-rush";
|
||||
pageLocation = "gold-rush";
|
||||
}
|
||||
else if (pageLocation === "gold-rush") {
|
||||
document.location = "#coming-soon";
|
||||
pageLocation = "coming-soon";
|
||||
}
|
||||
buttonVisiblility();
|
||||
}
|
||||
|
||||
function last() {
|
||||
if (pageLocation === "vegetable-dash") {
|
||||
document.location = "#meet";
|
||||
pageLocation = "meet";
|
||||
}
|
||||
else if (pageLocation === "gold-rush") {
|
||||
document.location = "#vegetable-dash";
|
||||
pageLocation = "vegetable-dash";
|
||||
}
|
||||
else if (pageLocation === "coming-soon") {
|
||||
document.location = "#gold-rush";
|
||||
pageLocation = "gold-rush";
|
||||
}
|
||||
buttonVisiblility();
|
||||
}
|
||||
|
||||
function buttonVisiblility() {
|
||||
if (pageLocation != "meet") {
|
||||
backButton.style.opacity = "1";
|
||||
}
|
||||
else {
|
||||
backButton.style.opacity = "0";
|
||||
}
|
||||
if (pageLocation != "coming-soon") {
|
||||
nextButton.style.opacity = "1";
|
||||
}
|
||||
else {
|
||||
nextButton.style.opacity = "0";
|
||||
}
|
||||
where();
|
||||
}
|
||||
|
||||
function where() {
|
||||
let meetIndicator = document.getElementById("meetIndicator");
|
||||
let vegIndicator = document.getElementById("vegetable-dashIndicator");
|
||||
let goldIndicator = document.getElementById("gold-rushIndicator");
|
||||
let comingIndicator = document.getElementById("coming-soonIndicator");
|
||||
|
||||
if (pageLocation === "meet") {
|
||||
meetIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
meetIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
if (pageLocation === "vegetable-dash") {
|
||||
vegIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
vegIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
if (pageLocation === "gold-rush") {
|
||||
goldIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
goldIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
if (pageLocation === "coming-soon") {
|
||||
comingIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
comingIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
}
|
||||
|
||||
function ind(page) {
|
||||
document.location = "#" + page;
|
||||
pageLocation = page;
|
||||
buttonVisiblility();
|
||||
}
|
||||
|
||||
// Right Click Menu
|
||||
let rightClickMenu = document.getElementById("menu").style;
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('contextmenu', function(e) {
|
||||
var posX = e.clientX;
|
||||
var posY = e.clientY;
|
||||
menu(posX, posY);
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
document.addEventListener('click', function(e) {
|
||||
rightClickMenu.display = "none";
|
||||
}, false);
|
||||
}
|
||||
else {
|
||||
document.attachEvent('oncontextmenu', function(e) {
|
||||
var posX = e.clientX;
|
||||
var posY = e.clientY;
|
||||
menu(posX, posY);
|
||||
e.preventDefault();
|
||||
});
|
||||
document.attachEvent('onclick', function(e) {
|
||||
setTimeout(function() {
|
||||
rightClickMenu.display = "none";
|
||||
}, 501);
|
||||
});
|
||||
}
|
||||
|
||||
function menu(x, y) {
|
||||
rightClickMenu.top = y + "px";
|
||||
rightClickMenu.left = x + "px";
|
||||
rightClickMenu.display = "block";
|
||||
}
|
||||
Loading…
Reference in a new issue