FocusFlow — Adaptive Productivity Dashboard (GitHub Pages)

A lightweight, state-driven productivity dashboard where the UI adapts to user actions (modes, widget toggles, layout density, theme), with persisted preferences via localStorage.

Features

• Modes: Study / Deep Work / Chill (mode presets adapt accent, density, widget defaults, and recommendations)
• Widgets: Pomodoro, Notes, Today’s Goals, Quick Links
• Dynamic UI: conditional rendering, mode-based widget ordering, micro-interactions
• Persistence: all preferences and content stored in localStorage (focusflow:v1)
• Responsive: works well on desktop and mobile widths
• Zero backend: static HTML/CSS/JS (perfect for GitHub Pages)

Tech

• HTML + CSS + vanilla JavaScript
• Single source of truth state + render() approach

Run locally

Just open index.html in your browser, or serve it:

# from the project folder
python -m http.server 5173
# then open http://localhost:5173

Deploy to GitHub Pages (quick)

1. Create a new GitHub repo (e.g., focusflow).
2. Upload these files to the repo root:
   • index.html
   • styles.css
   • app.js
3. Go to Settings → Pages
   • Source: Deploy from a branch
   • Branch: main / (root)
4. Save. Your site will be available at the provided Pages URL.

Resume-ready description (pasteable)

Built FocusFlow, a state-driven adaptive productivity dashboard (vanilla JS) with mode presets, conditional widgets, and persisted user preferences via localStorage, featuring responsive layout and dynamic UI transitions suitable for deployment on GitHub Pages.

Notes

• Data persists per browser/device. Use “Reset to defaults” to clear back to defaults.