This is my first experience with Vue.js. As a challenge, I found the login interface from dribbble.com with animation, to replicate it using with Vue.js 3.2.

Tämä on ensimmäinen kokemukseni Vue.js:stä. Haasteena löysin kirjautumisrajapinnan dribbble.com-sivustosta animaatiolla, jotta voin kopioida sen Vue.js 3.2:lla.

Это мой первый опыт работы с Vue.js. В качестве испытания я нашел интерфейс входа в систему на dribbble.com с анимацией, чтобы воспроизвести его с помощью Vue.js 3.2.

Sign Up form

Goals was be to create a multi languages page with popular library React.js, but frendly for SEO. I decided to use Gatsby.js for an easy implementation with headless CMS (DatoCMS).

Tavoitteena oli luoda monikielinen sivu suositulla React.js-kirjastolla, mutta sopivasti SEO:lle. Päätin käyttää Gatsby.js:ää helppoon toteuttamiseen päättömällä CMS:llä (DatoCMS).

Целевая страница для медиа-продукции. 

Цель, создать многоязычную страницу с популярной библиотекой React.js, но дружественную для SEO. Решил использовать Gatsby.js для простой реализации с headless CMS (DatoCMS).

Cinemeyevision

The purpose was to update my friend's page, because the previous web page looked outdated and had a number of UI/UX mistakes I made when I created it in 2017. The second reason, to edit the site through the CMS, as using the editor was overkill for the average user. To build from scratch, I chose my favorite (at the time) Next.js and DatoCMS stack.

Tarkoituksena oli päivittää ystäväni sivu, koska edellinen verkkosivu näytti vanhentuneelta ja siinä oli useita UI/UX-virheitä, jotka tein sitä luodessani vuonna 2017. Toinen syy, muokata sivustoa CMS:n kautta, koska editorin käyttäminen oli keskivertokäyttäjälle liikaa. Rakentaakseni sivuston tyhjästä valitsin (tuolloin) suosikkini Next.js:n ja DatoCMS-pinon.

Цель состояла в том, чтобы обновить страницу моего друга, потому что предыдущая веб страница выглядела устаревшей и имела ряд UI/UX ошибок, которые я допустил при её создании в 2017 году. Вторая причина, редактирование сайта через CMS, так как использовать редактор было через чур для обычного пользователя. Для создания с нуля я выбрал свой любимый (на тот момент) стек Next.js и DatoCMS.

Timamih

My first Next.js project. Dashboard for creating a schedule of lessons, hobbies or any other activities for the whole week. It's works locally and does not require registration or other remote actions.The goal, to get experience with Next.js, Typescript, Styled-Components and IndexedDB.

Ensimmäinen Next.js projektini. Kojelauta oppituntien, harrastusten tai muiden aktiviteettien aikataulun luomiseen koko viikolle. Se toimii paikallisesti eikä vaadi rekisteröitymistä tai muita etätoimintoja. Tavoitteena on saada kokemusta Next.js:stä, Typescript:sta, Styled-Components:sta ja IndexedDB:stä.

Мой первый Next.js проект. Дашборд для создания расписания уроков, хобби или любых других занятий на целую неделю. Он работает локально и не требует регистрации или других удаленных действий. Цель - получить опыт работы с Next.js, Typescript, Styled-Components и IndexedDB.

Wilmaaz

First tool which I was used to create design was a Photoshop. When Adobe annonsed XD for interfaces, I switched from a Photoshop to XD. Now, I prefer to work with Figma, it is easy to use, has a plugins also can work in a web browser.

Ensimmäinen työkalu, jota käytin suunnittelussa, oli Photoshop. Kun Adobe ilmoitti XD:stä käyttöliittymistä, vaihdoin Photoshopista XD:hen. Nyt mieluummin työskentelen Figman kanssa, se on helppokäyttöinen, siinä on laajennukset, jotka voivat toimia myös verkkoselaimessa.

Первым инструментом, который я использовал для создания дизайна, был Photoshop. Когда Adobe анонсировала XD для интерфейсов, я переключился с Photoshop на XD. Теперь я предпочитаю работать с Figma, она проста в использовании, имеет плагины, также может работать в веб-браузере.

Sadko had an old design, rather confusing internal navigation and was not flexible for different devices. The task was to redesign the site, bring modernity and set the style of the children's club. Additional forms and gallery to put outside the site (Google Forms / Cloud) to save on hosting and easier to create the necessary forms without a developer. 

Sadikolla oli vanha ulkoasu, melko sekava sisäinen navigointi eikä se ollut joustava eri laitteille. Tehtävänä oli suunnitella sivusto uudelleen, tuoda siihen nykyaikaisuutta ja määrittää lastenkerhon tyyli. Lisälomakkeiden ja gallerian siirtäminen sivuston ulkopuolelle (Google Forms / Cloud) säästää hosting-kustannuksia ja helpottaa tarvittavien lomakkeiden luomista ilman kehittäjää. 

Sadko имел старый дизайн, довольно запутанную, внутреннюю навигацию и не был гибок под различные устройства. Задача была сделать редизайн сайта, привнести современности и задать стиль детского клуба. Дополнительные формы и галерею вынести за пределы сайта (Google Forms / Cloud), чтоб с экономить на хостинге и легче создавать нужные формы без разработчика. В дизайне участвовала 

Sadko

Simple illustrations, icons and logos - are one of most important part of design. I use Adobe Illustrator or Figma to draw all of these, because vector graphic are more responsive and flexible for any screens.

Yksinkertaiset kuvat, kuvakkeet ja logot ovat yksi suunnittelun tärkeimmistä osista. Käytän Adobe Illustratoria tai Figmaa piirtämään nämä kaikki, koska vektorigrafiikka on herkempi ja joustavampi kaikille näytöille.

Простые иллюстрации, иконки и логотипы - одна из важнейших частей дизайна. Я использую Adobe Illustrator или Figma для рисования всего этого, потому что векторная графика более гибкая и адаптивная для любых экранов.

The site was made from scratch by me (design, development, CMS) for a familiar UI/UX designer I met in 2023, where we were trying to launch a startup together. To this day, we sometimes work together remotely in Figma, as it's more fun and more ideas are generated when creating a customized design.

Sivusto tehtiin tyhjästä minun toimestani (suunnittelu, kehitys, CMS) tutulle UI/UX-suunnittelijalle, jonka tapasin vuonna 2023, jolloin yritimme käynnistää startup-yrityksen yhdessä. Vielä tänäkin päivänä teemme joskus etätyötä yhdessä Figmassa, koska se on hauskempaa ja räätälöityä suunnittelua luodessa syntyy enemmän ideoita.

Сайт делался с нуля мной (дизайн, разработка, CMS) для знакомого UI/UX дизайнера с которым я познакомился в 2023 году, где общими усилиями мы с другими участниками пытались запустить стартап. До сих пор мы иногда работаем вместе удаленно в Figma, так как вдвоём веселее и больше идей рождаются при создании индивидуального дизайна.

Letta

 in the Full Stack -kehittäjän RekryKoulutus course and also passed the node.js online course. Four month I  worked in a startup with Firebase. I have experience with headless CMS like 

 Full Stack -kehittäjän RekryKoulutus -kurssilla ja suoritin myös node.js verkkokurssin. Työskentelin neljä kuukautta startupissa Firebasen kanssa. Minulla on kokemusta päättömästä sisällönhallintajärjestelmästä, kuten  

 на курсе Full Stack -kehittäjän RekryKoulutus, а также прошел онлайн-курс node.js. Четыре месяца я работал в стартапе с Firebase. Имею опыт работы с headless CMS, такими как 

 web things in the digital world! Currently, I am focused to find a remote position as a Frontend / UI developer.

 verkkototeutuksia digitaalisessa maailmassa! Olen ensisijaisesti kiinnostunut Frontend / UI-kehittäjän tehtävistä.

Привет! Я Антон и создаю 

 веб-вещи в цифровом мире! В настоящее время я сосредоточен на поиске удаленной должности Frontend / UI разработчика.

Web development is my favorite hobby, I devote a lot of time to learning it and I strive to use my knowledge into practice. It started in 2004, when I saw the first flash sites. Therefore i decided to know, how does it works and try to learn it for itself. Also, I learned the basic of 3D graphics create some more complex animations with Flash. After that, I had a break.

In the era of smartphones, HTML5 and CSS3 replaced Flash and this will be the beginning to come for me as a developer, because I have never written code before in the editor.

In the beginning it was difficult without a GUI as a in graphical softwares, just only typing tags and properties. After a few months changed editor, where was autocompletion and skills began to improve faster. After half a year I was able to create a simple, responsive website with transitions and animations, but with a static data. My friend given me advace to learn pure javascript before try to use any libraries or frameworks. Thanks to Javascript, I have taken a huge step forward into the new world of web interfaces.

I soon, found a great solution for myself with online cources to improve or learn new skills and this pushed me to learning English.

Verkkokehitys on suosikkiharrastukseni, käytän sen oppimiseen paljon aikaa ja pyrin hyödyntämään tietojani käytännössä. Se alkoi vuonna 2004, kun näin ensimmäiset flash-sivustot. Siksi päätin tietää, miten se toimii, ja yrittää oppia sen itse. Opin myös 3D-grafiikan perusteet luomaan monimutkaisempia animaatioita Flashilla. Sen jälkeen minulla oli tauko. 

Älypuhelimien aikakaudella HTML5 ja CSS3 korvasivat Flashin ja tämä tulee olemaan minulle kehittäjänä, koska en ole koskaan aiemmin kirjoittanut koodia editoriin. 

Alussa oli vaikeaa ilman graafista käyttöliittymää graafisissa ohjelmistoissa, vain tagien ja ominaisuuksien kirjoittaminen. Muutaman kuukauden kuluttua vaihtui editori, jossa oli automaattinen täydennys ja taidot alkoivat kehittyä nopeammin. Puolen vuoden jälkeen pystyin luomaan yksinkertaisen, responsiivisen sivuston siirtymillä ja animaatioilla, mutta staattisilla tiedoilla. Ystäväni neuvoi minua opettelemaan puhdasta JavaScriptiä ennen kuin yritän käyttää kirjastoja tai kehyksiä. Javascriptin ansiosta olen ottanut valtavan askeleen eteenpäin verkkokäyttöliittymien uuteen maailmaan. 

Löysin pian itselleni loistavan ratkaisun verkkokursseista parantaakseni tai oppia uusia taitoja, ja tämä sai minut oppimaan englantia.

Веб-разработка — мое любимое хобби, я посвящаю этому много времени и стремлюсь применять свои знания на практике. Это началось в 2004 году, когда я увидел первые флеш-сайты. Поэтому я решил узнать, как это работает, и попытаться изучить это для себя. Кроме того, я изучил основы 3D-графики для создания более сложных анимаций с помощью Flash. После этого у меня был перерыв. 

В эпоху смартфонов HTML5 и CSS3 заменили Flash, и это будет началом для меня как разработчика, потому что я никогда раньше не писал код в редакторе. 

Вначале было сложно без графического интерфейса, как в графических программах, просто вводить теги и свойства. Через несколько месяцев сменил редактор, где было автозаполнение и навыки стали улучшаться быстрее. Через полгода мне удалось создать простой, отзывчивый веб-сайт с переходами и анимацией, но со статическими данными. Мой друг посоветовал мне изучить чистый javascript, прежде чем пытаться использовать какие-либо библиотеки или фреймворки. Благодаря Javascript я сделал огромный шаг вперед в новый мир веб-интерфейсов. 

Вскоре я нашел для себя отличное решение с онлайн-курсами, чтобы улучшить или изучить новые навыки, и это подтолкнуло меня к изучению английского языка.

I've drew isometric illustrations with Adobe Illustration. I first used Gatsby.js with Contantful CMS, then redesigned the landing page using Next.js and headless DatoCMS for easy maintainability.

