Skip to content

Commit

Permalink
Travail sur la page A propos et sur les shapes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@MareveD
MareveD committed Jul 11, 2024
1 parent 8f425a8 commit d46a38c
Show file tree
Hide file tree
Showing 7 changed files with 328 additions and 68 deletions.
146 changes: 82 additions & 64 deletions a-propos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,39 +47,51 @@ <h1 class="header-title coul-light">c'est qui ça, <br> Mareve?</h1>
</div>

<div class="shapes">
<img id="shape7" class="shape" src="assets/img/entete-gen_poly.svg" alt="polygone un">
<img id="shape5" class="shape" src="assets/img/entete-gen_poly.svg" alt="polygone un">
</div>
</header>

<section class="home-intro bg-light">
<section class="apropos-intro bg-light">
<div class="container">

<div class="intro-content">
<h2 class="section-title coul-accent">salut! moi, <br> c’est Marie-Eve!</h2>
<p class="coul-dark">Je suis une développeuse web front-end passionnée en plus d'être une designer web +
graphique, créative et curieuse quiplonge dans tous ses projets.</p>
<p class="coul-dark">Avant de passer au code en 2021, j'ai été plus de 16 ans à explorer le monde du
design graphique, une aventure que j'ai commencée après avoir gradué en 2008. En plus du design, je
compte plusieurs autres
cordes à mon arc, comme l'illustration et la gestion de projet. </p>
<p class="coul-dark">Mon parcours diversifié me permet d'apporter une touche unique et créative à chaque
projet.</p>
<h4 class="text-emphase coul-accent">Explorons ensemble!</h4>


<a href="#" data-path="a-propos.html" target="" class="bouton btn-dark">Savoir <span>+</span></a>
</div>
</div>
<h2 class="section-title coul-accent">le visage <br> derrière l'écran</h2>
<p class="coul-dark">Développeuse web front-end, conceptrice web, designer web et graphique,
illustratrice...
C'est simple: je mange du design et du code, et ce, trois repas par jour.</p>
<p class="coul-dark">Quand on lit le mot passionné(e) dans le dictionnaire, mon nom figure probablement
avec la définition.</p>
<p class="coul-dark">Je suis une personne qui aime le multi-tasking, qui est incapable de travailler sur
un seul projet à la fois, et qui sketch d'une main, manie la souris de l'autre, et arrose ses
plantes avec son pied gauche.</p>


<h4 class="text-emphase coul-accent">en quelques mots...</h4>

<div class="je-suis">
<div class="col-gauche">
<h5 class="coul-accent">Je suis</h5>
</div>

<div class="col-droite coul-dark">
<p>une amoureuse des plantes <i>#plantmom</i></p>
<p>une adepte de jeux de rôle comme <i>Dungeons & Dragons</i></p>
<p>une maniaque de la musique des années 80</p>
<p>une passionnée des arts sous toutes ses formes</p>
<p>une <i>#catmom</i>, de Monsieur Salem le chat</p>
</div>
</div>

<div class="shapes">
<img id="shape3" class="shape" src="assets/img/intro_poly_1.svg" alt="polygone trois">
<div class="arrow">
<img class="arrow-shape" src="assets/img/apropos_arrow1.svg" alt="arrow">
</div>
</div>
</div>

<div id="portrait1" class="portrait">
<img class="portrait-me" src="assets/img/portrait-me.png" alt="portrait Mareve">
<img class="shape" src="assets/img/intro_poly_2.svg" alt="shape">
<div class="arrow">
<img class="arrow-shape" src="assets/img/intro_arrow1.svg" alt="arrow">
<p class="caption coul-accent">ça c’est moi!</p>
</div>
</div>
Expand All @@ -95,61 +107,67 @@ <h4 class="text-emphase coul-accent">Explorons ensemble!</h4>
</section>


<section class="home-portfolio bg-dark">
<section class="section-texte bg-dark">
<div class="content container">
<h2 class="section-title coul-accent">portfolio</h2>
<a href="#" data-path="portfolio/web.html" target="" class="btn btn-arrow coul-light hover-white">web <span
class="arrow"><svg width="121" height="43" viewBox="0 0 121 43" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 21.5H119M119 21.5L93.8505 1M119 21.5L93.8505 42" stroke="#ED7745"
stroke-width="2" />
</svg></span></a>
<a href="#" data-path="portfolio/graphisme.html" target=""
class="btn btn-arrow coul-light hover-white">branding + graphisme <span class="arrow"><svg width="121"
height="43" viewBox="0 0 121 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 21.5H119M119 21.5L93.8505 1M119 21.5L93.8505 42" stroke="#ED7745"
stroke-width="2" />
</svg></span></a>
<a href="#" data-path="portfolio/illustration.html" target=""
class="btn btn-arrow coul-light hover-white">illustration <span class="arrow"><svg width="121"
height="43" viewBox="0 0 121 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 21.5H119M119 21.5L93.8505 1M119 21.5L93.8505 42" stroke="#ED7745"
stroke-width="2" />
</svg></span></a>
<h2 class="section-title coul-accent">la designer graphique</h2>
<p class="coul-white">
Après avoir obtenu mon <b>DEC en Graphisme du Cégep du Vieux-Montréal en 2008</b>, j'ai travaillé en imprimerie
jusqu'en août 2020, période durant laquelle j'ai acquis une vaste expérience. De l'ultra-technique à
l'ultra-créatif, j'ai touché à presque tous les domaines : médias sociaux, papeterie corporative,
invitations de tous genres, matériel publicitaire, magazines, journaux, objets promotionnels, et
impressions de tous formats, incluant l'affichage, le lettrage de vitrines, l'habillage de véhicules,
bannières, etc.</p>

