Merge pull request #211 from jbigman/graneet

Graneet
jbigman · Aug 13, 2024 · e9153ad · e9153ad
2 parents 5a20325 + 35ccf4a
commit e9153ad
Show file tree

Hide file tree

Showing 26 changed files with 486 additions and 396 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
  "gh-pages": "^6.0.0"
  },
  "scripts": {
- "serve": "next dev",
+ "serve": "next dev --turbo",
  "lint": "npx @biomejs/biome lint ./src",
  "build": "next build",
  "deploy": "node gh-pages-publish.js"

diff --git a/pages/letter.tsx b/pages/letter.tsx
@@ -0,0 +1,17 @@
+import Head from 'next/head'
+import Letter from '../src/components/letter'
+
+const Index = () => {
+ return (
+ <>
+ <Head>
+ <title>Jérémie GAMBIN</title>
+ </Head>
+ <div>
+ <Letter />
+ </div>
+ </>
+ )
+}
+
+export default Index
diff --git a/public/img/IMG_1193.d.jpg b/public/img/IMG_1193.d.jpg
diff --git a/public/img/IMG_Profil.jpeg b/public/img/IMG_Profil.jpeg
diff --git a/public/img/avatar.png b/public/img/avatar.png
diff --git a/public/img/photo-profil-b&w.png b/public/img/photo-profil-b&w.png
diff --git a/src/components/block.module.scss b/src/components/block.module.scss
@@ -4,6 +4,12 @@
  margin-bottom: $main-padding;
 }
 
+.content {
+ display: flex;
+ flex-direction: column;
+ gap : $gap;
+}
+
 @media screen and (max-width: 768px) {
  }
 

