This portfolio was created through a modern design and development workflow: starting with rapid ideation in Figma Make, refining designs in Figma Design, and bringing everything to life with Cursor AI. The entire process showcased how AI-assisted development can accelerate the journey from concept to production-ready code.
The journey began with Figma Make, where I rapidly explored different layout concepts and visual directions. This AI-powered tool allowed me to iterate quickly on wireframes and initial design ideas without getting bogged down in pixel-perfect details.
Key explorations included navigation patterns, project card layouts, and overall information architecture. The speed of Figma Make enabled me to test multiple approaches in hours rather than days, helping me converge on a clean, minimal aesthetic that would showcase my work without distraction.
Once the core concepts were established, I moved into Figma Design to polish every detail. This phase focused on typography hierarchy, spacing systems, and interaction states. I established a consistent design system with sharp edges (no border radius), clean typography using Instrument Sans, and subtle hover effects.
The refined designs became the source of truth for development, with every screen, component state, and responsive breakpoint documented. This preparation was crucial for the next phase: translating design into code.
Cursor AI transformed the development process from what could have been weeks of coding into a matter of days. By connecting directly to my Figma designs, Cursor generated pixel-perfect HTML and Tailwind CSS that matched my specifications exactly.
The AI understood design patterns and best practices, automatically implementing responsive breakpoints, accessibility features, and performance optimizations. When I requested changes—like converting the navigation to a hamburger menu on mobile or adding password protection to project pages—Cursor handled the implementation while I focused on design decisions.
The workflow became iterative and conversational: I'd describe what I wanted, Cursor would implement it, and we'd refine together. This collaboration between human creativity and AI capability resulted in clean, maintainable code that follows modern web standards.
In a meta twist, this very page you're reading was created using Cursor's Plan mode. Instead of diving straight into code, I first described what I wanted: a project page documenting the portfolio creation process, following the same structure as my other work.
Cursor Plan helped me think through the structure, asking clarifying questions about placement, content, and styling before writing a single line of code. Once the plan was approved, implementation was straightforward—matching the established patterns while creating new content sections. This planning phase prevented false starts and ensured consistency across the entire portfolio.
Using annotations in Figma for interactions is super important and makes sending designs to Cursor so much smoother
Design is still super important, you have to know the basics in order to have good results but tools like Figma Make, Lovable, and Cursor make it faster and easier to get there
AI is allowing me to do more faster, which then allows me to take on more projects, work, and opportunities