Main Portfolio Shell
The home route ties together hero, about, skills, projects, contact, visual effects, and shared analytics components.
ArchitectureNext.jsThree.jsAI-AssistedPortfolio
How This Portfolio Is Built
A practical look at the portfolio architecture, Nebula experience, project demos, deployment path, and the AI-assisted workflow behind the build. The AI story matters, but the main point is still the portfolio system that came out of it.
The site combines a standard portfolio, a playable Nebula route, API-backed demos, SEO and analytics surfaces, and a Vercel deployment path. Most of it was shaped through plain-English prompts, imagination, model output, and repeated correction.
AI helped move quickly, but the direction came from software engineering experience: knowing the layers, the tradeoffs, the user experience, the deployment constraints, and when an output needed to be pushed in a better direction.
By Mitesh BankaMay 1, 20268 min read
PortfolioCore
Surface Layer
Experience Layer
Data and API Layer
Delivery Layer
Next.js
frontend foundation
Nebula
interactive portfolio game
Vercel
deployment path
AI-aided
build workflow
Website Architecture
Four layers carry the portfolio.
The portfolio is not a single landing page or a one-shot AI output. It is a Next.js site with a main portfolio surface, interactive experiences, API routes, and a delivery layer around it.
Surface Layer
The main portfolio, blog, resume, and project pages form the public website experience.
Experience Layer
Nebula turns the same portfolio content into a playable Three.js space route.
Data and API Layer
Contact, travel, AI guide, affiliate, and Cosmic Explorer routes keep demos interactive.
Delivery Layer
SEO, analytics, sitemap, Vercel deployment, local checks, Lighthouse, and Graphify keep the site shippable.
Key Parts
The important pieces behind the website.
AI helped build it, but the page is not about AI alone. These are the product, architecture, deployment, engineering judgment, and tooling pieces that make the portfolio work.
Primary portfolio path
Engineering Judgment
AI produced options, but the direction came from software engineering experience: choosing architecture boundaries, spotting weak output, correcting behavior, keeping UX coherent, and deciding what was worth shipping.
Nebula Portfolio Runtime
Nebula is the playable portfolio layer: planets, labels, ship controls, asteroids, route stations, scoring, and an AI guide wrapped around the same profile and project story.
One-day Nebula Sprint
The Nebula game was vibe coded in one day from plain-English prompts, with no wireframes: just direction for how the world should feel, how the ship should behave, and what needed fixing after each pass.
API-backed Demos
Travel planning, Cosmic Explorer, contact email, affiliate recommendations, and AI guide endpoints make the website more than a static portfolio.
SEO and Signals
Metadata, sitemap entries, structured JSON-LD, analytics helpers, and performance checks make the portfolio easier to discover, measure, and maintain.
AI-shaped CI/CD
The delivery path was also shaped with AI help: GitHub-backed source control, Vercel build/deploy, production domain setup, environment variables, build checks, linting, and Lighthouse review.
AI Build Workflow
AI was the build accelerator, not the replacement for engineering. Cursor, Composer, Codex, Claude, and GPT models helped turn plain-English direction into code, UI, fixes, checks, and cleanup.
Model Mix
Claude Sonnet 3.5, Claude 4, Claude 4.5, Composer 2, and GPT-5.5 all played roles across different stages, from exploration and UI iteration to implementation review.
Graphify Audit
Graphify came after the build. It mapped clusters and relationships so the architecture could be explained clearly and future agents can orient faster.
AI's Role
AI was the tool; engineering judgment set the direction.
The portfolio architecture is the main story: a normal portfolio, an interactive Nebula layer, API-backed demos, and a deployment path that can keep shipping.
AI was the build method, but it needed engineering direction. The useful output came from frontend experience, product judgment, domain context, UX taste, and knowing what to correct.
Cursor and Codex were the working environments; Claude Sonnet 3.5, Claude 4, Claude 4.5, Composer 2, and GPT-5.5 were part of the model mix across the build.
The result is not "anyone with AI can do this." The AI moved faster because it was guided through layers of software engineering, product thinking, deployment knowledge, and repeated review.
Graphify is not the builder. It is a project-level architecture and orientation tool used after the site existed.
Next Step
See the architecture in motion.
Start with the main portfolio for the conventional resume, projects, and contact flow. Then launch Nebula to see the same AI-assisted portfolio content reworked as an interactive space experience.