adamas/curriculum
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Buttons

Browse Source
This commit is contained in:
Anthony Dumas 2022-06-27 23:38:19 +02:00
parent 88598e61d9
commit 5e361660f0
5 changed files with 157 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/_sass/main.scss
View File

@ -3,125 +3,115 @@
/** /**
Thème Thème
**/ **/
$deep-koamaru:#2b4162; $deep-koamaru: #2b4162;
$myrtle-green:#326273; $myrtle-green: #326273;
$cadet-blue:#5c9ead; $cadet-blue: #5c9ead;
$neon-carrot:#fa9f42; $neon-carrot: #fa9f42;
$white:#ffffff; $white: #ffffff;
/** /**
Variables Bulma Variables Bulma
**/ **/
$primary:$cadet-blue; $primary: $cadet-blue;
$primary-invert:#fff; $primary-invert: #fff;
$info:$myrtle-green; $info: $myrtle-green;
$info-invert:#fff; $info-invert: #fff;
$footer-color:$deep-koamaru; $footer-color: $deep-koamaru;
$link:$neon-carrot; $link: $neon-carrot;
$link-hover:""; $link-hover: "";
html { html {
background-color: $primary; background-color: $primary;
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
.dark-theme-only { .dark-theme-only {
display: none; display: none;
} }
@import "../../node_modules/bulma/bulma"; @import "../../node_modules/bulma/bulma";
@import "icon"; @import "icon";
#idCard { #idCard {
.hero-body {
padding-bottom: 2rem;
padding-top: 2rem;
}
.hero-body { // permet de re-aligner les tags avec les subtitles
padding-bottom: 2rem; .tags {
padding-top: 2rem; margin-top: -1.25rem;
} }
// permet de re-aligner les tags avec les subtitles .card {
.tags { background-color: unset;
margin-top: -1.25rem; }
}
.card {
background-color: unset;
}
} }
// retire les barres de scroll des panneaux experience/education // retire les barres de scroll des panneaux experience/education
#experiences .media-content { #experiences .media-content {
overflow: hidden; overflow: hidden;
} }
footer { footer {
background-color: $footer-color !important; background-color: $footer-color !important;
color: #fff; color: #fff;
} }
footer strong { footer strong {
color: #fff; color: #fff;
} }
.media-content { .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) // 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 { div.hero-body {
margin-left: env(safe-area-inset-left); margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right); margin-right: env(safe-area-inset-right);
} }
section#contact .button { section#contact .button {
min-width: 155px; min-width: 155px;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.button.is-fullw-mobile { .button.is-fullw-mobile {
display: flex; display: flex;
width: 100%; width: 100%;
} }
} }
.displayOnlyOnPrint { .displayOnlyOnPrint {
display: none; display: none;
}
#buttonsUnderPhoto a {
padding-left: 16px;
padding-bottom: 0;
}
#photosAndButtons .media-content p+p {
margin-top: -16px;
} }
.tile p.title { .tile p.title {
font-size: 25px; font-size: 25px;
} }
// //
footer small { footer small {
color: $white; color: $white;
} }
// Photo de Profil // Photo de Profil
#photoProfil { #photoProfil {
background-color: lightgray; background-color: lightgray;
} }
// fix d'un affichage désagréable sur la carte Bulma // fix d'un affichage désagréable sur la carte Bulma
#photosAndButtons .card { #photosAndButtons .card {
border-radius:unset; border-radius: unset;
} }
#mailWhenNoJavascript{ #mailWhenNoJavascript {
text-align: left; text-align: left;
font-size: 20px; font-size: 20px;
} }
@import "dark-theme"; @import "dark-theme";

35
src/components/ButtonIcon/ButtonIcon.js
View File

@ -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 { export default class ButtonIcon extends Component {
// constructor(props) { // constructor(props) {
// super(props); // super(props);
// this.state = {}; // this.state = {};
// } // }
render() { render() {
return <a class="button" rel="noopener noreferrer" href={this.props.lien} target="_blank" return <a rel="noopener noreferrer" href={this.props.lien} target="_blank"
aria-label="Profil {this.props.icon}"> aria-label="Profil {this.props.icon}">
<span class="icon is-large"> <button class="button">
<ion-icon name={this.props.icon}></ion-icon> <span class="icon">
</span> <ion-icon name={this.props.icon}></ion-icon>
</a>; </span>
} </button>
} </a>;
}
}

4
src/components/ButtonIcon/ButtonIcon.scss
View File

@ -1,4 +0,0 @@
.component-button-icon{
}

146
src/components/MainCard/MainCard.js
View File