diff --git a/src/components/block.tsx b/src/components/block.tsx
@@ -6,7 +6,7 @@ const Block = (props: { title: string, children: any, style?: any }) => {
  <h2 className={styles.title}>
  {props.title}
  </h2>
- <div  className={styles.content}>
+ <div className={styles.content}>
  {props.children}
  </div>
  </div>

diff --git a/src/components/curiculum.module.scss b/src/components/curiculum.module.scss
@@ -1,6 +1,7 @@
 @import '../css/variables.scss';
 
 .body {
+ height: 297mm; 
  background-color: $background-color;
  font-size: 12px;
  color: $text-primary;
@@ -63,7 +64,7 @@
  h6 {
  color:$text-secondary;
  margin: 0;
- margin-bottom: 1em;
+ margin-bottom: $gap;
 
  }
  h1 { 
@@ -83,9 +84,19 @@
  font-size: 0.83em;
  }
 
- h3, h4, h5 {
- margin-top: $gap;
- margin-bottom: 0.2em;
+ h2 { 
+ margin-top: 10px;
+ margin-bottom: 6px;
+ }
+
+ h3 {
+ margin-top: 4px;
+ margin-bottom: 6px;
+ }
+
+ h4, h5 {
+ margin-top: 10px;
+ margin-bottom: 6px;
  }
 }
 
@@ -108,13 +119,6 @@
  gap: $main-padding;
 }
 
-.list {
- display: flex;
- flex-direction: column;
- gap: $gap;
-}
-
-
 @media screen and (max-width: 768px) {
  .body {
 

diff --git a/src/components/curiculum.tsx b/src/components/curiculum.tsx
@@ -3,14 +3,15 @@ import cv from '../json/curiculum.json'
 import Block from './block'
 import styles from './curiculum.module.scss'
 import Experience from './experience'
+import NetWork from './network'
 import SideBar from './sidebar'
 import Skill from './skill'
 
 const Curiculum = () => {
  return (
  <div className={styles.body}>
  <div style={{ maxWidth: '210mm' }} >
- <SideBar />
+ <SideBar/>
  <div className={styles.main}>
  <div className={styles.content}>
  <div style={{flex:3}}>
@@ -20,57 +21,53 @@ const Curiculum = () => {
  {cv.experiences.map((exp: IExperience[], index: number) => {
  return <Experience key={index} data={exp} />
  })}
- </Block>  
+ </Block> 
  </div>
  </div> 
- <div style={{flex:2}}> 
- <Block title={"Principales compétences "}> 
+ <div style={{flex:2}}> 
+ <Block title={"Compétences relationnelles"}> 
+ {cv.skills.filter((s) => s.type === 'soft').map((skill) => {
+ return (
+ <Skill data={skill} key={skill.name} />
+ )
+ })}
+ </Block> 
+ <Block title={"Compétences techniques"}> 
  {cv.skills.filter((s) => s.type === 'hard').map((skill) => {
  return (
  <Skill data={skill} key={skill.name} />
  )
  })}
  </Block>
 
- <Block title={"Retrouvez moi en ligne"}> 
- <Skill data={{
+ <Block title={'Formation'}>
+ {cv.formations.map((exp: IExperience[]) => {
+ return <Experience key={exp[0].title} data={exp} />
+ })}
+ </Block> 
+
+ <Block title={"Me retrouver en ligne"}> 
+ <NetWork data={[{
  type: "string",
  icon: "linkedin",
  name: "LinkedIn.com",
  subtitle: "/in/jeremiegambin",
  link: "https://www.linkedin.com/in/jeremiegambin/"
- }} />
- <Skill data={{
+ },{
  type: "string",
  icon: "cg",
  name: "CodinGame.com",
  subtitle: "/jBigman",
  link: "https://www.codingame.com/profile/262698c2b361339f78efcf6f014e5b231298241"
- }} /> 
- <Skill data={{
+ },{
  type: "string",
  icon: "github",
  name: "Github.com",
  subtitle: "/jBigman",
  link: "https://github.com/jbigman"
- }} />
+ }]} /> 
  </Block>
- <Block title={'Autres activités'}>
- <Skill data={
- {
- type: 'other',
- icon: "youtube",
- name: "TAF Jeux Mobile",
- subtitle: "Guides, présentations et reportages sur les jeux mobile",
- link: "https://www.youtube.com/c/TAFJeuxMobile",
- }
- }/>
- </Block> 
- <Block title={'Formation'}>
- {cv.formations.map((exp: IExperience[]) => {
- return <Experience key={exp[0].title} data={exp} />
- })}
- </Block> 
+
  </div> 
  </div>
 

diff --git a/src/components/experience.module.scss b/src/components/experience.module.scss
@@ -6,7 +6,6 @@
 
  background-color: $background-color-light;
  padding: $main-padding;
- margin-bottom: $main-padding;
 
  .shift {
  padding-left: $main-padding;
@@ -36,7 +35,7 @@
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
- font-style: italic;
+ font-weight: 600;
 
  .duration {
  color: $text-primary;

diff --git a/src/components/experience.tsx b/src/components/experience.tsx
@@ -52,6 +52,18 @@ const Experience = (props: {data: IExperience[] }) => {
  )})}
  </div>
  } 
+ {
+ exp.stack.length > 0 && 
+ <div className={`${experienceStyles.shift}`}>
+ {exp.stack.map((task) => {
+ return (
+ <div key={task}>
+ {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
+ <div dangerouslySetInnerHTML={{__html: task}} />
+ </div>
+ )})}
+ </div>
+ } 
  </>
  )
  }

diff --git a/src/components/letter.tsx b/src/components/letter.tsx
@@ -0,0 +1,42 @@
+import type { IExperience } from '../Interface/IExperience'
+import cv from '../json/curiculum.json'
+import Block from './block'
+import styles from './curiculum.module.scss'
+import Experience from './experience'
+import NetWork from './network'
+import SideBarLetter from './sidebarletter'
+import Skill from './skill'
+
+const Letter = () => {
+ return (
+ <div className={styles.body}>
+ <div style={{ maxWidth: '210mm' }} >
+ <SideBarLetter />
+ <div className={styles.main}>
+ <div className={styles.content} style={{fontSize: '18px', margin: '40px'}}>
+
+ Dear Hiring Manager,
+ <br/><br/>
+ I am writing to apply for the position of Full Stack Developer at TapNation.
+ <br/><br/>
+ With over 10 years of experience in full stack development, I have acquired strong expertise in web and mobile development, focusing on NodeJs, ReactJs, and TypeScript, and have earned a Codingame certification with distinction. Confident in my ability to contribute to your team, I have employed web scraping techniques to enhance data for Gamewisher.com and collaborated with a designer to achieve high-quality UI/UX for LaPetitePouzerie.fr. These experiences align closely with the requirements of the position.
+
+ <br/><br/>My passion for the gaming industry led me to create a dedicated YouTube channel and develop a mobile game search engine using NestJS and NextJS. I am particularly excited about the prospect of joining your innovative team.
+
+ <br/> <br/>Managing a gaming community on Discord and thriving in an Agile environment over the years has taught me invaluable lessons in teamwork, communication, and adaptability. Having collaborated with product owners in English during my professional experience, I am confident in my ability to seamlessly integrate into your international team. Moreover, TapNation’s commitment to fostering employee growth and cohesion through events such as company trips, hackathons, and game jams resonates strongly with me and fuels my desire to contribute actively to your team’s success.
+
+ <br/><br/>Thank you for considering my application.I look forward to discussing my projects in detail and illustrating how my skills can contribute to TapNation during an interview at your earliest convenience.
+
+ <br/><br/>Best regards,
+
+ <br/>Jérémie Gambin
+
+ </div>
+
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default Letter
diff --git a/src/components/network.module.scss b/src/components/network.module.scss
@@ -0,0 +1,72 @@
+@import '../css/variables.scss';
+
+.main {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 1em;
+
+ background-color: $background-color-light;
+ padding: $main-padding;
+ margin-bottom: 1em;
+
+ .title {
+ font-weight: 600;
+ }
+ .subtile {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.9em;
+ }
+
+ .icon {
+ margin-right: 10px;
+ &.legend {
+ background-color: $highlight;
+ padding: 5px;
+ height: 30px;
+ width: 30px;
+ }
+ &.white {
+ height: 40px;
+ width: 40px;
+ }
+ }
+ .company {
+ width: fit-content;
+ color: $text-subtitle;
+ padding-top: 0;
+ padding-bottom: 0;
+ font-weight: 600;
+ text-decoration: none;
+ &.silver {
+ color: $text-primary;
+ font-weight: 400;
+ }
+ }
+
+ .details {
+ width: calc(100% - 60px);
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .date {
+ flex: 0 0 0.6in;
+ & span:first-child::before {
+ right: 9pt;
+ }
+
+ }
+ .experience {
+ &>div:last-child {
+ padding-left: 0.7em;
+ }
+ }
+}
+
+@media (prefers-color-scheme: light) {
+}
+
+@media print {
+
+}