better index

src/pages/index.astro

@@ -1,17 +1,142 @@
 ---
+import { Image } from "astro:assets";
 import Root from "../layout/root.astro";
+
+var now = new Date(); //Текущая дата
+var today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); //Текущая дата без времени
+var dob = new Date(2007, 9, 8); //Дата рождения
+var dobnow = new Date(today.getFullYear(), dob.getMonth(), dob.getDate()); //ДР в текущем году
+var age; //Возраст
+
+//Возраст = текущий год - год рождения
+age = today.getFullYear() - dob.getFullYear();
+//Если ДР в этом году ещё предстоит, то вычитаем из age один год
+if (today < dobnow) {
+	age = age - 1;
+}
+
+import avatar from "../image/avatar.gif";
 ---
 
 <Root title="GrechkaGK site">
-	<h1>добро пожаловать</h1>
-	<p>привет мир!</p>
+	<div class="Page">
+		<div class="Box CenterBox">
+			<div>
+				<h1>GrechkaGK</h1>
+				<p>{age} лет, программист, художник, творческий человек</p>
+			</div>
 
-	<style>
-		h1 {
-			font-weight: bold;
+			<div class="Avatar"><Image src={avatar} alt={"Аватар"} /></div>
+		</div>
+		<div class="Box LinkBox">
+			<a href="/bio">боиграфия</a>
+			<a href="/about">о сайте</a>
+		</div>
+	</div>
+</Root>
+
+<style>
+	h1 {
+		font-weight: 600;
+		margin: 0 0 6px 0;
+		letter-spacing: -0.02em;
+	}
+
+	.Page {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+
+		justify-content: center;
+		align-items: stretch;
+		gap: 24px;
+
+		padding: 24px; /* воздух по краям экрана */
+		box-sizing: border-box;
+	}
+
+	/* Общая ширина карточек */
+	.Box {
+		max-width: 720px;
+		width: 100%;
+		margin: 0 auto;
+		box-sizing: border-box;
+		display: flex;
+
+		border: 4px solid black;
+	}
+
+	/* Карточка профиля */
+	.CenterBox {
+		padding: 28px 32px;
+
+		align-items: center;
+		gap: 24px;
+	}
+
+	/* Карточка ссылок */
+	.LinkBox {
+		padding: 20px 24px;
+
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	/* Ссылки */
+	.LinkBox a {
+		text-decoration: none;
+		color: #0071e3; /* Apple blue */
+		font-weight: 500;
+		padding: 8px 4px;
+		border-radius: 8px;
+		transition: background 0.15s ease;
+	}
+
+	.LinkBox a:hover {
+		background: rgba(0, 113, 227, 0.08);
+	}
+
+	/* Аватар */
+	.Avatar img {
+		width: 200px;
+		height: 200px;
+		object-fit: cover;
+		border-radius: 24px;
+	}
+
+	/* Tablet */
+	@media (max-width: 1024px) {
+		.CenterBox {
+			padding: 24px;
+			gap: 16px;
 		}
-		html {
-			font-family: 'IBM Plex Sans';
+
+		.Avatar img {
+			width: 160px;
+			height: 160px;
 		}
-	</style>
-</Root>
+	}
+
+	/* Mobile */
+	@media (max-width: 640px) {
+		.CenterBox {
+			flex-direction: column;
+			text-align: center;
+			padding: 20px;
+		}
+
+		.Avatar img {
+			width: 140px;
+			height: 140px;
+			border-radius: 20px;
+		}
+
+		.LinkBox {
+			padding: 16px 20px;
+		}
+	}
+</style>
+
+<script>
+	// alert("привет!")
+</script>