Introduction

ကျွန်တော်တို့ web development နှင့် programming နယ်ပယ်မှာ လုပ်ငန်းခွင်ဝင်တော့မယ်ဆိုရင် challenge တခု (သို့မဟုတ်) ကိုယ့်ကိုကိုယ်ဆန်းစစ်စရာတခု ရှိလာတတ်ပါတယ်။ အဲ့တာကတော့ ကျွန်တော်တို့ လုပ်ကိုင်မယ့်အပိုင်း နဲ့သက်ဆိုင်တဲ့ skill, experience နှင့် project တွေကို ကောင်းကောင်းမွန်မွန်ချပြနိုင်မယ့် portfolio တခု ရှိပြီလား ဆိုတာပါဘဲ။ ယနေ့ခေတ်လို Digital era မှာ ကိုယ့်ရဲ့ businessကို websiteတွေ၊ digital platform တွေမှာ promote လုပ်လာကြပါပြီ။ ကျွန်တော်တို့ရဲ့ စျေးကွက် နဲ့ scopeကို international အထိ ချဲ့ထွင်လာကြတဲ့အခါမှာ မိမိပေးမယ့် service နဲ့ မိမိရဲ့ အရည်အချင်းဟာ targeted customer တွေရဲ့မျက်လုံးမှာ ကောင်းမွန်စွာ presentation ပြနိုင်ဖို့လိုအပ်လာပါတယ်။ အခုဆိုရင် photographerတွေ graphic designerတွေလည်း ကိုယ်ပိုင် websiteနဲ့ serviceတွေကို promoteလုပ်လာကြပါပြီ။

Challenge

User Interaction
Personal Branding
Search Engine Optimization

Portfolio projectဖြစ်တဲ့အတွက် အရေးအကြီးဆုံး အချက်က ကျွန်တော်တို့ပေးချင်တဲ့ informationကို ထိထိရောက်ရောက် readerဆီပေးနိုင်ရပါမယ်။ မိမိရဲ့ personality နဲ့ brandကိုလည်း ထင်ပေါ်အောင် လုပ်ဆောင်ပေးရင် above average ဖြစ်နေမှာ ဖြစ်ပါတယ်။

Result

Created social recognition
Readily delivered information
Good feedbacks on UX

ဒီ projectကို publishလုပ်တဲ့အခါ localမှာသာမက internationalက professional တွေနဲ့ connectionတွေရရှိခဲ့ပါတယ်။ Education နဲ့ careerဆိုင်ရာ အခွင့်အလမ်းတွေကိုလည်း ရရှိခဲ့ပါတယ်။

Development

ကျွန်တော်က လက်ရှိမှာ front-end developementကို React.js နဲ့လုပ်နေတာကြောင့် အခု portfolioကို React SSR framework တခုဖြစ်တဲ့ Vercelရဲ့ Next JS နဲ့ ရေးဖြစ်ခဲ့ပါတယ်။ ကျွန်တော်က junior levelဖြစ်တာကြောင့် job experience သိပ်မရှိဘဲ personal projectတွေကို အားထားပြီး ကိုယ့်ရဲ့ ideaနဲ့ developmentအပိုင်းကို အလေးပေးချပြချင်တာပါ။ ဒါကြောင့် full-timeဘဲလုပ်လုပ် freelanceဘဲလုပ်လုပ် အဆင်ပြေနိုင်အောင် ကျွန်တော့် portfolio ကို designချပြီး stand outဖြစ်အောင် အတတ်နိုင်ဆုံးစဉ်းစားခဲ့ပါတယ်။ လုပ်ထားတဲ့ personal projectတွေမှာ ကျွန်တော် ဘယ်လိုတွေးခဲ့ပုံ၊ ဘယ်လို techတွေအသုံးပြုခဲ့ပုံ နှင့် design scene ဘယ်လိုရှိခဲ့သလဲ ဆိုတာတွေကို userတွေအနေနဲ့လည်း ဖတ်ရှုအကြံပေးနိုင်အောင် ရည်ရွယ်ထားပါတယ်။

🔸Theming
ယနေ့ခေတ် UI trendတခုဖြစ်တဲ့ Light - Dark modeဟာဆိုရင် websiteတော်တော်များများမှာ ရရှိလို့နေပါပြီ။ Color scheme နှစ်ခုကို ကစားရတာဖြစ်တဲ့အတွက် modeနှစ်ခုစလုံးမှာ contract မျှတဖို့ ဒီProjectမှာ အတတ်နိုင်ဆုံးရေးသားထားပါတယ်။

🔸Case Study
UIUX portfolio တွေနဲ့ developmentပိုင်းဆိုင်ရာ portfolioတွေမှာ case study တွေဟာ အရေးကြီးတဲ့ အပိုင်းမှာပါဝင်နေပါတယ်။ Project တခုပြီးမြောက်အောင် ဘယ်လိုပြင်ဆင်ခဲ့တယ်၊ ဘယ်လို requirementတွေကောက်ခဲ့တယ်၊ ဘယ်လိုနည်းနဲ့ project goal ကို approach လုပ်သလဲဆိုတာကို မိမိ customer ( သို့ ) employerတွေကို ရှင်းလင်းဖော်ပြခြင်းဖြစ်ပါတယ်။ Internationalက developerတွေ ၊ designerတွေ နဲ့ digital marketerတွေက သူတို့ရဲ့ portfolioတွေမှာ ဒီလိုနည်းနဲ့ ကိုယ့်ရဲ့ idea and thinking ကို deliverလုပ်ကြပြီး branding လုပ်ကြပါတယ်။

