File size: 6,248 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import React from 'react';
import { FaDownload, FaGraduationCap, FaBriefcase, FaFlask, FaCode, FaAward } from 'react-icons/fa';
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 projects from '../data/projects.js';  // Added .js extension
import skills from '../data/skills.js';  // Added .js extension
import { publications } from '../data/publications.js';  // Added .js extension

const Resume = () => {
  return (
    <div className="space-y-8">
      <div className="bg-white rounded-lg shadow p-6 flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold mb-2">Resume</h1>
          <p className="text-gray-700">
            A comprehensive overview of my academic and professional experience
          </p>
        </div>
        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors flex items-center">
          <FaDownload className="mr-2" />
          Download PDF
        </button>
      </div>

      {/* Professional Summary */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4">Professional Summary</h2>
        <p className="text-gray-700 leading-relaxed">{about.bio}</p>
      </div>

      {/* Education */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaGraduationCap className="mr-2 text-primary" />
          Education
        </h2>
        <div className="space-y-6">
          {education.map((edu, index) => (
            <div key={edu.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <div className="flex justify-between flex-wrap">
                <h3 className="font-bold text-lg">{edu.degree}</h3>
                <span className="text-gray-600">{edu.period}</span>
              </div>
              <p className="text-primary">{edu.institution}</p>
              {edu.gpa && <p className="text-gray-600">GPA: {edu.gpa}</p>}
              {edu.description.length > 0 && (
                <ul className="mt-2 list-disc list-inside text-gray-700">
                  {edu.description.map((item, idx) => (
                    <li key={idx}>{item}</li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Experience */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaBriefcase className="mr-2 text-primary" />
          Professional Experience
        </h2>
        <div className="space-y-6">
          {experience.map((exp, index) => (
            <div key={exp.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <div className="flex justify-between flex-wrap">
                <h3 className="font-bold text-lg">{exp.position}</h3>
                <span className="text-gray-600">{exp.period}</span>
              </div>
              <p className="text-primary">{exp.company}</p>
              <ul className="mt-2 list-disc list-inside text-gray-700">
                {exp.description.map((item, idx) => (
                  <li key={idx}>{item}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* Research Projects */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaFlask className="mr-2 text-primary" />
          Research Projects
        </h2>
        <div className="space-y-6">
          {projects.map((project, index) => (
            <div key={project.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <div className="flex justify-between flex-wrap">
                <h3 className="font-bold text-lg">{project.title}</h3>
                <span className="text-gray-600">{project.period}</span>
              </div>
              <p className="text-primary">{project.organization}</p>
              <ul className="mt-2 list-disc list-inside text-gray-700">
                {project.description.map((item, idx) => (
                  <li key={idx}>{item}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* Publications */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaAward className="mr-2 text-primary" />
          Selected Publications
        </h2>
        <div className="space-y-4">
          {publications.slice(0, 3).map((pub, index) => (
            <div key={pub.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <h3 className="font-bold text-lg">{pub.title}</h3>
              <p className="text-gray-700 italic">{pub.authors}</p>
              <div className="flex justify-between items-center mt-1">
                <p className="text-primary">{pub.venue}</p>
                <span className="text-gray-600">{pub.year}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Skills */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaCode className="mr-2 text-primary" />
          Technical Skills
        </h2>
        <div className="space-y-4">
          {Object.entries(skills).map(([category, skillList]) => (
            <div key={category}>
              <h3 className="font-bold text-lg mb-2">{category}</h3>
              <div className="flex flex-wrap gap-2 mb-4">
                {skillList.map((skill, idx) => (
                  <span 
                    key={idx} 
                    className="px-3 py-1 bg-light text-primary rounded-full text-sm"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Resume;