🏠 Home / Hub
🎨 Projects 01 — Portfolio Website
← Projects Menu
Goal: HTML + CSS + JS သုံးပြီး developer portfolio website တစ်ခု build ပြီး GitHub Pages မှာ free host လုပ်မယ်။ Portfolio တစ်ခုက resume ထက် ပိုရှင်းလင်းစွာ ကိုယ့်ရဲ့ skills ကိုပြနိုင်တယ်။
1. Portfolio မှာ ဘာပါသင့်သလဲ
| Section | Content | Why Important |
|---|
| Hero / About | Name, role, tagline, photo | First impression — 5 seconds |
| Skills | Languages, frameworks, tools icons | Quick scan by recruiters |
| Projects | 3–5 real projects with screenshots + links | Prove ability with evidence |
| Experience | Work or learning journey timeline | Show growth and context |
| Contact | Email, GitHub, LinkedIn links | Next step for hiring manager |
2. File Structure
portfolio/
├── index.html ← main single page
├── style.css ← all styles
├── script.js ← scroll animations, mobile menu
├── assets/
│ ├── profile.jpg ← your photo (square, 400×400 min)
│ ├── project1.png ← project screenshots
│ ├── project2.png
│ └── favicon.ico
└── README.md ← GitHub repo description
3. HTML Structure (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio of Mg Mg — Full-Stack Developer">
<title>Mg Mg | Developer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Fixed Navigation -->
<nav>
<div class="logo">Mg Mg</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button class="menu-btn" aria-label="Menu">☰</button>
</nav>
<!-- Hero Section -->
<section id="hero">
<img src="assets/profile.jpg" alt="Mg Mg" class="avatar">
<h1>Hi, I'm <span class="highlight">Mg Mg</span> 👋</h1>
<p class="tagline">Full-Stack Developer · Vue · Laravel · Flutter · Python</p>
<div class="hero-links">
<a href="#projects" class="btn">View Projects</a>
<a href="resume.pdf" class="btn outline" target="_blank">Download CV</a>
</div>
</section>
<!-- Skills Section -->
<section id="skills">
<h2>Skills</h2>
<div class="skill-grid">
<div class="skill-item">HTML / CSS</div>
<div class="skill-item">JavaScript</div>
<div class="skill-item">Vue.js</div>
<div class="skill-item">Laravel</div>
<div class="skill-item">Flutter</div>
<div class="skill-item">Python</div>
<div class="skill-item">PostgreSQL</div>
<div class="skill-item">Git</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<div class="project-grid">
<div class="project-card">
<img src="assets/project1.png" alt="E-commerce">
<div class="card-body">
<h3>E-Commerce App</h3>
<p>Full-stack shopping platform with cart, checkout, and admin dashboard.</p>
<div class="tags">
<span>Vue.js</span><span>Laravel</span><span>PostgreSQL</span>
</div>
<div class="project-links">
<a href="https://github.com/mgmg/ecommerce">GitHub</a>
<a href="https://demo.example.com">Live Demo</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Get In Touch</h2>
<p>Open to freelance projects and full-time opportunities.</p>
<a href="mailto:mgmg@email.com" class="btn">Send Email</a>
<div class="social-links">
<a href="https://github.com/mgmg">GitHub</a>
<a href="https://linkedin.com/in/mgmg">LinkedIn</a>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
4. Key CSS (style.css)
/* Root variables */
:root {
--primary: #6366f1;
--dark: #0f0f1a;
--card: rgba(255,255,255,0.05);
--text: #e2e8f0;
--border: rgba(255,255,255,0.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', Arial, sans-serif; background: var(--dark); color: var(--text); scroll-behavior: smooth; }
/* Navigation */
nav { position: fixed; top: 0; width: 100%; background: rgba(15,15,26,.95);
backdrop-filter: blur(10px); display: flex; justify-content: space-between;
align-items: center; padding: 16px 40px; z-index: 100; border-bottom: 1px solid var(--border); }
nav ul { display: flex; gap: 32px; list-style: none; }
nav a { color: var(--text); text-decoration: none; transition: color .2s; font-size: 15px; }
nav a:hover, nav a.active { color: var(--primary); }
/* Hero */
#hero { text-align: center; padding: 140px 24px 80px; min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center; }
.avatar { width: 130px; height: 130px; border-radius: 50%; border: 3px solid var(--primary);
margin-bottom: 28px; object-fit: cover; }
#hero h1 { font-size: 3.5rem; margin-bottom: 16px; line-height: 1.2; }
.highlight { color: var(--primary); }
.tagline { color: #94a3b8; font-size: 1.2rem; margin-bottom: 32px; }
.btn { display: inline-block; background: var(--primary); color: white; padding: 12px 28px;
border-radius: 8px; text-decoration: none; margin: 6px; transition: .2s; font-weight: 500; }
.btn.outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,.4); }
/* Skills */
#skills { padding: 80px 24px; max-width: 900px; margin: 0 auto; }
.skill-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.skill-item { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 18px; font-size: 14px; transition: .2s; }
.skill-item:hover { border-color: var(--primary); color: var(--primary); }
/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; margin-top: 28px; }
.project-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
overflow: hidden; transition: .3s; }
.project-card:hover { transform: translateY(-6px); border-color: var(--primary); }
.project-card img { width: 100%; height: 180px; object-fit: cover; background: #1e1e2e; }
.card-body { padding: 20px; }
.card-body h3 { color: white; margin-bottom: 8px; }
.card-body p { color: #94a3b8; font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tags span { background: rgba(99,102,241,.2); color: #a5b4fc; border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.project-links { display: flex; gap: 16px; }
.project-links a { color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 500; }
/* Responsive */
@media (max-width: 768px) {
#hero h1 { font-size: 2.2rem; }
nav ul { display: none; }
}
5. JavaScript — Scroll Animation (script.js)
// Intersection Observer — fade-in sections on scroll
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.08 });
sections.forEach(s => {
s.style.cssText = 'opacity:0; transform:translateY(40px); transition:opacity .7s, transform .7s';
observer.observe(s);
});
// In CSS add: section.visible { opacity: 1 !important; transform: none !important; }
// Mobile menu toggle
const menuBtn = document.querySelector('.menu-btn');
const navList = document.querySelector('nav ul');
menuBtn?.addEventListener('click', () => {
navList.style.display = navList.style.display === 'flex' ? 'none' : 'flex';
navList.style.flexDirection = 'column';
navList.style.position = 'absolute';
navList.style.top = '60px';
navList.style.right = '20px';
navList.style.background = 'rgba(15,15,26,.98)';
navList.style.padding = '16px';
navList.style.borderRadius = '8px';
});
// Active nav link on scroll
const navLinks = document.querySelectorAll('nav a[href^="#"]');
window.addEventListener('scroll', () => {
let current = '';
document.querySelectorAll('section[id]').forEach(section => {
if (window.scrollY >= section.offsetTop - 90) current = section.id;
});
navLinks.forEach(link => {
link.classList.toggle('active', link.getAttribute('href') === '#' + current);
});
});
6. GitHub Pages Deploy
1
GitHub မှာ new repository ဆောက်ပါ — name: username.github.io (ကိုယ့် username နဲ့ exact match ဖြစ်ရမယ်)
2
Project files push လုပ်ပါ:
git init
git add .
git commit -m "Portfolio v1"
git branch -M main
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main
3
Repo Settings → Pages → Branch: main → folder: / (root) → Save
4
2-3 minutes နေပါ → https://username.github.io မှာ live ဖြစ်နေပြီ
5
Custom domain (optional): Namecheap/GoDaddy မှာ domain ဝယ်ပြီး CNAME record → username.github.io ထားပါ
Project repo တွေကလည်း GitHub Pages မှာ host လုပ်လို့ရတယ် — repo Settings → Pages → branch: main
7. Portfolio Do's & Don'ts
| Do ✅ | Don't ❌ |
|---|
| 3–5 quality projects with live demo links | List 20 half-finished toy projects |
| Real screenshots and video demos | Generic filler content without proof |
| Explain what problem each project solves | Only show tech stack without context |
| Professional photo (clear, good lighting) | Blurry selfie or no photo |
| Load time under 3 seconds | 10MB of uncompressed images |
| Mobile-responsive design | Desktop-only layout |
| Active GitHub with recent commits | Empty or all-private GitHub |
| Working email / contact form | Broken links or dead email address |
📌 Study Checklist
- အပေါ်က concept ကို တစ်ကြောင်းချင်းဖတ်ပြီး example ကို ကိုယ်တိုင်ပြန်ရေးကြည့်ပါ။
- Code/command ပါတဲ့ lesson ဆိုရင် value/name/path တစ်ခုခု ပြောင်းပြီး result ဘာကွာလဲ စမ်းပါ။
- မမှတ်မိသေးတဲ့ keyword 3 ခုကို notebook ထဲရေးပြီး နောက် lesson မသွားခင် ပြန်ရှင်းကြည့်ပါ။
- ပြီးရင် Home / Hub ကိုပြန်သွားပြီး next lesson ဆက်သင်ပါ။