🔸Branding
Marketing၊ personal development ၊ career development စတဲ့ သင်တန်းတွေ၊ professionalsတွေကနေ Self Branding ၊ Persoanl Branding ဆိုတဲ့ topic တွေကို ကျွန်တော်တို့ကြားဖူးကြမှာပါ။ Quality ဘယ်လောက်ဘဲကောင်းကောင်း branding မလုပ်နိုင်ရင် လိုချင်တဲ့ engagementတွေမရရှိနိုင်ပါဘူး။ ဒီအချက်က Freelancing နဲ့ social organizationတွေနဲ့ ဆက်စပ်ပြီး အပြိုင်အဆိုင် အလုပ်လုပ်ရတော့မယ်ဆိုရင် အရမ်းသိသာတဲ့ အချက်အလက်ဖြစ်ပါတယ်။ ဒါကြောင့် ဒီportfolio ရဲ့ contentတွေမှာ branding experience တချို့ကို ထည့်သွင်းထားပါတယ်။

🔸Content Management
Portfolioတခုမှာ dynamic content (eg: projects , blogs) တွေကို ထည့်ချင်လာပြီဆိုရင် Third Party CMS တခုခုကိုအသုံးပြုခြင်းက အလွယ်ကူဆုံးနည်းလမ်းတခုပါ။ အကယ်၍ Backend ပိုင်းပါ implementလုပ်နိုင်ရင်တော့ project scopeကျယ်ပြီး အကောင်းဆုံးဖြစ်မှာပါ။ ကျွန်တော်ကတော့ ဒီprojectမှာ Sanity.io CMS ကို အသုံးပြုထားပါတယ်။

GitHub Repo - https://github.com/T-N9/tn-next-portfolio

Preparation

Portfolio Research

Front-end developmentအပိုင်းကို specializeလုပ်နေပေမယ့် UIUX အပိုင်းကို အတတ်နိုင်ဆုံးကြိုးစားပြီးလုပ်ကြည့်ပါတယ်။ UIUXကို တစိုက်မတ်မတ် မလေ့လာဖူးတာကြောင့် design inspireဖြစ်အောင် နှင့် စဉ်းစားတတ်လာအောင် ကိုယ်လုပ်ဆောင်နေတဲ့ applicationနဲ့ ပက်သက်ပြီး တခြား developerတွေ designerတွေ ရဲ့ လုပ်ဆောင်ပုံတွေကို လေ့လာပါတယ်။ စု - တု - ပြု ဆိုတဲ့အတိုင်း အချက်အလက်တွေ articleတွေကို စုစည်းဖတ်ရှုခဲ့ပါတယ်။ ရရှိလာတဲ့ အသိသညာ နဲ့ ကျွန်တော့်အနေနဲ့ ဘယ်လိုမျိုး designချရမလဲ၊ တုပ ပြီးလုပ်ဆောင်ရင်လည်း ဘယ်လို ပြန်ပြီးကွဲထွက်ရမလဲဆိုတာ လေ့လာခဲ့ပါတယ်။ နောက်ဆုံးမှာတော့ ကိုယ်ပိုင် ပြုလုပ်ခြင်းအပိုင်းကို စတင်လုပ်ဆောင်ခဲ့ပါတယ်။

What are the techs?

Front-end - React
Stage management - Redux & Context
Routing - React router
Styling - SCSS modules
Content management - Sanity CMS
Icons - CSS.gg icons

React ကိုအဓိကအသုံးပြုထားပြီး stylingအတွက် module structured SCSS, content managementအတွက် Sanityကို အသုံးပြုထားပါတယ်။

Designing

Design prototypeကိုတော့ Figmaကို အသုံးပြုထားတယ်။ Fully prototyping မဟုတ်ဘဲ user interfaceအပိုင်းမှာ အသုံးပြုမည့် colorတွေ၊ illustrationတွေနဲ့ layout တွေကို အကြမ်းအားဖြင့်သာ နေရာချပြီး လုပ်ဆောင်ခဲ့ပါတယ်။ Deviceအများစုမှာလည်း responsiveဖြစ်အောင် ရေးသားထားပါတယ်။ development အစပိုင်းမှာတော့ အတတ်နိုင်ဆုံး simpleဖြစ်ပြီး ရှင်လင်းအောင် လုပ်ဆောင်ခဲ့ပေမယ့် motion objectလေးတွေမပါရင် အမြင်ပျင်းစရာဖြစ်နေလို့ animationလေးတွေကိုလည်း ထည့်သွင်းခဲ့ပါတယ်။ Work pageက animationတွေက customဖြစ်ပြီး တခြား object animationတွေအတွက် Framer motionကို အသုံးပြုထားပါတယ်။

Palette

Cerulean

Oxford Blue

Mercury

Turquoise

Typo

Logo

Conclusion

ကျွန်တော့်ရဲ့ portfolioကို ဝင်ရောက်ကြည့်ရှုတဲ့အခါ လိုအပ်နေတဲ့အပိုင်းတွေ၊ အကြံပေးချင်တာများ ရှိလျှင် ဝေဖန်ပေးစေလိုပါတယ်။ ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ်ခင်ဗျာ။

🔹Thank you

I would like to thank Mr. Jerome Kalumbu who reviewed my portfolio and gave me guidance to improve User Experience of this project. His review process is comprehensible and right on point along with his past experience. Jerome recently launched a book named "Don't start with visuals" and you can also check out for his website review process.

My Portfolio