Skip to content

Commit 4f369e7

Browse files
author
Kevin Jose
committed
[24/5/2020][TAILWIND_RESUME] added resume section connected resume to store
1 parent 8b2be06 commit 4f369e7

File tree

3 files changed

+220
-0
lines changed

3 files changed

+220
-0
lines changed

‎may-2020/tailwind_css/rt-workcation/public/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<link
19+
href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap"
20+
rel="stylesheet"
21+
/>
22+
<link
23+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
24+
rel="stylesheet"
25+
/>
1826
<!--
1927
Notice the use of %PUBLIC_URL% in the tags above.
2028
It will be replaced with the URL of the `public` folder during the build.

‎may-2020/tailwind_css/rt-workcation/src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import SiteHeader from './components/SiteHeader';
33
import SiteFilters from './components/SearchFilters';
44
import SideNav from './components/SideNav';
5+
import Resume from './components/Resume';
56
import { ResumeProvider } from './contexts/ResumeContext';
67

78
function App() {
@@ -12,6 +13,7 @@ function App() {
1213
<ResumeProvider>
1314
<SideNav />
1415
<SiteFilters />
16+
<Resume />
1517
</ResumeProvider>
1618
</div>
1719
</div>

‎may-2020/tailwind_css/rt-workcation/src/components/Resume.js‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import React from 'react';
2+
import { useResumeContext } from '../contexts/ResumeContext';
3+
4+
const Resume = () => {
5+
const { state } = useResumeContext();
6+
const basic_profile = state.resume.basics;
7+
return (
8+
<div
9+
className='p-10 w-full bg-white border antialiased overflow-y-auto'
10+
style={{ fontFamily: 'Fira Sans' }}
11+
>
12+
<div className='grid grid-cols-4 items-center'>
13+
<div className='col-span-3 flex items-center'>
14+
<img
15+
className='rounded object-cover mr-4 w-32 h-32'
16+
src={basic_profile.picture}
17+
alt='display pic'
18+
/>
19+
<div>
20+
<h1 className='font-bold text-4xl text-gray-600'>
21+
{basic_profile.name}
22+
</h1>
23+
<h6 className='font-medium text-sm'>{basic_profile.designation}</h6>
24+
<div className='flex flex-col mt-4 text-xs'>
25+
<span>{basic_profile.location.address}</span>
26+
<span>{basic_profile.location.city}</span>
27+
<span>
28+
{basic_profile.location.region},{' '}
29+
{basic_profile.location.postalCode}
30+
</span>
31+
</div>
32+
</div>
33+
</div>
34+
<div className='col-span-1 text-xs'>
35+
<div className='flex items-center my-3'>
36+
<span
37+
className='material-icons text-lg mr-2'
38+
aria-label='telephone'
39+
role='img'
40+
>
41+
phone
42+
</span>
43+
<a href={`tel:${basic_profile.phone}`}>
44+
<span className='font-medium break-all'>
45+
{basic_profile.phone}
46+
</span>
47+
</a>
48+
</div>
49+
<div className='flex items-center my-3'>
50+
<span
51+
className='material-icons text-lg mr-2'
52+
aria-label='email'
53+
role='img'
54+
>
55+
email
56+
</span>
57+
<a href={`mailto:${basic_profile.email}`}>
58+
<span className='font-medium break-all lowercase'>
59+
{basic_profile.email}
60+
</span>
61+
</a>
62+
</div>
63+
</div>
64+
</div>
65+
<hr className='my-6' />
66+
67+
<div>
68+
<h6 className='text-xs font-bold uppercase mt-6 mb-2'>
69+
Professional Objective
70+
</h6>
71+
<div className='text-sm'>
72+
<p>
73+
To obtain a job within my chosen field that will challenge me and
74+
allow me to use my education, skills and past experiences in a way
75+
that is mutually beneficial to both myself and my employer and allow
76+
for future growth and advancement.
77+
</p>
78+
</div>
79+
</div>
80+
81+
<div>
82+
<h6 className='text-xs font-bold uppercase mt-6 mb-2'>
83+
Work Experience
84+
</h6>
85+
<div className='mt-3'>
86+
<div className='flex justify-between'>
87+
<div>
88+
<h6 className='font-semibold'>LetsVenture Pte. Ltd</h6>
89+
<p className='text-xs'> Frontend engineer</p>
90+
</div>
91+
<span className='text-xs font-medium'>(Jan 2015 - July 2016)</span>
92+
</div>
93+
94+
<div className='mt-2 text-sm'>
95+
<ul className='list-disc ml-4'>
96+
<li>
97+
Organized customer information and account data for business
98+
planning and customer service purposes.
99+
</li>
100+
<li>
101+
Created excel spreadsheets to track customer data and perform
102+
intense reconciliation process.
103+
</li>
104+
<li>
105+
Created excel spreadsheets to track customer data and perform
106+
intense reconciliation process.
107+
<br />
108+
<strong>Key achievement: &nbsp;</strong>
109+
Designed and executed an automatized system for following up
110+
with customers, increasing customer retention by 22%.
111+
</li>
112+
</ul>
113+
</div>
114+
</div>
115+
116+
<div className='mt-3'>
117+
<div className='flex justify-between'>
118+
<div>
119+
<h6 className='font-semibold'>AOT Technologies Pte. Ltd.</h6>
120+
<p className='text-xs'> Frontend engineer</p>
121+
</div>
122+
<span className='text-xs font-medium'>(Jan 2014 - July 2015)</span>
123+
</div>
124+
125+
<div className='mt-2 text-sm'>
126+
<ul className='list-disc ml-4'>
127+
<li>
128+
Organized customer information and account data for business
129+
planning and customer service purposes.
130+
</li>
131+
<li>
132+
Created excel spreadsheets to track customer data and perform
133+
intense reconciliation process.
134+
</li>
135+
<li>
136+
Created excel spreadsheets to track customer data and perform
137+
intense reconciliation process.
138+
<br />
139+
<strong>Key achievement: &nbsp;</strong>
140+
Designed and executed an automatized system for following up
141+
with customers, increasing customer retention by 22%.
142+
</li>
143+
</ul>
144+
</div>
145+
</div>
146+
</div>
147+
148+
<div className='grid grid-cols-2 gap-6'>
149+
<div>
150+
<h6 className='text-xs font-bold uppercase mt-6 mb-2'>Skills</h6>
151+
<div className='mt-1 flex flex-wrap'>
152+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
153+
Javascript
154+
</span>
155+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
156+
HTML5
157+
</span>
158+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
159+
CSS3
160+
</span>
161+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
162+
Javascript
163+
</span>
164+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
165+
HTML5
166+
</span>
167+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
168+
CSS3
169+
</span>
170+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
171+
Javascript
172+
</span>
173+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
174+
HTML5
175+
</span>
176+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
177+
CSS3
178+
</span>
179+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
180+
Javascript
181+
</span>
182+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
183+
HTML5
184+
</span>
185+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
186+
CSS3
187+
</span>
188+
</div>
189+
</div>
190+
191+
<div>
192+
<h6 className='text-xs font-bold uppercase mt-6 mb-2'>Hobbies</h6>
193+
<div className='mt-1 flex flex-wrap'>
194+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
195+
Sketching
196+
</span>
197+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
198+
Speed Coding
199+
</span>
200+
<span className='text-xs rounded-full px-3 py-1 font-medium my-2 mr-2 bg-gray-900 text-gray-200'>
201+
Travel
202+
</span>
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
);
208+
};
209+
210+
export default Resume;

0 commit comments

Comments
 (0)