To all to whom these presents shall come, greetings :)
This is my personal portfolio website created to showcase my projects and to give anyone interested a glimpse of my web-development skills.
The website is live on GitHub Pages.
For the Lumia-like experience, please open it on your phone and enable full-screen mode in settings (an icon in the bottom right corner).
The design of this website was inspired by Windows Phone Metro interface which I have always found clean and attractive.
This is especially noticeable on mobile devices, since the mobile version offers experience similar to Lumia devices, with navigation between 'screens' done by swiping and 'sliding headings'. However, additional pagination bullets have been added in the bottom of the page for the sake of intuitiveness.
Project cards can be viewed either as a list (which is so characteristic of Metro UI) or a gallery - I couldn't decide which I liked best so I ended up keeping both.
- vanilla JavaScript
- CSS and SaSS
- Vite
- Sanity
- minimum libraries, just EmailJS, Swipe.js and lodash.throttle.
Here are some of the features of this website:
The website is fully responsive, has 4 breakpoints and reacts to orientation change.
The website features light and dark color schemes and a three-position theme switch. By default, the switch is set to 'auto', meaning that the website follows the system / browser current mode. If a dark or light color scheme is switched on manually, it will override the system setting.
- the selected color scheme is saved in localStorage and restored on next visit
- the majority of images (including the ones in this readme.md) are also available in light and dark versions and respond to the change of a color scheme
The website comes in two languages, English and Ukrainian. The selected language is written to local storage and restored on next visit.
All image alts and aria-labels are also localized.
- all controls are focusable and keyboard-accessible
- all images have
alts - interactive elements without text have proper
aria-labels - project cards in 'list' presentation have
aria-expandedattributes
Not only doest the website have responsive layout, it also allows one-handed operation in mobile mode, with color scheme and language menus moved to the bottom pop-up panel, which, too, was inspired by Lumia phones.
Mobile mode also features a full-screen-view toggle for better experience.
- images are served in webp format and have been optimized with Squoosh
- all images come with 3 extra de-retinized versions to save bandwidth and improve loading times on low-res screens
Lighthouse ratings:
This website uses Sanity as the content management system (CMS). Studio code is also available on my GitHub here.