Compare commits
No commits in common. "b4196c6f08f5667dd47f3a9b90aa751f6640ec73" and "cf7140c24cb958d2a8e9405243c2c87c7cb76bb4" have entirely different histories.
b4196c6f08
...
cf7140c24c
5 changed files with 701 additions and 0 deletions
BIN
assets/not_sure.jpg
Executable file
BIN
assets/not_sure.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
204
index.html
Executable file
204
index.html
Executable file
|
|
@ -0,0 +1,204 @@
|
||||||
|
<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.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 onmouseover="info(this)" data-info="About" id="meetIndicator" onclick="goToSection('meet')"></span>
|
||||||
|
<span onmouseover="info(this)" data-info="Leadership" id="leadershipIndicator"
|
||||||
|
onclick="goToSection('leadership')"></span>
|
||||||
|
<span onmouseover="info(this)" data-info="Skills" id="skillsIndicator" onclick="goToSection('skills')"></span>
|
||||||
|
<span onmouseover="info(this)" data-info="Clubs" id="clubsIndicator" onclick="goToSection('clubs')"></span>
|
||||||
|
<span onmouseover="info(this)" data-info="Achievements" id="achievementsIndicator"
|
||||||
|
onclick="goToSection('achievements')"></span>
|
||||||
|
<span onmouseover="info(this)" data-info="Work" id="workIndicator" onclick="goToSection('work')"></span>
|
||||||
|
<span onmouseover="info(this)" data-info="Volunteering" id="volunteeringIndicator"
|
||||||
|
onclick="goToSection('volunteering')"></span>
|
||||||
|
<span onmouseover="info(this)" data-info="Contact" id="contactIndicator"
|
||||||
|
onclick="goToSection('contact')"></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 with a passion for learning and an interest in programming
|
||||||
|
and computer systems.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Leadership -->
|
||||||
|
<div class="block" id="leadership">
|
||||||
|
<div class="section-text">
|
||||||
|
<div class="about-me">
|
||||||
|
<h1>Leadership</h1>
|
||||||
|
<p>I co-founded the Game Dev Club with some friends to create a space at my school for people interested in computers and software development. It is also an officially registered <a href="https://hackclub.com/">Hack Club</a>, which gives the club support and opportunities to connect with other teens with similar interests across the world. In the first year, we had 9 members who meet weekly both inside and outside of school to show off their work and give presentations about and discuss topics like creating engaging games and versioning code with Git.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h1 class="hi">
|
||||||
|
Leadership
|
||||||
|
</h1>
|
||||||
|
<!-- <img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg"
|
||||||
|
alt="Robotics image"> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Skills -->
|
||||||
|
<div class="block" id="skills">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h1 class="hi">
|
||||||
|
Skills
|
||||||
|
</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>Skills</h1>
|
||||||
|
<p>I have worked primarily with JavaScript and Node.js to create full-stack web apps, but I am also
|
||||||
|
comfortable in several other languages, including Python and Java. I use Linux for my daily work, but also use Kubuntu on a server.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Clubs -->
|
||||||
|
<div class="block" id="clubs">
|
||||||
|
<div class="section-text">
|
||||||
|
<div class="about-me">
|
||||||
|
<h1>Clubs</h1>
|
||||||
|
<p>Last year, I was a member of the Broadneck Robotics Club, where I wrote code for my team and help other teams with code. Throughout the 2023-2024 season, we participated in multiple local competitions, learning from our losses to improve our robot. Our efforts paid off near the end of the season, when we made it into the VEX Robotics state competition.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h1 class="hi">
|
||||||
|
Clubs
|
||||||
|
</h1>
|
||||||
|
<!-- <img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg"
|
||||||
|
alt="Robotics image"> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Achievements -->
|
||||||
|
<div class="block" id="achievements">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h1 class="hi">
|
||||||
|
Achievements
|
||||||
|
</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>Achievements</h1>
|
||||||
|
<p>In 2023, a friend and I competed in the <a href="https://magicinc.org/announcing-winners-of-ctf-14">MAGIC CTF cybersecurity competition</a>, facing off against teenage programmers from across the country, and winning third place.<p>
|
||||||
|
<p>In February of 2024, a friend and I competed in the STEP challenge by MAGIC, creating and developing a
|
||||||
|
developer profile application, which won the technology and best overall awards for 500 dollars.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Work -->
|
||||||
|
<div class="block" id="work">
|
||||||
|
<div class="section-text">
|
||||||
|
<div class="about-me">
|
||||||
|
<h1>Work</h1>
|
||||||
|
<p>I've created multiple open source projects, which, while not actively maintained, have taught me a lot of
|
||||||
|
programming
|
||||||
|
skills, as well as how to create and manage a project.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h1 class="hi">
|
||||||
|
Work
|
||||||
|
</h1>
|
||||||
|
<!-- <img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg"
|
||||||
|
alt="Robotics image"> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Volunteering -->
|
||||||
|
<div class="block" id="volunteering">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h1 class="hi">
|
||||||
|
Volunteering
|
||||||
|
</h1>
|
||||||
|
<!-- <img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg"
|
||||||
|
alt="Robotics image"> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-text">
|
||||||
|
<div class="about-me">
|
||||||
|
<h1>Volunteering</h1>
|
||||||
|
<p>Throughout my 9th grade summer, I volunteered at <a href="https://www.ecoffshoots.org/">ECO City
|
||||||
|
Farms</a>, a nonprofit farm in Prince George's County that sells affordable fresh vegetables in food
|
||||||
|
deserts.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<div class="block" id="contact">
|
||||||
|
<div class="section-text">
|
||||||
|
<div class="about-me">
|
||||||
|
<h1>You can find me at</h1>
|
||||||
|
<div class="will-not-find-me-at">
|
||||||
|
<a class="nothing-link" href="https://github.com/hnasheralneam"><i class="fa-brands fa-github"></i></a>
|
||||||
|
<a class="nothing-link" href="mailto:hnasheralneam@gmail.com"><i class="fa-brands fa-google"></i></a>
|
||||||
|
<a class="nothing-link" href="http://forgejo.hnasheralneam.dev"><i
|
||||||
|
class="fa-solid fa-code-branch"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<h1 class="hi">
|
||||||
|
Contact!
|
||||||
|
</h1>
|
||||||
|
<div class="contact">
|
||||||
|
<p>Email | <a class="fancy-underline" href="mailto:hnasheralneam@gmail.com">hnasheralneam@gmail.com</a></p>
|
||||||
|
<p>GitHub | <a class="fancy-underline" href="https://github.com/hnasheralneam/">@hnasheralneam</a></p>
|
||||||
|
<p>Developer website | <a class="fancy-underline" href="https://hnasheralneam.dev/">hnasheralneam.dev</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
42
scripts/main.js
Executable file
42
scripts/main.js
Executable file
|
|
@ -0,0 +1,42 @@
|
||||||
|
// 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")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Hover
|
||||||
|
let dynamHov;
|
||||||
|
let theme = "light";
|
||||||
|
setupDynamHov();
|
||||||
|
|
||||||
|
function setupDynamHov() {
|
||||||
|
dynamHov = document.createElement("SPAN");
|
||||||
|
document.body.appendChild(dynamHov);
|
||||||
|
if (theme === "dark") { dynamHov.classList.add("dynamicHover"); }
|
||||||
|
else { dynamHov.classList.add("dynamicHoverDark"); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function info(THIS) {
|
||||||
|
dynamHov.innerHTML = THIS.dataset.info;
|
||||||
|
dynamHov.style.opacity = "1";
|
||||||
|
THIS.onmouseleave = () => { dynamHov.style.opacity = "0"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("mousemove", (event) => {
|
||||||
|
dynamHov.style.left = (event.clientX + 18) + "px";
|
||||||
|
dynamHov.style.top = (event.clientY - 5) + "px";
|
||||||
|
});
|
||||||
455
styles/styles.css
Executable file
455
styles/styles.css
Executable file
|
|
@ -0,0 +1,455 @@
|
||||||
|
/*==================================================
|
||||||
|
Main
|
||||||
|
==================================================*/
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
overflow: hidden;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*==================================================
|
||||||
|
Common Classes
|
||||||
|
==================================================*/
|
||||||
|
|
||||||
|
.block {
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
background-color: #e2e2e2;
|
||||||
|
border-radius: 1em 1em 0 0;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 6px 8px 2px 8px;
|
||||||
|
transform: translate(0, 10px);
|
||||||
|
transition: .1s;
|
||||||
|
box-shadow: 0 0 2px #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-parent:hover .progress {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
box-shadow: 0 1px 4px #bbb;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress span {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #f9f9f9;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 700px) {
|
||||||
|
|
||||||
|
.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: #27c878;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fancy-underline {
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fancy-underline:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 1.5px;
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
background: #27c878;
|
||||||
|
transition: all .2s;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fancy-underline: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: #fafafa;
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 30%;
|
||||||
|
color: #27c878;
|
||||||
|
box-shadow: 0 5px 15px -5px #00000050;
|
||||||
|
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: #27c878;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
margin-top: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact p {
|
||||||
|
font-size: 120%;
|
||||||
|
margin: .4em 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*==================================================
|
||||||
|
Hover
|
||||||
|
==================================================*/
|
||||||
|
|
||||||
|
.dynamicHover,
|
||||||
|
.dynamicHoverDark {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10000;
|
||||||
|
padding: .4vh .8vw;
|
||||||
|
font-family: "Nunito";
|
||||||
|
border-radius: 1vh;
|
||||||
|
font-size: 2.6vh;
|
||||||
|
transition: opacity .1s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamicHover {
|
||||||
|
background-color: #e9e9e9;
|
||||||
|
color: #2b2b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamicHoverDark {
|
||||||
|
background-color: #2b2b2b;
|
||||||
|
color: #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*==================================================
|
||||||
|
Dark
|
||||||
|
==================================================*/
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.section-head {
|
||||||
|
background-color: #000;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-text {
|
||||||
|
background-color: #222;
|
||||||
|
color: #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
background-color: #333;
|
||||||
|
box-shadow: 0 0 2px #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-parent:hover .progress {
|
||||||
|
box-shadow: 0 1px 4px #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress span {
|
||||||
|
background-color: #222;
|
||||||
|
color: #e9e9e9;
|
||||||
|
box-shadow: inset 1px 1px 5px #111,
|
||||||
|
0 0 1px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress span.active {
|
||||||
|
background-color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.will-not-find-me-at a {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamicHoverDark {
|
||||||
|
background-color: #e9e9e9;
|
||||||
|
color: #2b2b2b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*==================================================
|
||||||
|
Mobile
|
||||||
|
==================================================*/
|
||||||
|
|
||||||
|
@media only screen and (max-width: 700px) {
|
||||||
|
.block {
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
height: 20vh;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-text {
|
||||||
|
height: 70vh;
|
||||||
|
overflow: scroll;
|
||||||
|
font-size: 105%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-text .about-me {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact .hi {
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact .section-head {
|
||||||
|
height: 30vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact .section-text {
|
||||||
|
height: 30vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hi::after,
|
||||||
|
.hi::before {
|
||||||
|
all: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 10vh;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 15px 0;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress span {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
margin: 0 .3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-parent:hover .progress {
|
||||||
|
transform: translate(0, 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-me {
|
||||||
|
transform: translateY(2px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
0
test.txt
0
test.txt
Loading…
Reference in a new issue