It's the first thing I've created using flexbox and Javascript so I feel like my code could probably improve a lot. Any feedback would be greatly appreciated!
If you click on any skill bar or skill title the summary will change.
LIVE:
https://dieter91.github.io/skills-section/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Skills section</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
</head>
<body>
<section class="skills">
<div class="skills-left">
<h2>Skills</h2>
<h3 class="skill-title">HTML & CSS</h3>
<div class="skill-bar">
<div class="html-css"><p>80/100</p></div>
</div>
<h3 class="skill-title">JAVASCRIPT</h3>
<div class="skill-bar">
<div class="javascript"><p>85/100</p></div>
</div>
<h3 class="skill-title">PHP</h3>
<div class="skill-bar">
<div class="php"><p>70/100</p></div>
</div>
<h3 class="skill-title">SEO</h3>
<div class="skill-bar">
<div class="seo"><p>95/100</p></div>
</div>
</div>
<div class="skills-right">
<h2>Summary</h2>
<div class="desc active">
<h3 >HTML & CSS</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
iure harum voluptatum aspernatur libero illo recusandae deleniti!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste, necessitatibus dolorem assumenda ipsum autem, hic, dolorum ipsa quisquam aut saepe maxime.
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam dolor molestias fugiat!</li>
<li>Lorem ipsum dolor sit amet consectetur.</li>
</ul>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus doloremque provident aut fugiat rem aliquid qui laboriosam eaque. Rerum, eum!</p>
</div>
<div class="desc">
<h3 >JAVASCRIPT</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
iure harum voluptatum aspernatur libero illo recusandae deleniti!
</p>
<img src="https://venturebeat.com/wp-content/uploads/2018/01/javascript.jpg" alt="" srcset="">
</div>
<div class="desc">
<h3 >PHP</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
iure harum voluptatum aspernatur libero illo recusandae deleniti!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit minima nesciunt iste animi iure, minus ducimus nostrum. Vitae, blanditiis aspernatur.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum rem, porro recusandae consectetur fugit accusantium corporis quis quam officia. Earum at aperiam quasi voluptates provident eum. Ducimus dignissimos laudantium distinctio magni fugiat id ea. Maiores dolore corrupti molestias illo officia? Asperiores rem consequuntur nam culpa!</p>
</div>
<div class="desc">
<h3 >SEO</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia rem
excepturi sit dolore fuga tenetur. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Praesentium quisquam tempore, quis ex
eum maxime vitae repudiandae! Rerum consectetur provident soluta, id
iure harum voluptatum aspernatur libero illo recusandae deleniti!
</p>
<img src="https://www.easisell.com/wp-content/uploads/2021/03/seoimage-2.jpg" alt="" srcset="">
</div>
</section>
<script src="javascript.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}
.skills {
display: flex;
flex-direction: row;
justify-content: space-around;
background: linear-gradient(to right, #c9d6ff, #e2e2e2);
height: 45rem;
padding: 4rem 0 4rem 0;
}
.skills h2 {
text-align: center;
margin-bottom: 4rem;
}
.skills-left {
width: 40%;
}
.skills-right {
width: 40%;
position: relative;
}
.skill-title {
cursor: pointer;
}
.skill-bar {
color: aliceblue;
background-color: whitesmoke;
border: black solid 1px;
display: flex;
flex-direction: row;
}
.skill-bar p {
font-size: 1.4rem;
text-align: right;
margin-right: 1.5rem;
}
.html-css {
width: 80%;
background: linear-gradient(to right, #00b4db, #0083b0);
opacity: 0.8;
}
.html-css:hover {
opacity: 1;
transition: 0.6s;
cursor: pointer;
}
.javascript {
width: 85%;
background: linear-gradient(to right, #00b4db, #0083b0);
transition: background-color 4s;
opacity: 0.8;
}
.javascript:hover {
opacity: 1;
transition: 0.6s;
cursor: pointer;
}
.php {
width: 75%;
background: linear-gradient(to right, #00b4db, #0083b0);
transition: background-color 4s;
opacity: 0.8;
}
.php:hover {
opacity: 1;
transition: 0.6s;
cursor: pointer;
}
.seo {
width: 95%;
background: linear-gradient(to right, #00b4db, #0083b0);
transition: background-color 4s;
opacity: 0.8;
}
.seo:hover {
opacity: 1;
transition: 0.6s;
cursor: pointer;
}
.desc {
opacity: 0;
position: absolute;
}
.desc img {
width: 100%;
}
.desc.active {
opacity: 1;
transition: all 800ms ease-in-out;
}
@media (max-width: 768px) {
.skills {
flex-direction: column;
justify-content: initial;
padding: 2rem 4rem;
background-color: white;
height: 100vh;
}
.skills-left {
width: 100%;
}
.skills-right {
margin-top: 20rem;
width: 100%;
}
}
JS:
let skillBar = document.getElementsByClassName("skill-bar");
let desc = document.getElementsByClassName("desc");
let skillsRight = document.getElementsByClassName("skills-right")[0];
let skillTitle = document.getElementsByClassName("skill-title");
for (let i = 0; i < skillBar.length; i++) {
skillBar[i].addEventListener("click", function () {
skillsRight.getElementsByClassName("active")[0].classList.remove("active");
desc[i].classList.add("active");
});
skillTitle[i].addEventListener("click", function () {
skillsRight.getElementsByClassName("active")[0].classList.remove("active");
desc[i].classList.add("active");
});
}
Top comments (7)
Hey, nice work. It’s responsive and animated. 😄
Some small things that could make it even better:
&) has a special meaning in HTML, so if you only want to show the symbol you should use&.Thanks a lot for the feedback!
I have heard (aka, not experienced) that you should not include skill bars on a resume or portfolio page. The reason being that if a hiring manager needs someone who knows PHP, but that is one of your lower skills, then that could be a reason to pass on you.
I don't think there's any harm in admitting you're not equally good in every single skill. If you're only "30%" in PHP, a potential employer probably won't hire you for a straight PHP gig, but that's fair enough if you're not primarily a PHP developer anyway. On the other hand, they might see it as an advantage for jobs where (for example) a legacy system you'll need to integrate with is built with PHP. Or perhaps it's a small company whose main product is built with something else but they also have a WordPress site and it's handy for them to have someone in-house who can work with it.
IMO the main argument against skill bars is not that they'll deter companies from hiring you; it's that they often don't give accurate information. One person's idea of what 50% or 100% means might be vastly different from another person's, and naturally there'll be some "inflation" of the percentages, especially with junior developers. Plus, they go out of date quickly as you learn more stuff or don't use a technology for a long time while it continues to evolve.
That said... They look quite nice, are easy for human eyes to parse, and usually give at least somewhat useful information. And the inflation of abilities/achievements and inaccuracy over time are a feature of resumes in general, not unique to progress bars.
This is why I decided to add an summary section next to it. Which can provide more information on said skill. As a skill bar on its own indeed doesn't provide much useful information.
However, all this is just a random little project I decided to make to try to use the stuff I've learned from tutorials in actual practice. Cause tutorials on its own tend to be quite boring. 😅
Great work overall!
You may want to add language in your markdown code blocks to add syntax highlighting. It should make the code easier to read. docs.github.com/en/github/writing-...
Oh, wow. I was wondering why there was no syntax highlighting, haha! Thanks!