File size: 3,088 Bytes
c990683 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import React from 'react';
import { FaGraduationCap, FaBriefcase, FaStar, FaCode } from 'react-icons/fa';
import Section from '../components/Section';
import EducationCard from '../components/EducationCard';
import ExperienceCard from '../components/ExperienceCard';
import SkillTag from '../components/SkillTag';
import about from '../data/about.js'; // Added .js extension
import education from '../data/education.js'; // Added .js extension
import experience from '../data/experience.js'; // Added .js extension
import skills from '../data/skills.js'; // Added .js extension
const Home = () => {
return (
<div className="space-y-8">
{/* Bio Section */}
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-2xl font-bold mb-4">About Me</h2>
<p className="text-gray-700 leading-relaxed">{about.bio}</p>
</div>
{/* Research Interests */}
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-2xl font-bold mb-4">Research Interests</h2>
<ul className="list-disc list-inside text-gray-700 space-y-2">
{about.researchInterests.map((interest, index) => (
<li key={index}>{interest}</li>
))}
</ul>
</div>
{/* Awards */}
<Section
title="Honors & Awards"
icon={<FaStar className="text-primary" />}
>
<div className="space-y-4">
{about.awards.map((award, index) => (
<div key={index} className="bg-white rounded-lg shadow p-6">
<h3 className="font-bold text-lg">{award.title}</h3>
<p className="text-primary">{award.organization}</p>
</div>
))}
</div>
</Section>
{/* Education Section */}
<Section
title="Education"
icon={<FaGraduationCap className="text-primary" />}
>
<div className="space-y-4">
{education.map((edu) => (
<EducationCard key={edu.id} education={edu} />
))}
</div>
</Section>
{/* Experience Section */}
<Section
title="Experience"
icon={<FaBriefcase className="text-primary" />}
>
<div className="space-y-4">
{experience.map((exp) => (
<ExperienceCard key={exp.id} experience={exp} />
))}
</div>
</Section>
{/* Skills Section */}
<Section
title="Skills"
icon={<FaCode className="text-primary" />}
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{Object.entries(skills).map(([category, skillList]) => (
<div key={category} className="bg-white rounded-lg shadow p-6">
<h3 className="font-bold text-lg mb-2">{category}</h3>
<div className="flex flex-wrap gap-2">
{skillList.map((skill, idx) => (
<SkillTag key={idx} skill={skill} />
))}
</div>
</div>
))}
</div>
</Section>
</div>
);
};
export default Home; |