I have been working on Madhurima Mindscape, my personal blogging platform, and I am excited to share a major development update!

🌐 Live Website:

What started as a simple space to share personal reflections, technical learnings, project experiences, poetry, and photography has gradually grown into something much more interactive.

As the project evolved, I wanted to focus not just on publishing articles, but also on making it easier for readers to discover content, explore different sections, save articles, and interact with what they read.

This update brings together several new features, interface improvements, architectural changes, and detailed technical documentation.

🎨 A More Interactive Website Experience

I have worked on making the overall interface more engaging while keeping the experience consistent across different screen sizes.

• Multiple Dynamic Themes: Different visual themes with theme-aware styling across website components.
• Interactive Icon-Based Hero Section: An icon-driven article discovery section with an interactive slider/carousel.
• Responsive Design: Layouts that adapt to desktops, tablets, and mobile devices.
• Custom 404 Page: A dedicated error page with easy navigation back to the website.

📚 Exploring and Managing Blog Content

I wanted to make content discovery and management more convenient, so I added a few dedicated sections.

• Explore the Blog: Browse published articles through preview images, titles, descriptions, and categories.
• Saved Articles: Bookmark articles using browser LocalStorage. Saved articles remain available across browser sessions.
• Blog Insights Dashboard: Explore published content through categories, tags, and structured article metadata.
• Blog Template Library: A separate collection of reusable content templates, maintained independently from published articles.

🔊 Making the Reading Experience Interactive

One feature I particularly enjoyed working on was the read-aloud functionality.

Using the browser Web Speech API, blog posts can be read aloud without depending on an external speech service.

It includes:

• Speech synthesis for reading article content.
• Word highlighting during playback.
• Automatic scrolling to follow the currently spoken content.
• Pause and resume controls.
• A 20-second grace period after manual scrolling before automatic scrolling resumes.
• Estimated reading time for individual articles.

The idea was to make reading more accessible and give visitors another way to enjoy the content.

💬 Article Actions: Save, Comment and Share

Individual blog posts also have reusable interaction components.

• Bookmarking: Save and remove articles using LocalStorage.
• Comments: Interactive forms with predefined comment options and custom comment input.
• Email Submission: Submit comments through an email-based workflow.
• Article Sharing: Native sharing through the Web Share API where supported.
• Clipboard Integration: Copy article URLs using the Clipboard API.
• Fallback Handling: Alternative sharing options when browser APIs are unavailable.

These features are built using reusable components instead of repeating the same implementation across individual articles.

🏗️ Under the Hood: Jekyll Architecture and Code Organization

Along with the visible improvements, I spent quite a bit of time reorganizing the internal structure of the project.

The platform uses Jekyll, Ruby, Liquid, and YAML, with a modular structure that separates content, structured data, layouts, reusable components, and frontend assets.

Here is a quick look at the directory organization:

This separation makes it easier to work on individual features without unnecessarily affecting other parts of the website.

How Jekyll Generates the Website

The general workflow looks like this:

1. Blog articles are maintained inside _posts/.
2. Related metadata and structured information are stored in _data/.
3. Jekyll processes the content and data using Liquid templates.
4. Layouts and includes define the structure of generated pages.
5. CSS and JavaScript provide styling and client-side interactions.
6. Jekyll generates the final static website inside _site/.
7. The generated website is deployed through GitHub Pages.

I really like how this approach separates content management from presentation and makes the project easier to extend.

🔍 SEO, Metadata and Content Organization

I also worked on making article information more structured and maintainable.

• Individual YAML metadata files associated with blog posts.
• Category and tag organization.
• Permalink-based association between articles and metadata.
• XML sitemap for search engine discovery.
• RSS feed for content updates.
• robots.txt for crawling guidance.
• Dedicated metadata organization within the Jekyll _data/ directory.

Keeping SEO-related information separate from article content makes it easier to manage and update.

📖 Technical Documentation and Development Workflow

Another important part of this update was documenting the project properly.

I have put together technical documentation covering:

• Project introduction and technology stack.
• Features and their functionality.
• Jekyll architecture and directory structure.
• Roles of layouts, includes, and YAML data.
• Website generation workflow.
• Prerequisites and local development setup.
• Dependency installation and running the project locally.
• Step-by-step instructions for adding new blog posts.
• Content discovery updates required when publishing an article.

🛠️ Technology Stack

A quick overview of the technologies and tools used:

• Static Site Generation: Jekyll, Ruby
• Templating: Liquid
• Frontend: HTML5, CSS3, JavaScript
• Structured Data: YAML
• Icons: Font Awesome
• Browser APIs: LocalStorage, Web Share API, Clipboard API, Web Speech API
• Version Control: Git and GitHub
• Hosting: GitHub Pages
• Feeds and Discovery: XML, RSS, Sitemap

🔗 Explore Madhurima Mindscape

Website Themes Preview

Website Screenshot

💻 GitHub Repository:

📚 Technical Documentation: Project Documentation

A Little More About the Journey

This project has been a continuous process of experimenting, restructuring, implementing features, and learning along the way.

One of the biggest reasons I decided to migrate the project to Jekyll was a problem with my previous approach to managing HTML files.

Earlier, whenever I needed a common component such as a header, footer, or another reusable section, I had to manually copy and maintain it across multiple HTML files. As the website grew, this became repetitive and increasingly difficult to manage.

I started exploring Jekyll to understand how layouts, includes, Liquid templates, and reusable components actually work. The more I explored its structure, the more I realized that it could solve exactly the problem I was facing. That was when I decided to give it a try and rebuild the project using Jekyll.

From working with Liquid templates and structured YAML data to implementing browser-native speech synthesis and organizing reusable components, every stage has introduced something new to learn.

I am genuinely happy with how the project is taking shape, especially the combination of interactive features and a more organized codebase.

If you are exploring static site generators, I would definitely recommend checking out Jekyll. Its documentation is a great place to understand how everything fits together.

🔗 Explore the Jekyll Documentation

Building something, figuring out what can be improved, and gradually making it better has been one of the most rewarding parts of this project.

Explore Madhurima Mindscape, I would love to hear what you think!