Басты бет Барлық кейстер

fb24m.ruФронтенд-әзірлеушіге арналған интерактивті портфолио әзірлеу

Astro-да фронтенд-сайт әзірлеу. Нөлден бастап модульдік архитектура жобаладым, семантикалық SEO енгізіп, құрылымды индекстеу үшін оңтайландырдым

Интерактивті портфолио интерфейсінің скриншоты

Тәуелсіз тапсырыс беруші байланысқа шықты (маған күдікті түрде ұқсайды). Ол бірден қазіргі вебтің 99%-ы көңілінен шықпайтынын мәлімдеп, өзінің аса ерекше және кей жерлерде оғаш талаптарын қанағаттандыратын портфолио сайтын жасауды талап етті.

Тапсырыс беруші үшін сайттың лезде жүктелуі мен жұмыс істеуі өте маңызды болғандықтан, барлығын бірден Astro және React негізінде әзірлеу туралы шешім қабылданды. Сондай-ақ, ол ешқандай референссіз келді. Тек анимациялардың бірқалыпты болуын және бәрі қозғалып тұрса да, жүйкеге тимеуін қалады. Сондықтан жұмысты екі бөлікке бөлуге тура келді.

ДизайнӘзірлеу

Дизайн

Анимация мәселесінде біз бірден жұқа мұздың үстімен жүрдік. Тапсырыс беруші іш пыстырарлық статикадан үзілді-кесілді бас тартып, парақшаны айналдырғанда (скролл кезінде) блоктардың бір-біріне жай ғана емес, қисынды әрі түсінікті түрде трансформацияланғанын қалады. Оған қоса — физикаға толықтай фиксация: бәрі серпіліп, секіріп тұруы керек.

такую кнопку заказчик не хотела такую хотел
Нажми на меня

Барлық анимациялық әсерлер мен парақша трансформациялары Motion кітапханасы негізінде жүзеге асырылды. Скролл кезінде морфинг әсерін жасау үшін блоктардың геометриясын динамикалық түрде өзгертетін координаттарды бақылау компоненттері пайдаланылды. Батырмалармен өзара әрекеттесу де толықтай осы кітапханада жасалған.

Кейстерге келетін болсақ, бастапқыда дерекқормен жұмыс істейтін әмбебап конструктор жасау идеясы болған. Бірақ тапсырыс беруші әр кейс үшін, әсіресе сіз қазір қарап отырған кейс үшін түрлі фишкалары бар жеке, бірегей парақшаны қалады. Бұл кейстің оны дәл несімен баурап алғанын білмеймін.

Тақырыптар мен батырмалар үшін Unbounded, ал қалған мәтіндер үшін Fixel қаріптері таңдалды. Unbounded — тапсырыс берушінің ойынша, ол керемет әрі ерекше көрінетіндіктен, ал Fixel — өз міндетін ешқандай артық пафоссыз тамаша атқаратындықтан таңдалды.

Title 1Title 2Title 3Title 4Title 5

Съешь ещё этих мягких французских булок, да выпей же чаю. Повторить тридцать раз на разных языках, чтобы проверить, не поплывут ли диакритические знаки, когда заказчик внезапно решит перевести этот кейс на португальский ради двух переходов со StackOverflow

Этот массивный блок текста специально растянут, чтобы вы могли оценить интерлиньяж и плотность набора. Он выглядит уверенно, монолитно и не разваливается при чтении с мобильных устройств. Если начать уменьшать экран, буквы начнут перестраиваться, но Fixel держит строй до последнего брейкпоинта

Если вы дочитали до этого места, значит, моя структура и контраст работают идеально. Заказчик, конечно, хотел, чтобы я тоже как-то деформировался при скролле, но я парень серьезный. Никакой пружинной физики, только чистая геометрия и высокая контрастность

Ал түстер палитрасына келгенде, тапсырыс беруші ерекше ештеңе ойлап таппауды өтінді.

#000000
#FFFFFF
#F3F4F6

Әзірлеу

Жоғарыда айтылғандай, әзірлеу үшін тапсырыс беруші (шын мәнінде, өзі табандылық танытты) React пен Astro-ны таңдады. Жалпы, тек таза React-пен де шектелуге болар еді, бірақ тапсырыс берушінің сайтында статикалық контент көп болғандықтан және OpenGraph өте маңызды болғандықтан, Astro-ны да қолдану туралы шешім қабылданды.

Бұл ретте тапсырыс беруші жақсырақ индекстелу үшін барлық контент статикалық болуы керек деп шешті. Сондықтан клиенттік бөлікке тек анимациялар мен басқа да күрделі блоктар ғана шығарылды.

Енді тапсырыс беруші портфолиодағы жұмыстарды (толықтай емес) үйреншікті Markdown форматын пайдалана отырып редакциялай алады. Сондай-ақ, қосымша блоктар қосылды, мысалы, көлденең скролл немесе слайдерлер. Ал әрбір жұмыс үшін визуализацияға арналған жеке блоктарды жасауға болады. Мысалы, батырмалары бар осы парақшадағыдай.

Барлық күрделі блоктар оңтайландырылған түрде және тек қажет болған жағдайда ғана жүктеледі — бұл сайттың жүктелуін бірнеше есе жылдамдатады (әдепкі бойынша көптеген парақшаларда JS болмайды). Суреттер автоматты түрде оңтайландырылып, сапасын жоғалтпай сығудың ең қуатты форматы — AVIF және әрмен қарай сақтық үшін WebP форматына түрлендіріледі.

Интернационализация (i18n)

Аудармалар үшін Astro-ның кірістірілген функционалы және createT арнайы утилиталар кітапханасы пайдаланылады. Олар бірге сайттағы кез келген мәтінді бірнеше жолдың ішінде барынша ыңғайлы аударуға мүмкіндік береді. Ол былай жұмыс істейді:

const t = createT(lang as Locale, {
  en: {
    'Reviews': 'Reviews',
    'View all reviews': 'View all reviews',
  },
  kk: {
    'Reviews': 'Пікірлер',
    'View all reviews': 'Барлық пікірлерді көру',
  },
  ru: {
    'Reviews': 'Отзывы',
    'View all reviews': 'Смотреть все отзывы',
  },
})

Одан кейін оны кез келген жерде қолдануға болады:

<h1>{t`Reviews`}</h1>

Қорытынды

Клиент не алды? Ол анимациялары бар, кейстер мен пікірлерді қосуға болатын керемет сайт алды. Олар автоматты түрде барлық қажетті парақшаларда пайда болады, сонымен қатар мұның бәрін 3 тілге аударуға болады. Сайт барлық құрылғыларда тамаша көрсетіледі және жылдам жүктеледі.

Мен не алдым? Егер клиент өзің болсаң, онымен жұмыс істеудің аса қиын екені туралы баға жетпес білім алдым.

Келесі жоба: inreal.studio