101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { Link } from 'react-router-dom';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { useSettings } from '@/contexts/SettingsContext';
|
|
|
|
const projects = [
|
|
{
|
|
slug: 'personal-website',
|
|
title: 'Personal Website',
|
|
description: 'This Matrix-themed personal website with retro hacker aesthetics.',
|
|
status: 'Complete',
|
|
},
|
|
{
|
|
slug: '3-way-speakers',
|
|
title: '3 Way Speakers',
|
|
description: 'Building custom 3-way speaker system with crossover design.',
|
|
status: 'Complete',
|
|
},
|
|
{
|
|
slug: 'xray-machine',
|
|
title: 'X-Ray Machine',
|
|
description: 'DIY X-ray machine project for educational purposes.',
|
|
status: 'In Progress',
|
|
},
|
|
{
|
|
slug: 'dj-mixing-visualizer',
|
|
title: 'Automated DJ Mixing & Visualizer',
|
|
description: 'Automated DJ mixing script with audio visualizer XY mode.',
|
|
status: 'In Progress',
|
|
},
|
|
{
|
|
slug: 'vps-infrastructure',
|
|
title: 'VPS Server Infrastructure',
|
|
description: 'Self-hosted VPS with authoritative nameserver, git, password manager, mail, reverse proxy and VPN.',
|
|
status: 'Complete',
|
|
},
|
|
];
|
|
|
|
const Projects = () => {
|
|
const { playSound } = useSettings();
|
|
|
|
const statusColor = (status: string) => {
|
|
return {
|
|
'Complete': 'text-green-400 border-green-400',
|
|
'In Progress': 'text-yellow-400 border-yellow-400',
|
|
'Planning': 'text-blue-400 border-blue-400',
|
|
}[status] || 'text-primary border-primary';
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="space-y-6"
|
|
>
|
|
<h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong">
|
|
Projects
|
|
</h1>
|
|
|
|
<p className="font-pixel text-foreground/80">
|
|
Here are some of the things I've been working on:
|
|
</p>
|
|
|
|
<div className="grid gap-4">
|
|
{projects.map((project, index) => (
|
|
<motion.div
|
|
key={project.slug}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: index * 0.1 }}
|
|
>
|
|
<Link
|
|
to={`/projects/${project.slug}`}
|
|
onClick={() => playSound('click')}
|
|
onMouseEnter={() => playSound('hover')}
|
|
className="group block p-4 border border-primary/30 hover:border-primary transition-all duration-300 hover:box-glow"
|
|
>
|
|
<div className="flex justify-between items-start mb-2">
|
|
<h2 className="font-minecraft text-xl text-primary text-glow group-hover:text-glow-strong transition-all">
|
|
{project.title}
|
|
</h2>
|
|
<span className={`font-pixel text-xs px-2 py-1 border ${statusColor(project.status)}`}>
|
|
{project.status}
|
|
</span>
|
|
</div>
|
|
<p className="font-pixel text-foreground/80 mb-3">{project.description}</p>
|
|
<div className="flex items-center gap-2 font-pixel text-sm text-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<span>View Details</span>
|
|
<ArrowRight size={14} />
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default Projects;
|