Front-end Development Project

Front-end Development Project
Overview

A wellness‑focused journaling interface designed to help users reflect. The goal was to create a space where users can write and track focus time.

HTML5 CSS3 JavaScript Responsive
See it in action View Live Project →

Tech Stack

HTML5 Semantic structure & accessibility
CSS3 Layout, animations & responsive design
JavaScript Interactivity & dynamic content
Responsive Design Desktop & mobile usability

Key Features

Journal Prompt Generator

Presents prompts that help users think clearly and explore emotions.

Pomodoro Timer

Helps users focus deeply and manage time effectively.

Music Controls

Ambient music playback for concentration and relaxation.

Responsive UI

Smooth usability across all screen sizes.

Motivational Elements

"Quote of the Day" to inspire users during their journaling.

Development Process

Click each step to expand.

1

Planning & Ideation

  • Defined the purpose and scope of the app
  • Sketched wireframes to plan layout and functionality
2

Building the UI Structure

  • Used semantic HTML for accessibility
  • Created reusable components for timer, prompts, and music
3

Styling & Responsive Design

  • Built a flexible layout with CSS and media queries
  • Styled elements to match a calm, minimal aesthetic
4

Adding JavaScript Functionality

  • Pomodoro countdown logic
  • Prompt generation system
  • Music playback controls
5

Testing & Iteration

  • Tested across device viewports
  • Fixed bugs in timer logic and UI scaling
6

Deployment

Deployed the project live to my personal domain.

Highlights

Seamless Experience

Reflectly blends productivity tools and emotional wellness features into one cohesive interface.

UI/UX Focus

Attention to layout hierarchy and calming aesthetics shows design sensibility alongside coding ability.

Real Interactivity

Timer, prompt generator, and music controls all work without page reloads — demonstrating dynamic JavaScript logic.

Results & Impact

Skill Development

Strengthened understanding of JavaScript control flow and DOM manipulation. Built an SPA‑like experience without heavy frameworks.

DOM Manipulation Control Flow Vanilla JS

Engagement Potential

Combining productivity and reflection tools encourages repeat visits — a key UX metric that goes beyond typical portfolio sites.

Retention UX Metrics Wellness