368 lines
11 KiB
HTML
368 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Маша Дергачева</title>
|
||
<meta name="description" content="Личная страница Маши Дергачевой." />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style>
|
||
:root {
|
||
--bg: 252 252 253;
|
||
--fg: 15 18 25;
|
||
--muted: 103 106 115;
|
||
--line: 228 231 235;
|
||
--accent: 39 108 234;
|
||
--card: 255 255 255;
|
||
}
|
||
:root.dark {
|
||
--bg: 12 14 18;
|
||
--fg: 235 238 245;
|
||
--muted: 160 166 178;
|
||
--line: 45 49 58;
|
||
--accent: 101 146 255;
|
||
--card: 18 21 27;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
font-family:
|
||
Inter,
|
||
system-ui,
|
||
-apple-system,
|
||
Segoe UI,
|
||
Roboto,
|
||
Ubuntu,
|
||
Cantarell,
|
||
Noto Sans,
|
||
sans-serif;
|
||
background: rgb(var(--bg));
|
||
color: rgb(var(--fg));
|
||
-webkit-font-smoothing: antialiased;
|
||
letter-spacing: 0.1px;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
max-width: 920px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
.header {
|
||
position: sticky;
|
||
top: 0;
|
||
background: rgba(var(--bg), 0.8);
|
||
backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid rgba(var(--line), 0.8);
|
||
z-index: 10;
|
||
}
|
||
.header-inner {
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.brand {
|
||
font-weight: 800;
|
||
letter-spacing: -0.2px;
|
||
}
|
||
.nav {
|
||
display: flex;
|
||
gap: 18px;
|
||
}
|
||
.nav a {
|
||
color: rgb(var(--fg));
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
opacity: 0.8;
|
||
}
|
||
.nav a:hover {
|
||
opacity: 1;
|
||
}
|
||
.hero {
|
||
padding: 80px 0 48px;
|
||
}
|
||
.h1 {
|
||
font-size: 56px;
|
||
line-height: 1.03;
|
||
margin: 0 0 10px;
|
||
letter-spacing: -0.6px;
|
||
}
|
||
.subtitle {
|
||
font-size: 18px;
|
||
line-height: 1.7;
|
||
color: rgb(var(--muted));
|
||
max-width: 640px;
|
||
margin: 0;
|
||
}
|
||
.actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 22px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12px 16px;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
}
|
||
.btn-solid {
|
||
background: rgb(var(--fg));
|
||
color: #fff;
|
||
}
|
||
.btn-ghost {
|
||
border: 1px solid rgb(var(--line));
|
||
color: rgb(var(--fg));
|
||
background: transparent;
|
||
}
|
||
.section {
|
||
padding: 40px 0;
|
||
}
|
||
.section h2 {
|
||
margin: 0 0 12px;
|
||
font-size: 22px;
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
.card {
|
||
background: rgb(var(--card));
|
||
border: 1px solid rgb(var(--line));
|
||
border-radius: 14px;
|
||
padding: 16px;
|
||
}
|
||
.card h3 {
|
||
margin: 0 0 6px;
|
||
font-size: 16px;
|
||
}
|
||
.card p {
|
||
margin: 0;
|
||
color: rgb(var(--muted));
|
||
line-height: 1.6;
|
||
}
|
||
.list {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.badge {
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
background: rgba(var(--fg), 0.04);
|
||
border: 1px solid rgb(var(--line));
|
||
font-size: 12px;
|
||
color: rgb(var(--muted));
|
||
font-weight: 600;
|
||
}
|
||
.footer {
|
||
padding: 40px 0;
|
||
border-top: 1px solid rgb(var(--line));
|
||
color: rgb(var(--muted));
|
||
font-size: 14px;
|
||
}
|
||
.theme {
|
||
width: 36px;
|
||
height: 36px;
|
||
border: 1px solid rgb(var(--line));
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
@media (min-width: 680px) {
|
||
.grid.cols-2 {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.h1 {
|
||
font-size: 64px;
|
||
}
|
||
.hero {
|
||
padding: 96px 0 56px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="container header-inner">
|
||
<a class="brand" href="#top">Маша Дергачева</a>
|
||
<nav class="nav">
|
||
<a href="#about">О себе</a>
|
||
<a href="#work">Проекты</a>
|
||
<a href="#notes">Заметки</a>
|
||
<a href="#contact">Контакты</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<main id="top">
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1 class="h1">Привет, я Маша</h1>
|
||
<p class="subtitle">
|
||
Делаю аккуратные вещи и записываю мысли. Люблю простые интерфейсы,
|
||
живые тексты и порядок.
|
||
</p>
|
||
<div class="actions">
|
||
<a class="btn btn-solid" href="#work">Смотреть проекты</a>
|
||
<a class="btn btn-ghost" href="#contact">Написать</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section" id="about">
|
||
<div class="container grid cols-2">
|
||
<div>
|
||
<h2>О себе</h2>
|
||
<p class="subtitle">
|
||
Несколько предложений: чем занимаюсь сейчас, что интересно и чему
|
||
учусь. Коротко и по делу.
|
||
</p>
|
||
<div class="list" style="margin-top: 12px">
|
||
<span class="badge">учёба</span>
|
||
<span class="badge">тексты</span>
|
||
<span class="badge">маленькие проекты</span>
|
||
</div>
|
||
</div>
|
||
<div class="grid" style="gap: 12px">
|
||
<div class="card">
|
||
<h3>Фокус</h3>
|
||
<p>Мини‑исследования, заметки по книгам и интерфейсам.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Сейчас</h3>
|
||
<p>Пишу маленькие штуки, читаю, поддерживаю личный сайт.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section" id="work">
|
||
<div class="container">
|
||
<h2>Проекты</h2>
|
||
<div class="grid cols-2">
|
||
<a class="card" href="#">
|
||
<h3>Мини‑сайт</h3>
|
||
<p>Лёгкая страница без сборок. Чистая типографика.</p>
|
||
</a>
|
||
<a class="card" href="#">
|
||
<h3>Заметки</h3>
|
||
<p>Подборки мыслей и коротких эссе.</p>
|
||
</a>
|
||
<a class="card" href="#">
|
||
<h3>Фото</h3>
|
||
<p>Небольшие серии без лишних эффектов.</p>
|
||
</a>
|
||
<a class="card" href="#">
|
||
<h3>Эксперимент</h3>
|
||
<p>Игрушки и микро‑интеракции.</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section" id="notes">
|
||
<div class="container">
|
||
<h2>Заметки</h2>
|
||
<div class="grid">
|
||
<a class="card" href="#"
|
||
><h3>Как вести личный сайт</h3>
|
||
<p>Очень краткий чек‑лист без лишнего.</p></a
|
||
>
|
||
<a class="card" href="#"
|
||
><h3>Минимализм в интерфейсах</h3>
|
||
<p>Что убрать, чтобы стало лучше.</p></a
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section" id="contact">
|
||
<div class="container">
|
||
<h2>Контакты</h2>
|
||
<div class="grid" style="gap: 10px; max-width: 620px">
|
||
<div
|
||
class="card"
|
||
style="
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<input
|
||
id="email"
|
||
value="hi@masha-dergacheva.рф"
|
||
readonly
|
||
style="
|
||
flex: 1;
|
||
border: 1px solid rgb(var(--line));
|
||
background: transparent;
|
||
border-radius: 10px;
|
||
padding: 12px 14px;
|
||
color: rgb(var(--fg));
|
||
outline: none;
|
||
"
|
||
/>
|
||
<button class="btn btn-ghost" id="copy">Скопировать</button>
|
||
</div>
|
||
<div class="card" style="display: flex; gap: 10px; flex-wrap: wrap">
|
||
<a
|
||
class="btn btn-solid"
|
||
href="https://t.me/username"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Телеграм</a
|
||
>
|
||
<a class="btn btn-ghost" href="mailto:hi@masha-дергачева.рф"
|
||
>Почта</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<footer class="footer">
|
||
<div
|
||
class="container"
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
"
|
||
>
|
||
<span>© <span id="year"></span> маша‑дергачева.рф</span>
|
||
<span>Минимализм без сборок</span>
|
||
</div>
|
||
</footer>
|
||
<script>
|
||
document.getElementById("year").textContent = new Date().getFullYear();
|
||
const copy = document.getElementById("copy");
|
||
copy.addEventListener("click", async () => {
|
||
const v = document.getElementById("email").value;
|
||
try {
|
||
await navigator.clipboard.writeText(v);
|
||
copy.textContent = "Скопировано";
|
||
setTimeout(() => (copy.textContent = "Скопировать"), 1500);
|
||
} catch (e) {
|
||
copy.textContent = "Ошибка";
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|