Merge pull request #2 from clbenoit/feat/react-timeline

✨ 📦 Merge pull request #2 from clbenoit/feat/react-timeline
clbenoit · Feb 5, 2024 · e6ed9ab · e6ed9ab
2 parents 13771e6 + d71bb0c
commit e6ed9ab
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,4 +21,8 @@ yarn-error.log*
 *.tsbuildinfo
 
 # chelou
-packages.microsoft.gpg
+packages.microsoft.gpg
+
+vocs.config.ts.timestamp*
+
+bun.lockb
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/pages/CV/index.mdx b/docs/pages/CV/index.mdx
@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+import  Timeline from "./react-timeline"
+
+<Timeline />
diff --git a/docs/pages/CV/react-timeline.jsx b/docs/pages/CV/react-timeline.jsx
@@ -0,0 +1,104 @@
+import 'react-vertical-timeline-component/style.min.css';
+
+import VerticalTimelineComponent from 'react-vertical-timeline-component';
+const { VerticalTimeline, VerticalTimelineElement } = VerticalTimelineComponent;
+
+
+const Timeline = () => {
+  return (
+    <VerticalTimeline>
+      <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>
+      </VerticalTimelineElement>
+      <VerticalTimelineElement
+        className="vertical-timeline-element--work"
+        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>
+  )
+}
+
+export default Timeline
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -2,8 +2,7 @@
 layout: landing
 ---
 
-import { HomePage } from 'vocs/components'
-import clsx from 'clsx'
+import { HomePage } from "vocs/components";
 
 <HomePage.Root>
   {/* <HomePage.Logo /> */}
@@ -19,4 +18,4 @@ import clsx from 'clsx'
     <HomePage.Button href="https://linkedin.com/in/clement-benoit">Linkedin</HomePage.Button>
   </HomePage.Buttons>
     <h2 href="mailto:your@email.com" variant="email-link">benoitclement.sand@gmail.com</h2>
-</HomePage.Root>
+</HomePage.Root>
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "react": "latest",
     "react-dom": "latest",
+    "react-vertical-timeline-component": "^3.6.0",
     "vocs": "latest"
   }
 }
