Personal portfolio site

Client and challenge

It was required to organize the list of projects in which I took part in the form of a portfolio site. The development of the site itself resulted in another project with interesting tasks.

Technologies and solutions

For the portfolio, multilingual support was needed not only at the level of translating the text of the pages but also at the level of metadata: title, description, open graph metadata, translation of multimedia, and site semantics (routing). Metadata greatly affects the SEO of a website in search results — there were no ready-made solutions for the internationalization of routing without a basic prefix (e.g. /en/), so I created one. I implemented such a mapping at the level of each route of the site (I created a kind of WPML analog — this is perhaps the most popular internationalization plugin for sites on CMS). In addition to translating links, I implemented the ability to translate multimedia with lazy loading (images are downloaded on demand). Lazy/asynchronous loading is also used for the main content (texts) of the website. Static site generation (SSG or prerendering) allows search engines to index the site correctly, by the way, updating the page metadata gets along well with prerendering. In previous projects, support for the dark color scheme was not required, so implementing it was an interesting new task for me, which I easily coped with. I used the latest front-end technologies — Vue 3 (composition API), TypeScript, Pinia, and vite.

Results

The result is a beautiful website with a minimalistic design and well-thought-out functionality. Check out the code on my GitHub!