Fix Buttons

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

View File

@ -3,22 +3,22 @@
/**
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;
@ -36,7 +36,6 @@ body {
@import "icon";
#idCard {
.hero-body {
padding-bottom: 2rem;
padding-top: 2rem;
@ -91,15 +90,6 @@ section#contact .button {
display: none;
}
#buttonsUnderPhoto a {
padding-left: 16px;
padding-bottom: 0;
}
#photosAndButtons .media-content p+p {
margin-top: -16px;
}
.tile p.title {
font-size: 25px;
}
@ -116,10 +106,10 @@ footer small {
// fix d'un affichage désagréable sur la carte Bulma
#photosAndButtons .card {
border-radius:unset;
border-radius: unset;
}
#mailWhenNoJavascript{
#mailWhenNoJavascript {
text-align: left;
font-size: 20px;
}

View File

@ -1,5 +1,7 @@
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) {
@ -7,11 +9,14 @@ export default class ButtonIcon extends Component {
// this.state = {};
// }
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}">
<span class="icon is-large">
<button class="button">
<span class="icon">
<ion-icon name={this.props.icon}></ion-icon>
</span>
</button>
</a>;
}
}
}

View File

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

View File

@ -1,18 +1,18 @@
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 <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
<div class="hero-body">
@ -23,33 +23,39 @@ class MainCard extends Component {
<div class="card">
<div class="card-image">
<figure id="photoProfil" class="image">
<img class="background" src={headshotFond} alt="Anthony Dumas"/>
<img class="actor" src={headshotMain} alt="Anthony Dumas"/>
<img class="background" src={headshotFond} alt="Anthony Dumas" />
<img class="actor" src={headshotMain} alt="Anthony Dumas" />
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p id="buttonsUnderPhoto" class="buttons are-large ">
<p id="buttonsUnderPhoto" class="field is-grouped">
<p class="control">
<ButtonIcon
icon="logo-github"
lien="https://github.com/AdamasFR"/>
lien="https://github.com/AdamasFR" />
</p>
<p class="control">
<ButtonIcon
icon="logo-linkedin"
lien="https://www.linkedin.com/in/anthonyyvondumas/"/>
lien="https://www.linkedin.com/in/anthonyyvondumas/" />
</p>
<p class="control">
<ButtonIcon
icon="logo-twitter"
lien="https://www.twitter.com/adamas_fr"/>
lien="https://www.twitter.com/adamas_fr" />
</p>
<p id="boutonCV" class="buttons are-large">
<a class="button is-fullwidth" rel="noreferrer noopener" target="_blank"
</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>
<span><FormattedMessage id="curriculumVitaeLink" /></span>
</button>
</a>
</p>
</div>
@ -64,14 +70,14 @@ class MainCard extends Component {
<div class="column is-9-tablet is-7-widescreen" id="experiences">
<span class="title">{experienceCardMessage.title.experience}</span>
{experienceCardMessage.experiences.map(function(experience, index){
{experienceCardMessage.experiences.map(function (experience, index) {
return <ExperienceCard
data={experience}/>;
data={experience} />;
})}
<span class="title">{experienceCardMessage.title.education}</span>
{experienceCardMessage.education.map(function(education, index){
{experienceCardMessage.education.map(function (education, index) {
return <ExperienceCard
data={education}/>;
data={education} />;
})}
</div>
</div>
@ -79,7 +85,7 @@ class MainCard extends Component {
</div>
</section>;
}
}
}
export default injectIntl(MainCard)

View File

@ -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;
}