skip to content
.katana

Katana Portfolio

Oluwafemi Meduna's portfolio — an editorial, magazine-style case-study site with a signature GSAP project stack, built on Next.js and MDX.

Katana Portfolio showcase
Role
Full-stack Development, Design
Client
Personal
Date
February 1, 2025
Deliverables
Portfolio website, Editorial design system, Blog with MDX, Project showcase
Tools
Next.js, TypeScript, Tailwind CSS, Velite, Framer Motion, GSAP, Next-themes

A personal portfolio that showcases my work, experience, and writing. The site runs an editorial design system on top of Next.js, TypeScript, and Tailwind CSS — JetBrains Mono as the single typeface, a cool-neutral zinc palette with one ink-navy accent, and content that leads the layout instead of decorative chrome. MDX-powered blog and project pages are processed at build time by Velite, with a signature GSAP-pinned project stack on the home page.

Velite processes MDX content at build time for fast static pages — add blog posts to content/blog/ and projects to content/projects/, then run velite to regenerate. The design system (documented in DESIGN.md) is deliberately restrained — one typeface, one accent color, sharp corners, and quiet motion that explains hierarchy rather than decorating it. Framer Motion drives page-load and scroll reveals; GSAP + ScrollTrigger power the one cinematic moment — the pinned project stack on Home. next-themes handles light/dark with per-project dual-theme cover images.

view repoview live

Overview

A personal portfolio that showcases my work, experience, and writing. The site runs an editorial design system on top of Next.js, TypeScript, and Tailwind CSS — JetBrains Mono as the single typeface, a cool-neutral zinc palette with one ink-navy accent, and content that leads the layout instead of decorative chrome. MDX-powered blog and project pages are processed at build time by Velite, with a signature GSAP-pinned project stack on the home page.

Portfolio homepage

Approach

Velite processes MDX content at build time for fast static pages — add blog posts to content/blog/ and projects to content/projects/, then run velite to regenerate. The design system (documented in DESIGN.md) is deliberately restrained — one typeface, one accent color, sharp corners, and quiet motion that explains hierarchy rather than decorating it. Framer Motion drives page-load and scroll reveals; GSAP + ScrollTrigger power the one cinematic moment — the pinned project stack on Home. next-themes handles light/dark with per-project dual-theme cover images.

Features

  • MDX-powered blog and projects via Velite
  • Editorial design system: single typeface, restrained accent, sharp radii
  • GSAP-pinned project stack on the home page
  • Dual-theme (light/dark) cover images per project
  • Responsive layout with quiet, purposeful motion
.see also
view all projects
say hello