fix: update GitHub URL for K-Tuner project in data file
This commit is contained in:
@@ -4,429 +4,438 @@ import Image from "next/image";
|
||||
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;
|
||||
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"
|
||||
},
|
||||
{
|
||||
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/k-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)
|
||||
{ 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),
|
||||
};
|
||||
// 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)
|
||||
);
|
||||
const radius = 35;
|
||||
const positions = kSuiteApps.map((_, i) =>
|
||||
getPosition(i, kSuiteApps.length, radius)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto aspect-square">
|
||||
{/* SVG Connection Lines */}
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full pointer-events-none"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto aspect-square">
|
||||
{/* SVG Connection Lines */}
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full pointer-events-none"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="rgba(59, 130, 246, 0.6)" />
|
||||
<stop offset="50%" stopColor="rgba(147, 51, 234, 0.6)" />
|
||||
<stop offset="100%" stopColor="rgba(59, 130, 246, 0.6)" />
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="0.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Connection lines */}
|
||||
{connections.map((conn, i) => {
|
||||
const from = positions[conn.from];
|
||||
const to = positions[conn.to];
|
||||
return (
|
||||
<line
|
||||
key={i}
|
||||
x1={from.x}
|
||||
y1={from.y}
|
||||
x2={to.x}
|
||||
y2={to.y}
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="0.3"
|
||||
filter="url(#glow)"
|
||||
className="animate-pulse"
|
||||
style={{ animationDelay: `${i * 0.2}s` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Lines from center to each app */}
|
||||
{positions.map((pos, i) => (
|
||||
<line
|
||||
key={`center-${i}`}
|
||||
x1={50}
|
||||
y1={50}
|
||||
x2={pos.x}
|
||||
y2={pos.y}
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="0.2"
|
||||
strokeDasharray="1 0.5"
|
||||
filter="url(#glow)"
|
||||
className="animate-pulse"
|
||||
style={{ animationDelay: `${i * 0.3}s` }}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
|
||||
{/* App Cards */}
|
||||
{kSuiteApps.map((app, index) => {
|
||||
const pos = positions[index];
|
||||
return (
|
||||
<div
|
||||
key={app.id}
|
||||
className="absolute transform -translate-x-1/2 -translate-y-1/2 w-32 md:w-40 lg:w-48"
|
||||
style={{
|
||||
left: `${pos.x}%`,
|
||||
top: `${pos.y}%`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`group relative p-3 md:p-4 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl hover:bg-white/20 hover:scale-105 transition-all duration-300 cursor-pointer`}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="rgba(59, 130, 246, 0.6)" />
|
||||
<stop offset="50%" stopColor="rgba(147, 51, 234, 0.6)" />
|
||||
<stop offset="100%" stopColor="rgba(59, 130, 246, 0.6)" />
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="0.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
{/* Glow effect on hover */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${app.color} opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-xl`}
|
||||
/>
|
||||
|
||||
{/* Connection lines */}
|
||||
{connections.map((conn, i) => {
|
||||
const from = positions[conn.from];
|
||||
const to = positions[conn.to];
|
||||
return (
|
||||
<line
|
||||
key={i}
|
||||
x1={from.x}
|
||||
y1={from.y}
|
||||
x2={to.x}
|
||||
y2={to.y}
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="0.3"
|
||||
filter="url(#glow)"
|
||||
className="animate-pulse"
|
||||
style={{ animationDelay: `${i * 0.2}s` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex flex-col items-center text-center">
|
||||
<div className="relative w-12 h-12 md:w-16 md:h-16 mb-2">
|
||||
<Image
|
||||
src={app.icon}
|
||||
alt={app.name}
|
||||
fill
|
||||
className="object-contain rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-sm md:text-base font-bold text-white mb-1">
|
||||
{app.name}
|
||||
</h3>
|
||||
<p className="text-xs text-white/70 mb-2 hidden md:block">
|
||||
{app.shortDescription}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
{/* Lines from center to each app */}
|
||||
{positions.map((pos, i) => (
|
||||
<line
|
||||
key={`center-${i}`}
|
||||
x1={50}
|
||||
y1={50}
|
||||
x2={pos.x}
|
||||
y2={pos.y}
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="0.2"
|
||||
strokeDasharray="1 0.5"
|
||||
filter="url(#glow)"
|
||||
className="animate-pulse"
|
||||
style={{ animationDelay: `${i * 0.3}s` }}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
|
||||
{/* App Cards */}
|
||||
{kSuiteApps.map((app, index) => {
|
||||
const pos = positions[index];
|
||||
return (
|
||||
<div
|
||||
key={app.id}
|
||||
className="absolute transform -translate-x-1/2 -translate-y-1/2 w-32 md:w-40 lg:w-48"
|
||||
style={{
|
||||
left: `${pos.x}%`,
|
||||
top: `${pos.y}%`,
|
||||
}}
|
||||
{/* Links */}
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1.5 rounded-full bg-white/10 hover:bg-white/30 transition-colors"
|
||||
title="Visit"
|
||||
>
|
||||
<ExternalLink size={14} className="text-white" />
|
||||
</a>
|
||||
{app.githubUrl && (
|
||||
<a
|
||||
href={app.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1.5 rounded-full bg-white/10 hover:bg-white/30 transition-colors"
|
||||
title="GitHub"
|
||||
>
|
||||
<div
|
||||
className={`group relative p-3 md:p-4 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl hover:bg-white/20 hover:scale-105 transition-all duration-300 cursor-pointer`}
|
||||
>
|
||||
{/* Glow effect on hover */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${app.color} opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-xl`}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex flex-col items-center text-center">
|
||||
<div className="relative w-12 h-12 md:w-16 md:h-16 mb-2">
|
||||
<Image
|
||||
src={app.icon}
|
||||
alt={app.name}
|
||||
fill
|
||||
className="object-contain rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-sm md:text-base font-bold text-white mb-1">
|
||||
{app.name}
|
||||
</h3>
|
||||
<p className="text-xs text-white/70 mb-2 hidden md:block">
|
||||
{app.shortDescription}
|
||||
</p>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1.5 rounded-full bg-white/10 hover:bg-white/30 transition-colors"
|
||||
title="Visit"
|
||||
>
|
||||
<ExternalLink size={14} className="text-white" />
|
||||
</a>
|
||||
{app.githubUrl && (
|
||||
<a
|
||||
href={app.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1.5 rounded-full bg-white/10 hover:bg-white/30 transition-colors"
|
||||
title="GitHub"
|
||||
>
|
||||
<Github size={14} className="text-white" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
<Github size={14} className="text-white" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const KSuiteAppCard = ({ app }: { app: KSuiteApp }) => {
|
||||
return (
|
||||
<div className="group relative p-6 rounded-3xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl hover:bg-white/15 transition-all duration-300">
|
||||
{/* Gradient glow */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-3xl bg-gradient-to-br ${app.color} opacity-0 group-hover:opacity-10 transition-opacity duration-300`}
|
||||
return (
|
||||
<div className="group relative p-6 rounded-3xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl hover:bg-white/15 transition-all duration-300">
|
||||
{/* Gradient glow */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-3xl bg-gradient-to-br ${app.color} opacity-0 group-hover:opacity-10 transition-opacity duration-300`}
|
||||
/>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="relative w-16 h-16 shrink-0">
|
||||
<Image
|
||||
src={app.icon}
|
||||
alt={app.name}
|
||||
fill
|
||||
className="object-contain rounded-xl"
|
||||
/>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="relative w-16 h-16 shrink-0">
|
||||
<Image
|
||||
src={app.icon}
|
||||
alt={app.name}
|
||||
fill
|
||||
className="object-contain rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">{app.name}</h3>
|
||||
<p className="text-white/70">{app.shortDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-white/80 mb-4">{app.description}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{app.technologies.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-2 py-1 text-xs rounded-full bg-white/10 text-white/80"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r ${app.color} text-white font-semibold hover:opacity-90 transition-opacity`}
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
Visit
|
||||
</a>
|
||||
{app.githubUrl && (
|
||||
<a
|
||||
href={app.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center px-4 py-2 rounded-xl border border-white/20 text-white hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<Github size={16} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">{app.name}</h3>
|
||||
<p className="text-white/70">{app.shortDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
<p className="text-white/80 mb-4">{app.description}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{app.technologies.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-2 py-1 text-xs rounded-full bg-white/10 text-white/80"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r ${app.color} text-white font-semibold hover:opacity-90 transition-opacity`}
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
Visit
|
||||
</a>
|
||||
{app.githubUrl && (
|
||||
<a
|
||||
href={app.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center px-4 py-2 rounded-xl border border-white/20 text-white hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<Github size={16} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function KSuitePage() {
|
||||
return (
|
||||
<div className="min-h-screen pt-20">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-16 md:py-24 overflow-hidden">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white mb-4 text-shadow-lg">
|
||||
K-Suite
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-2">
|
||||
A cohesive ecosystem of open-source, self-hosted applications
|
||||
designed to restore digital sovereignty to the user.
|
||||
</p>
|
||||
<p className="text-base text-white/60 max-w-2xl mx-auto mb-12">
|
||||
A "Personal Universe" containing interconnected applications ranging
|
||||
from media playback to knowledge management.
|
||||
</p>
|
||||
return (
|
||||
<div className="min-h-screen pt-20">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-16 md:py-24 overflow-hidden">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white mb-4 text-shadow-lg">
|
||||
K-Suite
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-2">
|
||||
A cohesive ecosystem of open-source, self-hosted applications
|
||||
designed to restore digital sovereignty to the user.
|
||||
</p>
|
||||
<p className="text-base text-white/60 max-w-2xl mx-auto mb-12">
|
||||
A "Personal Universe" containing interconnected
|
||||
applications ranging from media playback to knowledge management.
|
||||
</p>
|
||||
|
||||
{/* Organism Visualization */}
|
||||
<KSuiteOrganism />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Origin Story Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="p-8 rounded-3xl bg-white/5 backdrop-blur-lg border border-white/10">
|
||||
<h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
|
||||
Origin Story
|
||||
</h2>
|
||||
<div className="space-y-4 text-white/80 leading-relaxed">
|
||||
<p>
|
||||
The concept of K-Suite was born in <span className="text-yellow-400 font-semibold">2017</span>.
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Engineering Mission Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-purple-500/10 to-blue-500/10 backdrop-blur-lg border border-white/10">
|
||||
<h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
|
||||
Engineering Mission
|
||||
</h2>
|
||||
<div className="space-y-4 text-white/80 leading-relaxed">
|
||||
<p>
|
||||
This project represents my <span className="text-yellow-400 font-semibold">Magnum Opus</span>.
|
||||
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 <span className="text-cyan-400">System Design</span> and{" "}
|
||||
<span className="text-cyan-400">Software Architecture</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Core Goals */}
|
||||
<div className="mt-8 space-y-6">
|
||||
<h3 className="text-xl font-semibold text-white">Core Goals</h3>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-white/5 border border-white/10">
|
||||
<h4 className="text-lg font-bold text-amber-400 mb-2">
|
||||
Architectural Mastery
|
||||
</h4>
|
||||
<p className="text-white/70">
|
||||
To design a distributed system where independent modules (like K-Notes)
|
||||
function flawlessly on their own but become exponentially more powerful when connected.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-white/5 border border-white/10">
|
||||
<h4 className="text-lg font-bold text-emerald-400 mb-2">
|
||||
Digital Sovereignty
|
||||
</h4>
|
||||
<p className="text-white/70">
|
||||
To create a viable, privacy-first alternative to commercial ecosystems
|
||||
(Google/Apple), focused entirely on open-source principles and self-hosting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-white/5 border border-white/10">
|
||||
<h4 className="text-lg font-bold text-blue-400 mb-2">
|
||||
Seamless Integration
|
||||
</h4>
|
||||
<p className="text-white/70">
|
||||
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 an entry in the upcoming K-Mood.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Detailed Cards Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-3xl font-bold text-white text-center mb-4">
|
||||
Explore the Suite
|
||||
</h2>
|
||||
<p className="text-white/60 text-center mb-12 max-w-xl mx-auto">
|
||||
Each application is designed to work independently, but together they form
|
||||
something greater.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{kSuiteApps.map((app) => (
|
||||
<KSuiteAppCard key={app.id} app={app} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Coming Soon Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="max-w-2xl mx-auto p-8 rounded-3xl bg-white/5 backdrop-blur-lg border border-white/10">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
More Apps Coming Soon
|
||||
</h2>
|
||||
<p className="text-white/70 mb-4">
|
||||
K-Suite is still growing. The ecosystem will expand with more interconnected
|
||||
applications including K-Photos, K-Mood, and more.
|
||||
</p>
|
||||
<p className="text-sm text-white/50">
|
||||
Built with Rust, React, and modern web technologies.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Organism Visualization */}
|
||||
<KSuiteOrganism />
|
||||
</div>
|
||||
);
|
||||
</section>
|
||||
|
||||
{/* Origin Story Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="p-8 rounded-3xl bg-white/5 backdrop-blur-lg border border-white/10">
|
||||
<h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
|
||||
Origin Story
|
||||
</h2>
|
||||
<div className="space-y-4 text-white/80 leading-relaxed">
|
||||
<p>
|
||||
The concept of K-Suite was born in{" "}
|
||||
<span className="text-yellow-400 font-semibold">2017</span>.
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Engineering Mission Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-purple-500/10 to-blue-500/10 backdrop-blur-lg border border-white/10">
|
||||
<h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
|
||||
Engineering Mission
|
||||
</h2>
|
||||
<div className="space-y-4 text-white/80 leading-relaxed">
|
||||
<p>
|
||||
This project represents my{" "}
|
||||
<span className="text-yellow-400 font-semibold">
|
||||
Magnum Opus
|
||||
</span>
|
||||
. 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 <span className="text-cyan-400">System Design</span>{" "}
|
||||
and{" "}
|
||||
<span className="text-cyan-400">Software Architecture</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Core Goals */}
|
||||
<div className="mt-8 space-y-6">
|
||||
<h3 className="text-xl font-semibold text-white">Core Goals</h3>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-white/5 border border-white/10">
|
||||
<h4 className="text-lg font-bold text-amber-400 mb-2">
|
||||
Architectural Mastery
|
||||
</h4>
|
||||
<p className="text-white/70">
|
||||
To design a distributed system where independent modules
|
||||
(like K-Notes) function flawlessly on their own but become
|
||||
exponentially more powerful when connected.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-white/5 border border-white/10">
|
||||
<h4 className="text-lg font-bold text-emerald-400 mb-2">
|
||||
Digital Sovereignty
|
||||
</h4>
|
||||
<p className="text-white/70">
|
||||
To create a viable, privacy-first alternative to commercial
|
||||
ecosystems (Google/Apple), focused entirely on open-source
|
||||
principles and self-hosting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-white/5 border border-white/10">
|
||||
<h4 className="text-lg font-bold text-blue-400 mb-2">
|
||||
Seamless Integration
|
||||
</h4>
|
||||
<p className="text-white/70">
|
||||
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 an entry in the upcoming K-Mood.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Detailed Cards Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-3xl font-bold text-white text-center mb-4">
|
||||
Explore the Suite
|
||||
</h2>
|
||||
<p className="text-white/60 text-center mb-12 max-w-xl mx-auto">
|
||||
Each application is designed to work independently, but together
|
||||
they form something greater.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{kSuiteApps.map((app) => (
|
||||
<KSuiteAppCard key={app.id} app={app} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Coming Soon Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="max-w-2xl mx-auto p-8 rounded-3xl bg-white/5 backdrop-blur-lg border border-white/10">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
More Apps Coming Soon
|
||||
</h2>
|
||||
<p className="text-white/70 mb-4">
|
||||
K-Suite is still growing. The ecosystem will expand with more
|
||||
interconnected applications including K-Photos, K-Mood, and more.
|
||||
</p>
|
||||
<p className="text-sm text-white/50">
|
||||
Built with Rust, React, and modern web technologies.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -206,7 +206,7 @@ export const projects: Project[] = [
|
||||
"short_description": "Web app to tune guitar, ukulele and piano.",
|
||||
"description": "A web application for tuning musical instruments including guitar, ukulele, and piano. It features a nostalgic Frutiger Aero style and is built as a Progressive Web App (PWA) for use on any device.\n\n**Technical details:**\n- **Frontend:** React PWA",
|
||||
"category": "Web",
|
||||
"github_url": "https://github.com/GKaszewski/aero-tuner",
|
||||
"github_url": "https://github.com/GKaszewski/k-tuner",
|
||||
"visit_url": "https://tuner.gabrielkaszewski.dev/",
|
||||
"download_url": null,
|
||||
"technologies": [
|
||||
|
||||
Reference in New Issue
Block a user