diff --git a/css/animations.css b/css/animations.css new file mode 100644 index 0000000..a8596ca --- /dev/null +++ b/css/animations.css @@ -0,0 +1,153 @@ + +/* Animations */ +@keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Internet Explorer */ +@-ms-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +/* Internet Explorer */ +@-ms-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +@keyframes slideleft { + from { left: 0; } + to { left: -100vw; } +} + +/* Firefox < 16 */ +@-moz-keyframes slideleft { + from { left: 0; } + to { left: -100vw; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes slideleft { + from { left: 0; } + to { left: -100vw; } +} +/* Internet Explorer */ +@-ms-keyframes slideleft { + from { left: 0; } + to { left: -100vw; } +} + +@keyframes slideright { + from { left: -30vw; } + to { left: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes slideright { + from { left: -30vw; } + to { left: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes slideright { + from { left: -30vw; } + to { left: 0; } +} +/* Internet Explorer */ +@-ms-keyframes slideright { + from { left: -30vw; } + to { left: 0; } +} + +@keyframes slideup { + from { top: -100vh; } + to { top: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes slideup { + from { top: -100vh; } + to { top: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes slideup { + from { top: -100vh; } + to { top: 0; } +} +/* Internet Explorer */ +@-ms-keyframes slideup { + from { top: -100vh; } + to { top: 0; } +} + +/* Animation helpers */ +.fade-out{ + -webkit-animation: fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */ + -moz-animation: fadeout 0.5s; /* Firefox < 16 */ + -ms-animation: fadeout 0.5s; /* Internet Explorer */ + -o-animation: fadeout 0.5s; /* Opera < 12.1 */ + animation: fadeout 0.5s; + animation-fill-mode: forwards; +} + +.slide-left{ + -webkit-animation: slideleft 1s; /* Safari, Chrome and Opera > 12.1 */ + -moz-animation: slideleft 1s; /* Firefox < 16 */ + -ms-animation: slideleft 1s; /* Internet Explorer */ + -o-animation: slideleft 1s; /* Opera < 12.1 */ + animation: slideleft 1s; + animation-fill-mode: forwards; +} + +.slide-right{ + -webkit-animation: slideright 1s; /* Safari, Chrome and Opera > 12.1 */ + -moz-animation: slideright 1s; /* Firefox < 16 */ + -ms-animation: slideright 1s; /* Internet Explorer */ + -o-animation: slideright 1s; /* Opera < 12.1 */ + animation: slideright 1s; + /* animation-fill-mode: forwards; */ +} + +.slide-up{ + -webkit-animation: slideup 2s; /* Safari, Chrome and Opera > 12.1 */ + -moz-animation: slideup 2s; /* Firefox < 16 */ + -ms-animation: slideup 2s; /* Internet Explorer */ + -o-animation: slideup 2s; /* Opera < 12.1 */ + animation: slideup 2s; + animation-fill-mode: forwards; +} +.hidden{ + display:none !important; +} \ No newline at end of file diff --git a/css/main.css b/css/main.css index 3e5f4e1..de2e15f 100644 --- a/css/main.css +++ b/css/main.css @@ -10,13 +10,25 @@ canvas { } html { + overflow: scroll; + overflow-x: hidden; scroll-behavior: smooth; } +::-webkit-scrollbar { + width: 0px; /* remove scrollbar space */ + background: transparent; /* optional: just make scrollbar invisible */ +} +/* optional: show position indicator in red */ +::-webkit-scrollbar-thumb { + background: #FF0000; +} body{ margin:0; padding:0; height:100%; + + background-color: rgba(130, 130, 238, 0.299); -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 1s; /* Firefox < 16 */ @@ -52,6 +64,15 @@ article { } +.back{ + text-align:left; +} + +.back a:hover, .back a:visited, .back a:link, .back a:active, .back a:any-link{ + color:rgb(201, 201, 226); + margin:0; +} + .name-wrapper{ margin:40; } @@ -75,12 +96,19 @@ article { } .content-box{ - max-width:60vw; + max-width:50vw; margin:auto; background-color: rgb(233, 233, 255); padding:10px; border-radius:10px; text-align:center; + border-style: solid; + border-color: #3f32ca; + border-width: 5px; +} + +dashed{ + color: #3f32ca; } .content-box-wrapper{ @@ -102,6 +130,9 @@ h1{ .content{ width:100%; } +.thin{ + width:0px !important; +} .empty{ width:30vw; @@ -112,6 +143,10 @@ h1{ height:5vh; } +.four-height{ + height:25vh; +} + .full-height{ height:100vh; background:none; @@ -136,6 +171,10 @@ a:hover, a:visited, a:link, a:active, a:any-link{ margin-right:0; } +li a:hover{ + margin:0; +} + /* Set font size for small screen */ @media only screen and (max-width: 600px) { .name{ @@ -188,27 +227,3 @@ a:hover, a:visited, a:link, a:active, a:any-link{ } } - -/* Animations */ -@keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -/* Firefox < 16 */ -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -/* Safari, Chrome and Opera > 12.1 */ -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -/* Internet Explorer */ -@-ms-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} diff --git a/devmon.html b/devmon.html new file mode 100644 index 0000000..cb02693 --- /dev/null +++ b/devmon.html @@ -0,0 +1,58 @@ + + RetryLife + + + + + + + + + +
+ + +
+ + + + + + +
+
+ +
Back
+ + +
+ +

--- Post Gap ---

+

This is the amount of time between the last, and second last post on devrant

+

20s

+ + +

--- Newest Post ---

+

This is the rant id of the latest rant

+

0000

+ + +

--- ID Gap ---

+

There is sometimes a gap between the id of each new rant form the last. This is the current gap

+

0000

+ + +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 8637431..f533b5a 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,19 @@ RetryLife + + - +
-
+
@@ -27,7 +29,6 @@
GitHub
Twitter
- Devrant
Robotics
More @@ -57,14 +58,20 @@
-

--- About Me ---

+

--- About Me ---

I am a teenager who loves to write code and make stuff. I tend to spend my free time either programming or thinking about programming

-

--- Robotics ---

+

--- Robotics ---

As a part of Raider Robotics (frc5024), I co-lead the programming team and help teach new programmers about programming in compiled languages, interfacing with hardware, and computer vision.

- + +

--- Projects ---

+

Every year, I work on a large number of projects. Some of the interesting ones are listed here:

+ +
  • Robotics Projects
    • +
  • devRant API Status
    • +
    @@ -76,4 +83,5 @@ + \ No newline at end of file diff --git a/js/content-rizer.js b/js/content-rizer.js new file mode 100644 index 0000000..0def26b --- /dev/null +++ b/js/content-rizer.js @@ -0,0 +1,55 @@ +async function slideup(){ + var blank = document.getElementById("blank"); + var site = document.getElementById("site"); + + if (screen && screen.width > 600) { + site.style = 'scroll-behavior: unset;'; + + window.location = "#top" + + await sleep(400); + site.style = 'scroll-behavior: smooth;'; + + window.location = "#content" + await sleep(1000); + } + blank.style = "display:none!important;overflow: hidden; position:fixed; "; + + console.log("slide"); + + return; +} + +const scrollToTop = () => { + const c = document.documentElement.scrollTop || document.body.scrollTop; + if (c > 0) { + window.requestAnimationFrame(scrollToTop); + window.scrollTo(0, c - c); + } + }; + +async function slidedown(link){ + var blank = document.getElementById("blank"); + var site = document.getElementById("site"); + + if (screen && screen.width > 600) { + blank.style = "display:block !important; "; + + site.style = 'scroll-behavior: unset !important;'; + window.location = "#content" + + await sleep(20); + + site.style = 'scroll-behavior: smooth !important;'; + scrollToTop(); + + await sleep(500); + } + + window.location = link; + + + return; +} + +slideup(); \ No newline at end of file diff --git a/js/devrant-monitor.js b/js/devrant-monitor.js new file mode 100644 index 0000000..ebe0079 --- /dev/null +++ b/js/devrant-monitor.js @@ -0,0 +1,20 @@ +async function refreshStats() { + //get ids + var time = document.getElementById("time"); + var gap = document.getElementById("gap"); + var id = document.getElementById("id"); + + // loop + while (true) { + $.getJSON('https://api.retrylife.ca/devrant/rants/info', function (data) { + // console.log(data); + time.innerHTML = data["time_gap"] + "s"; + id.innerHTML = data["newest_id"]; + gap.innerHTML = data["id_gap"]; + }); + + await sleep(5000); + } +} + +refreshStats(); \ No newline at end of file diff --git a/js/links.js b/js/links.js new file mode 100644 index 0000000..7752240 --- /dev/null +++ b/js/links.js @@ -0,0 +1,22 @@ +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +async function transition(link){ + var content = document.getElementById("content"); + var about = document.getElementById("about"); + var all = document.getElementById("body"); + + console.log(link); + + if (screen && screen.width > 600) { + content.classList.add("fade-out"); + await sleep(300); + about.classList.add("slide-left"); + // all.classList.add("fade-out"); + await sleep(1000); + // content.classList.add("hidden"); + } + + window.location = link; +} \ No newline at end of file