Полный перенос дизайна и текстов из макета: oklch-палитра, Google Fonts
Заменил приблизительную 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), а не по сырым числам.
This commit is contained in:
+20
-50
@@ -3,81 +3,51 @@
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
margin: 0 0 0.4rem;
|
||||
text-shadow: 0 0 20px var(--color-accent-dim);
|
||||
text-shadow: 0 0 24px oklch(55% 0.19 142 / 0.4);
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
color: var(--color-silver);
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 2rem;
|
||||
margin: 0 0 2.5rem;
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
border: var(--border);
|
||||
background: var(--color-bg-raised);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card__bar {
|
||||
.project-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: var(--border);
|
||||
color: var(--color-silver);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.project-card__bar span {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent-dim);
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
.project-card__name {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-fg-dim);
|
||||
}
|
||||
|
||||
.project-card__perms {
|
||||
color: var(--color-accent-dim);
|
||||
}
|
||||
|
||||
.project-card__body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-card__title {
|
||||
margin: 0;
|
||||
color: var(--color-accent);
|
||||
font-size: 1.05rem;
|
||||
color: var(--color-accent-mid);
|
||||
}
|
||||
|
||||
.project-card__desc {
|
||||
margin: 0;
|
||||
color: var(--color-fg);
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--color-fg-dim);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.project-card__link {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.project-card__link::before {
|
||||
content: '$ ';
|
||||
color: var(--color-accent-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
+44
-30
@@ -18,7 +18,7 @@
|
||||
|
||||
.hero-text .tagline {
|
||||
margin: 0.75rem 0 0;
|
||||
color: var(--color-accent-dim);
|
||||
color: var(--color-accent-mid);
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-accent-dim);
|
||||
color: var(--color-accent-mid);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
box-shadow: 0 0 8px var(--color-accent-dim);
|
||||
box-shadow: 0 0 10px var(--color-accent);
|
||||
animation: blink 1.6s step-end infinite;
|
||||
}
|
||||
|
||||
@@ -48,49 +48,62 @@ section {
|
||||
|
||||
.about p {
|
||||
max-width: 68ch;
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-fg);
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
border-left: var(--border);
|
||||
margin: 0;
|
||||
padding: 0 0 0 1.5rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1.6rem;
|
||||
top: 0.4rem;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--color-accent);
|
||||
box-shadow: 0 0 6px var(--color-accent-dim);
|
||||
border-left: var(--border);
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.timeline-item__meta {
|
||||
color: var(--color-silver);
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-silver-dim);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.timeline-item__role {
|
||||
color: var(--color-accent);
|
||||
margin: 0.15rem 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
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-left: 1.2rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.timeline-item li::marker {
|
||||
color: var(--color-accent-dim);
|
||||
.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 {
|
||||
@@ -99,12 +112,13 @@ section {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.contact-list a::before {
|
||||
content: '$ ';
|
||||
color: var(--color-accent-dim);
|
||||
.contact-list__label {
|
||||
color: var(--color-silver-dim);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-group {
|
||||
|
||||
+36
-46
@@ -1,12 +1,17 @@
|
||||
:root {
|
||||
--color-bg: #0a0e0c;
|
||||
--color-bg-raised: #0f1512;
|
||||
--color-fg: #c7c7c7;
|
||||
--color-accent: #00ff41;
|
||||
--color-accent-dim: #0a8f2c;
|
||||
--color-silver: #9fa3a0;
|
||||
--font-mono: 'JetBrains Mono', 'Share Tech Mono', ui-monospace, monospace;
|
||||
--border: 1px solid #163020;
|
||||
--color-bg: #050705;
|
||||
--color-bg-raised: #0d100d;
|
||||
--color-fg: oklch(84% 0.01 240);
|
||||
--color-fg-dim: oklch(76% 0.01 240);
|
||||
--color-accent: oklch(80% 0.19 142);
|
||||
--color-accent-bright: oklch(88% 0.17 142);
|
||||
--color-accent-mid: oklch(55% 0.13 142);
|
||||
--color-accent-dim: oklch(50% 0.13 142);
|
||||
--color-silver: oklch(58% 0.01 240);
|
||||
--color-silver-dim: oklch(48% 0.01 240);
|
||||
--color-num: oklch(40% 0.02 240);
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
--border: 1px solid oklch(32% 0.06 142 / 0.45);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -25,9 +30,19 @@ body {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* лёгкий градиент глубины поверх дождя, под контентом */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, rgba(4, 6, 4, 0.35), rgba(4, 6, 4, 0.55) 220px, rgba(4, 6, 4, 0.6));
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-bg);
|
||||
background: oklch(42% 0.14 142);
|
||||
color: #eafff0;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -67,11 +82,10 @@ body::before {
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.15) 0px,
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 0px,
|
||||
rgba(0, 0, 0, 0) 2px,
|
||||
rgba(80, 255, 140, 0.025) 3px
|
||||
);
|
||||
}
|
||||
|
||||
@@ -81,7 +95,7 @@ body::before {
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: var(--border);
|
||||
background: rgba(10, 14, 12, 0.6);
|
||||
background: rgba(4, 6, 4, 0.55);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
@@ -162,32 +176,6 @@ body::before {
|
||||
color: var(--color-accent-dim);
|
||||
}
|
||||
|
||||
/* --- терминальное окно-обёртка для блоков контента --- */
|
||||
.term-window {
|
||||
border: var(--border);
|
||||
background: var(--color-bg-raised);
|
||||
margin: 1.75rem 0;
|
||||
}
|
||||
|
||||
.term-window__bar {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
.term-window__bar span {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent-dim);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.term-window__body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
/* --- ASCII-арт --- */
|
||||
.ascii-cactus {
|
||||
color: var(--color-accent);
|
||||
@@ -252,15 +240,17 @@ body::before {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: var(--border);
|
||||
padding-bottom: 0.6rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--color-fg);
|
||||
color: var(--color-accent-mid);
|
||||
}
|
||||
|
||||
.section-heading__num {
|
||||
color: var(--color-accent-dim);
|
||||
color: var(--color-num);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user