Initial commit
This commit is contained in:
243
src/components/ProjectsSection.tsx
Normal file
243
src/components/ProjectsSection.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import {
|
||||
Activity,
|
||||
Rocket,
|
||||
CheckCircle2,
|
||||
ExternalLink,
|
||||
Terminal,
|
||||
Globe,
|
||||
Lock,
|
||||
Database,
|
||||
} from "lucide-react";
|
||||
import { useReducedMotion } from "../hooks/useReducedMotion";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const activeProjects = [
|
||||
{
|
||||
title: "Seraph C2",
|
||||
description:
|
||||
"Full fledged, interactive, post-exploitation C2 system with AI-support, E2EE, evasion, cross-platform featuring and large scaled exfiltration features.",
|
||||
icon: Terminal,
|
||||
tags: ["Security Research", "AI", "E2EE"],
|
||||
status: "LIVE",
|
||||
},
|
||||
{
|
||||
title: "AnonPay (tocador.app-style)",
|
||||
description:
|
||||
"Payment gateway that allows paying in hundreds of different cryptocurrencies whilst still receiving only one by utilizing multiple swap aggregators and joining different, rotating wallet pools.",
|
||||
icon: Globe,
|
||||
tags: ["Crypto", "Finance", "Payments"],
|
||||
status: "LIVE",
|
||||
},
|
||||
{
|
||||
title: "kippenkartell.cc",
|
||||
description:
|
||||
"Dockerized Premium SaaS marketplace platform with a clean monorepo architecture: SvelteKit frontend, Rust REST API, MySQL database.",
|
||||
icon: Database,
|
||||
tags: ["SaaS", "SvelteKit", "Rust"],
|
||||
status: "N/A",
|
||||
},
|
||||
{
|
||||
title: "spying.su",
|
||||
description:
|
||||
"Discord, Social Media & Breach Data Aggregation and Web Intelligence Platform.",
|
||||
icon: Lock,
|
||||
tags: ["OSINT", "Data", "Intelligence"],
|
||||
status: "N/A",
|
||||
},
|
||||
];
|
||||
|
||||
const plannedProjects = [
|
||||
{
|
||||
title: "webforum",
|
||||
description:
|
||||
"Suitable & simple breachforum's & WPD-style webforum for anonymous media submission, role assignment systems, localized restriction control & community/topic merging, additionally private chats & E2EE secured chats.",
|
||||
},
|
||||
{
|
||||
title: "porn page",
|
||||
description:
|
||||
"A webforum/archive & user-control system for manageable, quick, fast & secure access/uploading to/of pornography media.",
|
||||
},
|
||||
{
|
||||
title: "vpn-protocol",
|
||||
description:
|
||||
"Low-level interface VPN protocol featuring extremely tiny binary & lightweight byte transmitting using NDISAPI (curve25519 -> serpent(threefish512)).",
|
||||
},
|
||||
];
|
||||
|
||||
const completedProjects = [
|
||||
{
|
||||
title: "Cryptography Library",
|
||||
description:
|
||||
"A threefish512 (customized padding & improved security) implementation in D based off a russian barebones cryptographic algorithm & a ported shamir's secret sharing implementation in python with a bridger written in C.",
|
||||
link: "https://git.fingeri.ng/whiskers/cryptography",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ProjectsSection() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const reducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (reducedMotion || !sectionRef.current) return;
|
||||
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.fromTo(
|
||||
".project-reveal",
|
||||
{ y: 50, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.9,
|
||||
stagger: 0.12,
|
||||
ease: "expo.out",
|
||||
scrollTrigger: {
|
||||
trigger: sectionRef.current,
|
||||
start: "top 70%",
|
||||
toggleActions: "play none none none",
|
||||
},
|
||||
},
|
||||
);
|
||||
}, sectionRef);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, [reducedMotion]);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="projects"
|
||||
ref={sectionRef}
|
||||
className="relative py-32 md:py-40 px-6"
|
||||
>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Section label */}
|
||||
<div className="project-reveal flex items-center gap-4 mb-16">
|
||||
<span className="text-pink-brand font-mono text-xs tracking-[0.3em] uppercase">
|
||||
003
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-pink-brand/20" />
|
||||
<span className="text-grey-500 font-display text-xs tracking-[0.2em] uppercase">
|
||||
Projects
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Active Projects */}
|
||||
<div className="mb-24">
|
||||
<div className="project-reveal flex items-center gap-3 mb-10">
|
||||
<Activity className="w-5 h-5 text-pink-brand" />
|
||||
<h3 className="font-display text-xl md:text-2xl font-medium text-grey-900">
|
||||
Active
|
||||
</h3>
|
||||
<span className="px-2 py-0.5 rounded-full bg-pink-brand/10 text-pink-brand text-xs font-mono">
|
||||
{activeProjects.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{activeProjects.map((project) => (
|
||||
<div
|
||||
key={project.title}
|
||||
className="project-reveal group p-6 md:p-8 rounded-2xl bg-skin-100/40 border border-pink-brand/5 hover:border-pink-brand/20 hover:bg-skin-100/80 transition-all duration-500 hover:shadow-xl hover:shadow-pink-brand/5"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
|
||||
<project.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="flex items-center gap-1.5 text-xs font-mono text-pink-brand">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-pink-brand animate-pulse" />
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="font-display text-lg font-medium text-grey-900 mb-3 group-hover:text-pink-brand transition-colors">
|
||||
{project.title}
|
||||
</h4>
|
||||
<p className="text-grey-500 text-sm leading-relaxed font-body mb-4">
|
||||
{project.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-1 rounded-md text-xs font-mono text-grey-600 bg-skin-200/50"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Planned Projects */}
|
||||
<div className="mb-24">
|
||||
<div className="project-reveal flex items-center gap-3 mb-10">
|
||||
<Rocket className="w-5 h-5 text-pink-soft" />
|
||||
<h3 className="font-display text-xl md:text-2xl font-medium text-grey-900">
|
||||
Planned
|
||||
</h3>
|
||||
<span className="px-2 py-0.5 rounded-full bg-pink-soft/10 text-pink-soft text-xs font-mono">
|
||||
{plannedProjects.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{plannedProjects.map((project, i) => (
|
||||
<div
|
||||
key={project.title}
|
||||
className="project-reveal group flex gap-6 p-6 rounded-2xl bg-skin-100/30 border border-pink-brand/5 hover:border-pink-brand/15 hover:bg-skin-100/60 transition-all duration-300"
|
||||
>
|
||||
<span className="font-mono text-2xl text-pink-brand/30 group-hover:text-pink-brand/60 transition-colors">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<div>
|
||||
<h4 className="font-display text-base font-medium text-grey-900 mb-2 group-hover:text-pink-brand transition-colors">
|
||||
{project.title}
|
||||
</h4>
|
||||
<p className="text-grey-500 text-sm leading-relaxed font-body">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Completed Projects */}
|
||||
<div>
|
||||
<div className="project-reveal flex items-center gap-3 mb-10">
|
||||
<CheckCircle2 className="w-5 h-5 text-grey-500" />
|
||||
<h3 className="font-display text-xl md:text-2xl font-medium text-grey-900">
|
||||
Completed
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{completedProjects.map((project) => (
|
||||
<a
|
||||
key={project.title}
|
||||
href={project.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="project-reveal group flex items-start justify-between gap-4 p-6 rounded-2xl bg-skin-100/30 border border-pink-brand/5 hover:border-pink-brand/20 hover:bg-skin-100/60 transition-all duration-300"
|
||||
>
|
||||
<div>
|
||||
<h4 className="font-display text-base font-medium text-grey-900 mb-2 group-hover:text-pink-brand transition-colors">
|
||||
{project.title}
|
||||
</h4>
|
||||
<p className="text-grey-500 text-sm leading-relaxed font-body">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
<ExternalLink className="w-5 h-5 text-grey-400 group-hover:text-pink-brand flex-shrink-0 transition-colors" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user