Add node-version

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+corepack pnpm run precommit

.node-version

@@ -0,0 +1 @@
+24.13.0

astro.config.mjs

@@ -1,5 +1,22 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "astro/config";
 
-// https://astro.build/config
-export default defineConfig({});
+const alias = {
+	"@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,
+		},
+	},
+});

biome.json

@@ -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"
+					}
+				}
+			}
+		}
+	]
+}

package.json

@@ -3,8 +3,8 @@
 	"type": "module",
 	"version": "0.0.1",
 	"engines": {
-    "node": "24.13.0",
-    "pnpm": ">=9.0.0"
+		"node": ">=24.13.0 <25",
+		"pnpm": ">=10.28.0"
 	},
 	"enginesStrict": true,
 	"scripts": {
@@ -12,9 +12,32 @@
 		"build": "astro build",
 		"preview": "astro preview",
 		"astro": "astro",
-    "preinstall": "node ./scripts/enforce-pnpm.mjs"
+		"preinstall": "node ./scripts/enforce-pnpm.mjs",
+		"lint": "astro check --minimumFailingSeverity warning && biome check .",
+		"format": "biome format . --write",
+		"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": {
-    "astro": "^5.16.10"
+		"@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"
 	}
 }

scripts/enforce-pnpm.mjs

@@ -1,6 +1,6 @@
-if (!process.env.npm_execpath || !process.env.npm_execpath.includes('pnpm')) {
+if (!process.env.npm_execpath?.includes("pnpm")) {
 	console.error(
-        'Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).'
+		"Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).",
 	);
 	process.exit(1);
 }

src/__mocks__/demo.ts

@@ -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"];

src/__mocks__/index.ts

@@ -0,0 +1 @@
+export * from "./demo.ts";

src/app/layouts/BaseLayout/BaseLayout.astro

@@ -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>
+

src/app/layouts/BaseLayout/index.ts

@@ -0,0 +1 @@
+export { default } from "./BaseLayout.astro";

src/app/styles/global.css

@@ -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);

src/pageModules/demo/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui/DemoPage.astro";

src/pageModules/demo/ui/DemoPage.astro

@@ -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>&gt; status: available for frontend / ui work
+&gt; stack: react nextjs typescript astro
+&gt; 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>
+

src/pageModules/home/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui/HomePage.astro";

src/pageModules/home/ui/HomePage.astro

@@ -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>

src/pageModules/uiSandbox/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui/UiSandboxPage.astro";

src/pageModules/uiSandbox/ui/UiSandboxPage.astro

@@ -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>
+

src/pages/demo.astro

@@ -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>

src/pages/index.astro

@@ -1,16 +1,8 @@
 ---
+import BaseLayout from "@app/layouts/BaseLayout";
+import HomePage from "@pageModules/home";
+---
 
----
-
-<html lang="en">
-	<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>
+<BaseLayout title="Главная | NikitaPozd Dev" description="Главная страница сайта NikitaPozd Dev.">
+  <HomePage />
+</BaseLayout>

src/pages/ui-sandbox.astro

@@ -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>

tsconfig.json

@@ -1,5 +1,17 @@
 {
 	"extends": "astro/tsconfigs/strict",
+	"compilerOptions": {
+		"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"]
 }