Updated Aboutme and added scroll to top
This commit is contained in:
Notoric
parent
793d45647e
commit
d127cb8eff
|
|
@ -5,12 +5,13 @@
|
|||
<link rel="stylesheet" type="text/css" href="styles/global.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg id="top-shrtct" fill="#eee" height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve" transform="rotate(270)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg>
|
||||
<img id="nav-btn" src="/assets/plus.svg">
|
||||
<div id="navbar">
|
||||
<p id="logo">[Notoric]</p>
|
||||
<div id="nav">
|
||||
<a href="#aboutme">About</a>
|
||||
<a href="projects.html">Projects</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
<div id="links">
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
<div id="aboutme">
|
||||
<h1>About Me</h1>
|
||||
<div id="box-with-title">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>I am a <em id=age>22</em> year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const navbtn = document.getElementById('nav-btn');
|
||||
const topshrtct = document.getElementById('top-shrtct');
|
||||
|
||||
navbtn.addEventListener('click', () => {
|
||||
const navbar = document.getElementById('navbar');
|
||||
|
|
@ -6,3 +7,33 @@ navbtn.addEventListener('click', () => {
|
|||
navbtn.classList.toggle('expanded');
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 100) {
|
||||
topshrtct.classList.add('visible');
|
||||
} else {
|
||||
topshrtct.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
|
||||
topshrtct.addEventListener('click', () => {
|
||||
if (window.scrollY > 100) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
|
||||
async function updateAge() {
|
||||
setInterval(() => {
|
||||
const birthdate = new Date('2002-02-12T07:35:00Z');
|
||||
let age = Date.now() - birthdate.getTime();
|
||||
age = age / 31556952000;
|
||||
|
||||
age = age.toFixed(9);
|
||||
|
||||
const ageElement = document.getElementById('age');
|
||||
ageElement.textContent = age;
|
||||
|
||||
console.log('Hello, world!');
|
||||
}, 50);
|
||||
}
|
||||
|
||||
updateAge();
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap');
|
||||
|
||||
body {
|
||||
background-color: #111;
|
||||
|
|
@ -13,6 +14,26 @@ body {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#top-shrtct {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
padding: 20px;
|
||||
background-color: #0008;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#top-shrtct.visible {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
#nav-btn {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -264,6 +285,8 @@ em {
|
|||
height: fit-content;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#aboutme h1 {
|
||||
|
|
@ -280,6 +303,10 @@ em {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
#age {
|
||||
font-family: "Fira Mono", monospace;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
|
||||
#logo {
|
||||
|
|
|
|||
Loading…
Reference in New Issue