From 6d3ad494e957e56e5d62a9a8a8b9cfdb13b3003a Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Thu, 21 May 2026 15:26:41 +0700 Subject: [PATCH] Phase 3: Portfolio & Blog magazine-style redesign - Portfolio page: magazine hero, category filters, dark theme grid - Blog index page: editorial featured post, card grid layout - Consistent magazine styling with wave transitions --- src/pages/blog/index.astro | 533 ++++++++++++++++++++++++++++--- src/pages/portfolio.astro | 630 +++++++++++++++++++++++++++---------- 2 files changed, 943 insertions(+), 220 deletions(-) diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index b33697a..bfb6bc9 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -2,8 +2,6 @@ import Base from '../../layouts/Base.astro'; import Navigation from '../../components/Navigation.astro'; import Footer from '../../components/Footer.astro'; -import PageHero from '../../components/PageHero.astro'; -import BlogCard from '../../components/BlogCard.astro'; import { getCollection } from 'astro:content'; const blogPosts = await getCollection('blog'); @@ -13,58 +11,119 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date - + +
+
+
+
+
+ +
+
+
- +
+
+
+ + บทความ +
+ +

+ ความรู้ + ด้านดิจิทัล +

+ +

+ เทคนิคและความรู้ใหม่ๆ สำหรับธุรกิจไทย +

+
+
+ +
+ + + +
+
+ + {sortedPosts.length > 0 && ( -
+
- +
{sortedPosts[0].data.image && ( {sortedPosts[0].data.title} )} + บทความล่าสุด
{sortedPosts[0].data.category}

{sortedPosts[0].data.title}

{sortedPosts[0].data.excerpt}

- อ่านต่อ → + + อ่านต่อ + + + +
)} - +
+
+ บทความทั้งหมด +

+ บทความ
ล่าสุด +

+
+
{sortedPosts.slice(1).map((post, i) => ( - + +
+ {post.data.image && ( + {post.data.title} + )} +
+
+ {post.data.category} +

{post.data.title}

+

{post.data.excerpt}

+ + {new Date(post.data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })} + +
+ ))}
- +

ต้องการความช่วยเหลือ?

ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และให้คำแนะนำ

- ติดต่อเรา +
+ ติดต่อเรา + 080-995-5945 +
@@ -73,10 +132,138 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date \ No newline at end of file diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro index 9aa6ec5..2f6bafe 100644 --- a/src/pages/portfolio.astro +++ b/src/pages/portfolio.astro @@ -2,21 +2,54 @@ import Base from '../layouts/Base.astro'; import Navigation from '../components/Navigation.astro'; import Footer from '../components/Footer.astro'; -import PageHero from '../components/PageHero.astro'; import { portfolioItems } from '../data/portfolio'; --- - + +
+
+
+
+
+ +
+
+
- -
+
+
+
+ + ผลงานของเรา +
+ +

+ โปรเจกต์ที่ + เราภาคภูมิใจ +

+ +

+ รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ +

+
+
+ +
+ + + +
+
+ + +
@@ -27,7 +60,9 @@ import { portfolioItems } from '../data/portfolio';
- +
@@ -51,7 +86,7 @@ import { portfolioItems } from '../data/portfolio';
{item.category_label}

{item.name}

-

{item.description}

+ {item.description &&

{item.description}

}
))} @@ -59,14 +94,16 @@ import { portfolioItems } from '../data/portfolio';
- +

อยากได้เว็บไซต์แบบนี้บ้าง?

ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ

- ปรึกษาฟรี + ปรึกษาฟรี 080-995-5945
@@ -76,6 +113,412 @@ import { portfolioItems } from '../data/portfolio';