home/src/editable-stuff/ProjectTimeline.jsx at New-features-timeline · bibinvargheset/home · GitHub

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
import React, { useState, useEffect, useCallback } from "react";
import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import './style.min.css';
import SchoolIcon from '@material-ui/icons/School';
import StarIcon from '@material-ui/icons/Star';
import WorkIcon from '@material-ui/icons/Work';
import Container from "react-bootstrap/Container";
import Jumbotron from "react-bootstrap/Jumbotron";
import Button from '@material-ui/core/Button';

const ProjectTimeline = () => {
 return (
 <Jumbotron fluid id="projecttimeline" className="bg-light m-0">
	<Container className="p-6">
		 <VerticalTimeline>

			<VerticalTimelineElement
				iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
				icon={<StarIcon />}
			  />
			  <VerticalTimelineElement
				className="vertical-timeline-element--work"
				contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
				contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
				date="2011 - present"
				iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
				icon={<WorkIcon />}
			  >
				<h3 className="vertical-timeline-element-title">Creative Director</h3>
				<h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
				<p>
				  Creative Direction, User Experience, Visual Design, Project Management, Team Leading
				</p>
				 <div className="ResumeProjectsBlock-links">

                  <Button

                    variant="outlined"
                    color="default"
                    target="_blank"
                    href={"bibinvargheset"}
                  >
                    {"Bibin"}
                  </Button>
				   <Button

                    variant="outlined"
                    color="default"
                    target="_blank"
                    href={"bibinvargheset"}
                  >
                    {"Bibin"}
                  </Button>

				 </div>
			  </VerticalTimelineElement>
			  <VerticalTimelineElement
				className="vertical-timeline-element--work"
				contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
				date="2010 - 2011"
				iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
				icon={<WorkIcon />}
			  >
				<h3 className="vertical-timeline-element-title">Art Director</h3>
				<h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
				<p>
				  Creative Direction, User Experience, Visual Design, SEO, Online Marketing
				</p>
			  </VerticalTimelineElement>
			  <VerticalTimelineElement
				className="vertical-timeline-element--work"
				date="2008 - 2010"
				iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
				icon={<WorkIcon />}
			  >
				<h3 className="vertical-timeline-element-title">Web Designer</h3>
				<h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
				<p>
				  User Experience, Visual Design
				</p>
			  </VerticalTimelineElement>
			  <VerticalTimelineElement
				className="vertical-timeline-element--work"
				date="2006 - 2008"
				iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
				icon={<WorkIcon />}
			  >
				<h3 className="vertical-timeline-element-title">Web Designer</h3>
				<h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
				<p>
				  User Experience, Visual Design
				</p>
			  </VerticalTimelineElement>
			  <VerticalTimelineElement
				className="vertical-timeline-element--education"
				date="April 2013"
				iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
				icon={<SchoolIcon />}
			  >
				<h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
				<h4 className="vertical-timeline-element-subtitle">Online Course</h4>
				<p>
				  Strategy, Social Media
				</p>
			  </VerticalTimelineElement>
			  <VerticalTimelineElement
				className="vertical-timeline-element--education"
				date="November 2012"
				iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
				icon={<SchoolIcon />}
			  >
				<h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
				<h4 className="vertical-timeline-element-subtitle">Certification</h4>
				<p>
				  Creative Direction, User Experience, Visual Design
				</p>
			  </VerticalTimelineElement>
			  <VerticalTimelineElement
				className="vertical-timeline-element--education"
				date="2002 - 2006"
				iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
				icon={<SchoolIcon />}
			  >
				<h3 className="vertical-timeline-element-title">Bachelor of Science in Interactive Digital Media Visual Imaging</h3>
				<h4 className="vertical-timeline-element-subtitle">Bachelor Degree</h4>
				<p>
				  Creative Direction, Visual Design
				</p>
			  </VerticalTimelineElement>
			  <VerticalTimelineElement
				iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
				icon={<StarIcon />}
			  />
		</VerticalTimeline>
	</Container>
 </Jumbotron>
)
};

export default ProjectTimeline;