diff --git a/projects/futureprojects.js b/projects/futureprojects.js
new file mode 100644
index 0000000..a2cab46
--- /dev/null
+++ b/projects/futureprojects.js
@@ -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 = "
No futureprojects.
"
+ return;
+ }
+
+ filteredfutureprojects.sort((a, b) => b.description - a.description);
+ filteredfutureprojects.forEach(futureproject => {
+ const futureprojectItem = document.createElement("div");
+ futureprojectItem.className = "futureproject-div";
+
+ futureprojectItem.innerHTML = `
+
+
${futureproject.subheader}
+
${futureproject.description}
+
Go to ${futureproject.name}!
+ `;
+
+ futureprojectList.appendChild(futureprojectItem);
+ });
+};
+
+async function filterfutureprojects(filterType) {
+ const futureprojects = await fetchfutureprojects();
+ let filteredfutureprojects;
+ if (filterType) {
+ filteredfutureprojects = futureprojects;
+ }
+ renderfutureprojects(filteredfutureprojects);
+}
+
+filterfutureprojects('all');
diff --git a/projects/futureprojects.json b/projects/futureprojects.json
new file mode 100644
index 0000000..be9bb09
--- /dev/null
+++ b/projects/futureprojects.json
@@ -0,0 +1,8 @@
+[
+ {
+ "name": "ZyMusic 2",
+ "subheader": "A fork of ViTune",
+ "description": "A fork of
ViTune with the same additions as ZyMusic",
+ "url": "https://github.com/25huizengek1/ViTune"
+ }
+]
\ No newline at end of file
diff --git a/projects/index.html b/projects/index.html
new file mode 100644
index 0000000..c2e0e69
--- /dev/null
+++ b/projects/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
My Projects
+
+
+
+
+
+
My Projects:
+
+
Future Projects:
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/projects.js b/projects/projects.js
new file mode 100644
index 0000000..0ac055f
--- /dev/null
+++ b/projects/projects.js
@@ -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 = "
No projects.
"
+ return;
+ }
+
+ filteredprojects.sort((a, b) => b.description - a.description);
+ filteredprojects.forEach(project => {
+ const projectItem = document.createElement("div");
+ projectItem.className = "project-div";
+
+ projectItem.innerHTML = `
+
+
${project.subheader}
+
${project.description}
+
Go to ${project.name}!
+ `;
+
+ projectList.appendChild(projectItem);
+ });
+};
+
+async function filterprojects(filterType) {
+ const projects = await fetchprojects();
+ let filteredprojects;
+ if (filterType) {
+ filteredprojects = projects;
+ }
+ renderprojects(filteredprojects);
+}
+
+filterprojects('all');
diff --git a/projects/projects.json b/projects/projects.json
new file mode 100644
index 0000000..20b960a
--- /dev/null
+++ b/projects/projects.json
@@ -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
ViMusic 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
Unexpected Keyboard 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
Equicord 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"
+ }
+]
\ No newline at end of file
diff --git a/projects/style.css b/projects/style.css
new file mode 100644
index 0000000..7c148cd
--- /dev/null
+++ b/projects/style.css
@@ -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;
+ }
+}
diff --git a/style.css b/style.css
index 4b63fe4..4e1dcb9 100644
--- a/style.css
+++ b/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%;
-}
diff --git a/tools.json b/tools.json
index 13a8c50..cf1f016 100644
--- a/tools.json
+++ b/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"
}
]
\ No newline at end of file