mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-15 17:21:35 +10:00
initial commit, completed 40% of first milestone
This commit is contained in:
Amruth Pillai
172
src/templates/onyx/Onyx.js
Normal file
172
src/templates/onyx/Onyx.js
Normal file
@ -0,0 +1,172 @@
|
||||
import React, { useContext } from 'react';
|
||||
import AppContext from '../../context/AppContext';
|
||||
|
||||
const Onyx = () => {
|
||||
const context = useContext(AppContext);
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontFamily: theme.font.family,
|
||||
backgroundColor: theme.colors.background,
|
||||
color: theme.colors.body,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-4 items-center">
|
||||
<div className="col-span-3 flex items-center">
|
||||
{data.profile.photo && (
|
||||
<img
|
||||
className="rounded object-cover mr-4"
|
||||
src={data.profile.photo}
|
||||
alt="Resume Photograph"
|
||||
style={{ width: '120px', height: '120px' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
|
||||
{data.profile.firstName} {data.profile.lastName}
|
||||
</h1>
|
||||
<h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
|
||||
|
||||
<div className="flex flex-col mt-4 text-xs">
|
||||
<span>{data.profile.address.line1}</span>
|
||||
<span>{data.profile.address.line2}</span>
|
||||
<span>{data.profile.address.line3}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 text-xs">
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
phone
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.phone}</span>
|
||||
</div>
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
language
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.website}</span>
|
||||
</div>
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
alternate_email
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-6" />
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.objective.heading}
|
||||
</h6>
|
||||
<p className="text-sm">{data.objective.body}</p>
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.work.heading}
|
||||
</h6>
|
||||
{data.work.items.map(exp => (
|
||||
<div key={exp.title} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{exp.title}</h6>
|
||||
<p className="text-xs">{exp.role}</p>
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
({exp.start} - {exp.end})
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{exp.description}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.education.heading}
|
||||
</h6>
|
||||
{data.education.items.map(edu => (
|
||||
<div key={edu.name} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{edu.name}</h6>
|
||||
<p className="text-xs">{edu.major}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-sm font-bold">{edu.grade}</span>
|
||||
<span className="text-xs font-medium">
|
||||
({edu.start} - {edu.end})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{edu.description}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="grid grid-cols-2">
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.awards.heading}
|
||||
</h6>
|
||||
{data.awards.items.map(x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.certifications.heading}
|
||||
</h6>
|
||||
{data.certifications.items.map(x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.skills.heading}
|
||||
</h6>
|
||||
<div className="mt-1 flex flex-wrap">
|
||||
{data.skills.items.map(x => (
|
||||
<span
|
||||
key={x}
|
||||
className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
|
||||
style={{ backgroundColor: theme.colors.body, color: theme.colors.background }}
|
||||
>
|
||||
{x}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.extras.heading}
|
||||
</h6>
|
||||
<table className="w-2/3 table-auto">
|
||||
<tbody>
|
||||
{data.extras.items.map(x => (
|
||||
<tr key={x.key}>
|
||||
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
|
||||
<td className="border px-4 py-2 text-sm">{x.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Onyx;
|
||||
Reference in New Issue
Block a user