Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev Compétence + Attestation ok #3

Merged
merged 12 commits into from
Feb 7, 2024
Merged

Dev Compétence + Attestation ok #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
03b8279
icon congrats ajouté
AlexNesvit Dec 15, 2023
7a427cf
html félicitations fr
AlexNesvit Dec 15, 2023
9f74fbd
css backgraund color congrats 1009->#00c09d, 1124, 1133
AlexNesvit Dec 15, 2023
6a9253f
education Ukraine
AlexNesvit Jan 8, 2024
311f777
lien attestation de comparabilité
AlexNesvit Jan 8, 2024
4c7be32
attestation comp
AlexNesvit Jan 8, 2024
6882b39
liens titre prof+attestation
AlexNesvit Jan 8, 2024
4e6a8c4
html photo about ok
AlexNesvit Jan 9, 2024
cd2faf0
photo about ok
AlexNesvit Jan 9, 2024
b889f12
attestation
AlexNesvit Feb 7, 2024
d077a9e
attestation comparabilite ok
AlexNesvit Feb 7, 2024
d68095a
css compet proff % ok
AlexNesvit Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Attestation de comparabilité Alex.pdf
View file
Open in desktop
Binary file not shown.
Binary file added images/5EFEEA18-4262-4594-A8CE-E0994A35AA10_1_201_a.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 24 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">

<head>
<meta charset="UTF-8">
Expand Down Expand Up @@ -34,8 +34,19 @@
</header>

<!--home section design-->
<section class="home show-animate" id="home">
<section class="home show-animate js-container" id="home">
<div class="congrats">
<div class="checkmark-circle">
<div class="background"></div>
<div class="checkmark draw"></div>
</div>
<h1>Félicitations!</h1>
<p>Vous avez gagnez!!!</p>

<button class="submit-btn" type="submit" onclick="alert('Vous avez identifié le candidat idéal pour votre entreprise\!!!\😜😜😜');">Continuer</button>
</div>
<div class="home-content">

<h1>Hi, I'm <span>Alex NESVIT</span><span class="animate" style="--i:2;"></span></h1>
<div class="text-animate">
<h3>-Développeur web-</h3>
Expand All @@ -47,7 +58,8 @@ <h3>-Développeur web-</h3>

<div class="btn-box">
<a href="CV_Developpeur_web_Alex_NESVIT.pdf.pdf" target="_blank" class="btn">Voir mon CV</a>
<a href="#" class="btn">Recrutez-moi</a>

<button class="btn recruter">Recrutez-moi</button>
<span class="animate" style="--i:5;"></span>
</div>
</div>
Expand All @@ -70,7 +82,7 @@ <h3>-Développeur web-</h3>
<h2 class="heading">À propos <span>de Moi</span><span class="animate scroll" style="--i:1;"></span></h2>

<div class="about-img">
<img src="images/font_copie about.jpg" alt="images Alex développeur web">
<img src="images/5EFEEA18-4262-4594-A8CE-E0994A35AA10_1_201_a.jpeg" alt="images Alex développeur web">
<span class="circle-spin"></span>
<span class="animate scroll" style="--i:2;"></span>
</div>
Expand Down Expand Up @@ -101,7 +113,8 @@ <h3 class="title">Diplômes:<span class="animate scroll" style="--i:2;"></span><
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2023 - 2024</div>
<h3>Titre professionel Dévéloppeur Web et Web mobile, niveau Bac+2</h3>
<p>L’Agence nationale pour la formation professionnelle des adultes (AFPA). Marseille.</p>
<p>L’Agence nationale pour la formation professionnelle des adultes (AFPA). Marseille.</p>
<a href="#" target="_blank" class="dip">Voir ici</a>
</div>
</div>

Expand All @@ -119,7 +132,8 @@ <h3>Gestion informatisée des stocks, CACES R.489 - ECF, Aubagne</h3>
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2001 - 2008</div>
<h3>Diplôme de Spécialiste (niveau Master)</h3>
<p>Spécialité Économie d’entreprise. Academie du transport Doneck, Ukraine (Attestation de comparabilité).</p>
<p>Spécialité Économie d’entreprise. Academie du transport Doneck, Ukraine (Attestation de comparabilité).</p>
<a href="Attestation de comparabilité Alex.pdf" target="_blank" class="dip">Voir ici</a>
</div>
</div>

