Kiro가 해냈다! : Kiro가 내 포트폴리오 웹사이트를 현대화하도록 도와준 방법!
Source: Dev.to
Hi! I’m Girish, an AWS Community Builder and Cloud Tech Enthusiast with experience delivering customer‑focused, high‑complexity cloud transformation programs.
In a previous article I showed 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 turned to a more personal project: modernizing the navigation of my portfolio website.
Background
A few years ago I built my portfolio using AWS services (S3, CloudFront, ACM, Route 53). The site worked well for hosting, but the navigation felt static, lacked animation, and wasn’t fully responsive. Between large‑scale cloud initiatives and exploring new AWS features, I never found the time to redesign it—until now, with Kiro and generative AI in my toolkit.
Goal
- Make the navigation intuitive, engaging, and mobile‑friendly.
- Test how far AI‑assisted coding can go in enhancing a static site’s front‑end.
- Enable local previewing, design iteration, and rapid feedback.
Process
Running the Site Locally
I asked Kiro:
Prompt: “Can I run my portfolio site in Kiro before hosting it on AWS, so I can make and preview changes locally?”
Kiro set up a local development environment, allowing me to view and modify the site in real time.
Updating the Navigation
Next I requested design options and mobile‑responsiveness checks:
Prompt: “I would like to update
profile.htmlto include navigation for Home, About Me, etc.”
Kiro generated several navigation layouts, each with responsive breakpoints for iPhone, iPad, and desktop.
Color and Icon Tweaks
Prompt: “Can you keep the orange color for the icons but change the blue to better match the page background?”
Kiro adjusted the palette, preserving brand‑consistent orange while harmonizing the blues with the background.
Adding My AWS Community Builder Badge
Prompt: “Add my AWS Community Builder image.”
Kiro placed the badge prominently in the header.
Before & After
Old Navigation
The original navigation was functional but static, with minimal visual cues and limited interactivity. It lacked smooth scrolling and responsive behavior.
New Navigation
The refreshed navigation is:
- Modern and interactive with smooth animations.
- Visually engaging, featuring clear section highlighting.
- Fully responsive, stacking vertically on mobile devices.
Visual Improvements
- Fixed header bar with gradient background and blur effect.
- Icons for each section (Home, About, Projects, etc.).
- Hover animations and active‑section highlighting.
- Clear separation between main navigation and external links.
User Experience Enhancements
- Smooth scrolling between sections.
- Active‑section tracking while scrolling.
- Improved mobile responsiveness with vertical stacking.
- Better accessibility via 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.
Lessons Learned
- Accelerated development: Kiro makes quick UI improvements possible without heavy manual coding.
- Safe experimentation: Local previewing lets you test changes before deploying to AWS.
- Interactive design iteration: Generative AI refines color schemes, layout, and responsiveness in real time.
- Transparent feedback: Kiro summarizes each change, explaining what was modified and why, keeping you in control.
These insights reinforced that AI‑assisted development enhances creativity rather than replacing it. By handling repetitive tasks, Kiro frees you to focus on design, user experience, and experimentation.
Conclusion
Updating my portfolio turned into a practical demonstration of how Kiro and generative AI can accelerate front‑end development while keeping creativity at the center. Whether you’re revamping a static site, fine‑tuning navigation, or adding interactive elements, Kiro’s blend of AI‑assisted coding and automation makes it easier than ever to transform ideas into working, visually stunning results.
Generative AI isn’t replacing creativity—it’s enhancing it. Tools like Kiro enable even small weekend projects to feel like collaborations with a full design and development team.
Watch the video here: (link not provided)