New content, dark theme, mobile
This commit is contained in:
parent
c8835bc274
commit
0002a9ea6e
3 changed files with 464 additions and 168 deletions
208
index.html
208
index.html
|
|
@ -1,22 +1,34 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="en" dir="ltr">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="utf-8">
|
<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
|
||||||
<link rel="shortcut icon" href="assets/not_sure.jpg" type="image/x-icon"/>
|
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"
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
|
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>
|
<script src="scripts/main.js" charset="utf-8" defer></script>
|
||||||
<link rel="stylesheet" href="styles/styles.css">
|
<link rel="stylesheet" href="styles/styles.css">
|
||||||
<title>⭐ Hamza Nasher-Alneam ⭐</title>
|
<title>⭐ Hamza Nasher-Alneam ⭐</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
<body>
|
||||||
<!-- Move to different parts -->
|
<!-- Move to different parts -->
|
||||||
<div class="progress-parent">
|
<div class="progress-parent">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<span id="meetIndicator" onclick="goToSection('meet')"></span>
|
<span onmouseover="info(this)" data-info="About" id="meetIndicator" onclick="goToSection('meet')"></span>
|
||||||
<span id="vegetable-dashIndicator" onclick="goToSection('vegetable-dash')"></span>
|
<span onmouseover="info(this)" data-info="Leadership" id="leadershipIndicator"
|
||||||
<span id="gold-rushIndicator" onclick="goToSection('gold-rush')"></span>
|
onclick="goToSection('leadership')"></span>
|
||||||
<span id="coming-soonIndicator" onclick="goToSection('coming-soon')"></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -30,111 +42,167 @@
|
||||||
<div class="section-text">
|
<div class="section-text">
|
||||||
<div class="about-me">
|
<div class="about-me">
|
||||||
<h1>About me</h1>
|
<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
|
<p>I'm a high school student in the United States with a passion for learning and an interest in programming
|
||||||
stack web dev. Now, I'm learning Kotlin for Android development, trying out Godot for the school Game Dev Club, and
|
and computer systems.</p>
|
||||||
writing C++ code for the school robotics team. Currently using the Fedora KDE Spin.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Vegetable Dash -->
|
<!-- Leadership -->
|
||||||
<div class="block" id="vegetable-dash">
|
<div class="block" id="leadership">
|
||||||
<div class="section-text">
|
<div class="section-text">
|
||||||
<div class="about-me">
|
<div class="about-me">
|
||||||
<h1>Broadneck Robotics</h1>
|
<h1>Leadership</h1>
|
||||||
<p>Vex robotics! I've done some of that. I've written code and other things about whatever</p>
|
<p>I co-founded the Game Dev Club with some friends at school 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. In the first year, we already have 9 members who meet weekly both inside and outside of school to show off their work and give presentations about topics like creating engaging games and versioning code with Git.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section-head">
|
<div class="section-head">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="hi">
|
<h1 class="hi">
|
||||||
Robotics
|
Leadership
|
||||||
</h1>
|
</h1>
|
||||||
<img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg" alt="Robotics image">
|
<!-- <img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg"
|
||||||
|
alt="Robotics image"> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Game dev club -->
|
<!-- Skills -->
|
||||||
<div class="block" id="gold-rush">
|
<div class="block" id="skills">
|
||||||
<div class="section-head">
|
<div class="section-head">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="hi">
|
<h1 class="hi">
|
||||||
Game Dev Club
|
Skills
|
||||||
</h1>
|
</h1>
|
||||||
<img class="section-image" src="https://hnasheralneam.github.io/gamedevclub/assets/title-box.png" alt="Game Dev Club logo">
|
<!-- <img class="section-image" src="https://hnasheralneam.github.io/gamedevclub/assets/title-box.png"
|
||||||
|
alt="Game Dev Club logo"> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section-text">
|
<div class="section-text">
|
||||||
<div class="about-me">
|
<div class="about-me">
|
||||||
<h1>Game Dev Club</h1>
|
<h1>Skills</h1>
|
||||||
<p>Godot! and no more unity. Gdscipt is basically python, ewwww we don't like python, none of us.</p>
|
<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 OpenSuse on a server.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Gold Rush -->
|
<!-- Clubs -->
|
||||||
<div class="block" id="gold-rush">
|
<div class="block" id="clubs">
|
||||||
<div class="text">
|
<div class="section-text">
|
||||||
<br>
|
<div class="about-me">
|
||||||
<h1>achievements</h1>
|
<h1>Clubs</h1>
|
||||||
<p class="about-gold gold-text">About gold rush</p>
|
<p>I am a member of the Broadneck Robotics Club, where I write 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>
|
</div>
|
||||||
|
|
||||||
<!-- Coming soon -->
|
|
||||||
<div class="block" id="coming-soon">
|
|
||||||
<div class="section-head">
|
<div class="section-head">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="hi">
|
<h1 class="hi">
|
||||||
Coming soon!
|
Clubs
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<!-- <img class="section-image" src="https://broadneckrobotics.github.io/images/2023-2024/working.jpg"
|
||||||
<br><br>
|
alt="Robotics image"> -->
|
||||||
<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>
|
||||||
</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="section-text">
|
||||||
<div class="about-me">
|
<div class="about-me">
|
||||||
<h1>You won't find me at</h1>
|
<h1>Achievements</h1>
|
||||||
<p>Places you won't find me at</p>
|
<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>
|
||||||
<br>
|
<p>In February of 2024, a friend and I competed in the STEP challenge by MAGIC, creating and developing a
|
||||||
<hr class="hr">
|
developer profile application, which won the technology and best overall awards for 500 dollars.</p>
|
||||||
<br>
|
</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">
|
<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://github.com/hnasheralneam"><i class="fa-brands fa-github"></i></a>
|
||||||
<a class="nothing-link" href="https://www.twitch.tv/"><i class="fab fa-twitch"></i></a>
|
<a class="nothing-link" href="mailto:hnasheralneam@gmail.com"><i class="fa-brands fa-google"></i></a>
|
||||||
<a class="nothing-link" href="https://dribbble.com/"><i class="fab fa-dribbble"></i></a>
|
<a class="nothing-link" href="http://hnasheralneam.onthewifi.com:3000"><i
|
||||||
<a class="nothing-link" href="https://www.squarespace.com/"><i class="fab fa-squarespace"></i></a>
|
class="fa-solid fa-code-branch"></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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="section-head">
|
||||||
|
|
||||||
<!-- Coming Soon -->
|
|
||||||
<div class="block" id="coming-soon">
|
|
||||||
<div class="text">
|
|
||||||
<br><br>
|
|
||||||
<h1>
|
|
||||||
Coming soon
|
|
||||||
</h1>
|
|
||||||
<div>
|
<div>
|
||||||
words
|
<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.github.io/">hnasheralneam.github.io</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -15,3 +15,28 @@ function goToSection(page) {
|
||||||
if (document.querySelector("span.active")) document.querySelector("span.active").classList.remove("active");
|
if (document.querySelector("span.active")) document.querySelector("span.active").classList.remove("active");
|
||||||
indicator.classList.add("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";
|
||||||
|
});
|
||||||
|
|
@ -2,7 +2,14 @@
|
||||||
Main
|
Main
|
||||||
==================================================*/
|
==================================================*/
|
||||||
|
|
||||||
body, html {
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
html {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
@ -19,10 +26,6 @@ Common Classes
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block:nth-child(2n) {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-head {
|
.section-head {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
@ -50,32 +53,40 @@ Progress
|
||||||
|
|
||||||
.progress-parent {
|
.progress-parent {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 10px;
|
padding-bottom: 10px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
background-color: #e4e4e4;
|
background-color: #e2e2e2;
|
||||||
border-radius: 14px;
|
border-radius: 1em 1em 0 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0 8px;
|
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 {
|
.progress span {
|
||||||
display: block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
width: 25px;
|
width: 25px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #f9f9f9;
|
color: #f9f9f9;
|
||||||
margin: 9px 0;
|
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
box-shadow: inset 1px 1px 5px #ddd,
|
box-shadow: inset 1px 1px 5px #ddd,
|
||||||
0 0 1px #bbb;
|
0 0 1px #bbb;
|
||||||
|
|
@ -85,7 +96,9 @@ Progress
|
||||||
background-color: #262626;
|
background-color: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress span:hover { transform: scale(1.2); }
|
.progress span:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*==================================================
|
/*==================================================
|
||||||
|
|
@ -103,14 +116,19 @@ Landing
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block:hover .hi {
|
@media only screen and (min-width: 700px) {
|
||||||
|
|
||||||
|
.block:hover .hi {
|
||||||
color: #f9f9f9;
|
color: #f9f9f9;
|
||||||
font-size: 280%;
|
font-size: 280%;
|
||||||
background-color: #262626;
|
background-color: #262626;
|
||||||
border-radius: 2%;
|
border-radius: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hi:before, .hi:after {
|
.hi:before,
|
||||||
|
.hi:after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
@ -121,8 +139,13 @@ Landing
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hi:before { left: -50px; }
|
.hi:before {
|
||||||
.hi:after { right: -50px; }
|
left: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hi:after {
|
||||||
|
right: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
.block:hover .hi:before {
|
.block:hover .hi:before {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
@ -137,9 +160,17 @@ Landing
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes hi-opacity {
|
@keyframes hi-opacity {
|
||||||
0% { opacity: 0; }
|
0% {
|
||||||
50% { opacity: 1; }
|
opacity: 0;
|
||||||
100% { opacity: 0; }
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -181,27 +212,27 @@ Links
|
||||||
==========================================================*/
|
==========================================================*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lightblue;
|
color: #27c878;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fancy-underline {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-link:after {
|
.fancy-underline:after {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:after {
|
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
height: 1.5px;
|
height: 1.5px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: lightblue;
|
background: #27c878;
|
||||||
transition: all .5s;
|
transition: all .2s;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover:after {
|
.fancy-underline:hover:after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -211,10 +242,17 @@ a:hover:after {
|
||||||
Personal
|
Personal
|
||||||
==================================================*/
|
==================================================*/
|
||||||
|
|
||||||
.will-not-find-me-at { font-family: Nunito; }
|
.will-not-find-me-at {
|
||||||
.find-me { margin: 50px 50px 0 50px; }
|
font-family: Nunito;
|
||||||
|
}
|
||||||
|
|
||||||
.nothing-link:after { display: none; }
|
.find-me {
|
||||||
|
margin: 50px 50px 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nothing-link:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.will-not-find-me-at {
|
.will-not-find-me-at {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -227,11 +265,11 @@ Personal
|
||||||
.will-not-find-me-at a {
|
.will-not-find-me-at a {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
background-color: #f1f1f1;
|
background-color: #fafafa;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
border-radius: 30%;
|
border-radius: 30%;
|
||||||
color: #10ac84;
|
color: #27c878;
|
||||||
box-shadow: 0 5px 15px -5px #00000070;
|
box-shadow: 0 5px 15px -5px #00000050;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
@ -249,4 +287,169 @@ i {
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
.will-not-find-me-at a:hover { background-color: #262626; }
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue