“Sea Blue Aid”

“Turning empathy into action for survivors’ support.”

Comment

Inspiration

Acid attack survivors often face medical emergencies, social rejection, and financial struggles. This project was inspired by the need to build a digital safe space that raises awareness, shares survivor stories, and connects people with the right help. As a first-time hackathon participant, I dedicated 8–10 hours daily over several days to bring this vision to life, managing all coding, design, and deployment solo.

What I Learned

During this project, I gained experience in:

Building interactive live statistics counters using JavaScript

Structuring code with separate CSS and JS files for clarity and maintainability

Designing with empathy, balancing aesthetics with accessibility

Managing forms and subscriptions without backend support

This project taught me problem-solving, iterative testing, and workflow management, especially as a beginner working independently.

How I Built It

Frontend: HTML5 for structure, CSS3 for styling, JavaScript for interactivity

Features: Live animated counters, subscription/contact form, responsive layout

Design choices: Calming colors, clean typography, sections for first aid, emotional support, and resources

I created all visuals in Canva and developed everything in VS Code, putting in long, focused hours daily to ensure the website was polished, functional, and user-friendly.

Challenges & Solutions

Live statistics: Ensuring counters update continuously — solved with JavaScript logic and testing

Responsive layout: Ensuring professional appearance on all devices — addressed with media queries and flexible design

Performance: Keeping the site lightweight while adding animations — optimized images, CSS, and JS

Working solo as a beginner in a hackathon made these challenges tougher, but breaking tasks into steps, testing thoroughly, and iterating based on feedback allowed me to complete a fully functional, impactful project.

Built With

Share this project:

Updates