Hi! I’m Girish, an AWS Community Builder and Cloud Tech Enthusiast, with expertise in delivering customer-focused and business-impacting cloud transformation programs of high complexity.
In my previous article, I shared how I used AWS Kiro’s vibe coding feature to build a Customer Lookup API powered by API Gateway, Lambda, DynamoDB, and AWS SAM.
This time, I wanted to take on something more personal, updating my portfolio website. And once again, Kiro became my co-developer for the job.
What Did I Build and Why?
A few years ago, I built my personal portfolio website using AWS services such as S3, CloudFront, ACM, and Route 53. It worked great for hosting and showcasing my work, but the navigation always felt like an area that could be improved, more animated, more responsive, and more user-friendly.
Between managing large-scale cloud initiatives and exploring new AWS features, I never got the time to redesign it. But with Kiro and Generative AI in my toolkit this year, I finally decided to revisit the site and bring it up to modern design standards.
My goal was simple, make the navigation intuitive, engaging, and mobile-friendly, while experimenting with how far AI-assisted coding could go in enhancing a static site’s front-end.
This wasn’t just a design refresh, it was an opportunity to see how Kiro’s AI-driven coding capabilities could help me test, modify, and visualize design ideas in real time.
How Kiro and I Did It!
I started by asking Kiro a few questions, such as:
“Can I run my portfolio site in Kiro before hosting it on AWS, so I can make and preview changes locally?”
Once Kiro helped me run the static site locally, I moved on to the main goal: upgrading the navigation. I asked Kiro to provide multiple design options and then review the site’s mobile responsiveness, ensuring it looked great across iPhone, iPad, and other devices.
Before & After: Website Upgrade
Old Navigation
Here’s how the navigation on my portfolio website looked before the update. It was functional but static and plain, with minimal visual cues and limited interactivity. Scrolling and mobile responsiveness were also basic, leaving room for improvement.
New Navigation
After Kiro helped me transform the website, the navigation is now modern, interactive, and visually engaging. It features smooth animations, clear section highlighting, and improved mobile responsiveness, making it easier and more enjoyable to navigate. The overall look feels fresh, professional, and aligned with a contemporary portfolio design.
Kiro in Action
Prompt 1 – Preview the Site Locally
“How can I run this static website in Kiro to preview?”
Kiro response:
Prompt 2 – Update the Navigation
“I would like to update the profile.html to include navigation for Home, About Me, etc.”
Kiro response:
Prompt 3 – Color and Icon Enhancements
“Can you keep the orange color for the icons but change the blue to better match the page background?”
Kiro response:
Prompt 4 – Add My AWS Community Builder Badge
Finally, I asked Kiro to add my AWS Community Builder image, and it placed it perfectly!
Kiro’s Feedback Loop
One of the powerful features of Kiro is its feedback loop, which keeps you informed about every change it makes. After implementing the updates, Kiro summarized the enhancements in detail, explaining what was modified and why. This helped me understand how each visual tweak, animation, or layout adjustment contributed to a better user experience. It felt almost like having a co-developer reviewing and guiding the improvements in real time.
🎯 Navigation Enhancements Made
Visual Improvements
- Fixed header bar with gradient background and blur effect
- Icons for each section (Home, About, Projects, etc.)
- Hover animations
- Active section highlighting with animation
- Clear separation between main navigation and external links
User Experience
- Smooth scrolling between sections
- Active section tracking while scrolling
- Better mobile responsiveness with vertical stacking
- Improved accessibility with focus and hover states
Technical Features
- Glass-morphism style with backdrop blur
- Dynamic background opacity on scroll
- Proper scroll offset handling for fixed navigation
- Enhanced CSS transitions and transforms
The result? A modern, professional, and responsive navigation that feels alive, stays visible as you scroll, and clearly indicates your current section.
Key Takeaways
This upgrade experience with Kiro taught me several important lessons:
- Kiro accelerates development — it makes quick design and UI improvements easier without heavy manual coding.
- Local previewing through Kiro allows safe experimentation before deployment to AWS.
- Generative AI guidance helps refine color schemes, layout, and responsiveness interactively, making design iterations faster and more precise.
- Kiro’s feedback loop keeps you in control, summarizing updates clearly and ensuring transparency throughout the process.
Beyond these points, I realized how AI-assisted development can enhance creativity rather than replace it. By handling repetitive or technical tasks, Kiro lets you focus on design, user experience, and experimentation, bridging the best of automation and human creativity. I combined it with AWS Services to create a finished product!
Conclusion
In this article, I demonstrated how Kiro can accelerate development, save time and allow you to focus on end goal as oppose to spending hours adjusting layouts, colors, and animations manually, Kiro helped me prototype, iterate, and visualize changes instantly.
The real magic was in the feedback loop. Kiro not only implemented updates but also explained what was changed and why, almost like a coding partner guiding each improvement.
Upgrading my portfolio website turned out to be more than just a design refresh. It became a practical demonstration of how Kiro and Generative AI can accelerate front-end development while keeping creativity at the center.
Whether you’re upgrading a static site, fine-tuning navigation, or experimenting with interactive elements, Kiro’s blend of AI-assisted coding and automation makes it easier than ever to transform ideas into working result fast, accurate, and visually stunning.
Generative AI isn’t replacing creativity, it’s enhancing it And with Kiro, even small weekend projects like a portfolio update can feel like working with a full design and development team by your side.
Generative AI is transforming the way code is built, and tools like Kiro make the process even easier. While debugging can become more challenging as more code is generated with GenAI, Kiro’s features such as spec-driven development and design documentation generation can help address these challenges.
I believe this is just the beginning, and these tools will continue to evolve rapidly!
Thanks for reading, and I hope you found this insightful.
Watch the video here:
𝒢𝒾𝓇𝒾𝓈𝒽 ℬ𝒽𝒶𝓉𝒾𝒶
𝘈𝘞𝘚 𝘊𝘦𝘳𝘵𝘪𝘧𝘪𝘦𝘥 𝘚𝘰𝘭𝘶𝘵𝘪𝘰𝘯 𝘈𝘳𝘤𝘩𝘪𝘵𝘦𝘤𝘵
𝘈𝘞𝘚 𝘊𝘦𝘳𝘵𝘪𝘧𝘪𝘦𝘥 𝘋𝘦𝘷𝘦𝘭𝘰𝘱𝘦𝘳 𝘈𝘴𝘴𝘰𝘤𝘪𝘢𝘵𝘦
𝘈𝘞𝘚 𝘊𝘦𝘳𝘵𝘪𝘧𝘪𝘦𝘥 𝘎𝘦𝘯𝘈𝘐 𝘗𝘳𝘢𝘤𝘵𝘪𝘵𝘪𝘰𝘯𝘦𝘳
Top comments (0)