FIFAROCKZAA Personal Portfolio

Personal Portfolio, Career Platform & Continuous Web Development Project

เว็บไซต์ FIFAROCKZAA Personal Portfolio

ภาพรวมโครงการ

FIFAROCKZAA เป็นเว็บไซต์ Personal Portfolio และ Career Website ส่วนตัว ที่พัฒนาขึ้นเพื่อรวบรวมและนำเสนอประสบการณ์การทำงาน ความรู้ด้าน IT ผลงานด้าน Web Development ใบรับรองวิชาชีพ และ Technical Case Study ต่าง ๆ

เว็บไซต์รองรับทั้งภาษาไทยและภาษาอังกฤษ และได้รับการพัฒนาอย่างต่อเนื่อง โดยมีเป้าหมายระยะยาวให้เป็นทั้ง Portfolio และพื้นที่รวบรวมความรู้ ประสบการณ์ และผลงานด้านเทคโนโลยีของตนเอง

บทบาทและความรับผิดชอบ

ออกแบบ พัฒนา ดูแลเว็บไซต์ และบริหารโครงการด้วยตนเอง

  • ออกแบบและดูแลโครงสร้างเว็บไซต์
  • พัฒนาเว็บไซต์ให้รองรับ Responsive Design
  • จัดทำและดูแลเนื้อหาภาษาไทยและภาษาอังกฤษ
  • จัดการ Project และ Technical Case Study
  • ดูแล Hosting และการ Deploy เว็บไซต์
  • จัดการ Source Code ด้วย Git และ GitHub
  • ทดสอบการเปลี่ยนแปลงก่อนนำขึ้นเว็บไซต์ Production

การพัฒนาเว็บไซต์

เว็บไซต์พัฒนาขึ้นโดยใช้ HTML, CSS, Bootstrap และ JavaScript เป็นหลัก และได้รับการปรับปรุงจาก Portfolio รูปแบบเดิม ให้มีโครงสร้างที่เหมาะสมกับการนำเสนอประสบการณ์ และผลงานในระดับ Professional มากขึ้น

การปรับปรุงประกอบด้วย Responsive Layout, ระบบเว็บไซต์สองภาษา, Navigation, การนำเสนอ Project และ Case Study, ประสบการณ์การทำงาน, Skills, Contact และเนื้อหาด้านเทคนิค

Git & Version Control

ใช้ Git สำหรับจัดการ Source Code และติดตามการเปลี่ยนแปลงของเว็บไซต์ เพื่อให้สามารถตรวจสอบ Version และย้อนกลับไปยังสถานะก่อนหน้าได้เมื่อจำเป็น

Source Code ถูกเชื่อมต่อกับ GitHub เพื่อใช้เป็น Remote Repository และเป็นส่วนหนึ่งของ Workflow สำหรับการพัฒนาเว็บไซต์อย่างเป็นระบบ

Git GitHub Version Control

Staging & Production Workflow

เว็บไซต์แยก Environment ระหว่าง Staging และ Production เพื่อลดความเสี่ยงจากการแก้ไขเว็บไซต์จริงโดยตรง

การเปลี่ยนแปลงใหม่จะถูกพัฒนาและทดสอบ บน Branch สำหรับ Staging ก่อน จากนั้นจึงตรวจสอบผ่านเว็บไซต์ Staging และเมื่อพร้อมจึงสามารถ Merge เข้าสู่ Main Branch เพื่อนำขึ้น Production

Development Workflow
Development Git Staging Branch Staging Website Testing Main Branch Production

Hosting & Deployment

เว็บไซต์ Hosting อยู่บน Hostinger และถูกนำมาใช้งานร่วมกับ Workflow ที่เชื่อมโยงกับ Git และ GitHub

การแยกเว็บไซต์ Staging ช่วยให้สามารถทดสอบการเปลี่ยนแปลง บน Server จริงได้ก่อนนำ Version ที่ผ่านการตรวจสอบขึ้นเว็บไซต์ Production

ระบบเว็บไซต์สองภาษา

เว็บไซต์รองรับทั้งภาษาไทยและภาษาอังกฤษ โดยจัดทำเนื้อหาแยกสำหรับผู้ใช้งานแต่ละภาษา

ระบบ Navigation ได้รับการปรับปรุงเพิ่มเติม เพื่อให้เมื่อผู้ใช้งานเปลี่ยนภาษา เว็บไซต์ยังสามารถนำผู้ใช้งาน ไปยัง Section ที่สัมพันธ์กัน แทนที่จะกลับไปยังด้านบนของหน้าเว็บไซต์ทุกครั้ง

Navigation & User Experience

Navigation ของเว็บไซต์ได้รับการจัดกลุ่มใหม่ เพื่อแยกข้อมูลด้านประสบการณ์การทำงาน ผลงาน คุณวุฒิ การรับรอง Gallery และช่องทางการติดต่อให้อ่านและใช้งานง่ายขึ้น

เป้าหมายคือช่วยให้ผู้ใช้งาน โดยเฉพาะ HR, IT Manager หรือผู้สนใจผลงาน สามารถเข้าถึงข้อมูลสำคัญได้รวดเร็ว โดยไม่ต้องค้นหาจากรายการเมนูจำนวนมาก

Project & Case Study Presentation

รูปแบบการนำเสนอ Project ถูกปรับจากการแสดงเพียงภาพและชื่อเว็บไซต์ มาเป็นการระบุบทบาท รายละเอียดโครงการ เทคโนโลยีที่ใช้ และ Case Study เพื่ออธิบายประสบการณ์จากการทำงานจริง

นอกจากผลงาน Web Development เว็บไซต์ยังนำเสนอ Case Study ด้าน IT Infrastructure, File Server, NAS, Backup, IT Operations และ Information Security เพื่อสะท้อนประสบการณ์ด้าน IT ที่กว้างกว่าการพัฒนาเว็บไซต์เพียงอย่างเดียว

ทิศทางการพัฒนาปัจจุบัน

เว็บไซต์กำลังพัฒนาจาก Portfolio รูปแบบ Resume Website ไปสู่แนวคิด Personal Knowledge & Career Hub

ในอนาคตสามารถต่อยอดด้วยบทความด้าน IT, Technical Notes, Checklist, Template, E-Book, เครื่องมือออนไลน์ขนาดเล็ก และ Case Study เพิ่มเติม

ประสบการณ์ที่ได้รับ

โครงการนี้ทำให้ได้ฝึกการดูแล Web Project ตลอด Lifecycle ตั้งแต่การออกแบบ การพัฒนา Frontend, การจัดการ Content, Hosting, Version Control, Testing ไปจนถึง Deployment

นอกจากนี้ยังทำให้เห็นความสำคัญ ของการแยก Development, Staging และ Production รวมถึงการใช้ Git เพื่อควบคุมการเปลี่ยนแปลง แทนการแก้ไขเว็บไซต์ Production โดยตรง

ข้อมูลโครงการ


ชื่อโครงการ:
FIFAROCKZAA Personal Portfolio

ประเภท:
Personal Website / Web Development

บทบาท:
Designer, Developer & Website Owner

ภาษา:
ไทย / English

Hosting:
Hostinger

Source Control:
Git / GitHub

Environment:
Staging / Production

เทคโนโลยีที่ใช้

HTML CSS Bootstrap JavaScript Git GitHub Hostinger Responsive Web Staging Deployment

Development Structure

Development Branch

staging

Production Branch

main

Production Website

fifapatsakorn.com

Staging Website

staging.fifapatsakorn.com