How I adapted Mintlify, an AI-native product documentation platform, into this personal portfolio.
Idea and Reasoning
When I first thought about making a new portfolio, I was a bit overwhelmed. Now that anyone can quickly spin out a nice-looking landing page, I needed to show that my skills as a designer and engineer aren’t something that can be replicated in minutes by an agent. I think that humans are still the ones with vision, the experience to break down implementation steps effectively, the judgment to use AI tools strategically, and the nuance to let the story behind a project shine through. These are the things that will set a design or site apart and I wanted to show that with my portfolio. One day I thought - what if I turned a product documentation site into a “self” documentation site for my portfolio? I think that good docs often have a narrative aspect, telling a story about a product, much like a good portfolio tells a story about oneself. Helping people understand a product isn’t so different from helping someone understand “me.” With this portfolio, I hope to show how I can adapt and build upon existing tools for a new purpose - a story that a basic AI-generated website definitely doesn’t have.Process & Prompts
I’ll be very upfront that I made this portfolio quickly with the strategic usage of AI tools, mostly Magic Patterns and Claude. I think this is the future of rapid shipping and design work, and would like to emphasize that even though much of the manual coding work and markdown setup was written by Claude, the overarching vision for the project and also the iterative edits afterwards are where human expertise and taste comes through. I wrote a few large prompts to get things started, which are shown here, but I then took the output and continued to test and iterate, incorporating feedback, adding new features, and adjusting layouts and styling as I saw fit. I also asked for the initial scaffolds to be made only with mock data, and went back and populated my personal content afterwards.Magic Patterns
My first prompt:“I have this idea where I want to make a personal portfolio but actually make it on Mintlify, which is technically a product documentation site. The point is to demonstrate an understanding of the Mintlify software and also that I can adapt it for a new purpose: an AI-native docs platform for personal knowledge and identity, not just product information. I want to avoid a really basic setup, instead putting in custom components and views and adapting the landing page to look like the landing page of a portfolio website. I want to leveraging the organizational patterns and AI-agent friendliness of Mintlify while styling it into a portfolio. Look at the current UI and structure of Mintlify’s own docs site and help me plan how I could adapt and design the UI for this idea. The UI theme should be distinct from the default theme to make it clear that this is not a basic product documentation site.”From there I tried out a few different visual directions (magazine/editorial, brutalist, notebook) and decided on a relatively neutral magazine theme. I asked it to populate pages with mock data and helped me figure out where I could use the “docs” angle creatively. The skills API reference came directly out of this process.
Claude
Once I had a prototype I was happy with in Magic Patterns, I exported the code into a separate repo and brought in Claude Code:“Look at this current ‘docs’ project. Right now it’s just the basic Mintlify project template. But I have this idea where I’m going to turn it into a personal portfolio. I’ve already prototyped some ideas, the UI appearance, and some interesting personalization (ex. using the ‘changelog’ to be about milestones in my career and the ‘api reference’ to show my skills). This is my conversation with Magic Patterns already and I’ve cloned the code it came up with into the repo mp-portfolio-prototype. Note that the styling to go from is actually in the /magazine route in the prototype. Help me modify the docs template according to the design and layouts present in the magic patterns prototype.”That gave me a solid starting point. From here I used narrower, more targeted prompts to edit styling and content.
Timeline
A rough idea of how this work was spread out over a week or so. Also want to note that this is not the fastest speed I can move, was deliberately taking breaks and time to think.Thursday, May 7
First had the idea to adapt a Mintlify site into my portfolio. Wrote down my reasoning and what I was trying to achieve. Set up the template project on Mintlify.
Friday, May 8 – Sunday, May 10
Stewed on it but didn’t build anything yet (this was a busy weekend for me!). Had the idea of a changelog-style page to show my career history.
Monday, May 11
Started iterating with Magic Patterns, got a few mockups as a starting point. Downloaded the prototype and fed as a reference to Claude along with the Mintlify template and some instructions about what I wanted. Got a good v1 with navigation and page scaffolds set up.
Tuesday, May 12
Continued iteration: edits to page grouping on the sidebar, filled in content (case studies and writing, homepage content), added new features to skills and changelog pages.
Wednesday, May 13 – Friday, May 15
Styling overhaul: standardize branding, fonts, layouts. Combining certain pages, add images.
Learnings and Pivots
Reducing sidebar sections. Started with more sections than needed. Trimming and combining made the navigation feel more deliberate. Replacing manual HTML with Mintlify components. Partway through I realized I was writing a lot of custom div structures for things Mintlify already handles:<Steps>, <Info>, <Tabs>, and the changelog. Went back and replaced where it made sense.
Storing structured content in arrays. The changelog was originally a bunch of repeated divs. Refactored to store entries as a data array and map through them, much easier to update and extend.
Font mixing. Settled on a three-font system: serif for headings and display text, sans-serif for body content, and monospace for version numbers, dates, and anything that needed a code-like feel.
Consistent header styling across pages. Initially inconsistent across articles. Eventually settled on a pattern (serif description paragraph, monospaced byline with a rule below) and applied it uniformly.
Using AI to write content strategically. Though it’s easy to rely on AI to generate lots of content, I wrote all the case studies and articles, and notably the “Idea and Reasoning” section on this page, by hand. I tried an AI-generated version and it just didn’t sound right. I think part of being a “good” designer and writer going forward is having a strong vision for what you want and then being able to tell when to step in with your own voice when AI tools don’t get that vision right.