Compare commits
6 Commits
793d45647e
...
d558d17652
| Author | SHA1 | Date |
|---|---|---|
Notoric
|
d558d17652 | |
|
Notoric
|
d127cb8eff | |
|
Notoric
|
b828f72fd7 | |
|
Notoric
|
24680b6c38 | |
|
Notoric
|
b31c9a3fce | |
|
Notoric
|
53b88ab4bc |
|
|
@ -5,12 +5,13 @@
|
||||||
<link rel="stylesheet" type="text/css" href="styles/global.css">
|
<link rel="stylesheet" type="text/css" href="styles/global.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<img id="nav-btn" src="/assets/plus.svg">
|
||||||
<div id="navbar">
|
<div id="navbar">
|
||||||
<p id="logo">[Notoric]</p>
|
<p id="logo">[Notoric]</p>
|
||||||
<div id="nav">
|
<div id="nav">
|
||||||
|
<a href="#aboutme">About</a>
|
||||||
<a href="projects.html">Projects</a>
|
<a href="projects.html">Projects</a>
|
||||||
<a href="about.html">About</a>
|
|
||||||
<a href="contact.html">Contact</a>
|
<a href="contact.html">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="links">
|
<div id="links">
|
||||||
|
|
@ -38,7 +39,7 @@
|
||||||
<div id="aboutme">
|
<div id="aboutme">
|
||||||
<h1>About Me</h1>
|
<h1>About Me</h1>
|
||||||
<div id="box-with-title">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
const navbtn = document.getElementById('nav-btn');
|
const navbtn = document.getElementById('nav-btn');
|
||||||
|
const topshrtct = document.getElementById('top-shrtct');
|
||||||
|
|
||||||
navbtn.addEventListener('click', () => {
|
navbtn.addEventListener('click', () => {
|
||||||
const navbar = document.getElementById('navbar');
|
const navbar = document.getElementById('navbar');
|
||||||
|
|
@ -6,3 +7,33 @@ navbtn.addEventListener('click', () => {
|
||||||
navbtn.classList.toggle('expanded');
|
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=Fira+Mono:wght@400;500;700&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap');
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #111;
|
background-color: #111;
|
||||||
|
|
@ -13,6 +14,26 @@ body {
|
||||||
overflow-y: scroll;
|
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 {
|
#nav-btn {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -244,10 +265,10 @@ em {
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(50% - 55vw);
|
top: calc(50% - 75vw);
|
||||||
left: calc(50% - 55vw);
|
left: calc(50% - 75vw);
|
||||||
height: 110vw;
|
height: 150vw;
|
||||||
width: 110vw;
|
width: 150vw;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
background-image: repeating-conic-gradient(
|
background-image: repeating-conic-gradient(
|
||||||
#ff0050 0%,
|
#ff0050 0%,
|
||||||
|
|
@ -264,6 +285,8 @@ em {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
font-family: "Barlow", sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutme h1 {
|
#aboutme h1 {
|
||||||
|
|
@ -280,6 +303,10 @@ em {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#age {
|
||||||
|
font-family: "Fira Mono", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1100px) {
|
@media screen and (max-width: 1100px) {
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue