All projects

Focus Ring

A beautifully minimal pomodoro timer for deep work

JavaScriptHTMLCSSGitHub ActionsGitHub Pages
GitHubLive Demo
Focus Ring main screenshot

The Problem

Most pomodoro apps bury a simple timer under accounts, subscriptions, and cluttered UI — all you want is to start a focus session in one click.

The Solution

Focus Ring is a zero-dependency pomodoro timer with an animated progress ring, focus/short-break/long-break modes, and a calm ambient design — it loads instantly and stays out of your way.

Key Features

  • Animated SVG progress ring synced to the countdown
  • Focus, short break, and long break modes with auto-cycling
  • Configurable session lengths via a settings panel
  • Ambient gradient design with zero framework overhead
  • Deployed automatically to GitHub Pages on every push

How to Use

  1. 1.Open the live link — no install, no sign-up, it works instantly in any browser
  2. 2.Pick a mode: Focus (25 min), Short Break, or Long Break
  3. 3.Press Start and work until the ring completes — use the side buttons to reset or skip
  4. 4.Adjust session lengths anytime from the settings (gear) icon
  5. 5.Watch your Today, Day Streak, and All-Time counters grow as you finish sessions

Where to Use It

  • Deep work sprints when coding, writing, or designing
  • Students studying for exams with structured break cycles
  • Remote workers who want a visual timer on a second screen
  • Anyone using the Pomodoro technique without wanting another account or app install

Architecture

Vanilla JavaScript, HTML, and CSS with no build step — a deliberate exercise in restraint. A GitHub Actions workflow deploys the static app to GitHub Pages on every push to main.

Results

Live and free to use — instant load with a perfect Lighthouse performance score, and a daily driver for my own focus sessions.

Timeline

Weekend build, refined over iterations

Lessons Learned

  • · No-framework builds sharpen fundamentals — state management and DOM updates by hand make you appreciate what frameworks solve.
  • · Small finished projects beat large unfinished ones for demonstrating craft.

Future Improvements

  • · Session stats and streaks stored locally
  • · Optional ambient soundscapes

Next project

Elegance Events