mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-06 15:45:54 -05:00
Changes Major!
This commit is contained in:
Squirrel-314
parent
e062ef93dc
commit
fb1ad3aab2
4 changed files with 214 additions and 43 deletions
|
|
@ -10,6 +10,7 @@
|
|||
<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>
|
||||
|
|
|
|||
58
index.html
58
index.html
|
|
@ -2,6 +2,7 @@
|
|||
<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"></script>
|
||||
|
|
@ -9,22 +10,46 @@
|
|||
<title>Meet Squirrel</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="javascript:void">Home</a>
|
||||
<a href="javascript:void">|</a>
|
||||
<a href="javascript:void">Downloads</a>
|
||||
</nav>
|
||||
<br><br><br>
|
||||
<div id="squirrel">
|
||||
<h1>Hi! I'm Squirrel!</h1>
|
||||
<p>I am a web developer and an <strong>extremely</strong> unimportant person in general. I use Linux, and that is about the most intresting thing about me. But I have made some stuff! You can see my GitHub account <a 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 eaisier for me to see.</p>
|
||||
<div class="landing">
|
||||
<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 time programming. 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. Linux is my faviorite OS (I use Kubuntu, looking into Deepin). You can see my GitHub account <a 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 eaisier for me to see.</p>
|
||||
</div>
|
||||
<div class="next">
|
||||
<span class="arrow">⟶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<div class="project" id="vegetable-dash">
|
||||
<br>
|
||||
<img class="display-image-light" src="Images/cheese.png" alt="">
|
||||
<h2>Vegetable Dash!</h2>
|
||||
<h4>My all new farming game! Uses JavaScript, and plenty of high quality MS Paint images!</h4>
|
||||
<p>You can play it <a href="https://squirrel-314.github.io/vegetable-dash/Game/index.html">here</a>, and you can find the GitHub repository <a href="https://github.com/Squirrel-314/vegetable-dash">here</a>.</p>
|
||||
</div>
|
||||
<div class="project" id="glish-translate">
|
||||
<br>
|
||||
<img class="display-image-dark" src="Images/cheese.png" alt="">
|
||||
<h2>Glish Translate</h2>
|
||||
<h4>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.</h4>
|
||||
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/glish-translate">here</a>.</p>
|
||||
</div>
|
||||
<div class="project" id="gold-rush">
|
||||
<div class="content">
|
||||
<br>
|
||||
<img class="display-image-light" id="gold-rush-icon" src="Images/gold-rush-icon.png" alt="">
|
||||
<h2>Gold Rush</h2>
|
||||
<h4>A simple incremental game made with JavaScript</h4>
|
||||
<h4>My first game, a simple incremental game made with JavaScript</h4>
|
||||
<p>You can play it <a href="https://squirrel-314.github.io">here</a>, or download the app <a href="download-gold-rush.html">here</a>. You can find the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,7 +88,6 @@
|
|||
<hr>
|
||||
<div class="find-me">
|
||||
<a href="javascript:void"><i class="fab fa-reddit"></i></a>
|
||||
<a href="javascript:void"><i class="fab fa-stack-overflow"></i></a>
|
||||
<a href="javascript:void"><i class="fab fa-twitch"></i></a>
|
||||
<a href="javascript:void"><i class="fab fa-dribbble"></i></a>
|
||||
<a href="javascript:void"><i class="fab fa-squarespace"></i></a>
|
||||
|
|
@ -74,12 +98,22 @@
|
|||
<a href="javascript:void"><i class="fab fa-instagram"></i></a>
|
||||
<a href="javascript:void"><i class="fab fa-medium"></i></a>
|
||||
</div>
|
||||
<p>You will find me at</p><br>
|
||||
<hr>
|
||||
<div class="find-me">
|
||||
<a href="https://github.com/Squirrel-314"><i class="fab fa-github"></i></a>
|
||||
<a href="https://stackoverflow.com/users/14818357/squirrel"><i class="fab fa-stack-overflow"></i></a>
|
||||
<a href="https://codepen.io/squirrel-314"><i class="fab fa-codepen"></i></a>
|
||||
</div>
|
||||
<hr>
|
||||
<i class="fab fa-linux"></i>
|
||||
<p>Email | <a href="mailto:thehillsidetownship@gmail.com?subject=feedback">thehillsidetownship@gmail.com</a></p><br>
|
||||
<p>Adress | Oak forest, acorn path, that tree.</p><br>
|
||||
<p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p><br>
|
||||
<img title="I like rainbows" id="linux-rainbow" src="Images/linux.png" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</html>
|
||||
|
|
|
|||
1
main.js
1
main.js
|
|
@ -0,0 +1 @@
|
|||
document.getElementById( 'bottom' ).scrollIntoView();
|
||||
197
styles.css
197
styles.css
|
|
@ -2,57 +2,192 @@
|
|||
Main
|
||||
==================================================*/
|
||||
|
||||
html {
|
||||
overflow: scroll;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
background-color: whitesmoke;
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overlanding: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Navigation Bar
|
||||
Common Classes
|
||||
==================================================*/
|
||||
|
||||
nav {
|
||||
.block {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.next {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
color: aquamarine;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #262626;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
box-shadow: 0 0 8px #262626;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
overflow: scroll;
|
||||
scroll-snap-align: start;
|
||||
box-shadow: 0 8px 15px #262626;
|
||||
font-size: 250%;
|
||||
border-radius: 50%;
|
||||
transition: 0.8s;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
margin: 8px;
|
||||
.next:hover {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
animation: nudge 5s linear infinite;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
@keyframes nudge {
|
||||
0% {
|
||||
margin-right: 0px;
|
||||
transform: scale(1);
|
||||
}
|
||||
0% {
|
||||
margin-right: -8px;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
0% {
|
||||
margin-right: 0px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*==================================================
|
||||
Main Sectors
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*==================================================
|
||||
Main Sectors
|
||||
==================================================
|
||||
|
||||
.project {
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#vegetable-dash {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: #272727;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#glish-translate {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#gold-rush {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
|
|
@ -63,7 +198,7 @@ Main Sectors
|
|||
#incremental {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: whitesmoke;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -77,7 +212,7 @@ Main Sectors
|
|||
#hillside {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: whitesmoke;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +226,7 @@ Main Sectors
|
|||
#squirrel {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: whitesmoke;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
|
@ -99,7 +234,7 @@ Main Sectors
|
|||
#personal {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background-color: whitesmoke;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
scroll-snap-align: start;
|
||||
|
|
@ -109,7 +244,7 @@ Main Sectors
|
|||
|
||||
/*==================================================
|
||||
Project Contents
|
||||
==================================================*/
|
||||
==================================================
|
||||
|
||||
.project h2, .project h4, .project p {
|
||||
margin: 25px 25px;
|
||||
|
|
@ -117,7 +252,7 @@ Project Contents
|
|||
|
||||
/*==================================================
|
||||
Other
|
||||
==================================================*/
|
||||
==================================================
|
||||
|
||||
@keyframes heavenly-glow {
|
||||
0% {
|
||||
|
|
@ -189,7 +324,7 @@ Other
|
|||
|
||||
/*==================================================
|
||||
Display Images
|
||||
==================================================*/
|
||||
==================================================
|
||||
|
||||
.display-image-dark {
|
||||
width: 150px;
|
||||
|
|
@ -241,7 +376,7 @@ Display Images
|
|||
|
||||
/*==================================================
|
||||
End Section
|
||||
==================================================*/
|
||||
==================================================
|
||||
|
||||
.find-me {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue