https://github.com/blordeus/personal-blog
A clean, editorial-style personal blog built with Next.js and Tailwind CSS. This project focuses on typography, layout precision, and responsive design using local JSON data.
https://github.com/blordeus/personal-blog
json nextjs tailwindcss typescript
Last synced: 2 months ago
JSON representation
A clean, editorial-style personal blog built with Next.js and Tailwind CSS. This project focuses on typography, layout precision, and responsive design using local JSON data.
- Host: GitHub
- URL: https://github.com/blordeus/personal-blog
- Owner: blordeus
- Created: 2026-03-21T02:38:09.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-04-04T23:54:08.000Z (2 months ago)
- Last Synced: 2026-04-05T01:25:01.012Z (2 months ago)
- Topics: json, nextjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://personal-blog-three-sandy.vercel.app
- Size: 1.22 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Personal Blog — Frontend Mentor Challenge
A clean, editorial-style personal blog built with Next.js and Tailwind CSS. This project focuses on typography, layout precision, and responsive design using local JSON data instead of a CMS.
## 🔗 Live Site
[Add your deployed URL here]
## 📂 Repository
[Add your GitHub repo link here]
---
## 🧠 Overview
This project is based on the Frontend Mentor Personal Blog challenge. The goal was to recreate a minimal, content-focused blog layout with strong attention to spacing, typography, and responsiveness.
Instead of relying on a CMS, all content is pulled from a local JSON file to simulate structured data and simplify development.
---
## 🎯 Objectives
- Build a fully responsive blog layout
- Match the Figma design as closely as possible
- Create a consistent typography system
- Implement dynamic routing for blog posts
- Maintain clean, readable, and scalable code
---
## 🛠 Tech Stack
- Next.js (App Router)
- Tailwind CSS
- TypeScript
- Local JSON data
- DM Sans & Fira Code
---
## ✨ Features
- Homepage with intro and latest articles
- Blog index with clean archive layout
- Dynamic article pages
- About page
- Newsletter subscription page
---
## 📱 Responsive Design
Optimized across mobile, tablet, and desktop with a focus on readability and spacing consistency.
---
## 🚀 Deployment
Deployed via Vercel.
---
## 📸 Screenshots
(Add screenshots here)
---
## 📚 What I Learned
- Editorial layout systems
- Typography-driven UI
- Next.js App Router patterns
- Component consistency and spacing discipline
---
## 📌 Author
Bryan Lordeus