Ushbu sayt
Bu sahifadagi o‘zingiz tekshira oladigan yagona loyiha: manba kodini ko‘ring, Lighthouse’ni ishga tushiring, klaviatura bilan aylanib chiqing.
- Yo‘nalish
- Veb-ilovalar va saytlar
- Yozilgan
- 2026
- Texnologiyalar
- Astro
- TypeScript
- Tailwind CSS
- MDX
- Serverda joylashgan shriftlar
- 100 / 100 / 100Lighthouse: har bir sahifada accessibility, best practices va SEO
- 99–100Lighthouse: unumdorlik, mobil profil, beshta sahifada
- 9.4 KBSahifadagi barcha JavaScript, gzip holatida
Loyiha tarkibi
Bu nega shu yerda
Yangi studiyaning portfolio’sida ishonch muammosi bor: mahorat haqidagi har qanday da’voni tekshirib bo‘lmaydi. Shuning uchun birinchi yozuv — siz allaqachon ko‘rib turgan artefakt. Quyidagilarning hammasini o‘z brauzeringizdan tekshirish mumkin.
Qarorlar
Deyarli JavaScriptsiz
Sayt — mijoz freymvorkisiz statik HTML va CSS. Bizning barcha o‘z xatti-harakatimiz — skroll bilan paydo bo‘lish, navigatsiya almashtirgichi, o‘qish jarayoni chizig‘i, bo‘lim ko‘rsatkichi va aloqa formasi — bitta 3.6 KB modulda joylashgan. Astro’ning view-transition routeri va havolalarni oldindan yuklashi yana 5.8 KB qo‘shadi. Hammasi asta pasayadi: agar ulardan hech biri ishlamasa ham, har bir sahifa baribir to‘liq, navigatsiya qilinadigan va yuborish mumkin bo‘lib qoladi.
Bu byudjetning ikkita ongli natijasi bor: paydo bo‘lish tizimi kontentni hech qachon yashirin holda qoldirmaydi (uchta zaxira variant, jumladan animatsiyani emas, kontentni saqlab qoladigan muddat chegarasi), va barcha xatti-harakat komponent skriptlarida emas, bitta modulda joylashgan, chunki komponent skripti mijoz tomonidagi router ostida faqat bir marta ishlaydi.
O‘z shriftlar, o‘z rasmlar, o‘z ikonkalar
Archivo va IBM Plex Mono o‘z serverida joylashtirilgan va lotin alifbosiga
cheklangan, font-display: swap bilan WOFF2 sifatida oldindan yuklanadi va
yuklanish paytida hech narsa siljimasligi uchun o‘lchami mos zaxira shriftga
tayanadi. Ikonkalar — qurilish vaqtida ichiga joylashtirilgan Lucide
SVG’lari. Fotosuratlar har biri beshta kenglikda AVIF va WebP formatiga
aylantiriladi. Natijada sayt boshqa hech kimdan hech narsa yuklamaydi —
shrift CDN’i yo‘q, rasm xosting yo‘q, cookie yo‘q, cookie bannerida
ko‘rsatiladigan hech narsa yo‘q. Ruxsat etilgan yagona istisno — cookie’siz
tashrif hisoblagichi, va u yoqilganda maxfiylik sahifasi buni aytib o‘tadi.
Sahifalardan oldin tokenlar
Rang, shrift, bo‘shliq, shakl va harakat CSS maxsus xususiyatlari sifatida
bir marta belgilanadi va hamma joyda ishlatiladi. Sirtlar bo‘lim uchun
uchta o‘zgaruvchini belgilash orqali almashadi, shuning uchun qorong‘u
chiziqlarni saqlash qo‘shimcha xarajat talab qilmaydi. /design-system
manzilida har bir holatni ko‘rsatadigan komponentlar vitrinasi bor.
Audit emas, ishlab chiqish bosqichi sifatida qulaylik
Har sahifada landmark’lar va bitta h1, mazmunga o‘tish havolasi, har bir
interaktiv elementda ko‘rinadigan fokus, prefers-reduced-motion hisobga
olinishi, ko‘z bilan emas, tokenlar bo‘yicha tekshiriladigan kontrast va
butun saytni klaviatura bilan boshqarish imkoniyati.
Hamma joyda qo‘llaniladigan yagona rasm siyosati
Har bir fotosurat public domain, CC0 yoki CC BY litsenziyasida — hech qachon share-alike emas, chunki ularning barchasi o‘zgartirilgan. Barchasi bir rangli qilib ko‘rsatiladi, shunda o‘nlab manba bitta to‘plamdek ko‘rinadi, va rang faqat rasm tegishli havola ustiga sichqonchani olib borganda yoki fokus qilinganda qaytadi. Har bir faylning muallifi, litsenziyasi va manbasi rasmlarni renderlaydigan reestrdan yaratiladigan /credits sahifasida e’lon qilingan, shuning uchun bu ma’lumot eskirmaydi.
Halol kontent modeli
Loyihalar yozuvlari — aniq kind maydonini talab qiladigan sxemaga ega
MDX: client, internal, reference-architecture yoki concept. Har bir
kartochkada ko‘rinadigan belgi shu maydondan olinadi, shuning uchun
tasdiqlanmagan yozuv bajarilgan mijoz ishi sifatida sezilmasdan ko‘rina
olmaydi.
Nimalardan qurilgan
Statik chiqish va kontent to‘plamlari uchun Astro, TypeScript, token
qatlami uchun Tailwind CSS v4, uzun yozuvlar uchun MDX va qurilish vaqtida
rasmlarni qayta ishlash uchun sharp. Har qanday xostingga statik fayllar
papkasi sifatida joylashtiriladi.
Da’vo emas, o‘lchov
Yuqoridagi polosadagi raqamlar shu saytning production build’ida
Lighthouse 12 yordamida mahalliy preview’ga nisbatan, mobil profilida
o‘lchangan. Sahifa og‘irligi matn sahifasida 75 KB’dan bosh sahifada —
asosiy fotosuratni olib yuruvchi — 250 KB’gacha o‘zgaradi. Usul va xom
natijalar repozitoriydagi docs/05-verification.mdda bor, shuning uchun
ularni qayta ishga tushirishingiz mumkin.
Odatiy arxitektura