Skip to content

Commit

Permalink
CV
Browse files Browse the repository at this point in the history
  • Loading branch information
@clbenoit
clbenoit committed Feb 6, 2024
1 parent aa6cf40 commit 8e05eef
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 35 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
119 changes: 84 additions & 35 deletions docs/pages/CV/react-timeline.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,65 +3,90 @@ import 'react-vertical-timeline-component/style.min.css';
import VerticalTimelineComponent from 'react-vertical-timeline-component';
const { VerticalTimeline, VerticalTimelineElement } = VerticalTimelineComponent;

import WorkLogo from '../../public/WorkIcon.png'; // with import
import EducationLogo from '../../public/EducationIcon.png'; // with import
import InternshipLogo from '../../public/InternshipIcon.png'; // with import
import TravelingLogo from '../../public/TravelingIcon.png'; // with import

import '../../styles.css';

const listStyle = {
listStyleType: 'disc',
listStylePosition: 'inside',
textJustify: 'auto',
// height: '0.5em'
};

const Timeline = () => {
return (
<VerticalTimeline>
<VerticalTimeline
layout = "1-column-left">
{/* layout = "2-columns"> */}
<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 />}
date="Aug 2022 - Present"
iconStyle={{ background: 'rgb(83,104,120)', color: '#fff' }}
contentStyle={{ background: 'rgb(83,104,120)', color: '#fff' }}
icon={ <img className="flag-size" src ={WorkLogo} />}
>
<h3 className="vertical-timeline-element-title">Creative Director</h3>
<h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
<h3 className="vertical-timeline-element-title">Clinical Bioinformatics Engineer</h3>
<h4 className="vertical-timeline-element-subtitle">Grenoble Alpes University Hospital (CHUGA)</h4>
<p>
Creative Direction, User Experience, Visual Design, Project Management, Team Leading
Gathering biologist needs, Training, Automation, Databases, nf-core pipelines, Local Laboratory Information Management Systems,
Data Management, High Performance computing, Software maintenance, <br/>
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2010 - 2011"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
// icon={<WorkIcon />}
date="March 2019 - March 2022"
iconStyle={{ background: 'rgb(83,104,120)', color: '#fff' }}
contentStyle={{ background: 'rgb(83,104,120)', color: '#fff' }}
icon={ <img className="flag-size" src ={WorkLogo} />}
>
<h3 className="vertical-timeline-element-title">Art Director</h3>
<h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
<h3 className="vertical-timeline-element-title">Research Engineer</h3>
<h4 className="vertical-timeline-element-subtitle">Institut Curie</h4>
<p>
Creative Direction, User Experience, Visual Design, SEO, Online Marketing
Bioinformatics, Data Pipeline development,
Statistical analysis, Reporting,
Data application development,
High Performance Computing,
Training,
Benchmarking,
Data Pipeline development<br/>
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2008 - 2010"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
// icon={<WorkIcon />}
date="March 2019 - March 2022"
iconStyle={{ background: 'rgb(128,193,157)', color: '#fff' }}
contentStyle={{ background: 'rgb(128,193,157)', color: '#fff' }}
icon={ <img className="flag-sizeT" src ={TravelingLogo} />}
>
<h3 className="vertical-timeline-element-title">Web Designer</h3>
<h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
<h3 className="vertical-timeline-element-title">BackPacker</h3>
<h4 className="vertical-timeline-element-subtitle">Europe</h4>
<p>
User Experience, Visual Design
Blabla,Blili<br/>
</p>
</VerticalTimelineElement>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2006 - 2008"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
// icon={<WorkIcon />}
contentStyle={{ background: 'rgb(221,136,86)', color: '#fff' }}
iconStyle={{ background: 'rgb(221,136,86)', color: '#fff' }}
icon={ <img className="flag-sizeT" src ={InternshipLogo} />}
>
<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 />}
contentStyle={{ background: 'rgb(221,136,86)', color: '#fff' }}
iconStyle={{ background: 'rgb(221,136,86)', color: '#fff' }}
icon={ <img className="flag-sizeT" src ={InternshipLogo} />}
>
<h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
<h4 className="vertical-timeline-element-subtitle">Online Course</h4>
Expand All @@ -72,8 +97,9 @@ const Timeline = () => {
<VerticalTimelineElement
className="vertical-timeline-element--education"
date="November 2012"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
// icon={<SchoolIcon />}
iconStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
contentStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
icon={ <img src ={EducationLogo} />}
>
<h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
<h4 className="vertical-timeline-element-subtitle">Certification</h4>
Expand All @@ -84,19 +110,42 @@ const Timeline = () => {
<VerticalTimelineElement
className="vertical-timeline-element--education"
date="2002 - 2006"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
// icon={<SchoolIcon />}
iconStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
contentStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
icon={ <img src ={EducationLogo} />}
>
<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
POLYTECH
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
// icon={<StarIcon />}
/>
className="vertical-timeline-element--education"
date="2002 - 2006"
iconStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
contentStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
icon={ <img src ={EducationLogo} />}
>
<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>
PREPA
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--education"
date="2002 - 2006"
iconStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
contentStyle={{ background: 'rgb(128,0,32)', color: '#fff' }}
icon={ <img src ={EducationLogo} />}
>
<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>
BACCALAUREATE
</p>
</VerticalTimelineElement>
</VerticalTimeline>
)
}
Expand Down
1 change: 1 addition & 0 deletions docs/pages/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ layout: landing

import { HomePage } from "vocs/components";


<HomePage.Root>
{/* <HomePage.Logo /> */}
<HomePage.Tagline>
Expand Down
Binary file added docs/public/EducationIcon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/InternshipIcon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/TravelingIcon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/WorkIcon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions docs/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/* .vertical-timeline--1-column-left .vertical-timeline-element-icon .flag-size {
width: 160px;
height: 160px;
}
@media only screen and (min-width: 1170px) {
.vertical-timeline--1-column-left .vertical-timeline-element-icon .flag-size {
width: 610px;
height: 60px;
}
} */

.flag-size {
padding: 0em;
display: flex;
justify-content: center;
align-items: center;
}


.flag-sizeT {
padding: 0.2em;
display: flex;
justify-content: center;
align-items: center;
}

.vertical-timeline-element-title {
font-size: 18px;
}
.vertical-timeline-element-subtitle{
font-size: 16px;
}
.vertical-timeline-element-content{
font-size: 15px;
}

0 comments on commit 8e05eef

Please sign in to comment.