first commit

src/components/Projects.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa';
+
+const ProjectCard = ({ title, description, github, demo }) => {
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 20 }}
+      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+      transition={{ duration: 0.5 }}
+      className="bg-white rounded-lg shadow-lg p-6 mb-6"
+    >
+      <h3 className="text-xl font-bold mb-3">{title}</h3>
+      <ul className="list-disc list-inside mb-4 text-gray-700">
+        {description.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+      <div className="flex space-x-4">
+        {github && (
+          <a
+            href={github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center text-gray-600 hover:text-blue-600"
+          >
+            <FaGithub className="mr-2" />
+            GitHub
+          </a>
+        )}
+        {demo && (
+          <a
+            href={demo}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center text-gray-600 hover:text-blue-600"
+          >
+            <FaExternalLinkAlt className="mr-2" />
+            View Project
+          </a>
+        )}
+      </div>
+    </motion.div>
+  );
+};
+
+const Projects = () => {
+  const projects = [
+    {
+      title: "Efficiency of ML Algorithms in Financial Markets",
+      description: [
+        "Co-authored a research paper on cryptocurrency market predictability with a PHD student at CMU",
+        "Created dynamic data visualizations with Matplotlib to compare model performance and analyze trends effectively",
+        "Built a LSTM machine learning model using sk-learn for predicting cryptocurrency trends with up to 65% accuracy"
+      ],
+      github: "https://github.com/harivansh-afk/CryptoCurrencyPredictionLSTM",
+      demo: "https://docs.google.com/document/d/1i0IZgHYEERKVdRMBtCdK6jJGRoEoZUY7T43fuGKEDm8/edit?usp=sharing"
+    },
+    {
+      title: "Habit Tracker",
+      description: [
+        "Built and deployed a full-stack habit tracker web app using React.js and TypeScript, enabling efficient habit tracking",
+        "Designed reusable components and state management, enhancing scalability and maintainability",
+        "Optimized front-end performance with TypeScript and Vite, reducing build times and runtime errors"
+      ],
+      github: "#", // Replace with actual GitHub link
+      demo: "#"    // Replace with actual demo link
+    }
+  ];
+
+  return (
+    <section id="projects" className="py-20">
+      <motion.h2
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="text-3xl font-bold mb-10 text-center"
+      >
+        Projects and Research Work
+      </motion.h2>
+      
+      <div className="max-w-3xl mx-auto">
+        {projects.map((project, index) => (
+          <ProjectCard key={index} {...project} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Projects;