GrechkaGK/gksite-ibm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better index

Browse source
This commit is contained in:
grechkagk 2026-02-05 22:30:42 +08:00
parent 2a60d2653e
commit c3f0b4f307
5 changed files with 142 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/image/avatar.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 450 KiB

10
src/layout/root.astro
View file

@ -1,6 +1,6 @@
--- ---
const { title } = Astro.props; const { title } = Astro.props;
import '../style/ibm-plex-sans-default.css' import "../style/ibm-plex-sans-default.css";
--- ---
<html lang="en"> <html lang="en">
@ -12,6 +12,12 @@ import '../style/ibm-plex-sans-default.css'
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<slot></slot> <slot />
<style>
html {
font-family: "IBM Plex Sans";
}
</style>
</body> </body>
</html> </html>

0
src/pages/about.astro Normal file
View file

0
src/pages/bio.astro Normal file
View file

143
src/pages/index.astro
View file

@ -1,17 +1,142 @@
--- ---
import { Image } from "astro:assets";
import Root from "../layout/root.astro"; 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"> <Root title="GrechkaGK site">
<h1>добро пожаловать</h1> <div class="Page">
<p>привет мир!</p> <div class="Box CenterBox">
<div>
<h1>GrechkaGK</h1>
<p>{age} лет, программист, художник, творческий человек</p>
</div>
<style> <div class="Avatar"><Image src={avatar} alt={"Аватар"} /></div>
h1 { </div>
font-weight: bold; <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>