added languages
This commit is contained in:
Karma Riuk
parent
db4f5b8b51
commit
e4b90621b3
@ -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;
|
||||
|
||||
@ -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
40
assets/vendor/mdb/mdb.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
49
index.html
49
index.html
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user