Olen piirtänyt isometrisiä kuvia Adobe Illustrationilla. Käytin ensin Gatsby.js:ää Contantful CMS:n kanssa, minkä jälkeen suunnittelin aloitussivun uudelleen Next.js:n ja päättömän DatoCMS:n avulla helpon ylläpidon vuoksi.

Небольшая строительная компания из Эспоо.

Созданы изометрические иллюстрации в Adobe Illustration. По началу использовал Gatsby.js с Contantful CMS, затем переделал страницу, используя Next.js и headless DatoCMS для удобной поддержки.

Riofor-Muuraustyöt

The small firm, who give different services and products.

A very simple website, I tried to create the page as a mobile application and then scale to desktop. I designed only two sections with illustrations, after that I didn't develop it.

Pieni yritys, joka tarjoaa erilaisia palveluita ja tuotteita.

Hyvin yksinkertainen verkkosivusto, yritin luoda sivun mobiilisovellukseksi ja skaalata sitten työpöydälle. Suunnittelin vain kaksi kuvitusosaa, sen jälkeen en kehittänyt sitä.

Небольшая фирма, предлагающая различные услуги и товары.

Очень простой веб-сайт, я попытался создать страницу как мобильное приложение, а затем масштабировать до рабочего стола. Оформил только два раздела с иллюстрациями, после не занимался сайтом.

DXTrade

The main skills I am refining for web UI development are HTML, CSS, and JavaScript (Typescript). I have worked with React.js and Vue.js frameworks, as well as using 

Päätaidot, joita hion verkkosovellusten käyttöliittymien kehittämiseen, ovat HTML, CSS, ja JavaScript (Typescript).Olen työskennellyt React.js- ja Vue.js-kehysten kanssa sekä käyttänyt 

Основными навыки которые оттачиваю для разваботки веб UI это -HTML, CSS, Javascript (Typescript). Я работал с фреймворками React.js, Vue.js, а также использовал 

. Работаю с запросами REST и 

The first animation experience I had while learning Adobe Flash, then there was a little experience with 3D graphics and Adobe After Effects. In web development, I have a good knowledge with CSS and preprocessors, as well as SVG.

Ensimmäinen animaatiokokemus, jonka sain opiskellessani Adobe Flashia, sitten oli vähän kokemusta 3D-grafiikasta ja Adobe After Effectsistä. Verkkokehityksessä minulla on hyvät tiedot CSS:stä ja esiprosessoreista sekä SVG:stä.

Первый опыт анимации я получил во время изучения Adobe Flash, затем был небольшой опыт работы с 3D-графикой и Adobe After Effects. В веб-разработке я хорошо разбираюсь в CSS и препроцессорах, а также в SVG.

I used Next.js, as it is possible to create static sites and SEO. Also I have the experience of using DatoCMS and I chose this one as the site content manager. The site was deployed on the Netlify platform.

Käytin Next.js:ää, koska sillä on mahdollista luoda staattisia sivustoja ja SEO:ta. Minulla on myös kokemusta DatoCMS:n käytöstä, ja valitsin tämän sivuston sisällönhallintaohjelmaksi. Sivusto otettiin käyttöön Netlify-alustalla.

Целевая страница для частного такси. 

Использовал Next.js, так как есть возможность создавать статический сайты и SEO. Также у меня имелся опыт использования DatoCMS и я выбрал эту в качестве контент-менеджера сайта. Сайт был развернут на платформе Netlify.

FemluxTaxi

Small beauty salon in the center of Helsinki.

My first html site after flash sites. First experience with CSS, LESS preprocessor and JQuery the most popular javascript library at that time. I used Adobe Photoshop as my design tool.

Pieni kauneushoitola Helsingin keskustassa.

Ensimmäinen html-sivustoni flash-sivustojen jälkeen. Ensimmäinen kokemus CSS:stä, LESS:sta preprosessorista ja JQuery:sta, joka oli tuolloin suosituin javascript-kirjasto. Suunnittelutyökaluna käytin Adobe Photoshopia.

Небольшой салон красоты в центре Хельсинки.

Мой первый html сайт после flash сайтов. Первый опыт работы с CSS, препроцессором LESS и JQuery, самой популярной библиотекой javascript в то время. Инструмент для дизайна я использовал Adobe Photoshop.

