109 lines
2.2 KiB
SCSS
109 lines
2.2 KiB
SCSS
// ========================
|
|
// SKILLS SECTION SCSS
|
|
// ========================
|
|
|
|
@use '../variables' as *;
|
|
@use '../mixins' as *;
|
|
|
|
.skills {
|
|
padding: var(--section-padding);
|
|
|
|
&-grid {
|
|
@include grid-responsive(300px, 32px);
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.skill-category {
|
|
@include card(32px, $border-radius-large, light);
|
|
|
|
.category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
|
|
.category-icon {
|
|
@include icon-container(60px, $primary-color, $border-radius);
|
|
}
|
|
|
|
.category-title {
|
|
font-size: map-get($font-sizes, lg);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
}
|
|
|
|
.skills-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
|
|
.skill-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
.skill-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.skill-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.skill-percentage {
|
|
font-size: map-get($font-sizes, sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
}
|
|
|
|
.skill-bar {
|
|
@include progress-bar(8px);
|
|
|
|
.skill-progress {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
@include transition(width, $transition-slow);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.soft-skills {
|
|
text-align: center;
|
|
|
|
&-title {
|
|
font-size: map-get($font-sizes, xl);
|
|
font-weight: 700;
|
|
margin-bottom: 32px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
&-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
|
|
.soft-skill-tag {
|
|
@include tag(12px 20px, var(--bg-primary), var(--text-secondary));
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 50px;
|
|
font-weight: 500;
|
|
cursor: default;
|
|
|
|
&:hover {
|
|
border-color: $primary-color;
|
|
color: $primary-color;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |