mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-06 15:45:54 -05:00
🗑️ Removed Duplicates
This commit is contained in:
Squirrel
parent
7b9a2e2a80
commit
2f93f16543
28 changed files with 0 additions and 1058 deletions
|
|
@ -1,2 +0,0 @@
|
|||
Gold[[:space:]]Rush-win32.zip filter=lfs diff=lfs merge=lfs -text
|
||||
Gold[[:space:]]Rush-darwin-x64.zip filter=lfs diff=lfs merge=lfs -text
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
Gold Rush-darwin-x64.zip
|
||||
Gold Rush-win32.zip
|
||||
Binary file not shown.
Binary file not shown.
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 |
Binary file not shown.
|
Before Width: | Height: | Size: 323 B |
Binary file not shown.
|
Before Width: | Height: | Size: 180 B |
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 |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
|
|
@ -1,80 +0,0 @@
|
|||
body {
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
background-image: linear-gradient(to bottom, lightyellow, lightblue);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background-color: #272727;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.downloads {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.download {
|
||||
height: 125px;
|
||||
width: 200px;
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
border: outset 8px lightblue;
|
||||
border-radius: 8px;
|
||||
letter-spacing: 2px;
|
||||
line-height: 35px;
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: colors 8s infinite alternate;
|
||||
}
|
||||
|
||||
.download:nth-child(2) {
|
||||
animation-delay: .5s;
|
||||
}
|
||||
|
||||
.download:nth-child(3) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes colors {
|
||||
0% {
|
||||
background-color: red;
|
||||
}
|
||||
15% {
|
||||
background-color: orange;
|
||||
}
|
||||
30% {
|
||||
background-color: yellow;
|
||||
}
|
||||
45% {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
60% {
|
||||
background-color: lightblue;
|
||||
}
|
||||
85% {
|
||||
background-color: purple;
|
||||
}
|
||||
85% {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="download-gold-rush.css">
|
||||
<title>Download | Gold Rush</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
</nav>
|
||||
<h2>Like the game? Download our app!</h2>
|
||||
<h4>These downloads are still in offical version 0.9.0. To get the full version use the broswer game <a href="squirrel-314.github.io">here.</a></h4>
|
||||
<div class="downloads">
|
||||
<a href="Gold Rush Downloads/gold-rush_0.1.0_amd64.deb" class="download">Download for Linux <br> v0.1</a>
|
||||
<a href="Gold Rush Downloads/Gold Rush-win32.zip" class="download">Download for Windows <br> v0.1</a>
|
||||
<a href="Gold Rush Downloads/Gold Rush-darwin-x64.zip" class="download">Download for MacOS <br> v0.1</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
body {
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
background-image: linear-gradient(to bottom, lightyellow, lightblue);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background-color: #272727;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.downloads {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.download {
|
||||
height: 125px;
|
||||
width: 200px;
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
border: outset 8px lightblue;
|
||||
border-radius: 8px;
|
||||
letter-spacing: 2px;
|
||||
line-height: 35px;
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: colors 8s infinite alternate;
|
||||
}
|
||||
|
||||
.download:nth-child(2) {
|
||||
animation-delay: .5s;
|
||||
}
|
||||
|
||||
.download:nth-child(3) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes colors {
|
||||
0% {
|
||||
background-color: red;
|
||||
}
|
||||
15% {
|
||||
background-color: orange;
|
||||
}
|
||||
30% {
|
||||
background-color: yellow;
|
||||
}
|
||||
45% {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
60% {
|
||||
background-color: lightblue;
|
||||
}
|
||||
85% {
|
||||
background-color: purple;
|
||||
}
|
||||
85% {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="download-gold-rush.css">
|
||||
<title>Download | Gold Rush</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
</nav>
|
||||
<h2>Like the game? Download our app!</h2>
|
||||
<h4>These downloads are still in offical version 0.9.0. To get the full version use the broswer game <a href="squirrel-314.github.io">here.</a></h4>
|
||||
<div class="downloads">
|
||||
<a href="Gold Rush Downloads/gold-rush_0.1.0_amd64.deb" class="download">Download for Linux <br> v0.1</a>
|
||||
<a href="Gold Rush Downloads/Gold Rush-win32.zip" class="download">Download for Windows <br> v0.1</a>
|
||||
<a href="Gold Rush Downloads/Gold Rush-darwin-x64.zip" class="download">Download for MacOS <br> v0.1</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
166
index (2).html
166
index (2).html
|
|
@ -1,166 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
|
||||
<script src="main.js" charset="utf-8" defer></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Meet Squirrel</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Meet Squirrel -->
|
||||
<div class="landing" id="meet">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1 class="hi">
|
||||
Hi! I'm Squirrel!
|
||||
</h1>
|
||||
<br><br>
|
||||
<p class="about-me">I am not a web developer, but I do spend a lot of time programming. I work for Squirrel Enterprise as CEO, CTO, developer, designer, and one of the only two employees. I like CSS transitions and I think everyone should use them. I know HTML, CSS, JavaScript, and Electron, and am currently in the process of learing React and Node. I know a bit of Python. I like SVGs and Linux and you should not have come here. You can see my GitHub account <a class="hover-link" href="https://github.com/Squirrel-314">here</a>, and check out all the organizations I am in alone. Like my repositories? Please put up issues for any mistakes, and if you have a suggestion, also make an issue. No, I didn't mean it that way, it's just easier for me to see. <b>If you would like to use my services, do it through Squirrel Enterprises - there is a 98% chance I will complete the work.</b>(Did you notice the font?)</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/squirrel-314/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://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">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>
|
||||
|
||||
<!-- Glish Translator
|
||||
<div class="block" id="glish-translate">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1>Glish Translate</h1>
|
||||
<p class="about-glish">Have you ever had trouble with all of that slang and inelegible texting abbrevations? I certiantly have, but I feel I may be alone in this. Anyway, this Chrome extension is a dictonary that translates glish, more commonly know as text language. You can find the GitHub repository <a href="https://github.com/Squirrel-314/glish-translate">here</a>.</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Incremental
|
||||
<div class="block" id="incremental">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1>Incremental</h1>
|
||||
<p class="incremental-text">A simple incremental game template made with JavaScript, set up as a four lesson class. Please feel free to copy the code, but I'd prefer you changed the theme or link this site. You can find the GitHub repository <a href="https://github.com/Squirrel-314/incremental">here</a>.</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Style
|
||||
<div class="block" id="style">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1>Style</h1>
|
||||
<p class="style-text">Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites! You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>, or visit the site <a href="https://squirrel-314.github.io/style/">here</a>.</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Hillside Township
|
||||
<div class="block" id="hillside-township">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1>Hillside Township</h1>
|
||||
<p class="hillside-text">Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites! You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>, or visit the site <a href="https://squirrel-314.github.io/style/">here</a>.</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- The Schoolarly Bay
|
||||
<div class="block" id="schoolarly-bay">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1>The Schoolarly Bay</h1>
|
||||
<p class="schoolarly-text">Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites! You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>, or visit the site <a href="https://squirrel-314.github.io/style/">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/Squirrel-314/numtoword">numtoword on GitHub</a>
|
||||
<br><a href="https://github.com/Squirrel-314/glish-translate">Glish Translate on GitHub</a>
|
||||
<br><a href="https://github.com/Squirrel-314/incremental">Incremental on GitHub</a>
|
||||
<br><a href="https://github.com/Squirrel-314/style">Style on GitHub</a> <a href="https://squirrel-314.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/Squirrel-314"><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:thehillsidetownship@gmail.com?subject=feedback">thehillsidetownship@gmail.com</a>, <a href="mailto:iloveplantsandfungi@gmail.com?subject=feedback">iloveplantsandfungi@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://squirrel-314.github.io/vegetable-dash/index.html">Check this out!</a></li>
|
||||
<li class="menu-links"><a href="https://squirrel-314.github.io">And this!</a></li>
|
||||
<li>You won't regret it!</li>
|
||||
<li>Probably.</li>
|
||||
<hr>
|
||||
<li class="menu-links"><a href="https://github.com/Squirrel-Enterprise/squirrel-enterprise.github.io">GitHub</a></li>
|
||||
</div>
|
||||
</html>
|
||||
122
main (2).js
122
main (2).js
|
|
@ -1,122 +0,0 @@
|
|||
let pageLocation = "meet";
|
||||
let backButton = document.getElementById("back");
|
||||
let nextButton = document.getElementById("next");
|
||||
|
||||
function next() {
|
||||
if (pageLocation === "meet") {
|
||||
document.location = "#vegetable-dash";
|
||||
pageLocation = "vegetable-dash";
|
||||
}
|
||||
else if (pageLocation === "vegetable-dash") {
|
||||
document.location = "#gold-rush";
|
||||
pageLocation = "gold-rush";
|
||||
}
|
||||
else if (pageLocation === "gold-rush") {
|
||||
document.location = "#coming-soon";
|
||||
pageLocation = "coming-soon";
|
||||
}
|
||||
buttonVisiblility();
|
||||
}
|
||||
|
||||
function last() {
|
||||
if (pageLocation === "vegetable-dash") {
|
||||
document.location = "#meet";
|
||||
pageLocation = "meet";
|
||||
}
|
||||
else if (pageLocation === "gold-rush") {
|
||||
document.location = "#vegetable-dash";
|
||||
pageLocation = "vegetable-dash";
|
||||
}
|
||||
else if (pageLocation === "coming-soon") {
|
||||
document.location = "#gold-rush";
|
||||
pageLocation = "gold-rush";
|
||||
}
|
||||
buttonVisiblility();
|
||||
}
|
||||
|
||||
function buttonVisiblility() {
|
||||
if (pageLocation != "meet") {
|
||||
backButton.style.opacity = "1";
|
||||
}
|
||||
else {
|
||||
backButton.style.opacity = "0";
|
||||
}
|
||||
if (pageLocation != "coming-soon") {
|
||||
nextButton.style.opacity = "1";
|
||||
}
|
||||
else {
|
||||
nextButton.style.opacity = "0";
|
||||
}
|
||||
where();
|
||||
}
|
||||
|
||||
function where() {
|
||||
let meetIndicator = document.getElementById("meetIndicator");
|
||||
let vegIndicator = document.getElementById("vegetable-dashIndicator");
|
||||
let goldIndicator = document.getElementById("gold-rushIndicator");
|
||||
let comingIndicator = document.getElementById("coming-soonIndicator");
|
||||
|
||||
if (pageLocation === "meet") {
|
||||
meetIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
meetIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
if (pageLocation === "vegetable-dash") {
|
||||
vegIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
vegIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
if (pageLocation === "gold-rush") {
|
||||
goldIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
goldIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
if (pageLocation === "coming-soon") {
|
||||
comingIndicator.style.backgroundColor = "#262626";
|
||||
}
|
||||
else {
|
||||
comingIndicator.style.backgroundColor = "#d6d6d6";
|
||||
}
|
||||
}
|
||||
|
||||
function ind(page) {
|
||||
document.location = "#" + page;
|
||||
pageLocation = page;
|
||||
buttonVisiblility();
|
||||
}
|
||||
|
||||
// Right Click Menu
|
||||
let rightClickMenu = document.getElementById("menu").style;
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('contextmenu', function(e) {
|
||||
var posX = e.clientX;
|
||||
var posY = e.clientY;
|
||||
menu(posX, posY);
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
document.addEventListener('click', function(e) {
|
||||
rightClickMenu.display = "none";
|
||||
}, false);
|
||||
}
|
||||
else {
|
||||
document.attachEvent('oncontextmenu', function(e) {
|
||||
var posX = e.clientX;
|
||||
var posY = e.clientY;
|
||||
menu(posX, posY);
|
||||
e.preventDefault();
|
||||
});
|
||||
document.attachEvent('onclick', function(e) {
|
||||
setTimeout(function() {
|
||||
rightClickMenu.display = "none";
|
||||
}, 501);
|
||||
});
|
||||
}
|
||||
|
||||
function menu(x, y) {
|
||||
rightClickMenu.top = y + "px";
|
||||
rightClickMenu.left = x + "px";
|
||||
rightClickMenu.display = "block";
|
||||
}
|
||||
566
styles (2).css
566
styles (2).css
|
|
@ -1,566 +0,0 @@
|
|||
/*==================================================
|
||||
Main
|
||||
==================================================*/
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { display: none; }
|
||||
|
||||
/*==================================================
|
||||
Common Classes
|
||||
==================================================*/
|
||||
|
||||
.block {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.block:nth-child(2n) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.next {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
color: aquamarine;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
box-shadow: 0 0 8px #262626;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 250%;
|
||||
border-radius: 50%;
|
||||
transition: 0.8s;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.last {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
color: aquamarine;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
left: 50px;
|
||||
box-shadow: 0 0 8px #262626;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 250%;
|
||||
border-radius: 50%;
|
||||
transition: 0.8s;
|
||||
font-weight: 900;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.next:hover {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
|
||||
.last:hover {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
animation: nudge 3s linear infinite;
|
||||
transition: .2s;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@keyframes nudge {
|
||||
0% { margin-right: 0px; }
|
||||
20% { margin-right: -8px; }
|
||||
40% { margin-right: -2px; }
|
||||
60% { margin-right: -8px; }
|
||||
80% { margin-right: 0px; }
|
||||
100% { margin-right: 0px; }
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
|
||||
.progress {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 75px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.progress li {
|
||||
position: relative;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
background-color: #d6d6d6;
|
||||
color: #f9f9f9;
|
||||
margin: 0 15px;
|
||||
transition: 0.2s;
|
||||
box-shadow: inset 2px 2px 10px #fff,
|
||||
0 0 2.5px #262626;
|
||||
}
|
||||
|
||||
.progress li:hover { transform: scale(1.2); }
|
||||
|
||||
#meetIndicator { background-color: #262626; }
|
||||
|
||||
/*==================================================
|
||||
Landing
|
||||
==================================================*/
|
||||
|
||||
.landing {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-family: Nunito;
|
||||
}
|
||||
|
||||
/* Hi Animation */
|
||||
|
||||
.hi {
|
||||
padding: 50px;
|
||||
font-size: 250%;
|
||||
display: inline-block;
|
||||
transition: all .3s;
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
.landing:hover .hi {
|
||||
color: #f9f9f9;
|
||||
font-size: 280%;
|
||||
background-color: #262626;
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.hi:before, .hi:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #262626;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hi:before { left: -50px; }
|
||||
.hi:after { right: -50px; }
|
||||
|
||||
.landing:hover .hi:before {
|
||||
left: 50%;
|
||||
transform: scale(1.5);
|
||||
animation: hi-opacity .6s 1 forwards;
|
||||
}
|
||||
|
||||
.landing:hover .hi:after {
|
||||
right: 50%;
|
||||
transform: scale(1.5);
|
||||
animation: hi-opacity .6s 1 forwards;
|
||||
}
|
||||
|
||||
@keyframes hi-opacity {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* About Me */
|
||||
|
||||
.about-me {
|
||||
margin: 0 80px;
|
||||
font-size: 120%;
|
||||
transform: translateY(-50px);
|
||||
opacity: 0;
|
||||
transition: all 1.5s;
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
.landing:hover .about-me {
|
||||
transform: translateY(2px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Vegetable Dash
|
||||
==================================================*/
|
||||
|
||||
/* General Information */
|
||||
|
||||
.about-vegetable {
|
||||
margin: 50px;
|
||||
font-size: 120%;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 1s;
|
||||
transition-delay: 1.5s;
|
||||
}
|
||||
|
||||
/* Opening Animation */
|
||||
|
||||
#vegetable-dash:hover .about-vegetable {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.space { width: 10px; }
|
||||
|
||||
.smokey {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.smokey li {
|
||||
list-style: none;
|
||||
transition: 1s;
|
||||
transform: rotate(45deg) translateY(-200px);
|
||||
opacity: 0;
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
#vegetable-dash:hover li {
|
||||
transform: rotate(0) translateY(0);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.smokey li:nth-child(2) { transition-delay: .05s; }
|
||||
.smokey li:nth-child(3) { transition-delay: .1s; }
|
||||
.smokey li:nth-child(4) { transition-delay: .15s; }
|
||||
.smokey li:nth-child(5) { transition-delay: .2s; }
|
||||
.smokey li:nth-child(6) { transition-delay: .25s; }
|
||||
.smokey li:nth-child(7) { transition-delay: .3s; }
|
||||
.smokey li:nth-child(8) { transition-delay: .35s; }
|
||||
.smokey li:nth-child(9) { transition-delay: .4s; }
|
||||
.smokey li:nth-child(10) { transition-delay: .35s; }
|
||||
.smokey li:nth-child(11) { transition-delay: .4s; }
|
||||
.smokey li:nth-child(12) { transition-delay: .45s; }
|
||||
.smokey li:nth-child(13) { transition-delay: .5s; }
|
||||
.smokey li:nth-child(14) { transition-delay: .55s; }
|
||||
.smokey li:nth-child(15) { transition-delay: .6s; }
|
||||
|
||||
/*==================================================
|
||||
Gold Rush
|
||||
==================================================*/
|
||||
|
||||
/* General */
|
||||
|
||||
#gold-rush h1 {
|
||||
margin: 25px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.about-gold {
|
||||
margin: 50px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
|
||||
#gold-rush h1 {
|
||||
background: linear-gradient(90deg, #000, #fff, #000);
|
||||
background-size: 80%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
#gold-rush:hover h1 { animation: show-text 1.2s 3 forwards; }
|
||||
|
||||
@keyframes show-text {
|
||||
0% { background-position: -100%; }
|
||||
100% { background-position: 250%; }
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
animation: bounce-out 3s ease-in forwards;
|
||||
transform: translate(1000px, 500px);
|
||||
margin: auto;
|
||||
transition: 0.8s;
|
||||
}
|
||||
|
||||
#gold-rush:hover .gold-text { animation: bounce-in 3s ease-in forwards; }
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: translateX(500px) translateY(-80px) scale(0);
|
||||
width: 500px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
75% {
|
||||
transform: translateX(200px) translateY(80px) scale(0.8);
|
||||
width: 500px;
|
||||
opacity: .8;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
width: 500px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes bounce-out {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
width: 500px;
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
transform: translateX(200px) translateY(80px) scale(0.8);
|
||||
width: 500px;
|
||||
opacity: .8;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(500px) translateY(-80px) scale(0);
|
||||
width: 500px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Coming Soon!
|
||||
==================================================*/
|
||||
|
||||
.coming {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.coming li {
|
||||
transition: 0.2s;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.coming:hover li {
|
||||
animation: shake 1s infinite alternate;
|
||||
margin: 0 4px;
|
||||
text-shadow: 0 25px 2px #262626;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: rotate(10deg) scaleY(1.2); }
|
||||
20% { transform: rotate(-10deg) scaleY(1); }
|
||||
40% { transform: rotate(10deg) scaleY(1.2); }
|
||||
60% { transform: rotate(-10deg) scaleY(1); }
|
||||
80% { transform: rotate(10deg) scaleY(1.2); }
|
||||
100% { transform: rotate(-10deg) scaleY(1); }
|
||||
}
|
||||
|
||||
.coming:hover li:nth-child(2) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(4) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(6) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(8) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(10) { animation-delay: 0.2s; }
|
||||
.coming:hover li:nth-child(12) { animation-delay: 0.2s; }
|
||||
|
||||
/*==================================================
|
||||
Right Click Menu
|
||||
==================================================*/
|
||||
|
||||
#menu {
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
font-family: Nunito;
|
||||
font-size: 15px;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #f5f5f5;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
list-style-type: none;
|
||||
padding: 10px 25px;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#menu li:hover {
|
||||
text-shadow: 0 .2px .2px #262626;
|
||||
background-color: #fafafa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#menu hr {
|
||||
border: 1px solid #ebebeb;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/*==========================================================
|
||||
Links
|
||||
==========================================================*/
|
||||
|
||||
a {
|
||||
color: lightblue;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-link:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.5px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
background: lightblue;
|
||||
transition: all .5s;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Animations
|
||||
==================================================*/
|
||||
|
||||
@keyframes heavenly-glow {
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 5px 5px 5px whitesmoke,
|
||||
5px -5px 5px whitesmoke,
|
||||
-5px 5px 5px whitesmoke,
|
||||
-5px -5px 5px whitesmoke;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
@keyframes darkness-grows {
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 5px 5px 5px #262626,
|
||||
5px -5px 5px #262626,
|
||||
-5px 5px 5px #262626,
|
||||
-5px -5px 5px #262626;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
@keyframes rainbow-glow {
|
||||
0% { box-shadow: none; }
|
||||
50% {
|
||||
box-shadow: 2px 2px 1px red,
|
||||
4px 4px 1px orange,
|
||||
6px 6px 1px yellow,
|
||||
8px 8px 1px lightgreen,
|
||||
10px 10px 1px lightblue,
|
||||
12px 12px 1px purple,
|
||||
|
||||
2px -2px 1px red,
|
||||
4px -4px 1px orange,
|
||||
6px -6px 1px yellow,
|
||||
8px -8px 1px lightgreen,
|
||||
10px -10px 1px lightblue,
|
||||
12px -12px 1px purple,
|
||||
|
||||
-2px 2px 1px red,
|
||||
-4px 4px 1px orange,
|
||||
-6px 6px 1px yellow,
|
||||
-8px 8px 1px lightgreen,
|
||||
-10px 10px 1px lightblue,
|
||||
-12px 12px 1px purple,
|
||||
|
||||
-2px -2px 1px red,
|
||||
-4px -4px 1px orange,
|
||||
-6px -6px 1px yellow,
|
||||
-8px -8px 1px lightgreen,
|
||||
-10px -10px 1px lightblue,
|
||||
-12px -12px 1px purple;
|
||||
}
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Personal
|
||||
==================================================*/
|
||||
|
||||
.will-not-find-me-at { font-family: Nunito; }
|
||||
.find-me { margin: 50px 50px 0 50px; }
|
||||
|
||||
.nothing-link:after { display: none; }
|
||||
|
||||
.will-not-find-me-at {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.will-not-find-me-at a {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background-color: #f1f1f1;
|
||||
margin: 10px;
|
||||
border-radius: 30%;
|
||||
color: #10ac84;
|
||||
box-shadow: 0 5px 15px -5px #00000070;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: 90px;
|
||||
font-size: 25px;
|
||||
transition: all 0.2s;
|
||||
margin-top: 35%;
|
||||
}
|
||||
|
||||
.will-not-find-me-at a:hover i {
|
||||
transform: scale(1.5) rotate(360deg);
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.will-not-find-me-at a:hover { background-color: #262626; }
|
||||
|
||||
#linux-rainbow {
|
||||
height: 20vh;
|
||||
border-radius: 5vh;
|
||||
animation: rainbow-glow 5s infinite;
|
||||
margin: 5vh auto;
|
||||
}
|
||||
|
||||
.hr, .hr-2 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #262626;
|
||||
opacity: .2;
|
||||
margin: 25px 75px;
|
||||
}
|
||||
|
||||
.hr-2 {
|
||||
opacity: 0;
|
||||
margin: 0 25px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
/* Should have nice hover that shows some content from link (iframe in tooltip?) */
|
||||
Loading…
Reference in a new issue