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">
|
||||
<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>
|
||||
<h6>why is this one so much worse than /projects 😭😭😭</h6>
|
||||
</div>
|
||||
|
||||
<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;
|
||||
position: fixed;
|
||||
background-color: rgba(59, 59, 59, 0.885);
|
||||
padding: 1.5vh 2vw;
|
||||
backdrop-filter: blur(3px);
|
||||
font-size: large;
|
||||
top: 0;
|
||||
|
|
@ -56,23 +55,6 @@ img {
|
|||
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 {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
|
|
@ -178,36 +160,3 @@ img {
|
|||
border-radius: 10px;
|
||||
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",
|
||||
"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-de": "Mit diesem Tool kannst du die Tasten deiner Maus testen: Linksklick, Mittelklick, Rechtsklick..",
|
||||
"url": "/click"
|
||||
},
|
||||
{
|
||||
"name": "Keyboard Test",
|
||||
"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-de": "Mit diesem Tool kannst du die Tasten deiner Tastatur testen. Drücke eine beliebige Taste, um die Tastendrücke anzuzeigen.",
|
||||
"url": "/keyboard"
|
||||
},
|
||||
{
|
||||
"name": "Bio",
|
||||
"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-de": "Diese Seite enthält meine Links wie Instagram, damit du mich einfacher kontaktieren kannst.",
|
||||
"url": "/bio"
|
||||
},
|
||||
{
|
||||
"name": "90's Bio",
|
||||
"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-de": "Diese Seite ist von 90er Websites inspiriert.",
|
||||
"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