Barcha loyihalar
Ichki ishlanmaBiz yaratganmiz va o‘zimiz ishlatamiz, shuning uchun natijani o‘zingiz tekshirishingiz mumkin.

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

Bitta dizayn-tizim va bitta ma’lumot qatlamiga ega ikkita interfeysmarketing saytichki paneldizayn-tizimtokenlar + komponent, bir martama’lumot qatlamibitta API, tiplangan
Biz tayanadigan andoza, bu loyihaning o‘ziga xos dizayni emas. Bunda hech qanday mijoz ma’lumoti yoki tizimi ko‘rsatilmagan.

Keyingi

Vending parki: telemetriya va masofaviy qo‘llab-quvvatlash

O‘qish

Keyingi qadamingiz

Shunga o‘xshash muammo bormi?

Tizimingiz qanday ishlashini bizga aytib bering. Biz sizga bundan nimasi mos kelishi va nimasi mos kelmasligini aytamiz.