Delice Beauty

The project was created for our small, friendly team, which we wanted to realize our ideas and create a startup. The site had to tell about us and what our target audience is and why we are doing this. 

 helped me in the design, and the funny characters were personally her idea.

Projekti luotiin pienelle, ystävälliselle tiimillemme, jonka halusimme toteuttaa ideoitamme ja luoda startupin. Verkkosivuston piti kertoa meistä ja siitä, mikä on kohderyhmämme ja miksi teemme tätä. 

 auttoi minua suunnittelussa, ja hauskat hahmot olivat henkilökohtaisesti hänen ideansa.

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

, а смешные персонажи лично её задумка.

Visimo

Earlier was interested in 3D graphics, therefore I have general understand what is render, shader, texture, polygons, light, shadow and e.g. The Cinema 4D was a tool which I used to learn in parallel Adobe Flash.

Aiemmin olin kiinnostunut 3D-grafiikasta, joten olen yleisesti ymmärtänyt mitä ovat renderöinti, varjostin, tekstuuri, polygonit, valo, varjo ja esim. Cinema 4D oli työkalu, jonka opin rinnakkain Adobe Flashin kanssa.

Раньше интересовался 3D-графикой, поэтому я в целом понимаю, что такое рендеринг, шейдер, текстура, полигоны, свет, тень и т. д. Cinema 4D был инструментом, который я использовал для параллельного изучения Adobe Flash.

 I am currently focused on improving my knowledge of UI development.

 Tällä hetkellä keskityn parantamaan tietämystäni UI kehityksestä.

 В настоящее время я сосредоточен на улучшении своих знаний для UI разработки.

Web development is my passion, I devote a lot of time to learning it and I strive to use my knowledge into practice.

I like to solve the various assignments of the front end. I created an account on 

 and from time to time, I find various tasks, that other developers face, and I try to help them to find the the best solution of them. Or come up with for myself some assigments, to try that or other technologies.

 on the internet, I was inspired that web-design can be not so borinng and more modern that at the time. I decided to find out how it works and attempt to learn this for myself. I started with programms like 

, since there was a need for flexible and responsive web interfaces on the different devices.

At the first it was hard without a graphical interface, as in common programs, and elemental things, which for me seems right now easy was given to me hard. After some time I was able to create a simple web page 

, but it was static andt it was my first victory.

After several static sites, I wanted to add more dynamics and my friend advised me to spend more time learning 

 before I start using libraries in the same language.

In mid-2023, I decided to try my hand at mobile app development to expand my knowledge of UI. I tried 

 as a platform for cross-platform solutions. I found some similarities with 

 in terms of creating the visual aspects. However, there are so many different widgets and properties, which left me with mixed feelings. I also tried Android development using 

 (not Compose). Here, XML, which is closer to native web, didn't seem as cumbersome and overloaded as the widgets in

. I didn't dive deeply into the languages themselves, as my goal was simply to get acquainted with mobile development and building UIs on this platform. In the end, it was interesting and intriguing, but I returned to web development due to its greater versatility and prevalence.

I am currently looking for new and interesting positions in the IT industry. I have a good knowledge of graphics editors, I write code and I using 

Verkkokehitys on intohimoni, käytän paljon aikaa sen oppimiseen ja pyrin hyödyntämään tietojani käytännössä.

Tykkään ratkaista erilaisia front end tehtäviä. Tein tilin 

-palveluun ja ajoittain löydän erilaisia tehtäviä, joita muut kehittäjät kohtaavat ja yritän auttaa heitä löytämään niistä parhaan ratkaisun. Tai keksiä itselleni tehtäviä kokeillakseni sitä tai muita tekniikoita.

Tämä alkoi, kun vuonna 2003 törmäsin Internetissä osoitteeseen 

, inspiroiduin siitä, että web-suunnittelu ei voi olla niin tylsää ja nykyaikaisempaa kuin tuolloin. Päätin selvittää, miten se toimii, ja yrittää oppia tämän itse. Aloitin ohjelmilla kuten 

