Inkflow is a self-contained creative writing and blogging web app designed for writers who want a clean, distraction-free space to draft and publish stories. The platform features an elegant landing page with a searchable, sortable feed of stories, a focused writing editor with inline image support and live word/read-time tracking, and a dedicated reading view with a progress indicator. Built entirely with HTML, CSS, and vanilla JavaScript, Inkflow stores every story directly in the browser via localStorage — no backend or database required. The project demonstrates strong attention to UI polish, including animated page transitions, a custom particle background, a mobile-friendly navigation drawer, and full light/dark theme support.
- Design an inviting, story-first home page with search and sorting
- Build a distraction-free editor with inline image embedding
- Track word count and estimated reading time in real time
- Implement a dedicated story view with a reading progress bar
- Persist all content locally with full create, edit, and delete support
A lightweight, fully client-side stack was used to keep the platform fast, portable, and easy to deploy anywhere:
- Component-based UI architecture with shared styles across pages
- State management and data persistence using localStorage
- Responsive, mobile-first layout design
- Interactive UI details: theming, animations, and transitions
- Form handling, image uploads, and inline content rendering
📁 inkflow/
├── 📄 index.html
└── 📂 files/
├── 📄 home.html / home.css / home.js
├── 📄 editor.html / editor.css / editor.js
├── 📄 blog.html / blog.css / blog.js
└── 📂 screenshot/
A visual walkthrough of the platform — from the story feed and hero landing to the writing editor experience.
The final platform delivers a fully working publishing loop entirely in the browser: writers can compose a story with a custom cover image, see live word counts and estimated read times, publish it to the home feed, and revisit, edit, or delete it later. The home page's search and sort controls make it easy to surface specific stories as the collection grows, while the reading view's progress bar and clean typography keep the focus on the writing itself. Because everything is stored in localStorage, the site requires zero backend setup and runs entirely as static files.
Inkflow demonstrates how a thoughtfully designed, dependency-light front end can deliver a polished, app-like experience without a server. By combining a refined visual identity — serif display type, warm gold accents, and smooth motion — with practical features like search, sorting, theming, and an inline image editor, the project shows a complete grasp of front-end fundamentals applied to a real product concept. It serves as both a usable creative-writing tool and a showcase of clean, maintainable HTML, CSS, and JavaScript architecture.