144 lines
2.9 KiB
Text
144 lines
2.9 KiB
Text
---
|
||
import { Image } from "astro:assets";
|
||
import Root from "../layout/root.astro";
|
||
import avatar from "../image/avatar.gif";
|
||
|
||
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;
|
||
}
|
||
|
||
---
|
||
|
||
<Root title="GrechkaGK site">
|
||
<div class="Page">
|
||
<div class="Box CenterBox">
|
||
<div>
|
||
<h1>GrechkaGK</h1>
|
||
<p>{age} лет, программист, художник, творческий человек</p>
|
||
</div>
|
||
|
||
<div class="Avatar"><Image src={avatar} alt={"Аватар"} /></div>
|
||
</div>
|
||
<div class="Box LinkBox">
|
||
<a href="/bio">боиграфия</a>
|
||
<a href="/about">о сайте</a>
|
||
<a href="/gallery" class="">моя галерея</a>
|
||
<a href="/request" class="">написать мне реквест</a>
|
||
<a href="/garden" class="">оставить приятный отзыв</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: green; /* Apple blue */
|
||
font-weight: 500;
|
||
padding: 8px 4px;
|
||
transition: color 0.15s ease-out;
|
||
}
|
||
|
||
.LinkBox a:hover {
|
||
color: greenyellow;
|
||
}
|
||
|
||
/* Аватар */
|
||
.Avatar img {
|
||
width: 200px;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
border-radius: 24px;
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (max-width: 1024px) {
|
||
.CenterBox {
|
||
padding: 24px;
|
||
gap: 16px;
|
||
}
|
||
|
||
.Avatar img {
|
||
width: 160px;
|
||
height: 160px;
|
||
}
|
||
}
|
||
|
||
/* 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>
|