cacto
556f5761fd
Заменил приблизительную hex-палитру на настоящие oklch()-цвета из
макета, подключил JetBrains Mono через Google Fonts (обновил CSP:
style-src/font-src для fonts.googleapis.com/fonts.gstatic.com).
Секция "обо мне" резюме — без term-window, плоские абзацы; опыт работы
в формате период/роль/компания·город + буллеты с тире; контакты в виде
label+value, как в макете. Карточки проектов — без бара с точками,
header-строка "drwxr-xr-x {name}" + ссылка справа, как в Projects.dc.html.
matrix-rain.js переписан по алгоритму из макета (shadowBlur на "голове"
капли, katakana-набор символов, накопительное падение). Градиент
глубины поверх дождя взял по факту темнее, чем в инлайн-стилях макета
(0.72–0.96 давал почти невидимый дождь) — подобрал по референс-скриншоту
макета (0.35–0.6), а не по сырым числам.
178 lines
2.7 KiB
CSS
178 lines
2.7 KiB
CSS
.hero {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2.5rem;
|
|
padding: 2.5rem 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-text h1 {
|
|
margin: 0 0 0.4rem;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.hero-text .role {
|
|
margin: 0;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.hero-text .tagline {
|
|
margin: 0.75rem 0 0;
|
|
color: var(--color-accent-mid);
|
|
max-width: 34ch;
|
|
}
|
|
|
|
.status-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent-mid);
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
box-shadow: 0 0 10px var(--color-accent);
|
|
animation: blink 1.6s step-end infinite;
|
|
}
|
|
|
|
section {
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
.about p {
|
|
max-width: 68ch;
|
|
font-size: 0.94rem;
|
|
line-height: 1.7;
|
|
color: var(--color-fg);
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.timeline {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.timeline-item {
|
|
border-left: var(--border);
|
|
padding-left: 1rem;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.timeline-item__meta {
|
|
color: var(--color-silver-dim);
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.02em;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.timeline-item__role {
|
|
color: var(--color-fg);
|
|
font-weight: 600;
|
|
margin: 0 0 0.15rem;
|
|
font-size: 0.94rem;
|
|
}
|
|
|
|
.timeline-item__company {
|
|
color: var(--color-silver);
|
|
font-size: 0.82rem;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.timeline-item ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.timeline-item li {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
font-size: 0.88rem;
|
|
line-height: 1.6;
|
|
color: var(--color-fg-dim);
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.timeline-item .dash {
|
|
color: var(--color-accent-mid);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.contact-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.contact-list__label {
|
|
color: var(--color-silver-dim);
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.skill-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.skill-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skill-group__title {
|
|
color: var(--color-silver);
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.edu-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.edu-item__year {
|
|
color: var(--color-silver);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.edu-item__degree {
|
|
color: var(--color-fg);
|
|
font-weight: 600;
|
|
margin: 0.15rem 0;
|
|
}
|
|
|
|
.edu-item__school {
|
|
color: var(--color-silver);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.edu-item__detail {
|
|
color: var(--color-silver);
|
|
font-size: 0.83rem;
|
|
opacity: 0.85;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|