BEHIND THE PORTFOLIO
This is not a template with a new coat of paint. kittykio.com is a small, full-stack portfolio product: a home for case studies, technical writing, experiments, and thoughtful ways to start a conversation.
01
Next.js 14 App Router and React 18 provide server-rendered routes, route metadata, API routes, static generation where appropriate, and a clean client/server boundary.
TypeScript keeps content and feature contracts explicit. Tailwind CSS and Sass variables power the responsive layout and a shared palette: charcoal, warm grays, flame red, and lemon.
Framer Motion handles layout and interaction motion. React Three Fiber, Drei, Three.js, GSAP, Leva, and tsParticles support the interactive Now/lab experiments.
MDX files are compiled with next-mdx-remote. Remark and Rehype plugins add GFM, headings, a table of contents, and highlighted code blocks.
MongoDB with Mongoose stores likes, requests, and first-party analytics events. Resend can notify Kitty Kio by email whenever a visitor submits a request.
The app is ready for Vercel deployment, Vercel Analytics, optional Google Analytics, and a private first-party insights dashboard.
02
/
The introduction is a creative developer version of the original art-led landing experience.
/projects
A curated case-file gallery for development work.
/blog
A technical writing library built around MDX rather than a CMS.
/now
The former lab is reframed as a living snapshot of current experiments and how the site behaves.
/contact
A deliberate alternative to a generic contact form.
/saved
A small private reading and project library that lives entirely in the visitor’s browser.
/resume
A printable one-page professional overview.
03
Colour, type, shape, spacing, and motion are treated as one system rather than separate decoration. Lemon and flame red are the site’s two lead accents: they guide attention and action. Neutral grays carry reading, while rainbow colours are reserved for Now experiments.
MAIN ACCENT
Lemon
#e8ff38
Primary accent: active states, bookmarks, and optimistic contrast
MAIN ACCENT
Flame 500
#cb4625
Primary action: calls to action, links, and shared hover states
Flame 300
#eb7858
Lighter flame accent for softer emphasis
Flame 700
#8c280d
Pressed states and deeper accent contrast
Flame 900
#591806
The darkest flame shade for depth
White
#ffffff
Light-mode canvas and high-contrast card surface
Gray 100
#e6e6e6
Light cards, quiet surfaces, and separators
Gray 300
#bababa
Subtle borders and soft supporting surfaces
Gray 500
#8b8b8b
Secondary text and supporting UI
Gray 700
#505050
Strong secondary text and dark separators
Charcoal
#292929
Dark-mode canvas and primary dark text
Black
#000000
Maximum contrast for icon and code details
Cocoa 700
#2d2926
Dark-mode raised surface
Cocoa 900
#2c2522
Dark-mode canvas
Lab sky
#87ceeb
The Now page sky base
Rainbow red
#ff6b6b
Experimental cloud highlight
Rainbow orange
#ffad69
Experimental cloud highlight
Rainbow yellow
#ffe66d
Experimental cloud highlight
Rainbow green
#7bd389
Experimental cloud highlight
Rainbow blue
#70c1ff
Experimental cloud highlight
Rainbow violet
#b388eb
Experimental cloud highlight
Typography roles
Kitty Kio — brand display
Section heading
Navigation & headings
Body copy uses Sulphur Point: readable, quiet, and human.
Sometype Mono is reserved for code and technical notes.
Main style principles
04
Tags are the common language for projects and posts. They are read from content, deduplicated for filter controls, and reflected in shareable URLs instead of being managed in a separate admin panel.
Posts and projects receive stable generated identifiers from their content. New JSON project records and new MDX posts can participate without manual like IDs.
Likes are persisted in dedicated MongoDB collections and limited to ten expressive reactions per item, keeping the feature playful without becoming a noisy leaderboard.
The route structure supports /ja equivalents, locale-aware navigation, translated interface text, and separate Japanese MDX sources. Language switching preserves the current route whenever there is an equivalent.
05
The root layout supplies the baseline title, description, icons, keywords, Open Graph, and Twitter metadata. Post and project routes add their own canonical URL, title, description, article date where relevant, and social image.
Social previews are generated on demand at /api/og with Next’s ImageResponse. The cards use the portfolio palette, original cat logo, route type, title, and description—rather than falling back to an unrelated cover crop.
metadataBase is driven by NEXT_PUBLIC_SITE_URL. Dynamic sitemap.xml and robots.txt use the same site URL, and include the core routes plus post and project pages.
Posts and projects expose native sharing on supported devices and a reliable copy-link fallback everywhere else, with analytics events for both paths.
06
OG cards are not static uploads. Next.js ImageResponse generates them on demand at /api/og with the shared palette and original cat logo.
The home page, every project, and every post pass their own title, description, and type to the OG route, so shared links receive a relevant branded card.
Open /api/og?type=site first. Then re-scrape a post or project URL with a LinkedIn/Discord debugger. Old previews are usually cached by the social network, not the app.
07
Layouts adapt from compact phones through tablet to desktop: navigation collapses, grids reduce columns, controls wrap, and typography/spacing use breakpoints rather than a single fixed canvas.
A visible motion control complements the operating system’s prefers-reduced-motion setting. It reduces decorative motion and 3D movement without hiding the underlying content.
Next image handling, lazy motion features, static generation for article paths, responsive card layouts, and modest visual effects aim to keep the art-led interface from feeling heavy.
Saved items stay in localStorage on the visitor’s device. The app does not require sign-in or send their saved library to MongoDB.
08
NEXT_PUBLIC_SITE_URL is set to https://kittykio.com so canonical links, sitemap entries, robots.txt, and OG URLs consistently point to the production domain.
MONGODB_URI connects likes, requests, and analytics to the portfolio-project database. RESEND_API_KEY and a verified sender/domain enable contact notification email.
NEXT_PUBLIC_GA_ID enables Google Analytics. ANALYTICS_DASHBOARD_TOKEN protects /insights. An OpenAI key can later power Ask Kiki once usage credit is available; request modes do not depend on it.
The /insights page is deliberately token-protected. First-party events include content views, opens, filters, saves, shares, copy-link actions, reading completion, contact activity, and command-palette searching as each integration is enabled.
09
First-party events capture useful product signals only: project opens, tag filters, post views and completion, saves, shares, copied links, contact activity, and command-palette searches.
Add MONGODB_URI and ANALYTICS_DASHBOARD_TOKEN in Vercel and .env.local, then open /insights?token=YOUR_TOKEN after deployment. Never place the token in code or a public link; keep it in a password manager.
Vercel Analytics needs no additional key. Add NEXT_PUBLIC_GA_ID only if you want Google Analytics too. The repository’s DEPLOYMENT_CHECKLIST.md has the complete setup and launch checks.
10
The app began with the creative visual language and content affordances of the art portfolio, then selectively brought over the speed-oriented patterns of the dev portfolio. The result is intentionally hybrid: expressive enough to feel authored, structured enough to help a hiring manager or collaborator quickly find work, writing, proof of craft, and a way to reach out.
© 2026 Kitty Kio. Code is MIT licensed; content and branding are all rights reserved.
