Add stack links
This commit is contained in:
@@ -3,12 +3,12 @@
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const technologies = [
|
||||
{ name: 'Corestore', description: 'Decentralized storage' },
|
||||
{ name: 'Hyperswarm', description: 'Peer discovery' },
|
||||
{ name: 'Holesail', description: 'UDP hole-punching' },
|
||||
{ name: 'Autopass', description: 'Secure invitations' },
|
||||
{ name: 'Node.js', description: 'Runtime environment' },
|
||||
{ name: 'Protomux', description: 'Channel multiplexing' },
|
||||
{ name: 'Corestore', description: 'Decentralized storage', url: 'https://www.npmjs.com/package/corestore' },
|
||||
{ name: 'Hyperswarm', description: 'Peer discovery', url: 'https://www.npmjs.com/package/hyperswarm' },
|
||||
{ name: 'Holesail', description: 'Secure Tunnels', url: 'https://holesail.io' },
|
||||
{ name: 'Autopass', description: 'Secure invitations', url: 'https://www.npmjs.com/package/autopass' },
|
||||
{ name: 'Node.js', description: 'Runtime', url: 'https://nodejs.org' },
|
||||
{ name: 'Protomux', description: 'Channel multiplexing', url: 'https://www.npmjs.com/package/protomux' },
|
||||
];
|
||||
|
||||
export default function TechnologyStack() {
|
||||
@@ -26,13 +26,16 @@ export default function TechnologyStack() {
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{technologies.map((tech, index) => (
|
||||
<motion.div
|
||||
<motion.a
|
||||
key={tech.name}
|
||||
href={tech.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.1 }}
|
||||
className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors"
|
||||
className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors cursor-pointer block"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{tech.name}
|
||||
@@ -40,7 +43,7 @@ export default function TechnologyStack() {
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{tech.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user