Init commit
This commit is contained in:
root
commit
c8835bc274
4 changed files with 409 additions and 0 deletions
BIN
assets/not_sure.jpg
Normal file
BIN
assets/not_sure.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
140
index.html
Normal file
140
index.html
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<!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="assets/not_sure.jpg" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
|
||||
<script src="scripts/main.js" charset="utf-8" defer></script>
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
<title>⭐ Hamza Nasher-Alneam ⭐</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Move to different parts -->
|
||||
<div class="progress-parent">
|
||||
<div class="progress">
|
||||
<span id="meetIndicator" onclick="goToSection('meet')"></span>
|
||||
<span id="vegetable-dashIndicator" onclick="goToSection('vegetable-dash')"></span>
|
||||
<span id="gold-rushIndicator" onclick="goToSection('gold-rush')"></span>
|
||||
<span id="coming-soonIndicator" onclick="goToSection('coming-soon')"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Landing -->
|
||||
<div class="block landing" id="meet">
|
||||
<div class="section-head">
|
||||
<h1 class="hi">
|
||||
I'm Hamza Nasher-Alneam
|
||||
</h1>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
<div class="about-me">
|
||||
<h1>About me</h1>
|
||||
<p>I'm a high school student in the United States. When I have time, I like to do programming, which has been mostly full
|
||||
stack web dev. Now, I'm learning Kotlin for Android development, trying out Godot for the school Game Dev Club, and
|
||||
writing C++ code for the school robotics team. Currently using the Fedora KDE Spin.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vegetable Dash -->
|
||||
<div class="block" id="vegetable-dash">
|
||||
<div class="section-text">
|
||||
<div class="about-me">
|
||||
<h1>Broadneck Robotics</h1>
|
||||
<p>Vex robotics! I've done some of that. I've written code and other things about whatever</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h1 class="hi">
|
||||
Robotics
|
||||
</h1>
|
||||
<img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg" alt="Robotics image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game dev club -->
|
||||
<div class="block" id="gold-rush">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h1 class="hi">
|
||||
Game Dev Club
|
||||
</h1>
|
||||
<img class="section-image" src="https://hnasheralneam.github.io/gamedevclub/assets/title-box.png" alt="Game Dev Club logo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
<div class="about-me">
|
||||
<h1>Game Dev Club</h1>
|
||||
<p>Godot! and no more unity. Gdscipt is basically python, ewwww we don't like python, none of us.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gold Rush -->
|
||||
<div class="block" id="gold-rush">
|
||||
<div class="text">
|
||||
<br>
|
||||
<h1>achievements</h1>
|
||||
<p class="about-gold gold-text">About gold rush</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coming soon -->
|
||||
<div class="block" id="coming-soon">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h1 class="hi">
|
||||
Coming soon!
|
||||
</h1>
|
||||
<div>
|
||||
<br><br>
|
||||
<p>Email | <a href="mailto:hnasheralneam@gmail.com">hnasheralneam@gmail.com</a></p>
|
||||
<p>GitHub | <a href="https://github.com/hnasheralneam/">@hnasheralneam</a></p>
|
||||
<p>Developer website | <a href="https://hnasheralneam.github.io/">hnasheralneam.github.io</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
<div class="about-me">
|
||||
<h1>You won't find me at</h1>
|
||||
<p>Places you won't find me at</p>
|
||||
<br>
|
||||
<hr class="hr">
|
||||
<br>
|
||||
<div class="will-not-find-me-at">
|
||||
<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>
|
||||
</div>
|
||||
<h1>You will find me at</h1>
|
||||
<p>Places you will find me at</p>
|
||||
<br>
|
||||
<hr class="hr">
|
||||
<br>
|
||||
<div class="will-not-find-me-at">
|
||||
<a class="nothing-link" href="https://github.com/hamza-314"><i class="fab fa-github"></i></a>
|
||||
<a class="nothing-link" href="https://stackoverflow.com/users/14818357/hamza"><i class="fab fa-stack-overflow"></i></a>
|
||||
<a class="nothing-link" href="https://codepen.io/hamza-314"><i class="fab fa-codepen"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coming Soon -->
|
||||
<div class="block" id="coming-soon">
|
||||
<div class="text">
|
||||
<br><br>
|
||||
<h1>
|
||||
Coming soon
|
||||
</h1>
|
||||
<div>
|
||||
words
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
scripts/main.js
Normal file
17
scripts/main.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// on page load, parse the location to find the page and go to that section
|
||||
window.onload = function() {
|
||||
let page = window.location.hash.substring(1);
|
||||
console.log(page);
|
||||
if (page === "") {
|
||||
page = "meet";
|
||||
}
|
||||
goToSection(page);
|
||||
}
|
||||
|
||||
function goToSection(page) {
|
||||
document.location = "#" + page;
|
||||
|
||||
let indicator = document.getElementById(page + "Indicator");
|
||||
if (document.querySelector("span.active")) document.querySelector("span.active").classList.remove("active");
|
||||
indicator.classList.add("active")
|
||||
}
|
||||
252
styles/styles.css
Normal file
252
styles/styles.css
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
/*==================================================
|
||||
Main
|
||||
==================================================*/
|
||||
|
||||
body, html {
|
||||
overflow: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
/*==================================================
|
||||
Common Classes
|
||||
==================================================*/
|
||||
|
||||
.block {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
.block:nth-child(2n) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.section-head,
|
||||
.section-text {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
font-family: Nunito;
|
||||
}
|
||||
|
||||
|
||||
/*==================================================
|
||||
Progress
|
||||
==================================================*/
|
||||
|
||||
.progress-parent {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: #e4e4e4;
|
||||
border-radius: 14px;
|
||||
list-style-type: none;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.progress span {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #f9f9f9;
|
||||
margin: 9px 0;
|
||||
transition: 0.1s;
|
||||
box-shadow: inset 1px 1px 5px #ddd,
|
||||
0 0 1px #bbb;
|
||||
}
|
||||
|
||||
.progress span.active {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.progress span:hover { transform: scale(1.2); }
|
||||
|
||||
|
||||
/*==================================================
|
||||
Landing
|
||||
==================================================*/
|
||||
|
||||
/* Hi Animation */
|
||||
|
||||
.hi {
|
||||
padding: 50px;
|
||||
font-size: 250%;
|
||||
display: inline-block;
|
||||
transition: all .3s;
|
||||
transition-delay: .3s;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.block: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; }
|
||||
|
||||
.block:hover .hi:before {
|
||||
left: 50%;
|
||||
transform: scale(1.5);
|
||||
animation: hi-opacity .6s 1 forwards;
|
||||
}
|
||||
|
||||
.block: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; }
|
||||
}
|
||||
|
||||
|
||||
.section-head div {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-image {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* About Me */
|
||||
|
||||
.about-me {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin: 0 80px;
|
||||
font-size: 120%;
|
||||
transform: translateY(-50px);
|
||||
opacity: 0;
|
||||
transition: all 1.5s;
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
body:hover .about-me {
|
||||
transform: translateY(2px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*==========================================================
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/*==================================================
|
||||
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; }
|
||||
Loading…
Reference in a new issue