Compare commits
4 Commits
80bc9acf71
...
70fa864f6d
| Author | SHA1 | Date | |
|---|---|---|---|
|
70fa864f6d | ||
|
|
be6703c86d | ||
|
|
07c90564de | ||
|
|
7fd0ae8a6b |
2
.husky/pre-commit
Normal file
2
.husky/pre-commit
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
corepack pnpm run precommit
|
||||||
1
.node-version
Normal file
1
.node-version
Normal file
@@ -0,0 +1 @@
|
|||||||
|
24.13.0
|
||||||
@@ -1,5 +1,22 @@
|
|||||||
// @ts-check
|
// @ts-check
|
||||||
import { defineConfig } from 'astro/config';
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
import { defineConfig } from "astro/config";
|
||||||
|
|
||||||
// https://astro.build/config
|
const alias = {
|
||||||
export default defineConfig({});
|
"@app": new URL("./src/app", import.meta.url).pathname,
|
||||||
|
"@pageModules": new URL("./src/pageModules", import.meta.url).pathname,
|
||||||
|
"@widgets": new URL("./src/widgets", import.meta.url).pathname,
|
||||||
|
"@features": new URL("./src/features", import.meta.url).pathname,
|
||||||
|
"@entities": new URL("./src/entities", import.meta.url).pathname,
|
||||||
|
"@shared": new URL("./src/shared", import.meta.url).pathname,
|
||||||
|
"@mocks": new URL("./src/__mocks__", import.meta.url).pathname,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
vite: {
|
||||||
|
plugins: [tailwindcss()],
|
||||||
|
resolve: {
|
||||||
|
alias,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|||||||
47
biome.json
Normal file
47
biome.json
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
|
||||||
|
"vcs": {
|
||||||
|
"enabled": true,
|
||||||
|
"clientKind": "git",
|
||||||
|
"useIgnoreFile": true
|
||||||
|
},
|
||||||
|
"files": {
|
||||||
|
"includes": ["**", "!!**/dist"]
|
||||||
|
},
|
||||||
|
"formatter": {
|
||||||
|
"enabled": true,
|
||||||
|
"indentStyle": "tab"
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"enabled": true,
|
||||||
|
"rules": {
|
||||||
|
"recommended": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"javascript": {
|
||||||
|
"formatter": {
|
||||||
|
"quoteStyle": "double"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"assist": {
|
||||||
|
"enabled": true,
|
||||||
|
"actions": {
|
||||||
|
"source": {
|
||||||
|
"organizeImports": "on"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"includes": ["**/*.astro"],
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"correctness": {
|
||||||
|
"noUnusedImports": "off",
|
||||||
|
"noUnusedVariables": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
61
package.json
61
package.json
@@ -1,20 +1,43 @@
|
|||||||
{
|
{
|
||||||
"name": "nikitapozd_website",
|
"name": "nikitapozd_website",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "24.13.0",
|
"node": ">=24.13.0 <25",
|
||||||
"pnpm": ">=9.0.0"
|
"pnpm": ">=10.28.0"
|
||||||
},
|
},
|
||||||
"enginesStrict": true,
|
"enginesStrict": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro",
|
"astro": "astro",
|
||||||
"preinstall": "node ./scripts/enforce-pnpm.mjs"
|
"preinstall": "node ./scripts/enforce-pnpm.mjs",
|
||||||
},
|
"lint": "astro check --minimumFailingSeverity warning && biome check .",
|
||||||
"dependencies": {
|
"format": "biome format . --write",
|
||||||
"astro": "^5.16.10"
|
"prepare": "husky",
|
||||||
}
|
"precommit": "lint-staged",
|
||||||
}
|
"ci": "astro check && biome ci ."
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,jsx,ts,tsx,json,jsonc,css,scss}": [
|
||||||
|
"biome check --no-errors-on-unmatched"
|
||||||
|
],
|
||||||
|
"*.{astro}": [
|
||||||
|
"astro check --minimumFailingSeverity warning"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/check": "^0.9.9",
|
||||||
|
"@tailwindcss/vite": "^4.2.4",
|
||||||
|
"@webtui/css": "^0.1.7",
|
||||||
|
"astro": "^6.1.8",
|
||||||
|
"tailwindcss": "^4.2.4",
|
||||||
|
"typescript": "^6.0.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@biomejs/biome": "2.4.13",
|
||||||
|
"husky": "^9.1.7",
|
||||||
|
"lint-staged": "^16.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
if (!process.env.npm_execpath || !process.env.npm_execpath.includes('pnpm')) {
|
if (!process.env.npm_execpath?.includes("pnpm")) {
|
||||||
console.error(
|
console.error(
|
||||||
'Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).'
|
"Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).",
|
||||||
);
|
);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
|
|||||||
43
src/__mocks__/demo.ts
Normal file
43
src/__mocks__/demo.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
export const articles = [
|
||||||
|
{
|
||||||
|
title: "Нативный light/dark без лишнего JS",
|
||||||
|
tag: "CSS / UI",
|
||||||
|
meta: "06.04.2026",
|
||||||
|
desc: "Разбор переключения темы, системных предпочтений и аккуратной деградации интерфейса.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Astro + WebTUI: терминальный UI без боли",
|
||||||
|
tag: "ASTRO / WEBTUI",
|
||||||
|
meta: "02.04.2026",
|
||||||
|
desc: "Как подключить стили, разнести слои и не потерять читаемость в гибридном интерфейсе.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "React-архитектура для pet-проектов",
|
||||||
|
tag: "REACT / TS",
|
||||||
|
meta: "27.03.2026",
|
||||||
|
desc: "Минимальный, но живучий сетап: фичи, shared-слой, UI-кит и понятные контракты.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const projects = [
|
||||||
|
{
|
||||||
|
title: "UI System",
|
||||||
|
type: "DESIGN SYSTEM",
|
||||||
|
status: "ONLINE",
|
||||||
|
desc: "Компоненты и паттерны для React / Solid с единым visual language.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Lab Notes",
|
||||||
|
type: "BLOG",
|
||||||
|
status: "SYNCED",
|
||||||
|
desc: "Статьи, заметки и эксперименты по фронтенду, DX и интерфейсам.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Experiments",
|
||||||
|
type: "PLAYGROUND",
|
||||||
|
status: "WIP",
|
||||||
|
desc: "Графика, WebGPU, 3D и интерактивные эксперименты.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const contacts = ["GitHub", "Telegram", "Email", "LinkedIn"];
|
||||||
1
src/__mocks__/index.ts
Normal file
1
src/__mocks__/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from "./demo.ts";
|
||||||
25
src/app/layouts/BaseLayout/BaseLayout.astro
Normal file
25
src/app/layouts/BaseLayout/BaseLayout.astro
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
import "@app/styles/global.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title = "NikitaPozd Dev", description = "" } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="ru" data-webtui-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<title>{title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
1
src/app/layouts/BaseLayout/index.ts
Normal file
1
src/app/layouts/BaseLayout/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./BaseLayout.astro";
|
||||||
15
src/app/styles/global.css
Normal file
15
src/app/styles/global.css
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
@layer theme, base, components, utilities;
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@import "@webtui/css/base.css" layer(base);
|
||||||
|
|
||||||
|
/* utilities */
|
||||||
|
@import "@webtui/css/utils/box.css" layer(utilities);
|
||||||
|
|
||||||
|
/* components */
|
||||||
|
@import "@webtui/css/components/accordion.css" layer(components);
|
||||||
|
@import "@webtui/css/components/badge.css" layer(components);
|
||||||
|
@import "@webtui/css/components/button.css" layer(components);
|
||||||
|
@import "@webtui/css/components/dialog.css" layer(components);
|
||||||
|
@import "@webtui/css/components/pre.css" layer(components);
|
||||||
|
@import "@webtui/css/components/typography.css" layer(components);
|
||||||
0
src/entities/.gitkeep
Normal file
0
src/entities/.gitkeep
Normal file
0
src/features/.gitkeep
Normal file
0
src/features/.gitkeep
Normal file
1
src/pageModules/demo/index.ts
Normal file
1
src/pageModules/demo/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./ui/DemoPage.astro";
|
||||||
680
src/pageModules/demo/ui/DemoPage.astro
Normal file
680
src/pageModules/demo/ui/DemoPage.astro
Normal file
@@ -0,0 +1,680 @@
|
|||||||
|
---
|
||||||
|
import { articles, contacts, projects } from "@mocks/demo.ts";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="page-shell">
|
||||||
|
<div class="bg-glow"></div>
|
||||||
|
<div class="bg-grid"></div>
|
||||||
|
|
||||||
|
<header class="topbar box">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="brand-mark" aria-hidden="true"></div>
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">ctOS / profile</div>
|
||||||
|
<div class="brand-title">nikitapozd.dev</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-link nav-link--active" href="#home">Главная</a>
|
||||||
|
<a class="nav-link" href="#articles">Статьи</a>
|
||||||
|
<a class="nav-link" href="#projects">Проекты</a>
|
||||||
|
<a class="nav-link" href="#about">Обо мне</a>
|
||||||
|
<a class="nav-link" href="#contact">Контакты</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="layout">
|
||||||
|
<section id="home" class="hero-grid">
|
||||||
|
<section class="panel hero box">
|
||||||
|
<div class="hero-head">
|
||||||
|
<div>
|
||||||
|
<div class="badge-line">
|
||||||
|
<span is-="badge" variant-="cyan">personal node / online</span>
|
||||||
|
</div>
|
||||||
|
<h1>Никита Поздняков</h1>
|
||||||
|
<p class="hero-text">
|
||||||
|
Фронтенд-разработчик. Делаю быстрые, аккуратные интерфейсы на React,
|
||||||
|
TypeScript, Next.js и Astro. Люблю дизайн-системы, терминальную эстетику и
|
||||||
|
чуть-чуть киберпанка.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="status-card box">
|
||||||
|
<div class="status-row status-row--head">
|
||||||
|
<span>status</span>
|
||||||
|
<span>v0.01</span>
|
||||||
|
</div>
|
||||||
|
<div class="status-row"><span>stack</span><span>React / TS</span></div>
|
||||||
|
<div class="status-row"><span>focus</span><span>DX / UI</span></div>
|
||||||
|
<div class="status-row"><span>mode</span><span>building</span></div>
|
||||||
|
<div class="status-row"><span>location</span><span>remote</span></div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-grid">
|
||||||
|
<article class="stat box"><span>Статьи</span><strong>013</strong></article>
|
||||||
|
<article class="stat box"><span>Проекты</span><strong>008</strong></article>
|
||||||
|
<article class="stat box"><span>Опыт с UI</span><strong>06+</strong></article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button is-="button" variant-="foreground0">Смотреть статьи</button>
|
||||||
|
<button is-="button" variant-="cyan">Открыть проекты</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="side-stack">
|
||||||
|
<section class="panel box tone-lime">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow lime">mission feed</span>
|
||||||
|
<span class="muted">active</span>
|
||||||
|
</div>
|
||||||
|
<div class="mission-list">
|
||||||
|
<div class="mission box">Собрать личный сайт с сильной визуальной системой</div>
|
||||||
|
<div class="mission box">Показать статьи, проекты и стек без визуального шума</div>
|
||||||
|
<div class="mission box">Смешать WebTUI и HUD Watch Dogs в современный лендинг</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel box">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">quick links</span>
|
||||||
|
<span class="muted">sync</span>
|
||||||
|
</div>
|
||||||
|
<div class="link-grid">
|
||||||
|
{contacts.map((item) => (
|
||||||
|
<a class="quick-link box" href="#contact">{item}</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content-grid">
|
||||||
|
<section id="about" class="panel box">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">about.exe</div>
|
||||||
|
<h2>Обо мне</h2>
|
||||||
|
</div>
|
||||||
|
<span is-="badge" variant-="cyan">profile</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="prose-copy">
|
||||||
|
<p>
|
||||||
|
Мне нравится делать интерфейсы, в которых есть структура, ритм и понятная
|
||||||
|
логика. Люблю, когда дизайн не спорит с контентом, а усиливает его.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Этот макет опирается на спокойную структуру персонального сайта, но сверху
|
||||||
|
добавляет HUD-слои, статусы, терминальные компоненты и акцентные панели в
|
||||||
|
духе ctOS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tag-grid">
|
||||||
|
{["Next.js", "TypeScript", "Design Systems", "Astro", "Accessibility", "Motion"].map((item) => (
|
||||||
|
<span is-="badge" variant-="foreground2">{item}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="articles" class="panel box tone-cyan">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">articles.log</div>
|
||||||
|
<h2>Последние статьи</h2>
|
||||||
|
</div>
|
||||||
|
<button is-="button" variant-="foreground3">Все записи</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-list">
|
||||||
|
{articles.map((article) => (
|
||||||
|
<article class="article-card box">
|
||||||
|
<div class="card-meta">
|
||||||
|
<span>{article.tag}</span>
|
||||||
|
<span class="accent">{article.meta}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{article.title}</h3>
|
||||||
|
<p>{article.desc}</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projects" class="panel box tone-lime">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow lime">projects.map</div>
|
||||||
|
<h2>Избранные проекты</h2>
|
||||||
|
</div>
|
||||||
|
<span class="muted">3 active nodes</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-grid">
|
||||||
|
{projects.map((project) => (
|
||||||
|
<article class="project-card box">
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="accent-lime">{project.type}</span>
|
||||||
|
<span>{project.status}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{project.title}</h3>
|
||||||
|
<p>{project.desc}</p>
|
||||||
|
<div class="project-foot">
|
||||||
|
<span>open</span>
|
||||||
|
<span>→</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="footer-grid">
|
||||||
|
<section class="panel box">
|
||||||
|
<div class="eyebrow">terminal / broadcast</div>
|
||||||
|
<pre is-="pre" class="terminal-block"><code>> status: available for frontend / ui work
|
||||||
|
> stack: react nextjs typescript astro
|
||||||
|
> interests: design systems webtui webgpu motion</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="panel box tone-cyan">
|
||||||
|
<div class="eyebrow">contact</div>
|
||||||
|
<h2>Давай делать что-то красивое и удобное</h2>
|
||||||
|
<p class="contact-copy">
|
||||||
|
Блог, сайт-портфолио, продуктовый лендинг или внутренняя дизайн-система — этот
|
||||||
|
шаблон можно развить в полноценный персональный сайт.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button is-="button" variant-="foreground0">Написать мне</button>
|
||||||
|
<button is-="button" variant-="cyan">GitHub</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
:root {
|
||||||
|
--background0: #05070a;
|
||||||
|
--background1: #0a0f14;
|
||||||
|
--background2: #10161e;
|
||||||
|
--foreground0: #f4f7fb;
|
||||||
|
--foreground1: #d9e2ea;
|
||||||
|
--foreground2: #9aa8b4;
|
||||||
|
--foreground3: #6f7d88;
|
||||||
|
--cyan: #52d9ff;
|
||||||
|
--cyan-dim: rgba(82, 217, 255, 0.18);
|
||||||
|
--lime: #d8f24f;
|
||||||
|
--lime-dim: rgba(216, 242, 79, 0.16);
|
||||||
|
--red: #ff5b66;
|
||||||
|
--border-soft: rgba(255, 255, 255, 0.1);
|
||||||
|
--shadow-cyan: 0 0 36px rgba(82, 217, 255, 0.08);
|
||||||
|
--shadow-lime: 0 0 28px rgba(216, 242, 79, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--foreground1);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top, rgba(82, 217, 255, 0.11), transparent 28%),
|
||||||
|
linear-gradient(180deg, #06080b 0%, #040506 100%);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glow,
|
||||||
|
.bg-grid {
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glow {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 15% 15%, rgba(82, 217, 255, 0.11), transparent 25%),
|
||||||
|
radial-gradient(circle at 90% 35%, rgba(216, 242, 79, 0.06), transparent 22%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-grid {
|
||||||
|
opacity: 0.08;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
|
||||||
|
background-size: 32px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: rgba(5, 8, 11, 0.82);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid rgba(82, 217, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.55);
|
||||||
|
background: #000;
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0.62rem;
|
||||||
|
border: 1px solid var(--cyan);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow.lime {
|
||||||
|
color: var(--lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-title {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.2);
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
color: var(--foreground1);
|
||||||
|
padding: 0.7rem 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
transition: 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover,
|
||||||
|
.nav-link:focus-visible {
|
||||||
|
border-color: rgba(82, 217, 255, 0.65);
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link--active {
|
||||||
|
background: var(--foreground0);
|
||||||
|
color: #000;
|
||||||
|
border-color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid,
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: rgba(0, 0, 0, 0.48);
|
||||||
|
border: 1px solid var(--border-soft);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.tone-cyan {
|
||||||
|
border-color: rgba(82, 217, 255, 0.22);
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.tone-lime {
|
||||||
|
border-color: rgba(216, 242, 79, 0.22);
|
||||||
|
box-shadow: var(--shadow-lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: clip;
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: -4rem;
|
||||||
|
top: 3rem;
|
||||||
|
width: 12rem;
|
||||||
|
height: 12rem;
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.16);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px dashed rgba(82, 217, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
font-size: clamp(2.4rem, 7vw, 4.8rem);
|
||||||
|
line-height: 0.95;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0.45rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text,
|
||||||
|
.prose-copy p,
|
||||||
|
.article-card p,
|
||||||
|
.project-card p,
|
||||||
|
.contact-copy {
|
||||||
|
line-height: 1.75;
|
||||||
|
color: var(--foreground1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
margin-top: 1rem;
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
min-width: 220px;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(10, 16, 22, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.55rem 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
color: var(--foreground1);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row--head {
|
||||||
|
padding-top: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid,
|
||||||
|
.project-grid,
|
||||||
|
.tag-grid,
|
||||||
|
.link-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat span,
|
||||||
|
.muted,
|
||||||
|
.card-meta,
|
||||||
|
.project-foot {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
color: var(--foreground2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat strong {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-list,
|
||||||
|
.card-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission,
|
||||||
|
.quick-link,
|
||||||
|
.article-card,
|
||||||
|
.project-card {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link {
|
||||||
|
display: block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
transition: 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link:hover,
|
||||||
|
.article-card:hover,
|
||||||
|
.project-card:hover {
|
||||||
|
border-color: rgba(82, 217, 255, 0.35);
|
||||||
|
background: rgba(82, 217, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-copy {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, max-content));
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-lime {
|
||||||
|
color: var(--lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-card h3,
|
||||||
|
.project-card h3 {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-foot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-block {
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(7, 16, 24, 0.95);
|
||||||
|
color: var(--foreground1);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.hero-grid,
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid,
|
||||||
|
.project-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-head {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.layout,
|
||||||
|
.topbar {
|
||||||
|
padding-inline: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
align-items: start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid,
|
||||||
|
.link-grid,
|
||||||
|
.tag-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
1
src/pageModules/home/index.ts
Normal file
1
src/pageModules/home/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./ui/HomePage.astro";
|
||||||
13
src/pageModules/home/ui/HomePage.astro
Normal file
13
src/pageModules/home/ui/HomePage.astro
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<main class="mx-auto flex min-h-screen max-w-6xl items-center justify-center px-4 py-8 md:px-6">
|
||||||
|
<section class="box flex w-full max-w-xl flex-col gap-4 border border-cyan/20 bg-black/40 p-6 text-center shadow-[0_0_30px_rgba(34,211,238,0.12)]">
|
||||||
|
<span is-="badge" variant-="cyan">home page</span>
|
||||||
|
<h1 class="text-4xl text-white md:text-5xl">Hello WebTUI</h1>
|
||||||
|
<p class="text-sm leading-7 text-zinc-300 md:text-base">
|
||||||
|
Базовая главная страница собрана как page module и подключается маршрутом из
|
||||||
|
`src/pages/index.astro`.
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button is-="button" variant-="cyan">Открыть демо</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
1
src/pageModules/uiSandbox/index.ts
Normal file
1
src/pageModules/uiSandbox/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from "./ui/UiSandboxPage.astro";
|
||||||
39
src/pageModules/uiSandbox/ui/UiSandboxPage.astro
Normal file
39
src/pageModules/uiSandbox/ui/UiSandboxPage.astro
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 py-8 md:px-6">
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<details is-="accordion">
|
||||||
|
<summary>Summary title</summary>
|
||||||
|
<p>Accordion content</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<dialog id="dialog" popover>
|
||||||
|
<div box-="round" id="content">
|
||||||
|
<p>Are you sure you want to delete this?</p>
|
||||||
|
<div id="buttons">
|
||||||
|
<button box-="round">Cancel</button>
|
||||||
|
<button box-="round">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
<button popovertarget="dialog">Open Dialog</button>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
dialog::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1lh;
|
||||||
|
padding: 2lh 2ch 1lh 2ch;
|
||||||
|
background-color: var(--background1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1ch;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
11
src/pages/demo.astro
Normal file
11
src/pages/demo.astro
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from "@app/layouts/BaseLayout";
|
||||||
|
import DemoPage from "@pageModules/demo";
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
title="Никита Поздняков — Frontend Engineer"
|
||||||
|
description="Персональный сайт в стилистике Watch Dogs + WebTUI на Astro 6."
|
||||||
|
>
|
||||||
|
<DemoPage />
|
||||||
|
</BaseLayout>
|
||||||
@@ -1,16 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
import BaseLayout from "@app/layouts/BaseLayout";
|
||||||
|
import HomePage from "@pageModules/home";
|
||||||
|
---
|
||||||
|
|
||||||
---
|
<BaseLayout title="Главная | NikitaPozd Dev" description="Главная страница сайта NikitaPozd Dev.">
|
||||||
|
<HomePage />
|
||||||
<html lang="en">
|
</BaseLayout>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Nikita Pozd Main Site</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
8
src/pages/ui-sandbox.astro
Normal file
8
src/pages/ui-sandbox.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from "@app/layouts/BaseLayout";
|
||||||
|
import UiSandboxPage from "@pageModules/uiSandbox";
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="UI Demo | NikitaPozd Dev" description="Демонстрационная страница компонентов WebTUI и Tailwind CSS.">
|
||||||
|
<UiSandboxPage />
|
||||||
|
</BaseLayout>
|
||||||
0
src/shared/.gitkeep
Normal file
0
src/shared/.gitkeep
Normal file
0
src/widgets/.gitkeep
Normal file
0
src/widgets/.gitkeep
Normal file
@@ -1,5 +1,17 @@
|
|||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/strict",
|
"extends": "astro/tsconfigs/strict",
|
||||||
"include": [".astro/types.d.ts", "**/*"],
|
"compilerOptions": {
|
||||||
"exclude": ["dist"]
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@app/*": ["src/app/*"],
|
||||||
|
"@pageModules/*": ["src/pageModules/*"],
|
||||||
|
"@widgets/*": ["src/widgets/*"],
|
||||||
|
"@features/*": ["src/features/*"],
|
||||||
|
"@entities/*": ["src/entities/*"],
|
||||||
|
"@shared/*": ["src/shared/*"],
|
||||||
|
"@mocks/*": ["src/__mocks__/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user