diff --git a/vocs.config.ts b/vocs.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'vocs'
 export default defineConfig({
   title: 'Home',
   topNav: [ 
-    { text: 'CV', link: '/CV', match: '/docs' }, 
+    { text: 'CV', link: '/CV' }, 
     { text: 'Blog', link: '/blog' }
   ],
   sidebar: [

diff --git a/vocs.config.ts.timestamp-1707139716196-6701b63c4ba03.mjs b/vocs.config.ts.timestamp-1707139716196-6701b63c4ba03.mjs
@@ -0,0 +1,23 @@
+// vocs.config.ts
+import { defineConfig } from "file:///home/lbz/Documents/Code/clbenoit/portfolio/node_modules/vocs/_lib/index.js";
+var vocs_config_default = defineConfig({
+  title: "Portfolio",
+  topNav: [
+    { text: "CV", link: "/CV", match: "/docs" },
+    { text: "Blog", link: "/blog" }
+  ],
+  sidebar: [
+    {
+      text: "Projets",
+      link: "/projects"
+    },
+    {
+      text: "Projet n\xB01",
+      link: "/project1"
+    }
+  ]
+});
+export {
+  vocs_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidm9jcy5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9sYnovRG9jdW1lbnRzL0NvZGUvY2xiZW5vaXQvcG9ydGZvbGlvXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvaG9tZS9sYnovRG9jdW1lbnRzL0NvZGUvY2xiZW5vaXQvcG9ydGZvbGlvL3ZvY3MuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9ob21lL2xiei9Eb2N1bWVudHMvQ29kZS9jbGJlbm9pdC9wb3J0Zm9saW8vdm9jcy5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2b2NzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICB0aXRsZTogJ1BvcnRmb2xpbycsXG4gIHRvcE5hdjogWyBcbiAgICB7IHRleHQ6ICdDVicsIGxpbms6ICcvQ1YnLCBtYXRjaDogJy9kb2NzJyB9LCBcbiAgICB7IHRleHQ6ICdCbG9nJywgbGluazogJy9ibG9nJyB9XG4gIF0sXG4gIHNpZGViYXI6IFtcbiAgICB7XG4gICAgICB0ZXh0OiAnUHJvamV0cycsXG4gICAgICBsaW5rOiAnL3Byb2plY3RzJyxcbiAgICB9LFxuICAgIHtcbiAgICAgIHRleHQ6ICdQcm9qZXQgblx1MDBCMDEnLFxuICAgICAgbGluazogJy9wcm9qZWN0MScsXG4gICAgfSxcbiAgXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBRWhWLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLE9BQU87QUFBQSxFQUNQLFFBQVE7QUFBQSxJQUNOLEVBQUUsTUFBTSxNQUFNLE1BQU0sT0FBTyxPQUFPLFFBQVE7QUFBQSxJQUMxQyxFQUFFLE1BQU0sUUFBUSxNQUFNLFFBQVE7QUFBQSxFQUNoQztBQUFBLEVBQ0EsU0FBUztBQUFBLElBQ1A7QUFBQSxNQUNFLE1BQU07QUFBQSxNQUNOLE1BQU07QUFBQSxJQUNSO0FBQUEsSUFDQTtBQUFBLE1BQ0UsTUFBTTtBQUFBLE1BQ04sTUFBTTtBQUFBLElBQ1I7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
diff --git a/vocs.config.ts.timestamp-1707139716355-3324c926c53d3.mjs b/vocs.config.ts.timestamp-1707139716355-3324c926c53d3.mjs
diff --git a/vocs.config.ts.timestamp-1707142245016-40aebada6688b.mjs b/vocs.config.ts.timestamp-1707142245016-40aebada6688b.mjs
@@ -0,0 +1,23 @@
+// vocs.config.ts
+import { defineConfig } from "file:///home/lbz/Documents/Code/clbenoit/portfolio/node_modules/vocs/_lib/index.js";
+var vocs_config_default = defineConfig({
+  title: "Portfolio",
+  topNav: [
+    { text: "CV", link: "/CV", match: "/docs" },
+    { text: "Blog", link: "/blog" }
+  ],
+  sidebar: [
+    {
+      text: "Projets",
+      link: "/projects"
+    },
+    {
+      text: "Projet n\xB01",
+      link: "/project1"
+    }
+  ]
+});
+export {
+  vocs_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidm9jcy5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9sYnovRG9jdW1lbnRzL0NvZGUvY2xiZW5vaXQvcG9ydGZvbGlvXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvaG9tZS9sYnovRG9jdW1lbnRzL0NvZGUvY2xiZW5vaXQvcG9ydGZvbGlvL3ZvY3MuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9ob21lL2xiei9Eb2N1bWVudHMvQ29kZS9jbGJlbm9pdC9wb3J0Zm9saW8vdm9jcy5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2b2NzJ1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICB0aXRsZTogJ1BvcnRmb2xpbycsXG4gIHRvcE5hdjogWyBcbiAgICB7IHRleHQ6ICdDVicsIGxpbms6ICcvQ1YnLCBtYXRjaDogJy9kb2NzJyB9LCBcbiAgICB7IHRleHQ6ICdCbG9nJywgbGluazogJy9ibG9nJyB9XG4gIF0sXG4gIHNpZGViYXI6IFtcbiAgICB7XG4gICAgICB0ZXh0OiAnUHJvamV0cycsXG4gICAgICBsaW5rOiAnL3Byb2plY3RzJyxcbiAgICB9LFxuICAgIHtcbiAgICAgIHRleHQ6ICdQcm9qZXQgblx1MDBCMDEnLFxuICAgICAgbGluazogJy9wcm9qZWN0MScsXG4gICAgfSxcbiAgXSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQW1ULFNBQVMsb0JBQW9CO0FBRWhWLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLE9BQU87QUFBQSxFQUNQLFFBQVE7QUFBQSxJQUNOLEVBQUUsTUFBTSxNQUFNLE1BQU0sT0FBTyxPQUFPLFFBQVE7QUFBQSxJQUMxQyxFQUFFLE1BQU0sUUFBUSxNQUFNLFFBQVE7QUFBQSxFQUNoQztBQUFBLEVBQ0EsU0FBUztBQUFBLElBQ1A7QUFBQSxNQUNFLE1BQU07QUFBQSxNQUNOLE1BQU07QUFBQSxJQUNSO0FBQUEsSUFDQTtBQUFBLE1BQ0UsTUFBTTtBQUFBLE1BQ04sTUFBTTtBQUFBLElBQ1I7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K