rvtr/ninjacheetah.github.io
1
Fork 0
mirror of https://github.com/rvtr/ninjacheetah.github.io.git synced 2025-06-18 11:05:37 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added fade effect to project pages

Browse Source
This commit is contained in:
NinjaCheetah 2022-04-27 18:21:00 -04:00
parent 6cf3a15e31
commit 1fad6874f4
No known key found for this signature in database
GPG Key ID: 6EC6DD38B449B426
3 changed files with 75 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
_layouts/program.html
View File

@ -2,13 +2,21 @@
layout: default
---
{% if page.archived == true %}
<img src="https://cdn.ncxprogramming.com/file/image/banner/archived.svg" class="projectimg" style="width:80%;" alt="A banner showing that this project is archived.">
{% endif %}
<img src="{{ page.iconurl }}" class="projectimg" style="width:256px;height:256px;padding-top:8px;" alt="The icon for {{ page.title }}.">
<div class="centertext">
<script src="/projects/index.js"></script>
<script>
window.addEventListener('load', handleFadeIn, false);
function handleFadeIn() {
const div = document.getElementById("projectPage");
div.style.opacity = "0";
fadeIn(div);
}
</script>
<div class="centertext" id="projectPage">
{% if page.archived == true %}
<img src="https://cdn.ncxprogramming.com/file/image/banner/archived.svg" class="projectimg" style="width:80%;" alt="A banner showing that this project is archived.">
{% endif %}
<img src="{{ page.iconurl }}" class="projectimg" style="width:256px;height:256px;padding-top:8px;" alt="The icon for {{ page.title }}.">
<h1>{{ page.title }}</h1>
<p><b>By {{ page.author }}</b></p>
<p><b>Platform(s): </b>{{ page.platform }}</p>
<p><b>Written in: </b>{{ page.language }}</p>

44
projects/index.html
View File

@ -3,23 +3,27 @@ title: Projects
layout: default
---
<div class="banner">
<img class="banner-image" src="/files/banner/projects.svg" alt="an awesome banner. too bad it isn't loading for you :(">
</div>
<h1>things i've made.</h1>
<p>Maintained</p>
<ul>
<li><a href="/projects/fakeapt">fake-apt</a>, my fake version of APT that pretends to do various APT things.</li>
<li><a href="/projects/mywebsite">This Website</a>, the thing you're currently looking at.</li>
</ul>
<p>Archived</p>
<ul>
<li><a href="/projects/automod">AutoMod/automod-rewrite</a>, my legally questionable modpack installer.</li>
<li><a href="/projects/c-ref">c-ref</a>, the start of a user-friendly reference guide for the C language.</li>
<li><a href="/projects/visualbasiccollection">VisualBasic-Collection-Vol.1</a>, a demo program I made in VisualBasic.</li>
</ul>
<h1>things i've contributed to.</h1>
<ul>
<li><a href="https://github.com/stackotter/swift-cross-ui">swift-cross-ui</a> by <a href="https://github.com/stackotter">stackotter</a>, a SwiftUI-esque wrapper for SwiftGtk.</li>
<li><a href="https://github.com/revoltchat/desktop">desktop</a> by <a href="https://github.com/revoltchat">revoltchat</a>, the desktop app for the Revolt chat platform.</li>
</ul>
<script src="/projects/index.js"></script>
<div id="projectList">
<div class="banner">
<img class="banner-image" src="/files/banner/projects.svg" alt="an awesome banner. too bad it isn't loading for you :(">
</div>
<noscript><h2>this page needs JavaScript to work</h2></noscript>
<h1>things i've made.</h1>
<p>Maintained</p>
<ul>
<li><a href='javascript:fadeToPage("fakeapt")'>fake-apt</a>, my fake version of APT that pretends to do various APT things.</li>
<li><a href='javascript:fadeToPage("mywebsite")'>This Website</a>, the thing you're currently looking at.</li>
</ul>
<p>Archived</p>
<ul>
<li><a href='javascript:fadeToPage("automod")'>AutoMod/automod-rewrite</a>, my legally questionable modpack installer.</li>
<li><a href='javascript:fadeToPage("c-ref")'>c-ref</a>, the start of a user-friendly reference guide for the C language.</li>
<li><a href='javascript:fadeToPage("visualbasiccollection")'>VisualBasic-Collection-Vol.1</a>, a demo program I made in VisualBasic.</li>
</ul>
<h1>things i've contributed to.</h1>
<ul>
<li><a href="https://github.com/stackotter/swift-cross-ui" target="_blank">swift-cross-ui</a> by <a href="https://github.com/stackotter">stackotter</a>, a SwiftUI-esque wrapper for SwiftGtk.</li>
<li><a href="https://github.com/revoltchat/desktop" target="_blank">desktop</a> by <a href="https://github.com/revoltchat">revoltchat</a>, the desktop app for the Revolt chat platform.</li>
</ul>
</div>

37
projects/index.js Normal file
View File

@ -0,0 +1,37 @@
function fadeToPage(page) {
fadeOut(document.getElementById("projectList"), function (){
document.getElementById("projectList").remove();
window.location.href = "/projects/" + page
})
}
function fadeOut(div, _callback) {
setInterval(fade, 50);
function fade() {
let opacity;
let intervalID = 0;
opacity = Number(window.getComputedStyle(div).getPropertyValue("opacity"));
if (opacity > 0) {
opacity -= 0.1;
div.style.opacity = opacity;
} else {
clearInterval(intervalID);
_callback();
}
}
}
function fadeIn(div) {
setInterval(fade, 50);
function fade() {
let opacity;
let intervalID = 0;
opacity = Number(window.getComputedStyle(div).getPropertyValue("opacity"));
if (opacity < 1) {
opacity += 0.1;
div.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}
}