Home All Cases

fb24m.ruInteractive Portfolio Development for a Frontend Developer

Developing a frontend developer website using Astro. Designed a modular architecture from scratch with semantic SEO and optimized the structure for indexing

Interactive portfolio interface screenshot

An independent client (suspiciously looking like me) reached out. Right off the bat, they declared that 99% of the modern web didn’t suit them, and demanded the creation of a portfolio website that would satisfy their highly specific and sometimes unhealthy requests.

Since it was extremely important to the client for the site to load and function instantly, the decision was made to develop everything right away using Astro and React. Furthermore, they came without any references. They only wanted smooth animations and for everything to move without being annoying. Therefore, the work had to be split into two parts.

DesignDevelopment

Design

With animation, we walked on thin ice right from the start. The client flatly refused boring statics and wanted blocks to transform into other blocks upon scrolling—and not just randomly, but logically and changeably. Plus, there was a total fixation on physics: everything had to bounce and spring back.

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

All animation effects and page transformations were implemented using the Motion library. To create the morphing effect during scrolling, coordinate-tracking components were used to dynamically change the geometry of the blocks. Button interactions are also completely powered by this library.

As for the cases, the initial idea was to build a universal builder with a database. But the client wanted a distinct, unique page with different features for each case, especially for the one you are looking at right now. I have no idea what exactly attracted them so much to this case.

Unbounded was chosen for headings and buttons, and Fixel for the rest of the text. Unbounded simply because the client thinks it looks cool and unusual, and Fixel because it does its job perfectly without showing off.

Title 1Title 2Title 3Title 4Title 5

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

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

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

But when it came to the color palette, the client asked not to reinvent the wheel.

#000000
#FFFFFF
#F3F4F6

Development

As mentioned earlier, the client (honestly, they insisted on it themselves) chose React and Astro for development. In general, it would have been possible to handle it with pure React, but since the client’s site has a lot of static content, and OpenGraph is extremely important, it was decided to use Astro as well.

At the same time, the client decided that all content should be static for better indexing. Therefore, only animations and other complex blocks were moved to the client side.

Now the client can edit portfolio cases using a (not quite) regular Markdown format. We also added extra blocks, such as horizontal scroll or sliders. And for each project, you can create your own visualization blocks. For example, like the one with the buttons on this page.

All complex blocks are loaded in an optimized way and only when needed—this speeds up site loading significantly (by default, many pages contain no JS). Images are automatically optimized and converted to AVIF—the most powerful lossless/high-quality compression format—and WebP, just in case.

Internationalization (i18n)

The built-in Astro functionality and a special utility library called createT are used for translations. Together, they allow translating any texts on the site as conveniently as possible in just a couple of lines. Here is how it works:

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': 'Смотреть все отзывы',
  },
})

And then it can be used anywhere:

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

Conclusion

What did the client get? They got an incredibly cool website with animations, where you can add cases and reviews, and they will automatically appear on all the necessary pages, plus it can all be translated into 3 languages. The site displays perfectly on all devices and loads quickly.

What did I get? The priceless knowledge that it is incredibly difficult to work with a client if the client is yourself.