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

hi

Browse source
This commit is contained in:
Squirrel-314 2020-12-02 10:59:03 -05:00
parent 71fd137c7d
commit 20d5fec0d9
2 changed files with 106 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
index.html
View file

@ -8,49 +8,47 @@
<body> <body>
<nav> <nav>
<a href="javascript:void">Home</a> <a href="javascript:void">Home</a>
<a href="javascript:void">|</a>
<a href="javascript:void">Downloads</a> <a href="javascript:void">Downloads</a>
<a href="#">Top</a>
</nav> </nav>
<div class="columns"> <br><br><br>
<div class="column-item"> <div id="squirrel">
</div>
<div class="column-item">
</div>
</div>
<div class="squirrel">
<h1>Hi! I'm Squirrel!</h1> <h1>Hi! I'm Squirrel!</h1>
<p>I am a web developer (Is there a minimum age to be qualified? Do you need to be at least working age or age of consent in your country?) and <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> <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> </div>
<div class="project" id="gold-rush"> <div class="project" id="gold-rush">
<div class="content"> <div class="content">
<br>
<h2>Gold Rush</h2> <h2>Gold Rush</h2>
<h4>A simple incremental game made with JavaScript</h4> <h4>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> <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>
</div> </div>
<div class="project" id="incremental"> <div class="project" id="incremental">
<br>
<h2>Incremental</h2> <h2>Incremental</h2>
<h4>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 rather you changed the theme.</h4> <h4>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 rather you changed the theme.</h4>
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/incremental">here</a>.</p> <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/incremental">here</a>.</p>
</div> </div>
<div class="project" id="style"> <div class="project" id="style">
<br>
<h2>Style</h2> <h2>Style</h2>
<h4>Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites!</h4> <h4>Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites!</h4>
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p> <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p>
</div> </div>
<div class="project" id="hillside"> <div class="project" id="hillside">
<br>
<h2>Hillside Township</h2> <h2>Hillside Township</h2>
<h4>Ours homes all have a place in our heart-and sometimes on the web! I'D LIKE TO MAKE IT ABSOLUTLY CLEAR THIS IS NOT THE NEW JERSEY HILLSIDE TOWNSHIP THIS ONE IS BETTER AND HAS A BETTER FAVICON. Now that I've made that clear, my <a href="https://github.com/PusheenMaster5">friend</a> and I made a website for our town.</h4> <h4>Ours homes all have a place in our heart-and sometimes on the web! I'D LIKE TO MAKE IT ABSOLUTLY CLEAR THIS IS NOT THE NEW JERSEY HILLSIDE TOWNSHIP THIS ONE IS BETTER AND HAS A BETTER FAVICON. Now that I've made that clear, my <a href="https://github.com/PusheenMaster5">friend</a> and I made a website for our town.</h4>
<p>You can find the GitHub repository <a href="https://github.com/hillside-township/hillside-township.github.io">here</a>.</p> <p>You can find the GitHub repository <a href="https://github.com/hillside-township/hillside-township.github.io">here</a>.</p>
</div> </div>
<div class="project" id="schoolarly-bay"> <div class="project" id="schoolarly-bay">
<br>
<h2>The Schoolarly Bay</h2> <h2>The Schoolarly Bay</h2>
<h4>Scientific research papers! Publish research papers, read research papers, get paper cuts on research papers! Research papers for all!</h4> <h4>Scientific research papers! Publish research papers, read research papers, get paper cuts on research papers! Research papers for all!</h4>
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p> <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p>
</div> </div>
<div class="personal"> <div id="personal">
<p>Email | <a href="mailto:thehillsidetownship@gmail.com?subject=feedback">thehillsidetownship@gmail.com</a></p> <p>Email | <a href="mailto:thehillsidetownship@gmail.com?subject=feedback">thehillsidetownship@gmail.com</a></p>
<p>Adress | Oak forest, acorn path, that tree.</p> <p>Adress | Oak forest, acorn path, that tree.</p>
<p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p> <p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p>

109
styles.css
View file

@ -1,11 +1,41 @@
/*==================================================
Main
==================================================*/
body { body {
font-family: Helvetica; font-family: Helvetica;
background-color: whitesmoke; background-color: whitesmoke;
padding: 30px 20px 20px 20px; padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
} }
::-webkit-scrollbar {
display: none;
}
/*==================================================
Scrolling
==================================================*/
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
section {
}
/*==================================================
Navigation Bar
==================================================*/
nav { nav {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -14,6 +44,8 @@ nav {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 8px; padding: 8px;
scroll-snap-align: center;
box-shadow: 0 8px 15px #262626;
} }
nav a { nav a {
@ -22,24 +54,75 @@ nav a {
margin: 8px; margin: 8px;
} }
/*==================================================
Main Sectors
==================================================*/
.project {
margin: 0;
height: 100vh;
scroll-snap-align: center;
}
#gold-rush { #gold-rush {
height: 100vh; height: 100vh;
width: 100%;
background-color: #272727; background-color: #272727;
position: relative; position: relative;
} }
#gold-rush .content { #incremental {
position: absolute; height: 100vh;
top: 0; width: 100%;
left: 0; background-color: whitesmoke;
right: 0; position: relative;
bottom: 0;
height: 0px;
visibility: collapse;
transition: all .2s;
} }
#gold-rush:hover #gold-rush .content { #style {
height: 100vh; height: 100vh;
visibility: visible; width: 100%;
background-color: #282828;
position: relative;
} }
#hillside {
height: 100vh;
width: 100%;
background-color: whitesmoke;
position: relative;
}
#schoolarly-bay {
height: 100vh;
width: 100%;
background-color: #282828;
position: relative;
}
#squirrel {
height: 100vh;
width: 100%;
background-color: whitesmoke;
position: relative;
scroll-snap-align: center;
}
#personal {
height: 100vh;
width: 100%;
background-color: whitesmoke;
position: relative;
scroll-snap-align: center;
}
/*==================================================
Project Contents
==================================================*/
.project h2, .project h4, .project p {
margin: 25px 25px;
}
/*==================================================
Other
==================================================*/