Expand Down Expand Up @@ -151,7 +165,7 @@ <h3>Responsable achats et Logistique - ACTI, Chantier Naval, La Ciotat</h3>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2008 - 2015</div>
<h3>Directeur commercial - Groupe "Unicom" Donetsk, Kiev</h3>
<h3>Directeur commercial - Groupe "Unicom" Donetsk, Kiev (Ukraine)</h3>
<p>Titulaire d'un master en Économie d'entreprises, j'ai mis en pratique mes
compétences en tant que Directeur commercial au sein d'un groupe composé de
12 entreprises pendant une période de 7 années.</p>
Expand All @@ -173,7 +187,7 @@ <h2 class="heading">Mes <span>Compétences</span><span class="animate scroll" st

<div class="skills-row">
<div class="skills-column">
<h3 class="title">Compétences de programmation:<span class="animate scroll" style="--i:2;"></span></h3>
<h3 class="title">Coding Skills<span class="animate scroll" style="--i:2;"></span></h3>

<div class="skills-box">
<div class="skills-content">
Expand Down Expand Up @@ -214,12 +228,12 @@ <h3>Développement web <span>90%</span></h3>
</div>

<div class="progress">
<h3>Frontend Development <span>85%</span></h3>
<h3>Frontend développement <span>80%</span></h3>
<div class="bar"><span></span></div>
</div>

<div class="progress">
<h3>Backend Development <span>75%</span></h3>
<h3>Backend développement <span>90%</span></h3>
<div class="bar"><span></span></div>
</div>

Expand Down
66 changes: 65 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,68 @@ window.onscroll = () => {
let footer = document.querySelector('footer');

footer.classList.toggle('show-animate', this.innerHeight + this.scrollY >= document.scrollingElement.scrollHeight);
}
}
// animation congrats

const Confettiful = function(el) {
this.el = el;
this.containerEl = null;

this.confettiFrequency = 3;
this.confettiColors = ['#EF2964', '#00C09D', '#2D87B0', '#48485E','#EFFF1D'];
this.confettiAnimations = ['slow', 'medium', 'fast'];

this._setupElements();
this._renderConfetti();
};

Confettiful.prototype._setupElements = function() {
const containerEl = document.createElement('div');
const elPosition = this.el.style.position;

if (elPosition !== 'relative' || elPosition !== 'absolute') {
this.el.style.position = 'relative';
}

containerEl.classList.add('confetti-container');

this.el.appendChild(containerEl);

this.containerEl = containerEl;
};

Confettiful.prototype._renderConfetti = function() {
this.confettiInterval = setInterval(() => {
const confettiEl = document.createElement('div');
const confettiSize = (Math.floor(Math.random() * 3) + 7) + 'px';
const confettiBackground = this.confettiColors[Math.floor(Math.random() * this.confettiColors.length)];
const confettiLeft = (Math.floor(Math.random() * this.el.offsetWidth)) + 'px';
const confettiAnimation = this.confettiAnimations[Math.floor(Math.random() * this.confettiAnimations.length)];

confettiEl.classList.add('confetti', 'confetti--animation-' + confettiAnimation);
confettiEl.style.left = confettiLeft;
confettiEl.style.width = confettiSize;
confettiEl.style.height = confettiSize;
confettiEl.style.backgroundColor = confettiBackground;

confettiEl.removeTimeout = setTimeout(function() {
confettiEl.parentNode.removeChild(confettiEl);
}, 3000);

this.containerEl.appendChild(confettiEl);
}, 25);
};


function start(){
new Confettiful(document.querySelector('.js-container'));
let congratEl = document.querySelector('.congrats');
congratEl.style.display = 'block';
}


let test = document.querySelector('.recruter');
test.addEventListener('click', start );



Loading