From e2b9f24d501f6b1cafc31874822c486f89f912e2 Mon Sep 17 00:00:00 2001 From: Poyraz Avsever Date: Tue, 10 Mar 2026 11:40:17 +0300 Subject: [PATCH] feat: add BlogPage and BlogContent components with blog data integration --- app/blog/page.tsx | 5 + app/layout.tsx | 4 +- components/blog-content.tsx | 116 ++++++++++++++++++++++ data/blog.ts | 193 ++++++++++++++++++++++++++++++++++++ 4 files changed, 316 insertions(+), 2 deletions(-) create mode 100644 app/blog/page.tsx create mode 100644 components/blog-content.tsx create mode 100644 data/blog.ts diff --git a/app/blog/page.tsx b/app/blog/page.tsx new file mode 100644 index 0000000..d193013 --- /dev/null +++ b/app/blog/page.tsx @@ -0,0 +1,5 @@ +import { BlogContent } from "@/components/blog-content"; + +export default function BlogPage() { + return ; +} diff --git a/app/layout.tsx b/app/layout.tsx index 24dbe6e..839d1bb 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -48,8 +48,8 @@ export default function RootLayout({ }>) { return ( - -
+ +
+
+
+ {BLOG_NEWS.map((post) => ( + + ))} +
+ +
+ + Categories +
+ {BLOG_CATEGORIES.map((category, index) => ( + + {category} + + ))} +
+ + + + Recent comments +
+ {RECENT_COMMENTS.map((comment) => ( + + + {comment.author} + + + {comment.text} + + + {comment.date} + + + ))} +
+ +
+
+ +
+
+ {BLOG_ARTICLES.map((post) => ( + + ))} +
+ + + + + + + + + 1 + + + + 2 + + + 3 + + + + + + +
+ + ); +} diff --git a/data/blog.ts b/data/blog.ts new file mode 100644 index 0000000..f3625d5 --- /dev/null +++ b/data/blog.ts @@ -0,0 +1,193 @@ +export const BLOG_NEWS = [ + { + id: "next-16-notes", + title: "Next.js 16 Released with Major Performance Improvements", + category: "Technology", + image: "/news/performance.svg", + date: "Mar 6, 2026", + href: "/blog", + }, + { + id: "ui-system-basics", + title: "Minimalism in Modern UI: Less Is Truly More", + category: "Design", + image: "/news/design.svg", + date: "Mar 5, 2026", + href: "/blog", + }, + { + id: "next-16-notes-2", + title: "Next.js 16 Released with Major Performance Improvements", + category: "Technology", + image: "/news/performance.svg", + date: "Mar 6, 2026", + href: "/blog", + }, + { + id: "ui-system-basics-2", + title: "Minimalism in Modern UI: Less Is Truly More", + category: "Design", + image: "/news/design.svg", + date: "Mar 5, 2026", + href: "/blog", + }, +] as const; + +export const BLOG_ARTICLES = [ + { + id: "article-design-systems-1", + title: "Building Minimal Design Systems", + excerpt: + "A deep dive into creating clean, composable components with Tailwind CSS and Radix primitives.", + category: "React", + image: "/news/design.svg", + date: "Mar 2026", + readTime: "4 min", + href: "/blog", + }, + { + id: "article-design-systems-2", + title: "Practical UI Consistency for Startup Teams", + excerpt: + "How to keep visual quality stable while features ship fast across multiple screens.", + category: "Design", + image: "/news/performance.svg", + date: "Mar 2026", + readTime: "5 min", + href: "/blog", + }, + { + id: "article-design-systems-3", + title: "React Patterns That Age Well in Production", + excerpt: + "Component composition, state boundaries, and patterns that remain maintainable over time.", + category: "React", + image: "/news/performance.svg", + date: "Mar 2026", + readTime: "6 min", + href: "/blog", + }, + { + id: "article-design-systems-4", + title: "Mobile-First Decisions for Web Developers", + excerpt: + "A short guide to adapting web habits when product constraints are mobile-first.", + category: "Mobile", + image: "/images/hero1.png", + date: "Feb 2026", + readTime: "4 min", + href: "/blog", + }, + { + id: "article-design-systems-5", + title: "Design Tokens Without Enterprise Complexity", + excerpt: + "A lightweight token strategy for colors, spacing, and type that still scales.", + category: "Design", + image: "/news/design.svg", + date: "Feb 2026", + readTime: "5 min", + href: "/blog", + }, + { + id: "article-design-systems-6", + title: "Improving Developer Experience in UI Projects", + excerpt: + "Naming, structure, and defaults that reduce friction for both current and future contributors.", + category: "Development", + image: "/news/performance.svg", + date: "Feb 2026", + readTime: "5 min", + href: "/blog", + }, + { + id: "article-design-systems-7", + title: "Fast Feedback Loops for Better Frontend Quality", + excerpt: + "Practical review loops that catch UX and implementation issues before release.", + category: "Career", + image: "/images/hero2.png", + date: "Jan 2026", + readTime: "4 min", + href: "/blog", + }, + { + id: "article-design-systems-8", + title: "Scaling Component Libraries Responsibly", + excerpt: + "When to abstract, when to duplicate, and how to avoid premature complexity.", + category: "React", + image: "/news/design.svg", + date: "Jan 2026", + readTime: "6 min", + href: "/blog", + }, + { + id: "article-design-systems-9", + title: "Clean Navigation UX for Portfolio Sites", + excerpt: + "Simple navigation patterns that improve flow, clarity, and perceived polish.", + category: "Design", + image: "/news/performance.svg", + date: "Jan 2026", + readTime: "3 min", + href: "/blog", + }, + { + id: "article-design-systems-10", + title: "What I Learned from Shipping Weekly", + excerpt: + "A personal workflow for shipping consistently without losing architectural direction.", + category: "Productivity", + image: "/images/hero1.png", + date: "Dec 2025", + readTime: "4 min", + href: "/blog", + }, + { + id: "article-design-systems-11", + title: "Reducing UI Noise with Fewer Decisions", + excerpt: + "How constraints can improve speed, coherence, and confidence across a project.", + category: "Design", + image: "/news/design.svg", + date: "Dec 2025", + readTime: "4 min", + href: "/blog", + }, + { + id: "article-design-systems-12", + title: "Portfolio Engineering Beyond Visuals", + excerpt: + "Performance, accessibility, and maintainability decisions that matter in real portfolios.", + category: "Development", + image: "/news/performance.svg", + date: "Dec 2025", + readTime: "6 min", + href: "/blog", + }, +] as const; + +export const BLOG_CATEGORIES = [ + "All", + "Development", + "Design", + "Mobile", + "Career", + "Productivity", +] as const; + +export const RECENT_COMMENTS = [ + { + id: "comment-1", + author: "Ahmet Y.", + text: "The performance checklist was super practical. Thanks for sharing.", + date: "2 days ago", + }, + { + id: "comment-2", + author: "Merve K.", + text: "I liked how you simplified the design system approach.", + date: "4 days ago", + }, +] as const;