added /projects, removed some lines from main style.css
This commit is contained in:
zyqunix
parent
2f1c6ba41b
commit
483678545b
10 changed files with 332 additions and 59 deletions
BIN
assets/Projects.png
Normal file
BIN
assets/Projects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 KiB |
|
|
@ -15,6 +15,7 @@
|
||||||
<button id="themeToggle" class="theme-button" title="Toggle Dark/Light Mode">
|
<button id="themeToggle" class="theme-button" title="Toggle Dark/Light Mode">
|
||||||
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve" style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z"></path> </g> </g> </g></svg>
|
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve" style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z"></path> </g> </g> </g></svg>
|
||||||
</button>
|
</button>
|
||||||
|
<h6>why is this one so much worse than /projects 😭😭😭</h6>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="welcome" class="welcome">
|
<div id="welcome" class="welcome">
|
||||||
|
|
|
||||||
49
projects/futureprojects.js
Normal file
49
projects/futureprojects.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
async function fetchfutureprojects() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('futureprojects.json');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("VPS response is bad");
|
||||||
|
}
|
||||||
|
const futureprojects = await response.json();
|
||||||
|
return futureprojects;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch futureprojects:", error);
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function renderfutureprojects(filteredfutureprojects) {
|
||||||
|
const futureprojectList = document.getElementById('projectsFuture');
|
||||||
|
futureprojectList.innerHTML = "";
|
||||||
|
|
||||||
|
if (filteredfutureprojects.length === 0) {
|
||||||
|
futureprojectList.innerHTML = "<div class='text-center'>No futureprojects.</div>"
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
filteredfutureprojects.sort((a, b) => b.description - a.description);
|
||||||
|
filteredfutureprojects.forEach(futureproject => {
|
||||||
|
const futureprojectItem = document.createElement("div");
|
||||||
|
futureprojectItem.className = "futureproject-div";
|
||||||
|
|
||||||
|
futureprojectItem.innerHTML = `
|
||||||
|
<h1 class="futureproject-header">${futureproject.name}</h1>
|
||||||
|
<h2 class="futureproject-subhead">${futureproject.subheader}</h2>
|
||||||
|
<h2 class="futureproject-desc">${futureproject.description}</h2>
|
||||||
|
<a id="visit" class="visit-futureproject" href="${futureproject.url}">Go to <strong>${futureproject.name}</strong>!</a>
|
||||||
|
`;
|
||||||
|
|
||||||
|
futureprojectList.appendChild(futureprojectItem);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
async function filterfutureprojects(filterType) {
|
||||||
|
const futureprojects = await fetchfutureprojects();
|
||||||
|
let filteredfutureprojects;
|
||||||
|
if (filterType) {
|
||||||
|
filteredfutureprojects = futureprojects;
|
||||||
|
}
|
||||||
|
renderfutureprojects(filteredfutureprojects);
|
||||||
|
}
|
||||||
|
|
||||||
|
filterfutureprojects('all');
|
||||||
8
projects/futureprojects.json
Normal file
8
projects/futureprojects.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "ZyMusic 2",
|
||||||
|
"subheader": "A fork of ViTune",
|
||||||
|
"description": "A fork of <a href='https://github.com/25huizengek1/ViTune'>ViTune</a> with the same additions as ZyMusic",
|
||||||
|
"url": "https://github.com/25huizengek1/ViTune"
|
||||||
|
}
|
||||||
|
]
|
||||||
21
projects/index.html
Normal file
21
projects/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>My Projects</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<h2>My Projects:</h2>
|
||||||
|
<div class="projects" id="projectsMain"></div>
|
||||||
|
<h2>Future Projects:</h2>
|
||||||
|
<div class="projects" id="projectsFuture"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="projects.js"></script>
|
||||||
|
<script src="futureprojects.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
49
projects/projects.js
Normal file
49
projects/projects.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
async function fetchprojects() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('projects.json');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("VPS response is bad");
|
||||||
|
}
|
||||||
|
const projects = await response.json();
|
||||||
|
return projects;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch projects:", error);
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function renderprojects(filteredprojects) {
|
||||||
|
const projectList = document.getElementById('projectsMain');
|
||||||
|
projectList.innerHTML = "";
|
||||||
|
|
||||||
|
if (filteredprojects.length === 0) {
|
||||||
|
projectList.innerHTML = "<div class='text-center'>No projects.</div>"
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
filteredprojects.sort((a, b) => b.description - a.description);
|
||||||
|
filteredprojects.forEach(project => {
|
||||||
|
const projectItem = document.createElement("div");
|
||||||
|
projectItem.className = "project-div";
|
||||||
|
|
||||||
|
projectItem.innerHTML = `
|
||||||
|
<h1 class="project-header">${project.name}</h1>
|
||||||
|
<h2 class="project-subhead">${project.subheader}</h2>
|
||||||
|
<h2 class="project-desc">${project.description}</h2>
|
||||||
|
<a id="visit" class="visit-project" href="${project.url}">Go to <strong>${project.name}</strong>!</a>
|
||||||
|
`;
|
||||||
|
|
||||||
|
projectList.appendChild(projectItem);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
async function filterprojects(filterType) {
|
||||||
|
const projects = await fetchprojects();
|
||||||
|
let filteredprojects;
|
||||||
|
if (filterType) {
|
||||||
|
filteredprojects = projects;
|
||||||
|
}
|
||||||
|
renderprojects(filteredprojects);
|
||||||
|
}
|
||||||
|
|
||||||
|
filterprojects('all');
|
||||||
50
projects/projects.json
Normal file
50
projects/projects.json
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "fentseller.lol",
|
||||||
|
"subheader": "The 'Tools' Site",
|
||||||
|
"description": "The site you are currently on is my biggest project as of right now.(Domain gifted by saif)",
|
||||||
|
"url": "https://fentseller.lol"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ZyMusic",
|
||||||
|
"subheader": "Android Music Streaming App",
|
||||||
|
"description": "A fork of <a href='https://github.com/vfsfitvnm/ViMusic/'>ViMusic</a> that includes more colors. (Very, very unfinished however; YouTube/Google added an anti-bot protection addition that broke it.",
|
||||||
|
"url": "https://github.com/zyqunix/ViMusic-master/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Unexpected Keyboard",
|
||||||
|
"subheader": "Android Keyboard",
|
||||||
|
"description": "A fork of <a href='https://github.com/Julow/Unexpected-Keyboard/'>Unexpected Keyboard</a> that includes more colors, just like ZyMusic.",
|
||||||
|
"url": "https://github.com/zyqunix/Unexpected-Keyboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "MyWig",
|
||||||
|
"subheader": "Android Widgets App",
|
||||||
|
"description": "An app with Flashcards; more widgets coming soon. Name means 'MyWidget'.",
|
||||||
|
"url": "https://github.com/zyqunix/MyWig"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Equicord",
|
||||||
|
"subheader": "Discord Client Modification",
|
||||||
|
"description": "A fork of <a href='https://github.com/Equicord/Equicord/'>Equicord</a> that includes more plugins and other stuff.",
|
||||||
|
"url": "https://github.com/zyqunix/Unexpected-Keyboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "AutoClicker",
|
||||||
|
"subheader": "A C# AutoClicker",
|
||||||
|
"description": "An AutoClicker written in C# using the MouseKeyHook Library.",
|
||||||
|
"url": "https://github.com/zyqunix/AutoClicker"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Bio",
|
||||||
|
"subheader": "An 'About Me' Site",
|
||||||
|
"description": "A site about me with a music player.",
|
||||||
|
"url": "https://github.com/zyqunix/Bio"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "GitHub Repositories",
|
||||||
|
"subheader": "My GitHub Repositories",
|
||||||
|
"description": "Here are all of my GitHub repositories, where you can fork, star, and make issues (if needed).",
|
||||||
|
"url": "https://github.com/zyqunix?tab=repositories"
|
||||||
|
}
|
||||||
|
]
|
||||||
148
projects/style.css
Normal file
148
projects/style.css
Normal file
|
|
@ -0,0 +1,148 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Hack';
|
||||||
|
src: url(fonts/Hack-Regular.ttf) format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Hack', monospace;
|
||||||
|
font-size: 1rem;
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: #c099ff;
|
||||||
|
color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 85%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects h2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 50px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div,
|
||||||
|
.futureproject-div {
|
||||||
|
width: calc(33% - 40px);
|
||||||
|
max-width: 350px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: rgba(59, 59, 59, 0.885);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div *,
|
||||||
|
.futureproject-div * {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div .visit-project,
|
||||||
|
.futureproject-div .visit-futureproject {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #569470;
|
||||||
|
color: #cfcfcf;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0;
|
||||||
|
bottom: 0;
|
||||||
|
transition: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div h1,
|
||||||
|
.futureproject-div h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div .visit-project strong,
|
||||||
|
.futureproject-div .visit-futureproject strong {
|
||||||
|
color: #cfcfcf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div .visit-project:hover,
|
||||||
|
.futureproject-div .visit-futureproject:hover {
|
||||||
|
background-color: #47785b;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div .visit-project:hover strong,
|
||||||
|
.futureproject-div .visit-futureproject:hover strong {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-desc,
|
||||||
|
.futureproject-desc {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-desc a,
|
||||||
|
.futureproject-desc a {
|
||||||
|
transition: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-desc a:hover,
|
||||||
|
.futureproject-desc a:hover {
|
||||||
|
color: #c099ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.main {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
body {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-div {
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
51
style.css
51
style.css
|
|
@ -47,7 +47,6 @@ img {
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: rgba(59, 59, 59, 0.885);
|
background-color: rgba(59, 59, 59, 0.885);
|
||||||
padding: 1.5vh 2vw;
|
|
||||||
backdrop-filter: blur(3px);
|
backdrop-filter: blur(3px);
|
||||||
font-size: large;
|
font-size: large;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -56,23 +55,6 @@ img {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100vw;
|
|
||||||
position: fixed;
|
|
||||||
background-color: #3b3b3b80;
|
|
||||||
padding: 1.5vh 2vw;
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
font-size: large;
|
|
||||||
bottom: 0;
|
|
||||||
border-top: 1px solid #46464680;
|
|
||||||
z-index: 9999;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-button {
|
.theme-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
@ -178,36 +160,3 @@ img {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prev, .next {
|
|
||||||
cursor: pointer;
|
|
||||||
top: 50%;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
color: #f0f0f0;
|
|
||||||
background-color: #747474;
|
|
||||||
border: none;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 18px;
|
|
||||||
transition: 0.1s ease;
|
|
||||||
user-select: none;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prev:hover,
|
|
||||||
.next:hover {
|
|
||||||
scale: 1.01;
|
|
||||||
background-color: #808080;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prev {
|
|
||||||
left: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next {
|
|
||||||
right: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
14
tools.json
14
tools.json
|
|
@ -2,33 +2,31 @@
|
||||||
{
|
{
|
||||||
"name": "Mouse Test",
|
"name": "Mouse Test",
|
||||||
"subheader": "Test your mouse's keys",
|
"subheader": "Test your mouse's keys",
|
||||||
"subheader-de": "Teste die Tasten deiner Maus aus",
|
|
||||||
"description": "This tool allows you to test your mouse's keys: Left Click; Middle Click; Right Click.",
|
"description": "This tool allows you to test your mouse's keys: Left Click; Middle Click; Right Click.",
|
||||||
"description-de": "Mit diesem Tool kannst du die Tasten deiner Maus testen: Linksklick, Mittelklick, Rechtsklick..",
|
|
||||||
"url": "/click"
|
"url": "/click"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Keyboard Test",
|
"name": "Keyboard Test",
|
||||||
"subheader": "Test your keyboard's keys",
|
"subheader": "Test your keyboard's keys",
|
||||||
"subheader-de": "Teste die Tasten deiner Tastatur aus",
|
|
||||||
"description": "This tool allows you to test your keyboard's keys. To start, press any key to show its presses.",
|
"description": "This tool allows you to test your keyboard's keys. To start, press any key to show its presses.",
|
||||||
"description-de": "Mit diesem Tool kannst du die Tasten deiner Tastatur testen. Drücke eine beliebige Taste, um die Tastendrücke anzuzeigen.",
|
|
||||||
"url": "/keyboard"
|
"url": "/keyboard"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Bio",
|
"name": "Bio",
|
||||||
"subheader": "A page with my links",
|
"subheader": "A page with my links",
|
||||||
"subheader-de": "Eine Seite mit meinen Links",
|
|
||||||
"description": "This site includes my links like Instagram, so you can contact me easier.",
|
"description": "This site includes my links like Instagram, so you can contact me easier.",
|
||||||
"description-de": "Diese Seite enthält meine Links wie Instagram, damit du mich einfacher kontaktieren kannst.",
|
|
||||||
"url": "/bio"
|
"url": "/bio"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "90's Bio",
|
"name": "90's Bio",
|
||||||
"subheader": "A 90's inspired site",
|
"subheader": "A 90's inspired site",
|
||||||
"subheader-de": "Eine 90er inspirierte Seite",
|
|
||||||
"description": "This is a site inspired by a 90's 'About Me' site.",
|
"description": "This is a site inspired by a 90's 'About Me' site.",
|
||||||
"description-de": "Diese Seite ist von 90er Websites inspiriert.",
|
|
||||||
"url": "/old"
|
"url": "/old"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Projects",
|
||||||
|
"subheader": "My most popular projects",
|
||||||
|
"description": "Some of my projects I'd like to showcase. All on GitHub",
|
||||||
|
"url": "/projects"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
Loading…
Add table
Reference in a new issue