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
226ed8e6bf
commit
3a773b54ca
25 changed files with 956 additions and 1363 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -1,5 +0,0 @@
|
||||||
node_modules
|
|
||||||
package.json
|
|
||||||
package-lock.json
|
|
||||||
tailwind.config.js
|
|
||||||
tailwind.config.css
|
|
||||||
|
|
@ -1,561 +0,0 @@
|
||||||
/*
|
|
||||||
! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
||||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
|
||||||
*/
|
|
||||||
|
|
||||||
*,
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* 1 */
|
|
||||||
border-width: 0;
|
|
||||||
/* 2 */
|
|
||||||
border-style: solid;
|
|
||||||
/* 2 */
|
|
||||||
border-color: #e5e7eb;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
--tw-content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Use a consistent sensible line-height in all browsers.
|
|
||||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
3. Use a more readable tab size.
|
|
||||||
4. Use the user's configured `sans` font-family by default.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
line-height: 1.5;
|
|
||||||
/* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
/* 2 */
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
/* 3 */
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
/* 3 */
|
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
/* 4 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Remove the margin in all browsers.
|
|
||||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
/* 1 */
|
|
||||||
line-height: inherit;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Add the correct height in Firefox.
|
|
||||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
|
||||||
3. Ensure horizontal rules are visible by default.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
height: 0;
|
|
||||||
/* 1 */
|
|
||||||
color: inherit;
|
|
||||||
/* 2 */
|
|
||||||
border-top-width: 1px;
|
|
||||||
/* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr:where([title]) {
|
|
||||||
-webkit-text-decoration: underline dotted;
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the default font size and weight for headings.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Reset links to optimize for opt-in styling instead of opt-out.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct font weight in Edge and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Use the user's configured `mono` font family by default.
|
|
||||||
2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp,
|
|
||||||
pre {
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
||||||
/* 1 */
|
|
||||||
font-size: 1em;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
|
||||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
|
||||||
3. Remove gaps between table borders by default.
|
|
||||||
*/
|
|
||||||
|
|
||||||
table {
|
|
||||||
text-indent: 0;
|
|
||||||
/* 1 */
|
|
||||||
border-color: inherit;
|
|
||||||
/* 2 */
|
|
||||||
border-collapse: collapse;
|
|
||||||
/* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Change the font styles in all browsers.
|
|
||||||
2. Remove the margin in Firefox and Safari.
|
|
||||||
3. Remove default padding in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
/* 1 */
|
|
||||||
font-size: 100%;
|
|
||||||
/* 1 */
|
|
||||||
font-weight: inherit;
|
|
||||||
/* 1 */
|
|
||||||
line-height: inherit;
|
|
||||||
/* 1 */
|
|
||||||
color: inherit;
|
|
||||||
/* 1 */
|
|
||||||
margin: 0;
|
|
||||||
/* 2 */
|
|
||||||
padding: 0;
|
|
||||||
/* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the inheritance of text transform in Edge and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
2. Remove default button styles.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type='button'],
|
|
||||||
[type='reset'],
|
|
||||||
[type='submit'] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
/* 1 */
|
|
||||||
background-color: transparent;
|
|
||||||
/* 2 */
|
|
||||||
background-image: none;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Use the modern Firefox focus style for all focusable elements.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:-moz-focusring {
|
|
||||||
outline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
|
||||||
*/
|
|
||||||
|
|
||||||
:-moz-ui-invalid {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct vertical alignment in Chrome and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Correct the cursor style of increment and decrement buttons in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-inner-spin-button,
|
|
||||||
::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Correct the odd appearance in Chrome and Safari.
|
|
||||||
2. Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type='search'] {
|
|
||||||
-webkit-appearance: textfield;
|
|
||||||
/* 1 */
|
|
||||||
outline-offset: -2px;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
2. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
/* 1 */
|
|
||||||
font: inherit;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add the correct display in Chrome and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Removes the default spacing and border for appropriate elements.
|
|
||||||
*/
|
|
||||||
|
|
||||||
blockquote,
|
|
||||||
dl,
|
|
||||||
dd,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
hr,
|
|
||||||
figure,
|
|
||||||
p,
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
menu {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Prevent resizing textareas horizontally by default.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
|
||||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
|
||||||
*/
|
|
||||||
|
|
||||||
input::-moz-placeholder, textarea::-moz-placeholder {
|
|
||||||
opacity: 1;
|
|
||||||
/* 1 */
|
|
||||||
color: #9ca3af;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
input::placeholder,
|
|
||||||
textarea::placeholder {
|
|
||||||
opacity: 1;
|
|
||||||
/* 1 */
|
|
||||||
color: #9ca3af;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Set the default cursor for buttons.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[role="button"] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Make sure disabled buttons don't get the pointer cursor.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:disabled {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
||||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
|
||||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img,
|
|
||||||
svg,
|
|
||||||
video,
|
|
||||||
canvas,
|
|
||||||
audio,
|
|
||||||
iframe,
|
|
||||||
embed,
|
|
||||||
object {
|
|
||||||
display: block;
|
|
||||||
/* 1 */
|
|
||||||
vertical-align: middle;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
||||||
*/
|
|
||||||
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
*, ::before, ::after {
|
|
||||||
--tw-border-spacing-x: 0;
|
|
||||||
--tw-border-spacing-y: 0;
|
|
||||||
--tw-translate-x: 0;
|
|
||||||
--tw-translate-y: 0;
|
|
||||||
--tw-rotate: 0;
|
|
||||||
--tw-skew-x: 0;
|
|
||||||
--tw-skew-y: 0;
|
|
||||||
--tw-scale-x: 1;
|
|
||||||
--tw-scale-y: 1;
|
|
||||||
--tw-pan-x: ;
|
|
||||||
--tw-pan-y: ;
|
|
||||||
--tw-pinch-zoom: ;
|
|
||||||
--tw-scroll-snap-strictness: proximity;
|
|
||||||
--tw-ordinal: ;
|
|
||||||
--tw-slashed-zero: ;
|
|
||||||
--tw-numeric-figure: ;
|
|
||||||
--tw-numeric-spacing: ;
|
|
||||||
--tw-numeric-fraction: ;
|
|
||||||
--tw-ring-inset: ;
|
|
||||||
--tw-ring-offset-width: 0px;
|
|
||||||
--tw-ring-offset-color: #fff;
|
|
||||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
||||||
--tw-ring-offset-shadow: 0 0 #0000;
|
|
||||||
--tw-ring-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow-colored: 0 0 #0000;
|
|
||||||
--tw-blur: ;
|
|
||||||
--tw-brightness: ;
|
|
||||||
--tw-contrast: ;
|
|
||||||
--tw-grayscale: ;
|
|
||||||
--tw-hue-rotate: ;
|
|
||||||
--tw-invert: ;
|
|
||||||
--tw-saturate: ;
|
|
||||||
--tw-sepia: ;
|
|
||||||
--tw-drop-shadow: ;
|
|
||||||
--tw-backdrop-blur: ;
|
|
||||||
--tw-backdrop-brightness: ;
|
|
||||||
--tw-backdrop-contrast: ;
|
|
||||||
--tw-backdrop-grayscale: ;
|
|
||||||
--tw-backdrop-hue-rotate: ;
|
|
||||||
--tw-backdrop-invert: ;
|
|
||||||
--tw-backdrop-opacity: ;
|
|
||||||
--tw-backdrop-saturate: ;
|
|
||||||
--tw-backdrop-sepia: ;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-backdrop {
|
|
||||||
--tw-border-spacing-x: 0;
|
|
||||||
--tw-border-spacing-y: 0;
|
|
||||||
--tw-translate-x: 0;
|
|
||||||
--tw-translate-y: 0;
|
|
||||||
--tw-rotate: 0;
|
|
||||||
--tw-skew-x: 0;
|
|
||||||
--tw-skew-y: 0;
|
|
||||||
--tw-scale-x: 1;
|
|
||||||
--tw-scale-y: 1;
|
|
||||||
--tw-pan-x: ;
|
|
||||||
--tw-pan-y: ;
|
|
||||||
--tw-pinch-zoom: ;
|
|
||||||
--tw-scroll-snap-strictness: proximity;
|
|
||||||
--tw-ordinal: ;
|
|
||||||
--tw-slashed-zero: ;
|
|
||||||
--tw-numeric-figure: ;
|
|
||||||
--tw-numeric-spacing: ;
|
|
||||||
--tw-numeric-fraction: ;
|
|
||||||
--tw-ring-inset: ;
|
|
||||||
--tw-ring-offset-width: 0px;
|
|
||||||
--tw-ring-offset-color: #fff;
|
|
||||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
||||||
--tw-ring-offset-shadow: 0 0 #0000;
|
|
||||||
--tw-ring-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow-colored: 0 0 #0000;
|
|
||||||
--tw-blur: ;
|
|
||||||
--tw-brightness: ;
|
|
||||||
--tw-contrast: ;
|
|
||||||
--tw-grayscale: ;
|
|
||||||
--tw-hue-rotate: ;
|
|
||||||
--tw-invert: ;
|
|
||||||
--tw-saturate: ;
|
|
||||||
--tw-sepia: ;
|
|
||||||
--tw-drop-shadow: ;
|
|
||||||
--tw-backdrop-blur: ;
|
|
||||||
--tw-backdrop-brightness: ;
|
|
||||||
--tw-backdrop-contrast: ;
|
|
||||||
--tw-backdrop-grayscale: ;
|
|
||||||
--tw-backdrop-hue-rotate: ;
|
|
||||||
--tw-backdrop-invert: ;
|
|
||||||
--tw-backdrop-opacity: ;
|
|
||||||
--tw-backdrop-saturate: ;
|
|
||||||
--tw-backdrop-sepia: ;
|
|
||||||
}
|
|
||||||
|
|
||||||
::backdrop {
|
|
||||||
--tw-border-spacing-x: 0;
|
|
||||||
--tw-border-spacing-y: 0;
|
|
||||||
--tw-translate-x: 0;
|
|
||||||
--tw-translate-y: 0;
|
|
||||||
--tw-rotate: 0;
|
|
||||||
--tw-skew-x: 0;
|
|
||||||
--tw-skew-y: 0;
|
|
||||||
--tw-scale-x: 1;
|
|
||||||
--tw-scale-y: 1;
|
|
||||||
--tw-pan-x: ;
|
|
||||||
--tw-pan-y: ;
|
|
||||||
--tw-pinch-zoom: ;
|
|
||||||
--tw-scroll-snap-strictness: proximity;
|
|
||||||
--tw-ordinal: ;
|
|
||||||
--tw-slashed-zero: ;
|
|
||||||
--tw-numeric-figure: ;
|
|
||||||
--tw-numeric-spacing: ;
|
|
||||||
--tw-numeric-fraction: ;
|
|
||||||
--tw-ring-inset: ;
|
|
||||||
--tw-ring-offset-width: 0px;
|
|
||||||
--tw-ring-offset-color: #fff;
|
|
||||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
||||||
--tw-ring-offset-shadow: 0 0 #0000;
|
|
||||||
--tw-ring-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow: 0 0 #0000;
|
|
||||||
--tw-shadow-colored: 0 0 #0000;
|
|
||||||
--tw-blur: ;
|
|
||||||
--tw-brightness: ;
|
|
||||||
--tw-contrast: ;
|
|
||||||
--tw-grayscale: ;
|
|
||||||
--tw-hue-rotate: ;
|
|
||||||
--tw-invert: ;
|
|
||||||
--tw-saturate: ;
|
|
||||||
--tw-sepia: ;
|
|
||||||
--tw-drop-shadow: ;
|
|
||||||
--tw-backdrop-blur: ;
|
|
||||||
--tw-backdrop-brightness: ;
|
|
||||||
--tw-backdrop-contrast: ;
|
|
||||||
--tw-backdrop-grayscale: ;
|
|
||||||
--tw-backdrop-hue-rotate: ;
|
|
||||||
--tw-backdrop-invert: ;
|
|
||||||
--tw-backdrop-opacity: ;
|
|
||||||
--tw-backdrop-saturate: ;
|
|
||||||
--tw-backdrop-sepia: ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-black {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
BIN
Icons/cart.png
BIN
Icons/cart.png
Binary file not shown.
|
Before Width: | Height: | Size: 233 B |
Binary file not shown.
|
Before Width: | Height: | Size: 322 B |
Binary file not shown.
|
Before Width: | Height: | Size: 275 B |
Binary file not shown.
|
Before Width: | Height: | Size: 335 B |
BIN
Icons/help.png
BIN
Icons/help.png
Binary file not shown.
|
Before Width: | Height: | Size: 323 B |
BIN
Icons/home.png
BIN
Icons/home.png
Binary file not shown.
|
Before Width: | Height: | Size: 180 B |
BIN
Icons/race.png
Normal file
BIN
Icons/race.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Icons/store.png
BIN
Icons/store.png
Binary file not shown.
|
Before Width: | Height: | Size: 172 B |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 416 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 553 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 497 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
BIN
Images/peas.gif
BIN
Images/peas.gif
Binary file not shown.
|
Before Width: | Height: | Size: 4 MiB |
BIN
Images/style.png
BIN
Images/style.png
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
198
index.html
198
index.html
|
|
@ -1,149 +1,55 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<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&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&display=swap" rel="stylesheet">
|
||||||
<link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon"/>
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
|
<title>Editor Rust</title>
|
||||||
<script src="main.js" charset="utf-8" defer></script>
|
</head>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<body>
|
||||||
<title>Meet Editor Rust</title>
|
<div class="progress-parent">
|
||||||
</head>
|
<div class="progress"></div>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
<h1 class="title">Hi! I'm Editor Rust.</h1>
|
||||||
|
<center><em>This site is still under active construction, and yes, this is inside a <code>center</code> tag.</em></center>
|
||||||
|
<h2>Tools</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
<h2>What I do</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
<h2>About me</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
<h2>More</h2>
|
||||||
|
|
||||||
|
<p>Dev jokes! Checkout my list <a href="https://docs.google.com/document/d/e/2PACX-1vRKinOJRXxrcpdMauNaTAzLNVHom4OkadGgdm6ja82330EJFr_5FRw4ThSj71GcjG9Ll_7jh-7mox95/pub">here</a></p>
|
||||||
|
<p>BFF <a href="https://github.com/tildejustin">tildejustin</a>, see his stuff</p>
|
||||||
|
|
||||||
|
<h2>Work</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 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!</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 can't wait to improve this.</p>
|
||||||
|
<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>
|
||||||
|
<h2>Games</h2>
|
||||||
|
<p>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.</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, the golden standard for all clicker games. 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 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...</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>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div>
|
||||||
|
<h2>Find me</h2>
|
||||||
|
<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>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 src="main.js"></script>
|
||||||
</html>
|
</html>
|
||||||
127
main.js
127
main.js
|
|
@ -1,122 +1,7 @@
|
||||||
let pageLocation = "meet";
|
console.log("JavaScript Connected!");
|
||||||
let backButton = document.getElementById("back");
|
console.log("Nice to see you :)");
|
||||||
let nextButton = document.getElementById("next");
|
console.log("Have a great day! 💖 Editor Rust");
|
||||||
|
|
||||||
function next() {
|
window.addEventListener("scroll", () => {
|
||||||
if (pageLocation === "meet") {
|
document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
|
||||||
document.location = "#vegetable-dash";
|
}, false);
|
||||||
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";
|
|
||||||
}
|
|
||||||
|
|
|
||||||
566
old.css
Normal file
566
old.css
Normal file
|
|
@ -0,0 +1,566 @@
|
||||||
|
/*==================================================
|
||||||
|
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
Normal file
149
old.html
Normal file
|
|
@ -0,0 +1,149 @@
|
||||||
|
<!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
Normal file
122
old.js
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
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";
|
||||||
|
}
|
||||||
589
styles.css
589
styles.css
|
|
@ -1,566 +1,97 @@
|
||||||
/*==================================================
|
|
||||||
Main
|
|
||||||
==================================================*/
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-family: "Nunito", "Times New Roman", Times, serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
:root {
|
||||||
margin: 0;
|
/* Eventually allow any hex color through JS, along with random generator */
|
||||||
padding: 0;
|
--theme-color: #f69b46;
|
||||||
overflow: hidden;
|
/*
|
||||||
|
Other nice colors
|
||||||
|
#46aaf6 // blue
|
||||||
|
#f69b46 // orange
|
||||||
|
#46f64f // green
|
||||||
|
#f64646 // red
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
.title {
|
||||||
list-style-type: none;
|
margin: 2rem 2rem 1rem 2rem;
|
||||||
}
|
|
||||||
|
|
||||||
::-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;
|
text-align: center;
|
||||||
font-family: Nunito;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hi Animation */
|
h2 {
|
||||||
|
position: relative;
|
||||||
.hi {
|
margin: 1rem .75rem .75rem 2.5rem;
|
||||||
padding: 50px;
|
font-size: 1.5rem;
|
||||||
font-size: 250%;
|
transition: .2s;
|
||||||
display: inline-block;
|
|
||||||
transition: all .3s;
|
|
||||||
transition-delay: .3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.landing:hover .hi {
|
h2::before {
|
||||||
color: #f9f9f9;
|
|
||||||
font-size: 280%;
|
|
||||||
background-color: #262626;
|
|
||||||
border-radius: 2%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hi:before, .hi:after {
|
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 50px;
|
top: .5rem;
|
||||||
width: 50px;
|
left: -.6rem;
|
||||||
background-color: #262626;
|
height: 1rem;
|
||||||
border-radius: 50%;
|
width: .25rem;
|
||||||
transition: all 0.3s;
|
border-radius: 5rem;
|
||||||
opacity: 0;
|
background-color: var(--theme-color);
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
transition: .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu li:hover {
|
h2:hover {
|
||||||
text-shadow: 0 .2px .2px #262626;
|
margin: 1rem .75rem .75rem 3rem;
|
||||||
background-color: #fafafa;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu hr {
|
h2:hover::before {
|
||||||
border: 1px solid #ebebeb;
|
left: -1.1rem;
|
||||||
border-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*==========================================================
|
p {
|
||||||
Links
|
margin: .5rem 2rem;
|
||||||
==========================================================*/
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lightblue;
|
color: var(--theme-color);
|
||||||
text-decoration: none;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-link:after {
|
.footer {
|
||||||
display: none;
|
padding: 1rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
background-color: #222;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: solid .4rem var(--theme-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:after {
|
.faded-footer {
|
||||||
content: "";
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-parent {
|
||||||
display: block;
|
display: block;
|
||||||
height: 1.5px;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
background: lightblue;
|
|
||||||
transition: all .5s;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover:after {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-color: #ccc;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*==================================================
|
.progress {
|
||||||
Animations
|
height: .5rem;
|
||||||
==================================================*/
|
width: 0%;
|
||||||
|
background-color: var(--theme-color);
|
||||||
@keyframes heavenly-glow {
|
animation: progress 1s linear;
|
||||||
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; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*==================================================
|
@keyframes progress {
|
||||||
Personal
|
to { width: 100%; }
|
||||||
==================================================*/
|
|
||||||
|
|
||||||
.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 {
|
.progress {
|
||||||
width: 90px;
|
animation-play-state: paused;
|
||||||
height: 90px;
|
animation-delay: calc(var(--scroll) * -1s);
|
||||||
background-color: #f1f1f1;
|
animation-iteration-count: 1;
|
||||||
margin: 10px;
|
animation-fill-mode: both;
|
||||||
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?) */
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue