Bionic Reading + dyslexia friendly features

Inspiration

When our team began brainstorming ideas for the hackathon, one of our groupmates shared their personal struggle with dyslexia—how reading long passages felt overwhelming, how standard fonts made words blur together, and how focusing on text could be exhausting. Hearing their experience made us realize how many others face similar challenges, including people with ADHD who struggle with maintaining focus while reading.

What it does

Inspired by their story, we set out to create tools that would make reading easier, more accessible, and more inclusive. By developing a Bionic Reading extension and a dyslexia-friendly font customization tool, we aimed to help not only our teammate but also countless others who deserve a better reading experience.

How we built it

We utilized HTML CSS and JSON as well as googles extension setting.

Challenges we ran into

Performance Optimization – Processing large amounts of text efficiently without causing lag, especially on content-heavy pages, was a challenge that required optimizing our code. Text Manipulation Complexity – Implementing Bionic Reading required dynamically bolding parts of words while maintaining proper formatting across different websites. Ensuring consistent styling without breaking site layouts was tricky.

Accomplishments that we're proud of

Getting through this first hackathon together especially when we had to learn a lot of HTML and CSS.

What we learned

The Importance of Accessibility – Hearing firsthand how dyslexia affects reading and focus helped us understand the real-world impact of inclusive design, reinforcing the need for technology that serves diverse users. Overcoming challenges like text formatting issues, cross-browser compatibility, and performance optimization taught us how to troubleshoot efficiently and write more adaptable code.