{"id":1310,"date":"2021-07-26T12:05:55","date_gmt":"2021-07-26T11:05:55","guid":{"rendered":"http:\/\/feren.cz\/?p=1310"},"modified":"2025-07-23T10:38:52","modified_gmt":"2025-07-23T09:38:52","slug":"webbapp-projects","status":"publish","type":"post","link":"https:\/\/feren.cz\/wordpress\/?p=1310","title":{"rendered":"UI\/UX design &#038; web dev."},"content":{"rendered":"<p>Here below, you can find links and brief explanations of the websites I&#8217;ve worked on.<\/p>\n<p data-start=\"0\" data-end=\"308\">For web design, I use Figma, Sketch, and Adobe XD. On the development side, my toolkit includes HTML, CSS, Sass, Bootstrap, JavaScript, and PHP. I also love building custom WordPress templates from scratch (PHP, HTML, CSS, JS). And no, I don\u2019t use any JavaScript frameworks\u2014just in case you were wondering!<\/p>\n<p data-start=\"310\" data-end=\"444\" data-is-last-node=\"\" data-is-only-node=\"\">Outside of web development, I also play around with Python, mostly experimenting and getting familiar with it for typography projects.<\/p>\n<p>Check out my Figma portfolio to see my Design System, Wireframes, and other design work! <strong><a href=\"https:\/\/figmashort.link\/Pkmkd7\">Here&#8217;s the link <\/a><\/strong>\u2014heads up, it might take a moment to load.<\/p>\n<p><strong><a href=\"https:\/\/agrar.k-monitor.hu\/\" target=\"_blank\" rel=\"noopener\">Agr\u00e1rt\u00e1mogat\u00e1sok<\/a><\/strong>, is a website showing a published database of agricultural subsidies, where you can track where public money goes and to whom. UI\/UX design, day-to-day cooperation with the developer team.<\/p>\n<p><strong><a href=\"https:\/\/incongrue.com\/\" target=\"_blank\" rel=\"noopener\">Am\u00e9lie Durand<\/a> <\/strong>is a writer under several pseudonyms. Am\u00e9lie Durand lives in Lorient, works at Radio Bro Gwened, and shares her texts in magazines and books while exploring creative projects under the name Incongrue.<\/p>\n<p><a href=\"https:\/\/anastasiarazvalyaeva.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Anastasia Razvalyaeva<\/strong><\/a>\u00a0is a Budapest-based harpist, educator, and researcher, recognized for her solo and chamber music performances, her contributions to experimental projects, and her leadership in the harp community.<\/p>\n<p><strong><a href=\"https:\/\/www.bluepearlstone.com\/\" target=\"_blank\" rel=\"noopener\">Blue Pearl Stone<\/a><\/strong> a granit and marble trading company. Using: Squarespace, HTML, CSS, UI\/UX.<\/p>\n<p><strong><a href=\"https:\/\/www.eltettek.hu\/#\/\" target=\"_blank\" rel=\"noopener\">Eltett\u00e9k<\/a><\/strong>, is a website with an interactive map of real estate assets owned by the Foundation, UI\/UX design (made with Figma), day-to-day cooperation\u00a0with the developer team.<\/p>\n<p><strong><a href=\"https:\/\/ember.institute\/\" target=\"_blank\" rel=\"noopener\">Ember<\/a> <\/strong>is a landingpage style website. Using: HTML, Php, CSS and JavaScript.<\/p>\n<p><strong><a href=\"https:\/\/figyusz.k-monitor.hu\/\" target=\"_blank\" rel=\"noopener\">Figyusz<\/a>\u00a0<\/strong>is a one-page platform for instant updates from government databases. Users customize alerts by keyword and database. I designed the UI\/UX, and a backend programmer handled the implementation.<\/p>\n<p><strong><a href=\"https:\/\/www.lisapelisson.com\/\" target=\"_blank\" rel=\"noopener\">Lisa Pelisson<\/a><\/strong> a French ceramic artist&#8217;s CMS portfolio website. Using: HTML, Php, CSS, and Kirby CMS, UI\/UX (Figma).<\/p>\n<p><a href=\"https:\/\/mentocsonak.bonjourcava.fr\/\"><strong>Ment\u0151cs\u00f3nak<\/strong><\/a>: I was responsible for the design of the branding, color scheme, logo, and landing page for <em data-start=\"146\" data-end=\"159\">Ment\u0151cs\u00f3nak<\/em> (which means &#8216;Lifeboat&#8217; in English)<\/p>\n<p><a href=\"http:\/\/www.metrumensemble.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Metrum Ensemble<\/strong><\/a> a Hungarian group who plays classical (modern and &#8216;classical&#8217;) music. Using: WordPress, Php, CSS., UI\/UX.<\/p>\n<div class=\"flex-1 overflow-hidden\">\n<div class=\"react-scroll-to-bottom--css-zlmzg-79elbk h-full dark:bg-gray-800\">\n<div class=\"react-scroll-to-bottom--css-zlmzg-1n7m0yu\">\n<div class=\"flex flex-col text-sm dark:bg-gray-800\">\n<div class=\"group w-full text-token-text-primary border-b border-black\/10 dark:border-gray-900\/50 bg-gray-50 dark:bg-[#444654]\">\n<div class=\"flex p-4 gap-4 text-base md:gap-6 md:max-w-2xl lg:max-w-[38rem] xl:max-w-3xl md:py-6 lg:px-0 m-auto\">\n<div class=\"relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]\">\n<div class=\"flex flex-grow flex-col gap-3 max-w-full\">\n<div class=\"min-h-[20px] flex flex-col items-start gap-3 overflow-x-auto whitespace-pre-wrap break-words\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>My <strong><a href=\"https:\/\/github.com\/Klosmi\/html-basics#html-and-css--basics\">GitHub repository<\/a> <\/strong>contains organized notes on HTML, CSS, and JavaScript basics, along with useful tricks. While it&#8217;s a personal project to aid my work, it&#8217;s also a resource for anyone looking to learn or reference these topics.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"WidgetFloaterPanels\" class=\"LTRStyle\" style=\"display: none; text-align: left; direction: ltr; visibility: hidden;\" translate=\"no\">\n<div id=\"WidgetFloater\" style=\"display: none;\">\n<div id=\"WidgetLogoPanel\"><span id=\"WidgetTranslateWithSpan\">TRANSLATE with <img id=\"FloaterLogo\" alt=\"\" \/><\/span> <span id=\"WidgetCloseButton\" title=\"Exit Translation\">x<\/span><\/div>\n<div id=\"LanguageMenuPanel\">\n<div class=\"DDStyle_outer\"><input id=\"LanguageMenu_svid\" style=\"display: none;\" autocomplete=\"on\" name=\"LanguageMenu_svid\" type=\"text\" value=\"en\" \/> <input id=\"LanguageMenu_textid\" style=\"display: none;\" autocomplete=\"on\" name=\"LanguageMenu_textid\" type=\"text\" \/> <span id=\"__LanguageMenu_header\" class=\"DDStyle\" tabindex=\"0\">English<\/span><\/p>\n<div style=\"position: relative; text-align: left; left: 0;\">\n<div style=\"position: absolute; ;left: 0px;\">\n<div id=\"__LanguageMenu_popup\" class=\"DDStyle\" style=\"display: none;\">\n<table id=\"LanguageMenu\" border=\"0\">\n<tbody>\n<tr>\n<td><a tabindex=\"-1\" href=\"#ar\">Arabic<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#he\">Hebrew<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#pl\">Polish<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#bg\">Bulgarian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#hi\">Hindi<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#pt\">Portuguese<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#ca\">Catalan<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#mww\">Hmong Daw<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#ro\">Romanian<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#zh-CHS\">Chinese Simplified<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#hu\">Hungarian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#ru\">Russian<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#zh-CHT\">Chinese Traditional<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#id\">Indonesian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#sk\">Slovak<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#cs\">Czech<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#it\">Italian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#sl\">Slovenian<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#da\">Danish<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#ja\">Japanese<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#es\">Spanish<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#nl\">Dutch<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#tlh\">Klingon<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#sv\">Swedish<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#en\">English<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#ko\">Korean<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#th\">Thai<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#et\">Estonian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#lv\">Latvian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#tr\">Turkish<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#fi\">Finnish<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#lt\">Lithuanian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#uk\">Ukrainian<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#fr\">French<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#ms\">Malay<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#ur\">Urdu<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#de\">German<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#mt\">Maltese<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#vi\">Vietnamese<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#el\">Greek<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#no\">Norwegian<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#cy\">Welsh<\/a><\/td>\n<\/tr>\n<tr>\n<td><a tabindex=\"-1\" href=\"#ht\">Haitian Creole<\/a><\/td>\n<td><a tabindex=\"-1\" href=\"#fa\">Persian<\/a><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><img style=\"height: 7px; width: 17px; border-width: 0px; left: 20px;\" alt=\"\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\n var LanguageMenu; var LanguageMenu_keys=[\"ar\",\"bg\",\"ca\",\"zh-CHS\",\"zh-CHT\",\"cs\",\"da\",\"nl\",\"en\",\"et\",\"fi\",\"fr\",\"de\",\"el\",\"ht\",\"he\",\"hi\",\"mww\",\"hu\",\"id\",\"it\",\"ja\",\"tlh\",\"ko\",\"lv\",\"lt\",\"ms\",\"mt\",\"no\",\"fa\",\"pl\",\"pt\",\"ro\",\"ru\",\"sk\",\"sl\",\"es\",\"sv\",\"th\",\"tr\",\"uk\",\"ur\",\"vi\",\"cy\"]; var LanguageMenu_values=[\"Arabic\",\"Bulgarian\",\"Catalan\",\"Chinese Simplified\",\"Chinese Traditional\",\"Czech\",\"Danish\",\"Dutch\",\"English\",\"Estonian\",\"Finnish\",\"French\",\"German\",\"Greek\",\"Haitian Creole\",\"Hebrew\",\"Hindi\",\"Hmong Daw\",\"Hungarian\",\"Indonesian\",\"Italian\",\"Japanese\",\"Klingon\",\"Korean\",\"Latvian\",\"Lithuanian\",\"Malay\",\"Maltese\",\"Norwegian\",\"Persian\",\"Polish\",\"Portuguese\",\"Romanian\",\"Russian\",\"Slovak\",\"Slovenian\",\"Spanish\",\"Swedish\",\"Thai\",\"Turkish\",\"Ukrainian\",\"Urdu\",\"Vietnamese\",\"Welsh\"]; var LanguageMenu_callback=function(){ }; var LanguageMenu_popupid='__LanguageMenu_popup';<br \/>\n\/\/ ]]><\/script>&#8220;&gt;&#8221;&gt;<\/p>\n<\/div>\n<div id=\"EmbedNoticeDiv\"><span id=\"EmbedNoticeSpan\">Enable collaborative features and customize widget: <a href=\"http:\/\/www.bing.com\/widget\/translator\" target=\"_blank\" rel=\"noopener\">Bing Webmaster Portal<\/a><\/span><\/div>\n<div id=\"EmbedFooterDiv\"><span id=\"EmbedBackSpan\"><a title=\"Back To Translation\">Back<\/a><\/span><\/div>\n<\/div>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\n var intervalId = setInterval(function () { if (MtPopUpList) { LanguageMenu = new MtPopUpList(); var langMenu = document.getElementById(LanguageMenu_popupid); var origLangDiv = document.createElement(\"div\"); origLangDiv.id = \"OriginalLanguageDiv\"; origLangDiv.innerHTML = \"<span id='OriginalTextSpan'>ORIGINAL: <\/span><span id='OriginalLanguageSpan'><\/span>\"; langMenu.appendChild(origLangDiv); LanguageMenu.Init('LanguageMenu', LanguageMenu_keys, LanguageMenu_values, LanguageMenu_callback, LanguageMenu_popupid); window[\"LanguageMenu\"] = LanguageMenu; clearInterval(intervalId); } }, 1);<br \/>\n\/\/ ]]><\/script><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here below, you can find links and brief explanations of the websites I&#8217;ve worked on. For web design, I use Figma, Sketch, and Adobe XD. On the development side, my toolkit includes HTML, CSS, Sass, Bootstrap, JavaScript, and PHP. I also love building custom WordPress templates from scratch (PHP, HTML, CSS, JS). And no, I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1386,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[109,110,114,115,112,113,108,111],"class_list":["post-1310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-front-end","tag-full-stack","tag-html","tag-jsavascript","tag-ror","tag-sass","tag-web-application","tag-web-deelopment"],"_links":{"self":[{"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1310"}],"version-history":[{"count":57,"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1310\/revisions"}],"predecessor-version":[{"id":1473,"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1310\/revisions\/1473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=\/wp\/v2\/media\/1386"}],"wp:attachment":[{"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/feren.cz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}