diff --git a/app/k-suite/page.tsx b/app/k-suite/page.tsx new file mode 100644 index 0000000..97b64ea --- /dev/null +++ b/app/k-suite/page.tsx @@ -0,0 +1,433 @@ +"use client"; + +import Image from "next/image"; +import Link from "next/link"; +import { ExternalLink, Github } from "lucide-react"; + +interface KSuiteApp { + id: number; + name: string; + shortDescription: string; + description: string; + url: string; + githubUrl?: string | null; + icon: string; + technologies: string[]; + color: string; +} + +const kSuiteApps: KSuiteApp[] = [ + { + id: 1, + name: "K-Notes", + shortDescription: "Google Keep replica", + description: + "A full-featured note-taking app designed for speed and simplicity.", + url: "https://knotes.gabrielkaszewski.dev/", + githubUrl: "https://github.com/GKaszewski/k-notes", + icon: "/images/k-notes.png", + technologies: ["Rust", "React", "TailwindCSS", "PWA"], + color: "from-amber-400 to-orange-500", + }, + { + id: 2, + name: "Thoughts", + shortDescription: "Microblogging platform", + description: + "Nostalgic social platform with Frutiger Aero style. 128-char posts, custom CSS profiles.", + url: "https://thoughts.gabrielkaszewski.dev/", + githubUrl: "https://git.gabrielkaszewski.dev/GKaszewski/thoughts", + icon: "/images/thoughts.avif", + technologies: ["Rust", "Next.js", "Axum"], + color: "from-cyan-400 to-blue-500", + }, + { + id: 3, + name: "K-Tuner", + shortDescription: "Instrument tuner", + description: + "Tune guitar, ukulele, and piano with this Frutiger Aero styled PWA.", + url: "https://tuner.gabrielkaszewski.dev/", + githubUrl: "https://github.com/GKaszewski/aero-tuner", + icon: "/images/k-tuner.png", + technologies: ["React", "PWA"], + color: "from-emerald-400 to-teal-500", + }, + { + id: 4, + name: "K-QR", + shortDescription: "QR code generator", + description: + "High-performance QR generator. Single Rust executable serving clean HTML.", + url: "https://qr.gabrielkaszewski.dev/", + githubUrl: "https://github.com/GKaszewski/k-qr", + icon: "/images/k-qr.png", + technologies: ["Rust", "HTML"], + color: "from-amber-400 to-orange-500" + }, +]; + +// Connection definitions for the organism +const connections = [ + { from: 0, to: 1 }, // K-Notes -> Thoughts + { from: 1, to: 2 }, // Thoughts -> K-Tuner + { from: 2, to: 3 }, // K-Tuner -> K-QR + { from: 3, to: 0 }, // K-QR -> K-Notes + { from: 0, to: 2 }, // K-Notes -> K-Tuner (cross) + { from: 1, to: 3 }, // Thoughts -> K-QR (cross) +]; + +const KSuiteOrganism = () => { + // Calculate positions for apps in a circular pattern + const getPosition = (index: number, total: number, radius: number) => { + const angle = (index * 2 * Math.PI) / total - Math.PI / 2; + return { + x: 50 + radius * Math.cos(angle), + y: 50 + radius * Math.sin(angle), + }; + }; + + const radius = 35; + const positions = kSuiteApps.map((_, i) => + getPosition(i, kSuiteApps.length, radius) + ); + + return ( +
+ {/* SVG Connection Lines */} + + + + + + + + + + + + + + + + + {/* Connection lines */} + {connections.map((conn, i) => { + const from = positions[conn.from]; + const to = positions[conn.to]; + return ( + + ); + })} + + + + {/* Lines from center to each app */} + {positions.map((pos, i) => ( + + ))} + + + {/* App Cards */} + {kSuiteApps.map((app, index) => { + const pos = positions[index]; + return ( +
+
+ {/* Glow effect on hover */} +
+ + {/* Content */} +
+
+ {app.name} +
+

+ {app.name} +

+

+ {app.shortDescription} +

+ + {/* Links */} +
+ + + + {app.githubUrl && ( + + + + )} +
+
+
+
+ ); + })} +
+ ); +}; + +const KSuiteAppCard = ({ app }: { app: KSuiteApp }) => { + return ( +
+ {/* Gradient glow */} +
+ +
+
+
+ {app.name} +
+
+

{app.name}

+

{app.shortDescription}

+
+
+ +

{app.description}

+ +
+ {app.technologies.map((tech) => ( + + {tech} + + ))} +
+ +
+ + + Visit + + {app.githubUrl && ( + + + + )} +
+
+
+ ); +}; + +export default function KSuitePage() { + return ( +
+ {/* Hero Section */} +
+
+

+ K-Suite +

+

+ A cohesive ecosystem of open-source, self-hosted applications + designed to restore digital sovereignty to the user. +

+

+ A "Personal Universe" containing interconnected applications ranging + from media playback to knowledge management. +

+ + {/* Organism Visualization */} + +
+
+ + {/* Origin Story Section */} +
+
+
+
+

+ Origin Story +

+
+

+ The concept of K-Suite was born in 2017. + As a middle school student, I envisioned a digital environment where every + tool I used was built by my own hands—a space customized exactly to my needs. + However, my vision at the time far outpaced my technical abilities. +

+

+ K-Suite is the realization of that long-standing dream. It bridges the gap + between the middle schooler who wanted to build, and the developer who now can. +

+
+
+
+
+
+ + {/* Engineering Mission Section */} +
+
+
+
+

+ Engineering Mission +

+
+

+ This project represents my Magnum Opus. + It is the most ambitious software engineering undertaking I have attempted to date. + Beyond simply providing privacy and utility, K-Suite serves as a rigorous testing + ground for advanced System Design and{" "} + Software Architecture. +

+
+ + {/* Core Goals */} +
+

Core Goals

+ +
+

+ Architectural Mastery +

+

+ To design a distributed system where independent modules (like K-Notes) + function flawlessly on their own but become exponentially more powerful when connected. +

+
+ +
+

+ Digital Sovereignty +

+

+ To create a viable, privacy-first alternative to commercial ecosystems + (Google/Apple), focused entirely on open-source principles and self-hosting. +

+
+ +
+

+ Seamless Integration +

+

+ To solve the complex challenge of inter-app communication. In K-Suite, + a photo stored in K-Photos isn't just a file; it's an asset that can be + referenced in other apps or attached to a task in the upcoming K-Mood. +

+
+
+
+
+
+
+ + {/* Detailed Cards Section */} +
+
+

+ Explore the Suite +

+

+ Each application is designed to work independently, but together they form + something greater. +

+
+ {kSuiteApps.map((app) => ( + + ))} +
+
+
+ + {/* Coming Soon Section */} +
+
+
+

+ More Apps Coming Soon +

+

+ K-Suite is still growing. The ecosystem will expand with more interconnected + applications including K-Photos, K-Mood, and more. +

+

+ Built with Rust, React, and modern web technologies. +

+
+
+
+
+ ); +} diff --git a/components/navbar.tsx b/components/navbar.tsx index 2524876..ee94b62 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -22,6 +22,7 @@ const Navbar = () => { const navLinks = [ { href: "/", label: "Home" }, + { href: "/k-suite", label: "K-Suite" }, { href: "/projects", label: "Projects" }, { href: "https://blog.gabrielkaszewski.dev/", @@ -31,6 +32,7 @@ const Navbar = () => { { href: "/about", label: "About" }, ]; + const baseClasses = "fixed z-20 flex w-full items-center justify-center p-4 transition-all duration-300"; const scrolledClasses = "bg-gray-900/80 backdrop-blur-md"; @@ -38,17 +40,15 @@ const Navbar = () => { return (