diff --git a/src/App.tsx b/src/App.tsx index 3b52171..855687e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,185 @@ import { useEffect, useState } from "react"; +interface MiniProject { + title: string; + description: string; + image?: string; + github?: string; + reproduction?: string; + why: string; + note?: { + color: string; + content: string; + }; +} + +function MiniProjectModal({ + project, + onClose, +}: { + project: MiniProject; + onClose: () => void; +}) { + return ( +
+
e.stopPropagation()} + > + {/* Close Button */} + + + {/* Image */} + {project.image && ( +
+ {project.title} +
+ )} + + {/* Content */} +
+

+ {project.title} +

+ + {project.note && ( +
+

+ {project.note.content} +

+
+ )} + +
+
+

+ Description +

+

+ {project.description} +

+
+ +
+

+ Why I Made This +

+

{project.why}

+
+ + {project.reproduction && ( +
+

+ How to Reproduce +

+ 
+                  {project.reproduction}
+
+
+ )} + + {project.github && ( + + + + + View on GitHub + + )} +
+
+
+
+ ); +} + +function MiniProjectCard({ + project, + onClick, +}: { + project: MiniProject; + onClick: () => void; +}) { + return ( +
+ {project.image && ( +
+ {project.title} +
+ )} + +

+ {project.title} +

+

+ {project.description} +

+ +
+ Click to learn more + + + +
+
+ ); +} + function ProjectCard({ project }: { project: Project }) { return (
@@ -70,6 +250,7 @@ function App() { const [displayMessage, setDisplayMessage] = useState(""); const [isScrambling, setIsScrambling] = useState(false); const [showOldNames, setShowOldNames] = useState(false); + const [selectedMiniProject, setSelectedMiniProject] = useState(null); const oldUsernames = [ "getspaced (ingame)", @@ -527,6 +708,37 @@ function App() {
+ {/* Mini Projects Section */} +
+
+

+ Mini Projects +

+

+ Small experiments and fun projects I've built along the way +

+
+ +
+ {miniProjects.map((project, index) => ( + setSelectedMiniProject(project)} + /> + ))} +
+
+ + {selectedMiniProject && ( + setSelectedMiniProject(null)} + /> + )} + + + {/* Contact Section */}

@@ -615,7 +827,7 @@ const projects: Project[] = [ }, { name: "SHSF", - description: 'Self-hostable "Cloud Functions" for your own hardware.', + description: 'Self-hostable "Cloud Functions" on your own hardware.', link: "https://github.com/Space-Banane/shsf", open_source: { link: "https://github.com/Space-Banane/shsf" }, image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png", @@ -641,15 +853,57 @@ const projects: Project[] = [ image: "https://cdn.reversed.dev/pictures/qrcode.jpeg", open_source: { link: "https://github.com/reversed-dev/qr-code-gen" }, link: "https://qr.reversed.dev", - }, - { - name: "Nvidia-SMI Server", - description: "A simple server to expose Nvidia-SMI data via HTTP.", - image: "https://www.nvidia.com/content/nvidiaGDC/us/en_US/about-nvidia/legal-info/logo-brand-usage/_jcr_content/root/responsivegrid/nv_container_392921705/nv_container_412055486/nv_image.coreimg.100.630.png/1703060329095/nvidia-logo-horz.png", - open_source: { link: "https://github.com/Space-Banane/nvidia-smi-server" }, - link: "https://github.com/Space-Banane/nvidia-smi-server", - rounded: false, } ]; +const miniProjects: MiniProject[] = [ + { + title: "Discord Status to Website", + description: "Display your Discord status on your personal website.", + why: "I wanted to show my Discord status here on my portfolio.", + github: "https://github.com/Space-Banane/shsf-discord-status", + note: { + color: "red", + content: "Requires SHSF to run", + }, + image: "https://github.com/Space-Banane/shsf-discord-status/blob/main/Discord%20Status%20Image.png?raw=true" + }, + { + title: "Mirror GoXLR to Discord", + description: "Muting your Mic Channel mutes you on Discord.", + why: "When i mute myself on my GoXLR, my friends don't know that, now they do.", + github: "https://github.com/Space-Banane/mirror-goxlr-to-discord", + note: { + color: "yellow", + content: "Experimental - This might interfere with some other Hotkeys you set, or Applications that listen to those Hotkeys" + }, + image: "https://github.com/Space-Banane/mirror-goxlr-to-discord/blob/main/Discord%20x%20GoXLR.png?raw=true" + }, + { + title: "Octo-Activity", + description: "Show your 3D Printer activity as Discord Status.", + why: "I wanted to show off my 3D Printer activity on Discord.", + github: "https://github.com/Space-Banane/discord-octo-activity", + image: "https://github.com/Space-Banane/discord-octo-activity/blob/main/Discord%20Octo%20Activity.png?raw=true", + }, + { + title: "Fishing Rod Automation Raft", + description: "Automate fishing in Raft with this simple script.", + why: "Fishing while Shitting is kinda difficult.", + github: "https://github.com/Space-Banane/raft-fishing", + note: { + color: "yellow", + content: "Might interfere with other Applications that use Mouse/Keyboard input. In case of trust issues, move the mouse to the bottom right corner to stop the script." + }, + image: "https://github.com/Space-Banane/raft-fishing/blob/main/Raft%20Fishing%20Guide%20-%20cover.jpg?raw=true" + }, + { + title: "Nvidia-SMI Server", + description: "A simple server to expose Nvidia-SMI data via HTTP.", + why: "I wanted to monitor my GPU usage remotely without installing additional software.", + github: "https://github.com/Space-Banane/nvidia-smi-server", + image: "https://github.com/Space-Banane/nvidia-smi-server/blob/main/Nvidia%20-%20SMI.png?raw=true" + }, +]; + export default App; diff --git a/src/index.css b/src/index.css index a461c50..f9e19ba 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1,29 @@ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss"; + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes scale-in { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.animate-fade-in { + animation: fade-in 0.2s ease-out; +} + +.animate-scale-in { + animation: scale-in 0.3s ease-out; +}