| import React from 'react'; |
| import { FaFlask } from 'react-icons/fa'; |
| import Section from '../components/Section'; |
| import ProjectCard from '../components/ProjectCard'; |
| import projects from '../data/projects.js'; |
|
|
| const Projects = () => { |
| return ( |
| <div className="space-y-8"> |
| <div className="bg-white rounded-lg shadow p-6"> |
| <h1 className="text-3xl font-bold mb-4">Research Projects</h1> |
| <p className="text-gray-700"> |
| An overview of my research projects in computational materials science, |
| machine learning, and AI for scientific applications. |
| </p> |
| </div> |
| |
| <Section |
| title="Featured Projects" |
| icon={<FaFlask className="text-primary" />} |
| > |
| <div className="space-y-4"> |
| {projects.map((project) => ( |
| <ProjectCard key={project.id} project={project} /> |
| ))} |
| </div> |
| </Section> |
| |
| <div className="bg-white rounded-lg shadow p-6 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center"> |
| <h3 className="font-bold text-xl mb-2 text-gray-500">Add New Project</h3> |
| <p className="text-gray-500 text-center mb-4"> |
| Update the projects.js file to add new research projects to your portfolio |
| </p> |
| <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors"> |
| Add Project |
| </button> |
| </div> |
| </div> |
| ); |
| }; |
|
|
| export default Projects; |
