Feature
SDG Landing Experience
Homepage with hero slider, SDG carousel, impact statistics, latest posts, sticky navigation, and mission-oriented sections.
Project 02 / 2026
Youth for Change
Frontend Developer/ Next.js/ TypeScript/ Notion/ Tailwind CSS/ SEO
Year
2026
Role
Frontend Developer
Technologies
Next.js, TypeScript, Notion, Tailwind CSS, SEO
About this project
Youth for Change is a Next.js platform for communicating the 17 United Nations Sustainable Development Goals through a landing page, SDG learning pages, team storytelling, a flipbook, and a Notion-backed blog system.
Overview
Overview
Youth for Change turns SDG education into a structured digital experience. The homepage introduces the initiative, the SDG section explains all 17 goals with official color mapping, and the blog system lets the team publish updates from Notion without changing code.
My Role
My Role
Built the Next.js application structure, reusable UI sections, SDG data model, Notion content pipeline, blog routes, theme behavior, and responsive layouts. The work balanced editorial clarity with maintainable frontend architecture.
Key Features
Key Features
06 Items
Feature
Notion Blog CMS
Notion API integration maps database pages into typed blog cards and detail pages with markdown conversion.
Feature
Static Blog Detail Pages
Blog posts generate static params and metadata for fast loading, shareable pages, and better search visibility.
Feature
SDG Filtering
Blog list supports SDG badge filters through URL query state so readers can explore content by goal.
Feature
Design System
Typography, brand colors, light/dark mode, and official UN SDG colors are centralized in documented style files and CSS tokens.
Feature
Team and Flipbook Pages
About page presents project members and mission, while the flipbook route embeds external campaign material.
Tech Stack
Tech Stack
Application
Next.js 16React 19TypeScriptApp Router
Content
Notion APInotion-to-mdnext-mdx-remotedate-fns
Interface
Tailwind CSS v4Radix UIlucide-reactframer-motionnext-themes
Challenge & Solution
The Challenge
The site had to feel like a campaign platform, a learning hub, and a blog at the same time. Content needed to be easy for non-developers to update while still supporting SEO, SDG filtering, official color usage, and consistent responsive layouts.
The Solution
Used Notion as the editorial source, converted pages into typed blog models, and kept SDG metadata centralized. The frontend uses reusable sections and token-driven styling so campaign pages, SDG cards, and blog content stay visually aligned.
Results
Results
04 Metrics
Impact
SDGs Covered
17
Impact
Core Routes
5
Impact
CMS Source
1
Impact
Theme Modes
2
Lessons
Lessons Learned
01
Editorial platforms stay maintainable when content, metadata, and visual tokens are separate concerns.
02
URL-based filters make content discovery shareable and easier to reason about than hidden component state.
03
Documenting typography and color decisions reduces design drift as new pages are added.
Screenshots
Screenshots
Swipe or use the arrows.
01 / SDG Homepage
Campaign landing page with rotating stories, SDG carousel, impact metrics, and recent Notion posts.
01 / 06
02 / Blog Detail
SEO-ready article page with cover image, breadcrumbs, SDG badge, metadata, and markdown content.
01 / 06
03 / About Page
Informational page about the organization, its mission, and team members.
01 / 06
04 / Flipbook Page
Interactive flipbook for showcasing campaign materials and impact stories.
01 / 06
05 / SDG Homepage
Campaign landing page with rotating stories, SDG carousel, impact metrics, and recent Notion posts.
01 / 06
06 / SDGs Categories
Dedicated pages for each SDG with official color mapping, detailed descriptions, and related content.
01 / 06
Links
Links
Related Work
More case studies
03 Cases
Open Source Contributor/TypeScript
Kiro
Contribution to Kiro, an agentic IDE and CLI for spec-driven development, hooks, powers, MCP integrations, and codebase-aware AI workflows.
TypeScriptAIDeveloper Tools
Read case study
Lead Developer, Project Manager, Code Reviewer/Next.js
Smart PC Store
Full-stack PC hardware commerce platform with admin operations, JWT auth, QR checkout, analytics, AI chat, and price forecasting.
Next.jsJavaPostgreSQL
Read case study
Fullstack Developer/Next.js
MovieOn
Movie browsing interface built with Next.js 15, Supabase, Tailwind CSS v4, semantic theme tokens, and accessible UI primitives.
Next.jsSupabaseTypeScript
Read case study