@ -1,85 +1,91 @@
import React, {Component} from '../../../node_modules/react'; import './MainCard.scss';
import {FormattedMessage} from 'react-intl';
import { injectIntl } from 'react-intl'
import ExperienceCard from '../ExperienceCard/index'; import { FormattedMessage, injectIntl } from 'react-intl';
import ButtonIcon from '../ButtonIcon/index';
import './MainCard.scss' import React, { Component } from '../../../node_modules/react';
import headshotMain from '../../images/headshot_main.png';
import headshotFond from '../../images/headshot_fond.png'; 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 { class MainCard extends Component {
render() { render() {
var metaThemeColor = document.querySelector("meta[name=theme-color]"); 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; const experienceCardMessage = this.props.intl.messages.experienceCard;
return <section id="idCard" class="hero is-medium is-primary-inverted is-bold"> return <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div> <div class="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
<div id="photosAndButtons" class="column is-3-widescreen is-4-tablet"> <div id="photosAndButtons" class="column is-3-widescreen is-4-tablet">
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<figure id="photoProfil" class="image"> <figure id="photoProfil" class="image">
<img class="background" src={headshotFond} alt="Anthony Dumas"/> <img class="background" src={headshotFond} alt="Anthony Dumas" />
<img class="actor" src={headshotMain} alt="Anthony Dumas"/> <img class="actor" src={headshotMain} alt="Anthony Dumas" />
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
<p id="buttonsUnderPhoto" class="buttons are-large "> <p id="buttonsUnderPhoto" class="field is-grouped">
<ButtonIcon <p class="control">
icon="logo-github" <ButtonIcon
lien="https://github.com/AdamasFR"/> icon="logo-github"
lien="https://github.com/AdamasFR" />
</p>
<p class="control">
<ButtonIcon
icon="logo-linkedin"
lien="https://www.linkedin.com/in/anthonyyvondumas/" />
</p>
<p class="control">
<ButtonIcon
icon="logo-twitter"
lien="https://www.twitter.com/adamas_fr" />
</p>
</p>
<p id="boutonCV" class="field">
<a rel="noreferrer noopener" target="_blank"
href="https://files.adm.ink/anthony-dumas-cv.pdf" >
<button class="button is-fullwidth">
<span class="icon">
<i class="fab icon-file-pdf-o"></i>
</span>
<span><FormattedMessage id="curriculumVitaeLink" /></span>
</button>
</a>
</p>
</div>
</div>
<ButtonIcon <div class="content">
icon="logo-linkedin"
lien="https://www.linkedin.com/in/anthonyyvondumas/"/>
<ButtonIcon </div>
icon="logo-twitter" </div>
lien="https://www.twitter.com/adamas_fr"/> </div>
</p> </div>
<p id="boutonCV" class="buttons are-large">
<a class="button is-fullwidth" rel="noreferrer noopener" target="_blank"
href="https://files.adm.ink/anthony-dumas-cv.pdf" >
<span class="icon">
<i class="fab icon-file-pdf-o"></i>
</span>
<span><FormattedMessage id="curriculumVitaeLink"/></span>
</a>
</p>
</div>
</div>
<div class="content"> <div class="column is-9-tablet is-7-widescreen" id="experiences">
<span class="title">{experienceCardMessage.title.experience}</span>
</div> {experienceCardMessage.experiences.map(function (experience, index) {
</div> return <ExperienceCard
</div> data={experience} />;
</div> })}
<span class="title">{experienceCardMessage.title.education}</span>
<div class="column is-9-tablet is-7-widescreen" id="experiences"> {experienceCardMessage.education.map(function (education, index) {
<span class="title">{experienceCardMessage.title.experience}</span> return <ExperienceCard
{experienceCardMessage.experiences.map(function(experience, index){ data={education} />;
return <ExperienceCard })}
data={experience}/>; </div>
})} </div>
<span class="title">{experienceCardMessage.title.education}</span> </div>
{experienceCardMessage.education.map(function(education, index){ </div>
return <ExperienceCard </section>;
data={education}/>;
})}
</div>
</div>
</div>
</div>
</section>;
} }
} }
export default injectIntl(MainCard) export default injectIntl(MainCard)

18
src/components/MainCard/MainCard.scss
View File

@ -1,4 +1,4 @@
@import '../../_sass/main.scss'; @import "../../_sass/main.scss";
#photoProfil { #photoProfil {
overflow: clip; overflow: clip;
@ -7,15 +7,23 @@
.background { .background {
position: absolute; position: absolute;
filter: blur(2px); filter: blur(2px);
opacity:0.5; opacity: 0.5;
} }
} }
#boutonCV a {
display: flex;
}
@keyframes actorZoom { @keyframes actorZoom {
from { transform: scale(100%); } from {
to { transform: scale(110%); } transform: scale(100%);
} }
to {
transform: scale(110%);
}
}
#photoProfil:hover .actor { #photoProfil:hover .actor {
animation:4s linear 0s infinite alternate actorZoom; animation: 4s linear 0s infinite alternate actorZoom;
} }