added languages

This commit is contained in:
Karma Riuk 2023-09-07 13:55:54 +02:00
parent db4f5b8b51
commit e4b90621b3
4 changed files with 104 additions and 7 deletions

View File

@ -100,6 +100,9 @@ h6 {
*/
.navbar {
padding: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar ul {
@ -618,14 +621,14 @@ section {
margin-top: 30px;
}
.about .skills-content .progress {
.progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}
.about .skills-content .progress .skill {
.progress .skill {
padding: 10px 0;
margin: 0 0 6px 0;
text-transform: uppercase;
@ -635,16 +638,16 @@ section {
color: #3b434a;
}
.about .skills-content .progress .skill .val {
.progress .skill .val {
float: right;
font-style: normal;
}
.about .skills-content .progress-bar-wrap {
.progress-bar-wrap {
background: #e6e8eb;
}
.about .skills-content .progress-bar {
.progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;

View File

@ -175,7 +175,7 @@
/**
* Skills animation
*/
let skillsContent = select(".skills-content .progress", true);
let skillsContent = select(".progress", true);
if (skillsContent) {
skillsContent.forEach((skill) => {
new Waypoint({
@ -184,7 +184,12 @@
handler: function(direction) {
let progress = skill.querySelectorAll(".progress-bar");
progress.forEach((el) => {
el.style.width = el.getAttribute("aria-valuenow") + "%";
let percent =
100 *
(+el.getAttribute("aria-valuenow") /
(+el.getAttribute("aria-valuemax") -
+el.getAttribute("aria-valuemin")));
el.style.width = percent + "%";
});
},
});

40
assets/vendor/mdb/mdb.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -21,6 +21,7 @@
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/mdb/mdb.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
@ -50,6 +51,7 @@
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#resume">Resume</a></li>
<li><a class="nav-link scrollto" href="#languages">Languages</a></li>
<li><a class="nav-link scrollto" href="#skills">Skills</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
@ -371,6 +373,53 @@
<a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-up">Download my CV </a>
</section><!-- End My Resume Section -->
<section id="languages" class="languages">
<div class="container">
<div class="section-title" data-aos="fade-up">
<span>Languages</span>
<h2>Languages</h2>
<p></p>
</div>
<div class="w-75 m-auto">
<div class="row">
<div class="progress col-md-6" data-aos="fade-up-right">
<span class="skill"><i class="flag
flag-france"></i>French <i class="val">Native</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="8" aria-valuemin="0"
aria-valuemax="8"></div>
</div>
</div>
<div class="progress col-md-6" data-aos="fade-up-left">
<span class="skill"><i class="flag
flag-uk"></i>English <i class="val">Native</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="8" aria-valuemin="0"
aria-valuemax="8"></div>
</div>
</div>
</div>
<div class="row">
<div class="progress col-md-6" data-aos="fade-up-right">
<span class="skill"><i class="flag
flag-italy"></i>Italian <i class="val">C2</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="7" aria-valuemin="0"
aria-valuemax="8"></div>
</div>
</div>
<div class="progress col-md-6" data-aos="fade-up-left">
<span class="skill"><i class="flag
flag-germany"></i>German <i class="val">B1</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="4.5" aria-valuemin="0"
aria-valuemax="8"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ======= My Skills Section ======= -->
<section id="skills" class="skills">
<div class="container">