Time to reveal my new portfolio
Features
- Markdown based CMS
- Rich Text Editor
- Fully Accessible
- Light/Dark Mode
- Syntax Highlighting
Tech Stack
| Motivation | Stack |
|---|---|
| Design | Spot Light UI |
| Frontend | Next JS |
| Styling | Tailwind |
Infrastructure
| Motivation | Stack |
|---|---|
| Deployment | Vercel |
| Domain | Name Cheap |
| CMS | Tina |
Website Address
Light House Score
Portfolio အသစ်လုပ်ဖို့အတွက်လွန်ခဲ့တဲ့ ၆လကတည်းက စဉ်းစားထားပေမဲ့ မေမေ Breast Cancer ဖြစ်တော့သေချာမလုပ်ဖြစ်လိုက်ဘူး။
အရင်က Nuxt နဲ့ပဲ Develop ဖို့စိတ်ကူးထားပေမဲ့လို့ SSG ကလက်ခံလောက်တဲ့အထိမကောင်းသေးတာကြောင့် Next ကိုပဲရွေးဖြစ်လိုက်ပါတယ်။
Next ကိုစကြည့်တော့ Version အသစ်ကြောင့် Overwhelming ဖြစ်သွားပေမဲ့ Next ရဲ့ Latest feature ဖြစ်တဲ့ App Directory ကိုပဲသုံးဖြစ်သွားပါတယ်။ သူ့ရဲ့ Mechanism က PHP နဲ့နီးစပ်သွားတဲ့အတွက်ကြောင့် SOC အရ Layout တွေခွဲတဲ့အခါမှာလူနားလည်တဲ့ Convention တွေကိုသုံးနိုင်တာကြောင့်မို့လို့ ပိုပြီးတော့ Convenient ဖြစ်တာကြောင့်မို့လို့သုံးဖြစ်သွားပါတယ်။
React 18 မှာ Server Side Component တွေကို Proposal မှာထားပေမဲ့ Next က Support ထားတာကြောင့်ထည့်သုံးထားပါတယ်။။ ကျွန်တော်သဘောကျလို့ပါ။ SSC တွေက Natural ဆန်တယ်ပြောရမယ်။ Server Side Style ကိုလုံးဝခံစားရတယ်။ ကျွန်တော်က Laravel သမားမို့လေ။ မလိုအပ်ဘဲနဲ့ Side Effect တွေမသုံးရတာက အကောင်းဆုံးပါ။
Rendering ပိုင်းကိုကြည့်ရင် အရင် Pages Directory ထဲမှာထက်စာရင်ပိုမြန်တယ်ပြောရမယ်။ ဘာလို့ဆို Server Components တွေကို Client Side မှာ Render မချရတော့တာကြောင့်မို့လို့ တော်တော်သဘောကျရပါတယ်။ Partial Hydrated တဲ့အခါမှာလည်း မြန်တာကြောင့်မို့လို့တော်တော်လေးမိုက်ပါတယ်။ Partial Hydrated တာက Server Components တွေထဲ Client Component ထည့်သုံးတဲ့အခါကိုပြောတာပါ။
Styling အတွက်ကတော့ Tailwind CSS ကိုပဲသုံးဖြစ်ပါတယ်။ Bootstrap နဲ့ Project Domain နဲ့မကိုက်တာကြောင့်ပါ။ Tailwind Class တွေကိုစီရေးတဲ့ပုံစံကိုပဲသုံးပါတယ်။ CSS in JS ကိုသဘောမကျတာကြောင့်။ မျက်စိလည်းနောက်တယ်။ JSX ကမျက်စိနောက်ရတဲ့အထဲ။
Tailwind ကိုသုံးတဲ့အခါမှာ Class တွေကိုဘယ်လိုစီမလဲဆိုတာက အရေးကြီးပါတယ်။ ဒါ့ကြောင့် Utility Class တွေကိုအရင်ထားပြီးတော့ Decorations Class တွေကိုနောက်မှာထားတဲ့နည်းကိုသုံးထားပါတယ်။ ဒါမှပိုပြီးတော့ Natural ဖြစ်သွားမှာဖြစ်တာကြောင့်ပါ။
ကိုယ်က Blogging ရတာလည်းသဘောကျတာကြောင့်မို့ Blog လေးပါတစ်ခါတည်းထည့်ပြီး Develop ထားပါတယ်။ Blog အတွက် Data တွေကို Database ထဲမှာမထားဘဲနဲ့ Markdown File တွေအနေနဲ့ထားပါတယ်။ Database Cost ကိုလျှော့ချင်တာကြောင့်ပါ။ မွဲနေတာကြောင့်ကောပေါ့။
Markdown Based ဖြစ်တာကြောင့်မို့လို့ Post တင်တဲ့အခါမျိုးမှာလွယ်အောင်လုပ်ဖို့စဉ်းစားရပါတယ်။ ဒီ့အတွက်ကြောင့် Tina CMS ကိုသုံးထားပါတယ်။ သူက Forestry ကထုတ်ထားတဲ့ Open Source CMS ပါ။ Documentation ကလည်းရှယ်ကောင်းပြီးတော့ Facility ကလည်းမိုက်တယ်။ ဒါ့အပြင် External Service Integration ပိုင်းမှာလည်းလွယ်တာကြောင့်ပဲရွေးဖြစ်သွားပါတယ်။
Blog Content တွေကို Generate ဖို့အတွက် File တွေကို Read ရတာကြောင့် နှေးလာတာမျိုးဖြစ်ခဲ့ပါတယ်။ ဘာဖြစ်လို့လဲစစ်လိုက်တော့ I/O မှာ Blocking ဖြစ်နေတာကိုတွေ့ရပါတယ်။ ပထမဆူံးကိုယ်က Synchronous ကိုသုံးမိတာကြောင့်။ အကုန်လုံးကို Asynchronous ဖြစ်အောင်ပြန်ပြီးတော့ Refactor ခါမှ Performance ကလက်ခံနိုင်တဲ့အနေအထားပြန်ရောက်လာပါတယ်။
Project ကိုအရင်က Closed Source အနေနဲ့ထားမလို့စဉ်းစားထားပေမဲ့ React ကို ၃နှစ်၊ ၄နှစ်လောက်လုပ်ထားပြီးတော့ Quality ကောင်းတဲ့ပုံစံမျိုးကိုမတွေ့ရတာကြောင့် ဒီလိုရေးရတယ်ဆိုတာပြချင်တာကြောင့် Open Source ပေးထားပါတယ်။
GitHub Repository
https://github.com/amm834/aungmyatmoe.me
Contribute ချင်ရင် ဒီမှာ Contribute လို့ရပါတယ်။ Warmly Welcome ပါ။
Proposal
Searching နဲ့ Cloudinary ကတော့ Proposal အဆင့်မှာရှိနေပါတယ်။
Learning Resources
ကျွန်တော်က Next ကိုကြည့်တာ ၃ပတ်တောင်မပြည့်သေးပါဘူး။ ဒါပေမဲ့လည်း လွယ်လွယ်ကူကူ Develop ထားပါတယ်။ ဘာလို့ဆို Next ကလွယ်တာရဲ့ Next Level ကိုရောက်နေလို့ပါ။
ဒီမှာကျွန်တော့်ရဲ့ Learning Resources တွေပါ။