Лична веб-страница за портфолио
Webflow портфолио развиено во самостојно хостирана CMS платформа
Информации за проектот
- Клиент
- Личен проект
- Индустрија
- Веб-дизајн и развој
- Земја
- Северна Македонија
- Вид на бизнис
- Лично портфолио
- Платформа
- Webflow / самостојно хостирање
- CMS
- Pages CMS
- Времетраење
- Тековен проект
- Веб-страница
- https://igormihajlovski.com/
Преглед на проектот
Моето лично портфолио започна како веб-страница дизајнирана во Figma и изработена во Webflow за да ги претстави мојата работа, услугите и искуството како Webflow програмер.
Со развојот на портфолиото сакав поголема контрола врз кодот, хостирањето, управувањето со содржините и идниот развој, а да ги зачувам постојниот дизајн и респонзивното искуство. Затоа Webflow веб-страницата беше извезена и префрлена на Hostinger, каде што стана основа за развојна околина што постепено ја приспособував.
Подоцна веб-страницата беше проширена со Eleventy како генератор на статички страници, повеќекратно употребливи Nunjucks шаблони, проектни содржини во Markdown и Pages CMS за управување со студиите на случај без рачно уредување HTML. Git и GitHub беа воведени за контрола на верзии, а GitHub Actions сега автоматски ја генерира веб-страницата со Eleventy и ги поставува продукциските датотеки на Hostinger откако промените во содржината или кодот ќе бидат евидентирани во GitHub.
Резултатот е самостојно хостирана платформа за портфолио што постојано се развива и ја обединува визуелната основа создадена во Figma и Webflow со лесен CMS, структурирана содржина, контрола на верзии и автоматизиран процес за поставување.
Предизвикот
Главниот предизвик беше постојното Webflow портфолио да се насочи кон пофлексибилна и независно управувана поставеност без веб-страницата да се изработува од почеток и без да се нарушат воспоставениот дизајн, респонзивното однесување и интеракциите.
Првичната веб-страница зависеше од Webflow за хостирањето и структурата на содржините. По извезувањето, постојните HTML, CSS, JavaScript, анимации, контактниот формулар и респонзивното однесување мораа да продолжат правилно да работат во самостојно хостирана околина. Истовремено, на портфолиото му беше потребен практичен начин за додавање и одржување студии на случај без рачно да се создаваат и ажурираат HTML страници за секој нов проект.
Друг предизвик беше создавањето едноставен процес за објавување. Промените на содржините направени преку CMS требаше да се зачуваат во GitHub, Eleventy да ги претвори во страници подготвени за продукција и тие автоматски да се постават на Hostinger без рачна изработка и прикачување датотеки по секое ажурирање.
Затоа решението мораше да го зачува постојниот кориснички интерфејс, а постепено да воведе структурирана содржина, повеќекратно употребливи шаблони, контрола на верзии, уредување преку CMS, безбедна обработка на формулари и сигурно автоматизирано поставување — без непотребен backend или зависност од платен CMS.
Цели на проектот
- Да се зачуваат оригиналниот Webflow дизајн, респонзивното однесување и корисничкото искуство по миграцијата.
- Портфолиото да се префрли во самостојно хостирана околина со поголема контрола врз хостирањето, кодот и идниот развој.
- Да се создаде структуриран и одржлив систем за објавување проекти и студии на случај во портфолиото.
- Да се воведе лесен CMS што овозможува управување со содржините без рачно уредување HTML датотеки.
- Со повеќекратно употребливи шаблони и структурирана содржина сите страници со студии на случај да останат визуелно и технички доследни.
- Да се воспостават контрола на верзии преку Git и автоматизиран процес за изработка и поставување.
- Архитектурата да остане лесна и економична без непотребен backend или зависност од платен CMS.
Мојата улога
Улоги
- UI/UX дизајнер
- Webflow програмер
- Frontend програмер
- CMS програмер
- Поставување и автоматизација
Одговорности
- Ги дизајнирав оригиналниот интерфејс и корисничкото искуство во Figma.
- Ја изработив оригиналната респонзивна веб-страница во Webflow.
- Ги спроведов извозот од Webflow и миграцијата во самостојно хостирана околина на Hostinger.
- Ги зачував и проширив постојните HTML, CSS, JavaScript, анимации и респонзивното однесување.
- Го имплементирав и одржував PHP контактниот формулар заштитен со Cloudflare Turnstile.
- Ја осмислив архитектурата со Eleventy и Nunjucks за повеќекратно употребливи страници со студии на случај.
- Имплементирав проектни содржини во Markdown и Pages CMS за управување со содржините.
- Ги конфигурирав Git и GitHub за контрола на изворниот код и верзиите на содржините.
- Го изработив процесот во GitHub Actions за автоматска Eleventy изработка и поставување преку FTP на Hostinger.
- Го одржувам и постојано го проширувам портфолиото со нови проекти, студии на случај и функционалности.
Мојот пристап
На проектот му пристапив како на постепен развој, а не како на целосна повторна изработка. Постојното Webflow портфолио веќе имаше препознатлив визуелен идентитет, респонзивна структура и функционални интеракции, па приоритет беше да ја зачувам таа основа додека постепено добивам поголема контрола врз веб-страницата и развојниот процес.
Првиот чекор беше да ја извезам Webflow веб-страницата и да воспоставам чиста локална развојна структура. Наместо да го заменам постојниот кориснички интерфејс, ги задржав генерираните HTML, CSS, JavaScript, ресурси и интеракции, а потоа ги приспособив и проширив каде што беше потребно за независно хостирање.
Следната фаза беше насочена кон полесно одржување и проширување на портфолиото. Eleventy беше воведен како лесен генератор на статички страници, при што повеќекратно употребливите Nunjucks шаблони и содржината во Markdown ги одвоија проектните информации од приказот. Потоа Pages CMS беше додаден како слој за уредување, овозможувајќи студиите на случај да се создаваат и ажурираат преку визуелен интерфејс, додека содржината останува директно во GitHub складиштето.
На крајот го автоматизирав процесот за објавување. Промените евидентирани во Git и испратени на главната гранка во GitHub го активираат GitHub Actions, кој ги инсталира зависностите, ја генерира веб-страницата со Eleventy и ги поставува продукциските датотеки на Hostinger преку посебна FTP сметка ограничена на јавниот директориум на портфолиото.
Овој постепен пристап му овозможи на портфолиото да премине од веб-страница хостирана на Webflow во независно управувана платформа без да се жртвува оригиналниот дизајн или да се воведе непотребна инфраструктура.
Процес на дизајн
Процесот на дизајнирање започна во Figma, каде што ги создадов визуелната насока, структурата на страниците, типографијата, растојанијата, системот на бои и целокупното корисничко искуство за портфолиото. Целта беше чиста и современа презентација што го задржува фокусот на мојата работа, а истовремено одржува препознатлив личен идентитет.
Интерфејсот беше осмислен околу јасна хиерархија на содржините, силно претставување на проектите и едноставна навигација меѓу услугите, проектите и контактните информации. Беа воспоставени повеќекратно употребливи визуелни обрасци за доследност меѓу секциите и големините на екраните.
Откако беше утврдена насоката на дизајнот, го пресоздадов интерфејсот во Webflow и го доработив директно во прелистувачот. Респонзивните распореди беа развивани и тестирани на десктоп, таблет и мобилни точки на прекршување, со посебно внимание на типографијата, растојанијата, текот на содржината и интерактивните елементи.
Движењето и интеракциите беа користени селективно за искуството да биде попривлечно, без да го одвлекуваат вниманието од содржината. Добиената Webflow имплементација стана визуелната основа што беше зачувана во подоцнежната миграција и техничкиот развој на веб-страницата.
Процес на развој
Развојот започна со оригиналната Webflow имплементација, во која одобрениот Figma дизајн беше преточен во респонзивна веб-страница преку системот за распоред на Webflow, заедно со приспособени HTML, CSS и JavaScript каде што беше потребна дополнителна контрола.
Со развојот на проектот, Webflow веб-страницата беше извезена и префрлена во локална развојна околина. Постојната структура на корисничкиот интерфејс, стиловите, JavaScript, сликите, анимациите и другите ресурси беа зачувани, а проектот беше реорганизиран за независен развој и поставување. Потоа веб-страницата беше префрлена на Hostinger, со што се отстрани зависноста од Webflow хостирањето, а се задржа воспоставеното корисничко искуство.
Самостојно хостираната верзија беше дополнително проширена со приспособени функционалности. Контактниот формулар користи PHP крајна точка за серверска обработка и Cloudflare Turnstile за заштита од ботови, додека постојните интерактивни компоненти и респонзивното однесување беа зачувани и доработени каде што беше потребно.
Во следната значајна развојна фаза беше воведен Eleventy како генератор на статички страници за студиите на случај во портфолиото. Проектната содржина беше одвоена од приказот и зачувана како структуриран Markdown, додека повеќекратно употребливите Nunjucks шаблони генерираат доследни страници. Pages CMS беше поврзан со GitHub складиштето за да обезбеди визуелен интерфејс за создавање и уредување содржини без рачно менување Markdown или HTML датотеки.
Git и GitHub обезбедуваат контрола на верзии и за кодот на веб-страницата и за содржината управувана преку CMS. Потоа процесот за објавување беше автоматизиран со GitHub Actions: секоја релевантна промена испратена на главната гранка ја активира инсталацијата на зависностите и продукциската Eleventy изработка, по што генерираните датотеки од _dist автоматски се поставуваат во директориумот public_html на Hostinger преку посебна FTP сметка.
Овој развоен процес им овозможува на идните студии на случај и подобрувања на веб-страницата да поминат од промена во содржината или кодот до активната продукциска веб-страница преку доследен, верзиониран и во голема мера автоматизиран процес.
Технолошки стек
Развој
- HTML5
- CSS3
- JavaScript
- PHP
- Eleventy (11ty)
- Nunjucks
- Markdown
CMS
- Pages CMS
Библиотеки
- jQuery
- GSAP
- WebFont Loader
Интеграции
- Cloudflare Turnstile
- GitHub Actions
- FTP Deployment
Алатки
- Figma
- Webflow
- Visual Studio Code
- Git
- GitHub
- Hostinger
- Google Search Console
- Google Analytics
- Microsoft Clarity
Интеграции со трети страни
Cloudflare Turnstile
Заштита на контактниот формулар на портфолиото од ботови и спам.
Посетете ја веб-страницатаGitHub
Контрола на изворниот код и хостирање на складиштето со кодот на веб-страницата и содржините управувани преку CMS.
Посетете ја веб-страницатаGitHub Actions
Автоматизирана продукциска изработка и поставување откако промените ќе бидат испратени на главната гранка.
Посетете ја веб-страницатаHostinger
Продукциско хостирање, управување со доменот, PHP обработка и крајна дестинација за поставување преку FTP.
Посетете ја веб-страницатаGoogle Search Console
Следење на перформансите во пребарувачите, видливоста при индексирање и SEO дијагностика.
Посетете ја веб-страницатаGoogle Analytics
Аналитика за посетеноста на веб-страницата и однесувањето на посетителите.
Посетете ја веб-страницатаMicrosoft Clarity
Аналитика на однесувањето на корисниците преку снимки од сесии и топлински мапи за откривање проблеми со употребливоста и подобрување на корисничкото искуство.
Посетете ја веб-страницатаКлучни функционалности
- Респонзивен кориснички интерфејс заснован на Webflow, зачуван и приспособен за независно хостирање.
- Самостојно хостирана продукциска веб-страница со целосна контрола врз кодот и хостинг-околината.
- Генерирање статички страници со Eleventy за проектите и студиите на случај.
- Повеќекратно употребливи Nunjucks шаблони за доследен распоред на студиите на случај.
- Структурирана содржина во Markdown, одвоена од приказот и шаблоните.
- Интерфејс во Pages CMS за создавање и уредување студии на случај без рачно менување на кодот.
- Контрола на верзии со Git и GitHub за кодот и содржината управувана преку CMS.
- Автоматизиран процес во GitHub Actions што ја генерира продукциската верзија и ја поставува на Hostinger.
- Контактен формулар со PHP, заштитен од спам и ботови со Cloudflare Turnstile.
- Интеграција со Microsoft Clarity за топлински мапи, снимки од сесии и анализа на однесувањето на корисниците.
- Поставеност за SEO и аналитика за следење на видливоста во пребарувачите, посетеноста и перформансите на веб-страницата.
- Проширлив систем за студии на случај, осмислен за постојано додавање нови проекти во портфолиото.
Испорачани решенија
- Респонзивна веб-страница за портфолио со сопствен дизајн
- Самостојно хостирана веб-страница подготвена за продукција на Hostinger
- Архитектура за генерирање статички страници со Eleventy
- Систем со повеќекратно употребливи Nunjucks шаблони за студии на случај
- Структурирана проектна содржина во Markdown
- Интерфејс за управување со содржини во Pages CMS
- GitHub складиште и верзиониран развоен процес
- Автоматизиран процес во GitHub Actions за изработка и поставување
- Безбеден PHP контактен формулар заштитен со Cloudflare Turnstile
- Интеграција за аналитика и следење на однесувањето на корисниците
- Структура на проекти и студии на случај подготвена за SEO
- Приспособлив систем за портфолио за објавување идни проекти
Резултати
Проектот се разви од портфолио хостирано на Webflow во независно управувана, самостојно хостирана платформа, а ги зачува оригиналниот визуелен дизајн, респонзивното однесување и корисничкото искуство.
Преместувањето на веб-страницата на Hostinger овозможи поголема контрола врз продукциската околина и ја отстрани зависноста на портфолиото од Webflow хостирањето. Постојниот кориснички интерфејс можеше да продолжи независно да се развива, а да ја задржи дизајнерската основа првично создадена во Figma и Webflow.
Воведувањето на Eleventy, повеќекратно употребливите Nunjucks шаблони и структурираната содржина во Markdown го променија начинот на управување со проектите во портфолиото. Новите студии на случај сега може да се создаваат преку Pages CMS наместо рачно да се изработуваат посебни HTML страници, а сите проекти ја следат истата повеќекратно употреблива структура и презентација.
GitHub сега е централниот извор на вистината и за кодот и за содржината управувана преку CMS. По испраќањето на промените на главната гранка, GitHub Actions автоматски ја генерира продукциската верзија и ја поставува на Hostinger. Со тоа значително се поедноставува процесот за објавување и се намалува повторливата работа околу рачното поставување.
Портфолиото го задржува и безбедниот серверски процес за контакт со заштита преку Cloudflare Turnstile, а вклучува аналитика и следење на однесувањето на корисниците за поддршка на идните подобрувања.
Најважно, веб-страницата повеќе не е само завршена страница за портфолио. Таа стана одржлива и проширлива платформа што може да продолжи да се развива со додавањето нови проекти, студии на случај, услуги и функционалности.
Научени лекции
Овој проект ја потврди вредноста на постепеното развивање постојна веб-страница наместо нејзина повторна изработка само затоа што треба да се промени основната архитектура. Оригиналниот Webflow интерфејс обезбеди силна визуелна основа, а неговото зачувување овозможи техничката архитектура да се развива без непотребно повторување на веќе успешната работа.
Преминувањето од Webflow хостирање ја покажа и важноста на раздвојувањето на дизајнот, содржината и поставувањето. Откако веб-страницата беше самостојно хостирана, корисничкиот интерфејс можеше во голема мера да остане непроменет, додека Eleventy, Nunjucks и Markdown беа воведени токму таму каде што носеа вредност — повеќекратно употребливи шаблони и структурирани студии на случај.
Изградбата на CMS процесот истакна уште една важна поука: системот за управување со содржини не мора да бара традиционална база на податоци или backend. За портфолио со релативно структурирана содржина што не се менува често, Markdown зачуван во GitHub и поврзан со Pages CMS е лесно решение со вградена историја на верзии и целосна сопственост врз содржината.
Автоматизацијата на поставувањето беше еднакво важна. Рачното прикачување е изводливо на почеток, но брзо станува неефикасно кога содржината се ажурира преку CMS. Поврзувањето на Pages CMS, GitHub, GitHub Actions, Eleventy и Hostinger создаде многу појасен процес за објавување и го намали бројот на рачни чекори потребни за една промена да стигне во продукција.
Проектот ја потврди и важноста технологијата да се избира според конкретниот проблем, наместо да се додава сложеност сама за себе. Тековната архитектура е намерно лесна, а сепак обезбедува управување со содржини, повеќекратно употребливи шаблони, контрола на верзии, автоматизирано поставување, безбедност, аналитика и простор за идно проширување.
Бидејќи портфолиото е тековен проект, архитектурата може да продолжи да се развива со појавата на нови барања без да биде потребна уште една целосна повторна изработка.
