FocusZen

Inspiration

We wanted to create a simple, clean, and calming productivity dashboard that helps us stay focused throughout the day — without distractions, apps, or sign-ins. Something you can open in a new tab and immediately feel organized.

What it does

FocusZen is a minimalistic static HTML + CSS website that includes:

• ✅ A daily goals checklist
  
• 🕐 A Pomodoro-style timer UI (non-functional, just for visual aid)
  
• 📅 A weekly planner layout
  
• 🌟 A motivational quote of the day section
  

It's meant to be a personal homepage for productivity — like a digital focus board.

How we built it

We used the Kiro AI IDE to:

• Structure the HTML layout with semantic tags
• Generate and refine CSS for a clean, centered, responsive design
• Style the sections using basic utilities and color palettes
• Add simple interactivity using checkboxes — no JavaScript required

We kept everything lightweight and static, so it's easy to load and host anywhere.

Challenges we ran into

• Keeping the design minimal while still visually engaging
• Getting alignment and spacing right across all sections
• Deciding how much to include while keeping it simple enough for a quick build

Accomplishments that we're proud of

• Fully static and deployable in under 100 lines of code
• Clean and responsive design that works on both desktop and mobile
• Finished and submitted the app fast to qualify among the first entries!

What we learned

• How to rapidly scaffold static sites using Kiro’s conversational flow
• The power of simplicity — not every hackathon needs a complex backend
• How useful and productive Kiro can be even for small frontend-only projects

What's next for FocusZen

• Add JavaScript-based timer functionality
• Let users save their to-dos using local storage
• Pull live quotes from an API for more inspiration
• Offer customization (themes, fonts, layout toggles)

Made with 💻 by Ashwin Kirubakaran using Kiro.

Built With

• css3
• html5