<p class="coul-white">Cette expérience m'a permis de gérer plusieurs projets de bout en bout, de la collecte
d'informations à
l'estimation, en passant par le suivi qualité, jusqu'à la livraison au client. Cette diversité de
projets m'a permis de développer un large éventail de compétences et une grande flexibilité dans mon
travail.</p>
</div>
</section>


<section class="home-experience bg-accent">
<div class="experience-top coul-light">
<h2 class="section-title">vous retrouverez</h2>
<div class="border-right"></div>
</div>

<div class="blocks container">
<div class="block coul-white">
<h3>2</h3>
<h4>années <br> en développement web <br> & intégration WordPress</h4>
</div>

<div class="block coul-white">
<h3>16</h3>
<h4>années <br> en graphisme <br> & branding</h4>
</div>

<div class="block coul-white">
<h3>16</h3>
<h4>années <br> en illustration <br> digitale</h4>
</div>
<section class="section-texte bg-accent">
<div class="content container">
<h2 class="section-title coul-light">changement de parcours, direction le web!</h2>
<p class="coul-white">
<b>En janvier 2021</b>, en pleine pandémie, j'ai décidé qu'un retour aux études était essentiel pour ma
carrière. Avec la vague de fermetures dans le domaine de l'imprimerie, c'était le moment parfait pour
revenir à mon premier amour : le web. Avant de choisir le graphisme, j'avais envisagé un DEC en
informatique, ce qui faisait de ce moment une opportunité idéale pour retourner à ce que je voulais
faire au début de ma carrière professionnelle.</p>

<p class="coul-white">
<b>En septembre 2021</b>, j'ai donc entrepris l'AEC en Développement Web au Cégep Garneau à Québec pour
approfondir et acquérir de nouvelles compétences dans le domaine du web.
</p>

<p class="coul-white">
J'ai ensuite effectué mon <b>stage de janvier à mars 2023</b> chez Totem Web, sous la supervision de la
merveilleuse Andréanne Beaulieu. Cette expérience m'a permis de renforcer mes connaissances en WordPress
et PHP.</p>
</div>
</section>

<div class="experience-bottom coul-light">
<div class="border-left"></div>
<h2 class="section-title">en expérience</h2>
<section class="section-texte bg-white">
<div class="content container">
<h2 class="section-title coul-accent">je n'ai pas travaillé qu'en entreprise. Ho que non!</h2>
<p class="coul-dark"><b>À mon compte depuis 2009</b>, sous la bannière Mareve Design, j'ai réalisé des identités
visuelles pour diverses entreprises, conçu des invitations de tous genres, créé des ensembles de
papeterie et, surtout, je me suis spécialisée dans l'illustration de vêtements basés sur des thèmes
populaires. Certaines de mes œuvres ont été vendues sur des sites de vêtements en édition limitée tels
que Tee Fury et Ript Apparel. Actuellement, vous pouvez retrouver mes créations sur des sites de type
<i>print-on-demand</i> comme Tee Public. J’ai même eu la chance de voir une de mes illustrations être licenciée
pour la série <i>Dexter</i>, présentée par <i>Showtime.</i></p>

<p class="coul-dark"><b>En mars 2023</b>, Mareve Design a fait peau neuve et réorienté son offre de services vers
le développement web, tout en continuant à offrir des services de graphisme intégrés pour une solution
complète.</p>
</div>
</section>



<section class="cta-contact bg-dark">
<div class="shapes">
<img id="shape4" class="shape" src="assets/img/cta_poly_1.svg" alt="polygone quatre">
Expand Down
107 changes: 107 additions & 0 deletions assets/css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/css/style.css.map
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions assets/img/apropos_arrow1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
/* ------------------------------------------------------------------------------ */

/* Accueil : Rotation des shapes au scroll */

document.addEventListener('DOMContentLoaded', () => {
const shape1 = document.getElementById('shape1');
const shape2 = document.getElementById('shape2');

const shape5 = document.getElementById('shape5');
const shape6 = document.getElementById('shape6');

let lastScrollTop = 0;

window.addEventListener('scroll', () => {
Expand All @@ -16,16 +17,19 @@ document.addEventListener('DOMContentLoaded', () => {
if (calculScroll !== 0) {
let rotation1 = parseFloat(getComputedStyle(shape1).getPropertyValue('--rotation') || 0);
let rotation2 = parseFloat(getComputedStyle(shape2).getPropertyValue('--rotation') || 0);

let rotation5 = parseFloat(getComputedStyle(shape5).getPropertyValue('--rotation') || 0);
let rotation6 = parseFloat(getComputedStyle(shape6).getPropertyValue('--rotation') || 0);

shape1.style.setProperty('--rotation', rotation1 + calculScroll * 0.1);
shape2.style.setProperty('--rotation', rotation2 - calculScroll * 0.1);

shape5.style.setProperty('--rotation', rotation5 + calculScroll * 0.1);
shape6.style.setProperty('--rotation', rotation6 - calculScroll * 0.1);

shape1.style.transform = `rotate(${rotation1 + calculScroll * 0.1}deg)`;
shape2.style.transform = `rotate(${rotation2 - calculScroll * 0.1}deg)`;

shape5.style.transform = `rotate(${rotation5 + calculScroll * 0.1}deg)`;
shape6.style.transform = `rotate(${rotation6 - calculScroll * 0.1}deg)`;

Expand Down
Loading

0 comments on commit d46a38c

Please sign in to comment.