Myanmar Software Engineers

A community platform connecting Myanmar's software engineering talent.

mmswe.com

---

About

MMSWE is an open-source platform where Myanmar software engineers can showcase their profiles, share technical articles, and connect with the community. Built as a static site deployed to GitHub Pages, it serves as a living directory of Myanmar's developer talent.

Features

• Developer Profiles — 116+ engineer profiles with tech stacks, bios, and custom MDX pages
• Blog Platform — Technical articles written by community members
• Profile Editor — In-browser tool to create your profile MDX file without writing code
• Myanmar & English — Full bilingual support with EN/MM toggle, powered by next-intl
• Responsive Design — Obsidian Prism dark theme with animated interactions

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Static Export)
Language	TypeScript, React 19
Styling	Tailwind CSS 3 + DaisyUI + Sass
Content	Contentlayer2 with MDX
Animation	Framer Motion, Three.js, React Three Fiber
i18n	next-intl (Myanmar & English)
Fonts	Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono, KhitHaungg (Myanmar)
Package Manager	Bun
Deployment	GitHub Pages via GitHub Actions

Quick Start

Prerequisites

• Bun (recommended) or Node.js 18+
• Git

Setup

# Clone the repository
git clone https://github.com/myanmar-software-engineers/myanmar-software-engineers.github.io.git
cd myanmar-software-engineers.github.io

# Install dependencies
bun install

# Start development server
bun dev

Open http://localhost:3000 to view the site.

Commands

bun dev              # Start dev server
bun run build        # Build static site (output: ./out)
bun run serve        # Serve static build locally
bun run lint         # Run ESLint
bun run content:build # Rebuild contentlayer content
bun run commit       # Interactive gitmoji commit helper

Add Your Profile

There are two ways to add your profile to MMSWE:

Option 1: Profile Editor (Recommended)

Visit mmswe.com/profile/editor to create your profile using the visual editor. Fill in your details, preview in real-time, and download the .mdx file.

Option 2: Manual Creation

1. Fork this repository
2. Create a new file in content/profile/ with your name (lowercase, no spaces):

content/profile/yourname.mdx

3. Add frontmatter and content:

---
name: Your Name
description: A short bio about yourself
image: "https://avatars.githubusercontent.com/u/YOUR_ID?v=4"
tags:
  - Frontend
  - React
  - TypeScript
---

Write your profile content here using standard markdown.

## About Me

Hello! I'm a software engineer from Myanmar...

4. Submit a Pull Request to the main branch

Frontmatter Fields

Field	Required	Description
name	Yes	Your display name
description	No	Short bio (shown on profile card)
image	No	Avatar URL (GitHub avatar recommended)
tags	No	Technology/skill tags

Project Structure

src/
  app/                 # Next.js App Router pages
    blog/              #   Blog listing & [slug] pages
    profile/           #   Profile listing, [slug] & editor pages
    contact-us/        #   Contact page
  components/          # React components
    MSE/               #   Homepage sections (Hero, Join, Platform, etc.)
    Common/            #   Shared UI (Navbar, Footer, Container, Tag, Mdx)
    Profile/           #   Profile cards & lists
    ProfileEditor/     #   Profile creation tool components
    Contributors/      #   Custom contributor page widgets
    Ui/                #   Base UI elements
  context/             # React context (LanguageProvider)
  config/              # App configuration
  data/                # Static data & animation variants
  hooks/               # Custom React hooks
  styles/              # Global SCSS & Tailwind tokens
  utils/               # Utility functions
  i18n/                # next-intl configuration
  fonts/               # Local fonts (KhitHaungg Myanmar font)
content/
  profile/             # Developer profile MDX files (116+)
  blog/                # Blog post MDX files
messages/
  en.json              # English translations
  mm.json              # Myanmar translations

Design System

MMSWE uses the Obsidian Prism theme — a dark interface with prismatic accent colors:

Token	Color	Usage
obsidian	#09090b	Base background
surface	#1a1a22	Card backgrounds
prism-cyan	#22d3ee	Primary accent
prism-violet	#a78bfa	Secondary accent
prism-rose	#fb7185	Tertiary accent
accent-gold	#fbbf24	Highlight accent

Typography uses Bricolage Grotesque for display, Plus Jakarta Sans for body, JetBrains Mono for code, and KhitHaungg for Myanmar script.

Internationalization (i18n)

The site supports Myanmar and English with an EN/MM toggle in the Navbar. Localization is opt-in per component using next-intl.

How it works

• LanguageProvider (src/context/LanguageContext.tsx) manages locale state with useSyncExternalStore + localStorage persistence
• useLanguage hook (src/hooks/useLanguage.ts) provides locale, setLocale, isMyanmar, isEnglish
• Translation files in messages/en.json and messages/mm.json with namespaced keys
• Myanmar font: KhitHaungg (src/fonts/khit-haungg/) loaded via next/font/local, applied with khitHaungg.className when Myanmar is active

Adding translations

1. Add keys to both messages/en.json and messages/mm.json under a namespace
2. In your component, use useTranslations("namespace") and useLanguage():

const t = useTranslations("mySection");
const { isMyanmar } = useLanguage();
const mmFont = isMyanmar ? khitHaungg.className : "";

return <h1 className={mmFont}>{t("title")}</h1>;

Myanmar font guidelines

• Use khitHaungg.className directly (not Tailwind font-myanmar class)
• Avoid bg-clip-text text-transparent for Myanmar text — use solid colors instead (e.g. text-prism-cyan)
• Remove overflow-hidden from parent containers when Myanmar is active
• Use leading-[1.6] with py-2 for large Myanmar headings
• Disable character-by-character AnimateText for Myanmar — render plain text instead

Contributing

We welcome contributions from all Myanmar software engineers!

Ways to Contribute

• Add your profile — Follow the profile guide above
• Write a blog post — Create an .mdx file in content/blog/
• Improve the platform — Fix bugs, add features, improve UI
• Report issues — Open an issue on GitHub

Commit Convention

This project uses gitmoji commits enforced by commitlint + Husky:

:sparkles: feat: add new feature
:bug: fix: fix a bug
:lipstick: style: update UI/UX
:fire: build(profile): add yourname profile
:beers: build(blog): add blog post title
:recycle: refactor: refactor code
:zap: perf: improve performance
:memo: docs: update documentation

Use bun run commit for an interactive commit helper.

Development Guidelines

1. Fork and clone the repository
2. Create a feature branch: git checkout -b feat/your-feature
3. Make your changes and ensure bun run build passes
4. Submit a pull request to main

Deployment

The site automatically deploys to GitHub Pages on every push to main via GitHub Actions:

1. Installs dependencies with Bun
2. Builds the static site (next build with output: "export")
3. Deploys the ./out directory to GitHub Pages

Community

• Facebook Group: Myanmar Software Engineers
• GitHub: myanmar-software-engineers
• Website: mmswe.com

License

This project is licensed under the MIT License.

Copyright (c) 2023 — Lwin Moe Paing

---

Built with love by the Myanmar Software Engineers community.