diff --git a/src/_sass/main.scss b/src/_sass/main.scss index d6b367e..5e03e5b 100644 --- a/src/_sass/main.scss +++ b/src/_sass/main.scss @@ -3,125 +3,115 @@ /** Thème **/ -$deep-koamaru:#2b4162; -$myrtle-green:#326273; -$cadet-blue:#5c9ead; -$neon-carrot:#fa9f42; -$white:#ffffff; +$deep-koamaru: #2b4162; +$myrtle-green: #326273; +$cadet-blue: #5c9ead; +$neon-carrot: #fa9f42; +$white: #ffffff; /** Variables Bulma **/ -$primary:$cadet-blue; -$primary-invert:#fff; -$info:$myrtle-green; -$info-invert:#fff; -$footer-color:$deep-koamaru; -$link:$neon-carrot; -$link-hover:""; +$primary: $cadet-blue; +$primary-invert: #fff; +$info: $myrtle-green; +$info-invert: #fff; +$footer-color: $deep-koamaru; +$link: $neon-carrot; +$link-hover: ""; html { - background-color: $primary; + background-color: $primary; } body { - overflow-x: hidden; + overflow-x: hidden; } .dark-theme-only { - display: none; + display: none; } @import "../../node_modules/bulma/bulma"; @import "icon"; #idCard { + .hero-body { + padding-bottom: 2rem; + padding-top: 2rem; + } - .hero-body { - padding-bottom: 2rem; - padding-top: 2rem; - } + // permet de re-aligner les tags avec les subtitles + .tags { + margin-top: -1.25rem; + } - // permet de re-aligner les tags avec les subtitles - .tags { - margin-top: -1.25rem; - } - - .card { - background-color: unset; - } + .card { + background-color: unset; + } } // retire les barres de scroll des panneaux experience/education #experiences .media-content { - overflow: hidden; + overflow: hidden; } footer { - background-color: $footer-color !important; - color: #fff; + background-color: $footer-color !important; + color: #fff; } footer strong { - color: #fff; + color: #fff; } .media-content { - margin-top: -6px; + margin-top: -6px; } // Pour devices iOS qui ont un notch (si c'est pas un device avec un notch, it's no-tch your problem) div.hero-body { - margin-left: env(safe-area-inset-left); - margin-right: env(safe-area-inset-right); + margin-left: env(safe-area-inset-left); + margin-right: env(safe-area-inset-right); } section#contact .button { - min-width: 155px; + min-width: 155px; } @media screen and (max-width: 768px) { - .button.is-fullw-mobile { - display: flex; - width: 100%; - } + .button.is-fullw-mobile { + display: flex; + width: 100%; + } } .displayOnlyOnPrint { - display: none; -} - -#buttonsUnderPhoto a { - padding-left: 16px; - padding-bottom: 0; -} - -#photosAndButtons .media-content p+p { - margin-top: -16px; + display: none; } .tile p.title { - font-size: 25px; + font-size: 25px; } -// +// footer small { - color: $white; + color: $white; } // Photo de Profil #photoProfil { - background-color: lightgray; + background-color: lightgray; } // fix d'un affichage désagréable sur la carte Bulma #photosAndButtons .card { - border-radius:unset; + border-radius: unset; } -#mailWhenNoJavascript{ - text-align: left; - font-size: 20px; +#mailWhenNoJavascript { + text-align: left; + font-size: 20px; } -@import "dark-theme"; \ No newline at end of file +@import "dark-theme"; diff --git a/src/components/ButtonIcon/ButtonIcon.js b/src/components/ButtonIcon/ButtonIcon.js index 1476da7..d78bb5c 100644 --- a/src/components/ButtonIcon/ButtonIcon.js +++ b/src/components/ButtonIcon/ButtonIcon.js @@ -1,17 +1,22 @@ -import React, {Component} from '../../../node_modules/react'; -import './ButtonIcon.scss' +import './ButtonIcon.scss'; + +import React, { Component } from '../../../node_modules/react'; + export default class ButtonIcon extends Component { - // constructor(props) { - // super(props); - // this.state = {}; - // } - render() { - return - - - - ; - } - } \ No newline at end of file + // constructor(props) { + // super(props); + // this.state = {}; + // } + render() { + return + + + + + + ; + + } +} \ No newline at end of file diff --git a/src/components/ButtonIcon/ButtonIcon.scss b/src/components/ButtonIcon/ButtonIcon.scss index 4fc2521..e69de29 100644 --- a/src/components/ButtonIcon/ButtonIcon.scss +++ b/src/components/ButtonIcon/ButtonIcon.scss @@ -1,4 +0,0 @@ - -.component-button-icon{ - -} \ No newline at end of file diff --git a/src/components/MainCard/MainCard.js b/src/components/MainCard/MainCard.js index 99587cc..7e1ee14 100644 --- a/src/components/MainCard/MainCard.js +++ b/src/components/MainCard/MainCard.js @@ -1,85 +1,91 @@ -import React, {Component} from '../../../node_modules/react'; -import {FormattedMessage} from 'react-intl'; -import { injectIntl } from 'react-intl' +import './MainCard.scss'; -import ExperienceCard from '../ExperienceCard/index'; -import ButtonIcon from '../ButtonIcon/index'; +import { FormattedMessage, injectIntl } from 'react-intl'; -import './MainCard.scss' -import headshotMain from '../../images/headshot_main.png'; +import React, { Component } from '../../../node_modules/react'; import headshotFond from '../../images/headshot_fond.png'; +import headshotMain from '../../images/headshot_main.png'; +import ButtonIcon from '../ButtonIcon/index'; +import ExperienceCard from '../ExperienceCard/index'; + class MainCard extends Component { render() { var metaThemeColor = document.querySelector("meta[name=theme-color]"); - metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ?"#25444b" : "#5c9ead"); + metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ? "#25444b" : "#5c9ead"); const experienceCardMessage = this.props.intl.messages.experienceCard; - return - - - - - - - - - - - - - - - - - + return + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - + + + + - - - - - - - - - {experienceCardMessage.title.experience} - {experienceCardMessage.experiences.map(function(experience, index){ - return ; - })} - {experienceCardMessage.title.education} - {experienceCardMessage.education.map(function(education, index){ - return ; - })} - - - - - ; + + {experienceCardMessage.title.experience} + {experienceCardMessage.experiences.map(function (experience, index) { + return ; + })} + {experienceCardMessage.title.education} + {experienceCardMessage.education.map(function (education, index) { + return ; + })} + + + + + ; } - } +} export default injectIntl(MainCard) \ No newline at end of file diff --git a/src/components/MainCard/MainCard.scss b/src/components/MainCard/MainCard.scss index f858326..bb5be32 100644 --- a/src/components/MainCard/MainCard.scss +++ b/src/components/MainCard/MainCard.scss @@ -1,4 +1,4 @@ -@import '../../_sass/main.scss'; +@import "../../_sass/main.scss"; #photoProfil { overflow: clip; @@ -7,15 +7,23 @@ .background { position: absolute; filter: blur(2px); - opacity:0.5; + opacity: 0.5; } } +#boutonCV a { + display: flex; +} + @keyframes actorZoom { - from { transform: scale(100%); } - to { transform: scale(110%); } + from { + transform: scale(100%); } + to { + transform: scale(110%); + } +} #photoProfil:hover .actor { - animation:4s linear 0s infinite alternate actorZoom; + animation: 4s linear 0s infinite alternate actorZoom; }
- + return + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - + + + + - - - - -
+
+ +
+ + + + + + + + +
- - - - - - -