reveal.js

# การสร้าง Portfolio และเส้นทางอาชีพ Web Developer

Lesson 5 - โปรเจกต์สุดท้าย Full-Stack Angular Application

**Portfolio** คือหลักฐานเชิงปฏิบัติที่แสดงทักษะ วิธีคิด และคุณภาพงานของนักพัฒนาเว็บ โดยควรแสดงโปรเจกต์จริง ปัญหาที่แก้ เทคโนโลยีที่ใช้ และผลลัพธ์ที่วัดได้

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค Resume Only"]
    A["รายการทักษะ<br/>ยังไม่เห็นงานจริง"]
  end
  subgraph Era2["ยุค GitHub Portfolio"]
    B["Pinned Projects<br/>ผลงานเด่น"]
    C["README.md<br/>อธิบายคุณค่า"]
  end
  subgraph Era3["ยุค Professional Presence"]
    D["Portfolio Website<br/>demo + case study"]
    E["Career Path<br/>Frontend/Full-stack"]
  end
  A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Portfolio Website** ควรแสดงผลงาน 3-5 โปรเจกต์
- **GitHub Profile** ควรมี README.md ที่ดี, Contribution Graph และ Pin โปรเจกต์เด่น
- **Frontend Path** เช่น Angular Developer → Senior → Architect
- **Full-Stack Path** เพิ่ม Backend Skills เช่น NestJS และ Database
- **Interview Preparation** ควรฝึก Coding, Debugging และ System Design เบื้องต้น
- **แหล่งเรียนรู้ต่อเนื่อง** เช่น Angular Blog, YouTube, Udemy, Frontend Masters

---

## ตารางเส้นทางอาชีพ

| เส้นทาง | ทักษะหลัก | โปรเจกต์ที่ควรมี |
|---|---|---|
| Frontend Developer | Angular, UI, accessibility | dashboard, form-heavy app |
| Full-stack Developer | Angular, Node, DB, auth | CRUD + auth + deploy |
| UI Engineer | Design system, CSS, component | component library |
| Web Architect | architecture, performance, mentoring | scalable app case study |

---

## Mermaid Diagram: Portfolio Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["Final Project<br/>ผลงานรายวิชา"] --> B["README Case Study<br/>อธิบายปัญหาและวิธีแก้"]
  B --> C["Live Demo<br/>URL ใช้งานจริง"]
  C --> D["Portfolio Website<br/>รวมผลงาน"]
  D --> E["Job Application<br/>สมัครงาน/ฝึกงาน"]
  E --> F["Interview Story<br/>เล่า trade-off ได้"]
</pre>

---

## Code Example

```md

# Project Name

---

## Problem
อธิบายปัญหาที่โปรเจกต์นี้แก้ และผู้ใช้เป้าหมายคือใคร

---

## Features
- Login/Register
- Lesson Management
- Dashboard

---

## Tech Stack
- Frontend: Angular
- Backend: Node.js/Express
- Database: PostgreSQL
- Deploy: Netlify + Render

---

## Architecture
สรุปการเชื่อมต่อ Frontend, Backend และ Database

---

## Demo
- Live URL:
- Screenshots:

---

## What I Learned
- สิ่งที่ได้เรียนรู้
- ปัญหาที่พบและวิธีแก้

```

```html


<article class="project-card">
  <h2>{{ project.title }}</h2>
  <p>{{ project.summary }}</p>
  <a [href]="project.demoUrl" target="_blank" rel="noopener noreferrer">Live Demo</a>
  <a [href]="project.repoUrl" target="_blank" rel="noopener noreferrer">Source Code</a>
</article>
```

---

## วิดีโอแนะนำ

- [YouTube: Web Developer Portfolio Projects Career Path](https://www.youtube.com/results?search_query=web+developer+portfolio+projects+career+path)

---

## กิจกรรมท้ายบท

1. เลือก 3-5 โปรเจกต์ที่จะใส่ portfolio
2. เขียน README แบบ case study ให้ final project
3. Pin repository ที่ดีที่สุดใน GitHub
4. เตรียมคำตอบ interview ว่าโปรเจกต์นี้แก้ปัญหาอะไร

---

## End

<a href="/web-programming/15-final-project/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>