cacto/cactoz.su
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Полный перенос дизайна и текстов из макета: oklch-палитра, Google Fonts

Browse Source 
Заменил приблизительную 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:
cacto
2026-08-10 00:39:53 +05:00
parent 17fd3bae8d
commit 556f5761fd
10 changed files with 148 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/projects.css
+20 -50
View File
@@ -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;
}
frontend/css/resume.css
+44 -30
View File
@@ -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 {
frontend/css/theme.css
+36 -46
View File
@@ -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;
}
frontend/game.html
+3
View File
@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>./battlecity — cacto</title>
<link rel="icon" type="image/svg+xml" href="/assets/cactus-logo.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/css/theme.css" />
<link rel="stylesheet" href="/css/game.css" />
</head>
frontend/index.html
+3
View File
@@ -6,6 +6,9 @@
<title>cacto — Гаммель Дмитрий, PHP/Go backend</title>
<meta name="description" content="Гаммель Дмитрий — backend-разработчик PHP/Go. Резюме, проекты, эксперименты." />
<link rel="icon" type="image/svg+xml" href="/assets/cactus-logo.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/css/theme.css" />
<link rel="stylesheet" href="/css/resume.css" />
</head>
frontend/js/matrix-rain.js
+24 -24
View File
@@ -2,47 +2,47 @@ const canvas = document.getElementById('matrix-rain');
if (canvas && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const ctx = canvas.getContext('2d');
const chars = 'アカサタナハマヤラワ0123456789ABCDEFcacto$#@%&*'.split('');
const fontSize = 15;
const bg = getComputedStyle(document.documentElement).getPropertyValue('--color-bg').trim();
const chars = 'アカサタナハマヤラワ01アイウエオカキク';
const fontSize = 16;
let columns = 0;
let drops = [];
let frameCount = 0;
function setup() {
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
columns = Math.floor(canvas.width / fontSize);
drops = new Array(columns).fill(0).map(() => Math.floor((Math.random() * canvas.height) / fontSize));
drops = new Array(columns).fill(0).map(() => Math.random() * -50);
}
function draw() {
ctx.fillStyle = `${bg}cc`;
ctx.fillStyle = 'rgba(3, 5, 3, 0.12)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = `${fontSize}px monospace`;
for (let i = 0; i < columns; i++) {
const char = chars[Math.floor(Math.random() * chars.length)];
const x = i * fontSize;
const y = drops[i] * fontSize;
// «голова» капли — редкая, чуть ярче, со свечением
const isHead = Math.random() > 0.94;
ctx.shadowColor = 'rgba(100, 255, 160, 0.9)';
ctx.shadowBlur = isHead ? 10 : 0;
ctx.fillStyle = isHead ? '#d2ffe1' : Math.random() > 0.98 ? '#9fa3a0' : '#00ff41';
ctx.fillText(char, x, y);
if (y > canvas.height && Math.random() > 0.975) {
for (let i = 0; i < drops.length; i++) {
const text = chars[Math.floor(Math.random() * chars.length)];
const isHead = Math.random() > 0.92;
ctx.shadowColor = 'rgba(100, 255, 160, 1)';
ctx.shadowBlur = isHead ? 12 : 2;
ctx.fillStyle = isHead ? 'rgba(210, 255, 225, 1)' : 'rgba(80, 255, 140, 1)';
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
} else {
drops[i]++;
}
drops[i] += 0.4;
}
ctx.shadowBlur = 0;
}
setup();
window.addEventListener('resize', setup);
setInterval(draw, 50);
function tick() {
frameCount++;
if (frameCount % 2 === 0) draw();
requestAnimationFrame(tick);
}
resize();
window.addEventListener('resize', resize);
requestAnimationFrame(tick);
}
frontend/js/projects.js
+7 -12
View File
@@ -7,7 +7,6 @@ const DATA = {
projects: [
{
name: 'home_automatization',
title: 'Home Automation Platform',
description:
'Микросервисная платформа умного дома на Go и Laravel. Первая зона — гроубокс (полив, свет, климат), дальше — весь дом.',
tags: ['Go', 'Laravel', 'Docker', 'RabbitMQ', 'ClickHouse', 'gRPC', 'MQTT'],
@@ -16,7 +15,6 @@ const DATA = {
},
{
name: 'cactoz.su',
title: 'cactoz.su — этот сайт',
description:
'Личный сайт-визитка: резюме, проекты и мультиплеерный клон BattleCity. Тема — Матрица.',
tags: ['HTML/CSS/JS', 'C++', 'uWebSockets', 'Quintus.js', 'nginx', 'Docker'],
@@ -31,7 +29,6 @@ const DATA = {
projects: [
{
name: 'home_automatization',
title: 'Home Automation Platform',
description:
'A microservice smart-home platform on Go and Laravel. First zone is a grow box (watering, lighting, climate), the whole house comes next.',
tags: ['Go', 'Laravel', 'Docker', 'RabbitMQ', 'ClickHouse', 'gRPC', 'MQTT'],
@@ -40,7 +37,6 @@ const DATA = {
},
{
name: 'cactoz.su',
title: 'cactoz.su — this site',
description:
'A personal portfolio site: résumé, projects and a multiplayer BattleCity clone. Matrix theme throughout.',
tags: ['HTML/CSS/JS', 'C++', 'uWebSockets', 'Quintus.js', 'nginx', 'Docker'],
@@ -66,15 +62,14 @@ function render() {
.map(
(p) => `
<li class="project-card">
<div class="project-card__bar"><span></span><span class="project-card__perms">drwxr-xr-x</span> ${p.name}</div>
<div class="project-card__body">
<h3 class="project-card__title">${p.title}</h3>
<p class="project-card__desc">${p.description}</p>
<ul class="tag-list">
${p.tags.map((tag) => `<li class="tag">${tag}</li>`).join('')}
</ul>
<a class="project-card__link" href="${p.url}" target="_blank" rel="noopener">${p.linkLabel}: ${p.url.replace('https://', '')}</a>
<div class="project-card__header">
<div class="project-card__name"><span class="project-card__perms">drwxr-xr-x</span> ${p.name}</div>
<a href="${p.url}" target="_blank" rel="noopener">${p.linkLabel} →</a>
</div>
<p class="project-card__desc">${p.description}</p>
<ul class="tag-list">
${p.tags.map((tag) => `<li class="tag">${tag}</li>`).join('')}
</ul>
</li>`
)
.join('');
frontend/js/resume.js
+7 -11
View File
@@ -178,9 +178,10 @@ function renderExperience(list) {
.map(
(job) => `
<li class="timeline-item">
<div class="timeline-item__meta">${job.period} · ${job.duration} · ${job.location}</div>
<h3 class="timeline-item__role">${job.role} — ${job.company}</h3>
<ul>${job.bullets.map((b) => `<li>${b}</li>`).join('')}</ul>
<div class="timeline-item__meta">${job.period} · ${job.duration}</div>
<h3 class="timeline-item__role">${job.role}</h3>
<div class="timeline-item__company">${job.company} · ${job.location}</div>
<ul>${job.bullets.map((b) => `<li><span class="dash">-</span><span>${b}</span></li>`).join('')}</ul>
</li>`
)
.join('');
@@ -229,12 +230,7 @@ function render() {
<section class="about">
<h2 class="section-heading"><span class="section-heading__num">01</span>${t.aboutHeading}</h2>
<div class="term-window">
<div class="term-window__bar"><span></span><span></span><span></span></div>
<div class="term-window__body">
${t.about.map((p) => `<p>${p}</p>`).join('')}
</div>
</div>
${t.about.map((p) => `<p>${p}</p>`).join('')}
</section>
<section class="experience">
@@ -255,8 +251,8 @@ function render() {
<section class="contact">
<h2 class="section-heading"><span class="section-heading__num">05</span>${t.contactHeading}</h2>
<ul class="contact-list">
<li><a href="mailto:${t.contact.email}">${t.contact.email}</a></li>
<li><a href="${t.contact.telegramUrl}">${t.contact.telegram}</a></li>
<li><span class="contact-list__label">email</span><a href="mailto:${t.contact.email}">${t.contact.email}</a></li>
<li><span class="contact-list__label">telegram</span><a href="${t.contact.telegramUrl}">${t.contact.telegram}</a></li>
</ul>
</section>`;
}
frontend/projects.html
+3
View File
@@ -6,6 +6,9 @@
<title>ls projects/ — cacto</title>
<meta name="description" content="Проекты Гаммеля Дмитрия: home automation platform и этот сайт." />
<link rel="icon" type="image/svg+xml" href="/assets/cactus-logo.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/css/theme.css" />
<link rel="stylesheet" href="/css/projects.css" />
</head>