Skip to content

Commit

Permalink
skillsの修正
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishi720
ishi720 committed Dec 15, 2024
1 parent 9c534c6 commit eba3498
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 24 deletions.
27 changes: 26 additions & 1 deletion assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -587,6 +587,12 @@ img {
.skills__circle-30:after {
animation: rotate-circle-right-30 2s linear forwards;
}
.skills__circle-20:after {
animation: rotate-circle-right-20 2s linear forwards;
}
.skills__circle-10:after {
animation: rotate-circle-right-10 2s linear forwards;
}

.skills__circle .skills__circle-inner {
position: absolute;
Expand Down Expand Up @@ -694,7 +700,26 @@ img {
background: #eef3f7;
}
}

@keyframes rotate-circle-right-20 {
0% {
transform: rotate(0deg);
background: #eef3f7;
}
100% {
transform: rotate(72deg);
background: #eef3f7;
}
}
@keyframes rotate-circle-right-10 {
0% {
transform: rotate(0deg);
background: #eef3f7;
}
100% {
transform: rotate(36deg);
background: #eef3f7;
}
}
.skills__name {
border-top: dotted 2px #ccc;
text-align: center;
Expand Down
6 changes: 5 additions & 1 deletion assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@ $(function () {
$(i).is('[data-progress="40"]') &&
$(i).addClass("skills__circle-40"),
$(i).is('[data-progress="30"]') &&
$(i).addClass("skills__circle-30");
$(i).addClass("skills__circle-30"),
$(i).is('[data-progress="20"]') &&
$(i).addClass("skills__circle-20"),
$(i).is('[data-progress="10"]') &&
$(i).addClass("skills__circle-10");
}, 500);
}
});
Expand Down
52 changes: 30 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ <h3 class="works__title">コイントスの統計</h3>
<h2 class="c-heading-lv1 js-fadein">Skills</h2>
<div class="container skills__container js-fadein">
<ul class="row">
<!-- HTML5 -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="90">
Expand All @@ -210,6 +211,7 @@ <h2 class="c-heading-lv1 js-fadein">Skills</h2>
<h3 class="skills__name">HTML5</h3>
</div>
</li>
<!-- CSS -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="90">
Expand All @@ -226,100 +228,106 @@ <h3 class="skills__name">HTML5</h3>
<h3 class="skills__name">CSS</h3>
</div>
</li>
<!-- Javascript -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="90">
<div class="skills__circle" data-progress="80">
<div class="skills__circle-inner">
<div class="skills__icon">
<img
src="./assets/images/icons/language_logo.png"
alt=""
/>
</div>
<div class="skill_per">90%</div>
<div class="skill_per">80%</div>
</div>
</div>
<h3 class="skills__name">WordPress</h3>
<h3 class="skills__name">Javascript</h3>
</div>
</li>
<!-- Python3 -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="70">
<div class="skills__circle" data-progress="50">
<div class="skills__circle-inner">
<div class="skills__icon">
<img
src="./assets/images/icons/language_logo.png"
alt=""
/>
</div>
<div class="skill_per">70%</div>
<div class="skill_per">50%</div>
</div>
</div>
<h3 class="skills__name">Sass</h3>
<h3 class="skills__name">Python3</h3>
</div>
</li>
<!-- PHP -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="80">
<div class="skills__circle" data-progress="60">
<div class="skills__circle-inner">
<div class="skills__icon">
<img
src="./assets/images/icons/language_logo.png"
alt="html"
alt=""
/>
</div>
<div class="skill_per">80%</div>
<div class="skill_per">60%</div>
</div>
</div>
<h3 class="skills__name">Javascript/jQuery</h3>
<h3 class="skills__name">PHP</h3>
</div>
</li>
<!-- Ruby -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="70">
<div class="skills__circle" data-progress="30">
<div class="skills__circle-inner">
<div class="skills__icon">
<img
src="./assets/images/icons/language_logo.png"
alt="html"
alt=""
/>
</div>
<div class="skill_per">70%</div>
<div class="skill_per">20%</div>
</div>
</div>
<h3 class="skills__name">git</h3>
<h3 class="skills__name">Ruby</h3>
</div>
</li>
<!-- Go -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="50">
<div class="skills__circle" data-progress="30">
<div class="skills__circle-inner">
<div class="skills__icon">
<img
src="./assets/images/icons/language_logo.png"
alt="html"
alt=""
/>
</div>
<div class="skill_per">50%</div>
<div class="skill_per">20%</div>
</div>
</div>
<h3 class="skills__name">Photoshop</h3>
<h3 class="skills__name">Go</h3>
</div>
</li>
<!-- Java -->
<li class="skills__item col-md-3">
<div class="skills__block">
<div class="skills__circle" data-progress="40">
<div class="skills__circle" data-progress="10">
<div class="skills__circle-inner">
<div class="skills__icon">
<img
src="./assets/images/icons/language_logo.png"
alt="html"
alt=""
/>
</div>
<div class="skill_per">40%</div>
<div class="skill_per">10%</div>
</div>
</div>
<h3 class="skills__name">PHP</h3>
<h3 class="skills__name">Java</h3>
</div>
</li>
</ul>
Expand Down

0 comments on commit eba3498

Please sign in to comment.