Compare commits

..

6 Commits

Author SHA1 Message Date
Notoric d558d17652 Merge branch 'main' of https://github.com/Notoric/notoric.github.io 2024-05-29 15:10:22 +01:00
Notoric d127cb8eff Updated Aboutme and added scroll to top 2024-05-29 15:10:20 +01:00
Notoric b828f72fd7
Update CNAME 2024-05-29 14:51:46 +01:00
Notoric 24680b6c38
Update CNAME 2024-05-29 14:50:58 +01:00
Notoric b31c9a3fce
Create CNAME 2024-05-29 14:47:55 +01:00
Notoric 53b88ab4bc
inc size of border pseudo 2024-05-25 01:15:04 +01:00
4 changed files with 67 additions and 7 deletions

1
CNAME Normal file
View File

@ -0,0 +1 @@
notoric.net

View File

@ -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>

View File

@ -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();

View File

@ -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;
}
@ -244,10 +265,10 @@ em {
&::before {
content: "";
position: absolute;
top: calc(50% - 55vw);
left: calc(50% - 55vw);
height: 110vw;
width: 110vw;
top: calc(50% - 75vw);
left: calc(50% - 75vw);
height: 150vw;
width: 150vw;
z-index: 0;
background-image: repeating-conic-gradient(
#ff0050 0%,
@ -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 {