This portfolio demonstrates my approach to solving complex problems. Each case study follows the same structure: I identify the challenge, describe my method for tackling it, and show the real-world impact. This mirrors how I work on professional projects.
Design and development
Designed in Figma
Built with Next.js 15, React 19, and TypeScript 5.6 (strict mode)
Styled with Tailwind CSS 3.4 and shadcn/ui
Developed in VS Code
Deployed on Vercel
Typography
Figtree for body text, chosen for readability at small sizes
Sora for labels and secondary type
Kode Mono for code and monospace elements
All loaded via next/font/google with font-display: swap for performance
Design system
I use a consistent token system for typography, spacing, and colours, designed in Figma and applied in code through CSS custom properties. All colours are defined as semantic tokens (bg-main, text-primary, border-active) mapped to neutral primitives, so the entire palette can be swapped by changing a few root values. Light and dark modes both have full token coverage. Theme switching uses the View Transition API with a circular reveal animation expanding from the toggle button.
Animation
Framer Motion 11 for page transitions and micro-interactions
Theme switching uses the View Transition API (circular clip-path reveal)
Marquee animation for scrolling UI elements
AI chatbot
Powered by Google Gemini 2.5 Flash
Built with the Vercel AI SDK for streaming responses
Optional feature that gracefully disables itself when local AI or Redis credentials are not configured
Chat history logged to Upstash Redis
Architecture
6 pages: Homepage, About, Development, Resources, Case Studies (dynamic), Colophon
2 API routes: Chat endpoint, Logs endpoint
Shared content lives in a typed `src/content` layer so the site UI and chatbot read from the same source of truth
Inspiration
Open source
This site is available and open source on GitHub (supremeio/oluwatosin-v3)