:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Inter', sans-serif;
background-color: #f9fafb;
color: #1f2937;
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #0f172a;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.section-title {
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
width: 50%;
height: 3px;
bottom: -8px;
left: 0;
background-color: #0f172a;
}
.skill-bar {
height: 8px;
border-radius: 4px;
background-color: #e5e7eb;
overflow: hidden;
}
.skill-progress {
height: 100%;
border-radius: 4px;
background-color: #0f172a;
transition: width 1s ease;
}
.timeline-item {
position: relative;
padding-left: 28px;
}
.timeline-item::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #0f172a;
left: 0;
top: 6px;
}
.timeline-item::after {
content: '';
position: absolute;
width: 2px;
height: calc(100% + 20px);
background-color: #e5e7eb;
left: 5px;
top: 18px;
}
.timeline-item:last-child::after {
display: none;
}
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
input:focus, textarea:focus {
outline: none;
border-color: #0f172a;
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}
.social-icon {
transition: transform 0.3s ease, color 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
color: #0f172a;
}
.skill-tag {
transition: background-color 0.3s ease, color 0.3s ease;
}
.skill-tag:hover {
background-color: #0f172a;
color: white;
}