Changement ux - cv generique

jbigman · Jun 29, 2024 · 6e0df06 · 6e0df06
1 parent 997ba78
commit 6e0df06
Show file tree

Hide file tree

Showing 19 changed files with 194 additions and 163 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,7 @@
 import type { AppProps } from 'next/app'
 
 import '../src/css/index.scss'
-import '../src/css/pure.css'
+import '../src/css/pure.scss'
 
 export default function App({
  Component,

diff --git a/public/fonts/BebasNeue-Regular.ttf b/public/fonts/BebasNeue-Regular.ttf
diff --git a/public/fonts/Roboto-Bold.ttf b/public/fonts/Roboto-Bold.ttf
diff --git a/public/fonts/Roboto-Medium.ttf b/public/fonts/Roboto-Medium.ttf
diff --git a/public/fonts/Roboto-Regular.ttf b/public/fonts/Roboto-Regular.ttf
diff --git a/public/fonts/RubikGlitch-Regular.ttf b/public/fonts/RubikGlitch-Regular.ttf
diff --git a/src/components/block.module.scss b/src/components/block.module.scss
@@ -1,8 +1,6 @@
 @import '../css/index.scss';
 
 .main {
- background-color: white;
- padding: $main-padding;
  margin-bottom: $main-padding;
 }
 

diff --git a/src/components/curiculum.module.scss b/src/components/curiculum.module.scss
@@ -2,7 +2,7 @@
 
 
 .body {
- background-color: $bg;
+ background-color: $background-color;
  font-size: 12px;
  color: $text-primary;
  display: flex;
@@ -32,7 +32,7 @@
  padding-left: 1.5em;
 
  li::marker {
- color: $text-secondary;
+ color: $highlight;
  }
 
  li {
@@ -63,8 +63,8 @@
  h5,
  h6 {
  color:$text-secondary;
- font-family: Roboto,Arial,sans-serif;
- font-weight: 700;
+ font-family: $font-text-bold, Arial, sans-serif;
+ font-weight: 400;
  margin: 0;
  margin-bottom: 1em;
 
@@ -92,6 +92,12 @@
  }
 }
 
+.sideBarStyles {
+ background-color: $background-color-light;
+ padding: $main-padding;
+ margin-bottom: 1em;
+}
+
 .main {
  padding: $main-padding calc(2* $main-padding);
  .shift {
@@ -101,6 +107,7 @@
 
 .content {
  display: flex;
+ flex-direction: row-reverse;
  gap: $main-padding;
 }
 

diff --git a/src/components/curiculum.tsx b/src/components/curiculum.tsx
@@ -1,5 +1,4 @@
 import type { IExperience } from '../Interface/IExperience'
-import type { ISkill } from '../Interface/ISkill'
 import cv from '../json/curiculum.json'
 import Block from './block'
 import styles from './curiculum.module.scss'
@@ -13,42 +12,10 @@ const Curiculum = () => {
  <div >
  <SideBar />
  <div className={styles.main}>
-
-
  <div className={styles.content}>
  <div style={{flex:3}}>
  <div className={styles.about}>
- <Block title={'Mes Atouts'}>
- <div
- style={{
- display: 'flex',
- flexDirection: 'column',
- textAlign: 'justify',
- }}
- >
- <span className={'sidebarStyles'}>
- {/* Développeur expérimenté en applications web et mobiles, spécialisé en TypeScript, Node.js et React. Mes réalisations incluent la création d'une plateforme de réservation avec systèmes de paiement pour LaPetitePouzerie.fr et l'implémentation d'un moteur de recherche pour les jeux vidéo sur Gamewisher.com. À la recherche d'un poste de développeur à CoderPad, où je pourrais apporter mes compétences en développement front-end et back-end dans un environnement Agile, pour soutenir votre équipe Tech à renforcer vos produits et assurer leur évolutions. */}
-
- <ul>
- <li>
- 9 ans d'expérience en développement Full stack en front et back office.
- </li>
- <li>
- 5 ans d'expérience en développement Agile
- </li>
- <li>
- 3 projets réalisés en remote
- </li>
- <li>
- Conduite de projets de la conception à la livraison finale
- </li>
- <li>
- Participation au développement de projets en anglais avec un Product Owner danois
- </li>
- </ul>
- </span>
- </div>
- </Block>
+
  <Block title={'Expérience'}>
  {cv.experiences.map((exp: IExperience[], index: number) => {
  return <Experience key={index} data={exp} />
@@ -88,12 +55,6 @@ const Curiculum = () => {
  link: "https://github.com/jbigman"
  }} />
  </Block>
-
- <Block title={'Formation'}>
- {cv.formations.map((exp: IExperience[]) => {
- return <Experience key={exp[0].title} data={exp} />
- })}
- </Block> 
  <Block title={'Autres activités'}>
  <Skill data={
  {
@@ -105,6 +66,11 @@ const Curiculum = () => {
  }
  }/>
  </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
@@ -3,13 +3,13 @@
 .experience {
  display: flex;
  flex-direction: row;
- background-color: $gray-light;
- margin-bottom: 1em;
- padding: 10px;
+
+ background-color: $background-color-light;
+ padding: $main-padding;
+ margin-bottom: $main-padding;
 
  .shift {
  padding-left: $main-padding;
- padding-top: $gap;
  }
  .subtile {
  display: flex;
@@ -18,7 +18,8 @@
  }
  b {
  color: $legend;
- font-weight: 600;
+ font-family: $font-text-bold;
+ font-weight: 400;
  }
 
  &>div:last-child {
@@ -27,15 +28,14 @@
  }
 
  .title {
- font-weight: 600;
+ font-family: $font-text-bold;
  }
 
  .company {
  width: fit-content;
- color: $text-subtitle;
+ color: $text-company;
  padding-top: 0;
  padding-bottom: 0;
- font-weight: 600;
  text-decoration: none;
  font-style: italic;
 
@@ -63,17 +63,6 @@
  }
 }
 
-@media (prefers-color-scheme: light) {
- .experience {
- .company {
- color: $light-text-subtitle;
- .duration {
- color: $light-text-primary;
- }
- }
- }
-}
-
 @media print {
 
 }
diff --git a/src/components/sidebar.module.scss b/src/components/sidebar.module.scss
@@ -2,29 +2,32 @@
 
 .clickable {
  text-decoration: none;
- color: white;
  &:hover {
- color: $yellow !important;
+ color: $highlight !important;
  }
 }
 
 .sidebar {
- background-color: #252e38;
- color: white;
+ background-color:$background-color-header;
+ color: $color-white;
  display: flex; 
  padding: $main-padding calc(2 * $main-padding);
  align-items: center;
- //height: 150px;
+ gap: $main-padding;
 
  .imageContainer {
  display: flex;
+ flex: 2;
+ flex-direction: column;
  justify-content: center;
+ align-items: center;
 
  img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
- width: 125px !important;
- height: 125px !important;
+ border-radius: 50%;
+ width: 150px !important;
+ height: 150px !important;
 
  &:hover {
  transform: scaleX(-1) scale(1.1);
@@ -36,40 +39,41 @@
  .right {
  display: flex;
  flex-direction: column;
- align-items: center;
- width: 100%;
+ flex: 3;
  }
 
  .clickable {
  text-decoration: none;
  }
 
+ h1 {
+ font-family: $font-title;
+ font-weight: 400;
+ font-size: 26px;
+ margin: 0.3em;
+ }
  h1,h2,h3,h4,h5 {
  // Force les couleurs avec important (light), parceque le next build change l'ordre des css (modules)
- color: white !important;
+ color: $color-white !important;
  }
 
- h1 {
- font-size: 18px;
- margin-bottom: 0.3em;
- }
  h2 {
- font-size: 16px;
- margin-bottom: 1.5em;
- // Force les couleurs avec important (light), parceque le next build change l'ordre des css (modules)
- color: $yellow !important;
+ font-family: $font-title;
+ font-weight: 400;
+ font-size: 26px;
+ color: $highlight !important;
+ margin: 0;
  }
 
  .pdf {
  display: none;
  }
 
  .list {
- padding: $main-padding;
+ padding: 0 0 calc(2 * $main-padding) 0;
  display: flex;
  flex-direction: row;
- gap: calc(3 * $main-padding);
- justify-content: center;
+ gap: calc(2 * $main-padding);
  }
 
  .pdf {
@@ -96,12 +100,15 @@
 }
 
 .element {
+ display: flex;
+ align-items: center;
  .title {
- font-size: 13px;
+ font-size: 16px;
+ padding-right: 10px;
  }
  .content {
- font-size: 17px;
- font-weight: 600;
+ font-size: 12px;
+ font-family: $font-text-bold;
  }
 }
 @media screen and (max-width: 768px) {
@@ -110,7 +117,7 @@
  .list {
  display: flex;
  flex-direction: column;
- gap: 1em;
+ gap: $main-padding;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;