:in, koska tarvitaan joustavia ja responsiivisia web-interfece:ja eri laitteissa.

Aluksi se oli vaikeaa ilman graafista käyttöliittymää, kuten tavallisissa ohjelmissa, ja alkeellisia asioita, jotka minusta nyt tuntuu helpolta, minulle annettiin vaikeaa. Jonkin ajan kuluttua pystyin luomaan yksinkertaisen web-sivun 

, mutta se oli staattinen ja se oli ensimmäinen voittoni.

Useiden staattisten sivustojen jälkeen halusin lisätä dynamiikkaa, ja ystäväni neuvoi minua käyttämään enemmän aikaa 

:in oppimiseen ennen kuin aloitan kirjastojen käytön samalla kielellä.

Vuoden 2023 puolivälissä päätin kokeilla mobiilisovellusten kehittämistä laajentaakseni tietämystäni käyttöliittymistä. Kokeilin 

alustana monialustaratkaisuille. Löysin joitakin yhtäläisyyksiä 

 kanssa visuaalisen osan luomisessa. Kuitenkin erilaisten widgettien ja ominaisuuksien määrä jätti minulle ristiriitaisia tunteita. Kokeilin myös Android-kehitystä 

 (ei Composea). Tässä XML, joka on lähempänä natiiviverkkoa, ei tuntunut yhtä kömpelöltä ja ylikuormitetulta kuin 

 widgetit. En syventynyt itse kieliin kovin syvälle, sillä tavoitteeni oli vain tutustua mobiilikehitykseen ja käyttöliittymien rakentamiseen tällä alustalla. Lopulta se oli mielenkiintoista ja uteliaisuutta herättävää, mutta palasin verkkokehitykseen sen suuremman monipuolisuuden ja yleisyyden vuoksi.

Etsin parhaillaan uusia ja mielenkiintoisia tehtäviä IT-alalta. Minulla on hyvät tiedot grafiikkaeditoreista, kirjoitan koodia ja käytän 

Веб-разработка — моя страсть, я посвящаю этому много времени и стараюсь применять свои знания на практике.

Мне нравится решать различные задачи на front end-е. Я создал учетную запись на 

 и время от времени нахожу различные задачи с которыми столкнулись другие разработчики, и стараюсь им помочь в нахождении оптимального варианта их решения. Или придумываю сам себе задачи, чтоб опробовать ту или иную технологию.

Всё начало с того, что в 2003 году я наткнулся в интернете на сайт 

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

, а также немного 3D-графики.

Позже, в эпоху смартфонов 

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

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

, он был статическим, однако это была моя первая победа.

После нескольких таких статический сайтов, захотелось больше динамики и мой друг посоветовал мне потратить чуть больше времени на изучить 

, прежде чем использовать различные библиотеки на этом же языке.

В середине 2023 году я решил себя попробовать в разработке мобильных приложений, чтобы расширить свои познания в UI. Попробовал 

, как платформу для кроссплатформенных решений. Нашел некую схожесть с 

-ом по части создания визуальной составляющей. Однако очень много различных виджитов и свойств, что оставило смешанное чувство. Так же попробовал Android разработку на 

 (не Compose). Тут XML что ближе нативному вэб, показался не таким уж громоздким и перегруженным как виджиты во 

. В сами языки не погружался глубоко, так как преследовал цель просто познакомится с мобильной разработкой и постройкой на этой платформе UI. В итоге, было интересно, любопытно, однако вернулся в вэб из-за большей универсальности и распространенности.

Сейчас ищу новые и интересные должности в ИТ-индустрии. Я хорошо разбираюсь в графических редакторах, программирую, в качестве хранилища для моих проектов использую

 verkkototeutuksia digitaalisessa maailmassa!

 веб-вещи в цифровом мире!

🚀 Web / UI / front-end-kehittäjän portfolio

Hei! Olen Anton ja luon yksinkertaisia, selkeitä ja moderneja verkkototeutuksia digitaalisessa maailmassa! Tällä hetkellä keskityn parantamaan tietämystäni UI kehityksestä.